博客园样式美化 II

前言

感谢大家对之前 博客园样式美化 的认可,我终于更新啦啦啦啦

更新内容

01 | 优化首页显示效果

优化前:

优化后:

有没有感觉瞬间立体起来了呢~

02 | 增加管理入口

这个很简单,就是导航条上加了个管理的入口

原本想设置为只有博主本人打开页面才能看到,后面发现只能判定有没有登录,不知道是不是博主本人,遂弃之~

03 | 可配置

这个大概是最重要的更新了吧...

将散落在各处的零散的和个人相关的链接,集中在一起,能自动获取的获取(如博主名称),不能自动获取的在页尾的js配置,达到开箱即用(其实还是要配下,不完全算...)~

这是目前开放的可配置项:

<script type="text/javascript">
    //博主名称 可不改,默认取博客园提供的
    var nickName =null;
    //slogan
    var slogan = '立德立言,无闻西东';
    //icon
    var icon = "https://ae01.alicdn.com/kf/H445e0280b88f4f34a848238a848a687fw.png";
    //默认博客背景图片
    var defaultPic="https://img2018.cnblogs.com/blog/1138447/201904/1138447-20190426121949417-1115592219.jpg";
    //icon(浏览器标题栏上的)
    var iconB="https://img2018.cnblogs.com/blog/1138447/201909/1138447-20190911161817172-1737762696.png";
    //友情链接地址
    var friendLink="https://www.cnblogs.com/summertime-wu/p/9350833.html";
    //关于地址
    var aboutMe="https://www.cnblogs.com/summertime-wu/p/9350808.html";
</script>

04 | 解决该主题下斜体问题

这个也很简单,修改对应的元素的 font-style 就好了

不过有人在 github 提出无序列表的问题,我试了下是正常的..

05 | 增加点击图片放大功能

这里是使用了 https://www.cnblogs.com/zhanxiaoyun/p/8259451.html 给出的实现

这位博主给出的代码似乎有点问题,自己魔改了一下

通过 JS 增强 Markdown 语法

失败,没有找到现成的轮子..自己写太过复杂,hold不住,,

06 | 优化评论区

如图,感觉还有很多优化的空间

刚好截了这个评论... 这个不是我设计的,这是对pinghsu(一款Typecho主题)的模仿

07 | 扩大主体宽度

这里感觉太大或者太小都不太好看,先扩个10%先

预告

更新很慢,但是会有的~

哈哈

代码已更新在同步Github上: https://github.com/Summertime-Wu/make_cnblogs_better

原文地址:https://www.cnblogs.com/summertime-wu/p/12078136.html

时间: 2024-11-05 16:02:32

博客园样式美化 II的相关文章

博客园侧边栏美化及插件

博客园侧边栏美化及插件 1.vp计数 http://www.amazingcounters.com 2.来源地图 http://clustrmaps.com 原文地址:https://www.cnblogs.com/niuli1987/p/10306530.html

测试博客园样式

测试博客园样式 博客园是面向开发者的知识分享社区,不允许发布任何推广.广告.政治方面的内容.博客园首页(即网站首页)只能发布原创的.高质量的.能让读者从中学到东西的内容. 测试博客园样式 博客园是面向开发者的知识分享社区,不允许发布任何推广.广告.政治方面的内容. 博客园首页(即网站首页)只能发布原创的.高质量的.能让读者从中学到东西的内容. 测试博客园样式 博客园是面向开发者的知识分享社区,不允许发布任何推广.广告.政治方面的内容. 博客园首页(即网站首页)只能发布原创的.高质量的.能让读者从

博客园样式目录加代码美化

页面定制 CSS 代码 使用博客园自带的SimpleMemory主题 h1,h2,h3,h4,h5,h6 {font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;} h1 {font-size: 1.8em;} h2 {font-size: 1.5em;} h3 {font-size: 1.3em;} #header h2 { font-w

自定义博客园样式

相必每个在博客园开通博客的人都抱怨博客园的皮肤丑得要死,尤其是我这种类处女座的孩子根本把持不住所以我遍鼓敲着美化(老板,我有1WQB,给我美美脸~~) 其实发现博客园里面有个自定义CSS样式,你可以加样式思路就是你选定一个预选皮肤,博客园会给你固定的html结构然后你根据结构来自己添加css,尤其在现在CSS3的年代,你可以把你的博客变得妈都不认得fighting! 1,预选皮肤选择LessIsMore(大多数人用这个皮肤来做自定义)2,然后在页面定制里加入如下代码(only示例,最美的还是你自

博客园细节美化,打磨

原作者 感谢 @Summertime-Wu 巨佬写出这样漂亮简洁的主题,本蒟蒻是在原主题的基础上改的. 原主题地址:https://www.cnblogs.com/summertime-wu/p/9356736.html. 我的优化 添加 fork me on github 角标,节省菜单空间 在页首代码中添加了以下内容: <div class="forkme"> <a href="https://github.com/ethan-enhe">

博客园样式(收藏)

http://www.cnblogs.com/asxinyu/tag/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%A0%B7%E5%BC%8F/ 为博客园添加目录的配置总结 JavaScript自动生成博文目录导航 共享一下我的博客皮肤 博客园页面设置 博客园里设置个性标题 通过自定义样式优化博客界面

博客园界面美化

0x00. 写在前面 皮肤作者:@SevenNight 皮肤作者博客:SevenNight 修改人:@Ryanjie 修改人:Ryanjie 前几天无意之中看到了一款特别好看(每个人的眼光都不一样)的博客皮肤"verdant",皮肤的作者是@SevenNight.当时感觉这款皮肤很简洁却又不失本色,于是立刻更换了这款皮肤.但是在使用过程中碰到了一些问题.由于之前基本没有学过前端,只好自己动手慢慢钻研.最终,之前一些不能实现的或者是自己想要实现的,都满足了. 在这之前还是先感谢@Seve

博客园样式自定义(待更新)

总感觉这件事情做的晚了哈哈. 以前写博客总是一个人默默地写,现在竟然出现了两个吐槽我挖坑不填的哈哈.(非常感谢~) 大概是终于有个人能够督促自己学习了,你们怎么不早点来?!!! 废话不多说,怎么定义博客园的代码呢. 步骤一,屏蔽掉博客园的皮肤样式 => 百度一下,你就知道 => 其实就是编辑里面 打个勾? 步骤二,如果你要修改JS => 在编辑的地方申请一下 => 一般都会马上批准的. 步骤三, 开工了. 当前要改进的还有很多,比如我觉得 编辑这东西就该放在右上角. 1.编辑栏要放

「奇技淫巧」博客园页面美化(差不多是划水

何为页面美化?永远没有止境的乱搞也.    ——hzz 教材: 博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了) - 洪卫 - 博客园 原文地址:https://www.cnblogs.com/qwerta/p/9748410.html