没忍住终究还是对博客园下手了
写在前面
前面的文章中提到过,自己开始在博客园上更新文章。
说也奇怪,自己博客园账号注册了好久,都没在上面更新过博客。
直到前段时间博客园的求助信息火了,才对博客园有了全新的认知。
博客园一个最大的特点就是简洁、干净,广告少。
但也有一个个人认为很不好的地方就是界面太丑,容易劝退新人。
直到前段时间无意间发现,原来博客园的主页是可以自己定制的(可以通过js、css美化界面)。
于是乎,好像打开了新世界大门,决定对它下手了。
一、最终效果
给大家看下修改前和修改后的对比效果
① 修改前
② 修改后
二、主要修改内容
2.1 赞助功能
效果如下图所示,支持支付宝和微信打赏
2.2 置顶功能
效果如下图所示,当内容拖动到下方时,隐藏的小火箭便现身了。点击小火箭可以快速指定
2.3 优化了文章的推荐、反对按钮
如下图所示,左边为优化前,右边为优化后。主要是调整了显示位置和加了方框。
本来通过css可以把反对隐藏掉的,后面想想还是算了。毕竟言论自由,有推荐自然有反对,自己又不是人民币,可以让每个人都喜欢。
2.4 隐藏了文章末尾推荐、排行模块
内容多了看起博客来容易头晕,不专注。所以把下图中红丝框框模块隐藏了
2.5 增加了底部小鱼
在原来空空如也的文章底部增加了跳跃的小鱼
2.5 音乐播放器
如下图所示,在左侧边栏增加了音乐播放器
2.6 看板娘
原本已经在左下角添加了如下图所示的一个可爱看板娘,但是由于看板娘要加载额外资源文件,影响博客加载速度,最终还是注释掉了
2.7 博主其他账号信息
如下图所示,侧边栏增加了博主其他账号快捷链接,可以在这儿关注博主其他账号
2.8 公众号信息及个人箴言
如下图所示,在侧边栏增加了博主公众号二维码显示,博友们可以快速关注
2.9 增加了头图
如下图所示,上方为未加头图的,下方为加了头图之后的。是不是好看很多了呢
2.10 评论区显示
修改了评论区显示功能,如下图所示。本来是要仿照微信聊天的,可惜我太菜,照葫芦画瓢还没画好 (;´д`)ゞ
修改前大概样子
修改后大概样子
2.11 调整了字体
个人比较喜欢思源字体,所以将博客整体字体都调整成了这个
三、参考博客
当然了以上这些修改都不是自己想出来的,而是参照了几篇博客修改的。
由于自己前端比较菜,没有整体的大换血,只是做了小调整
下面列举下,自己参照的博客园美化教程。如果大家感兴趣可以参考一下
① 【麋鹿鲁哟】 博主 首页: https://www.cnblogs.com/miluluyo/p/setites.html
②【大白技术控】博主 主页:https://www.cnblogs.com/enjoy233/
四小结
本期文章主要记录了自己博客园美化的经过,花了一天时间,学到了很多。
还是那句话,你知道的越多,你不知道的越多。
也欢迎大家关注博客:https://www.cnblogs.com/xiezhr/
本期内容到此就结束了,希望对你有所帮助,我们下期再见 (●'◡'●)