嘘~ 小破站正在拼命加载中 . . .

没忍住终究还是对博客园下手了


写在前面

前面的文章中提到过,自己开始在博客园上更新文章。

说也奇怪,自己博客园账号注册了好久,都没在上面更新过博客。

直到前段时间博客园的求助信息火了,才对博客园有了全新的认知。

博客园一个最大的特点就是简洁、干净,广告少。

但也有一个个人认为很不好的地方就是界面太丑,容易劝退新人。

直到前段时间无意间发现,原来博客园的主页是可以自己定制的(可以通过js、css美化界面)。

于是乎,好像打开了新世界大门,决定对它下手了。

一、最终效果

给大家看下修改前和修改后的对比效果

① 修改前

修改前

② 修改后

修改后

二、主要修改内容

2.1 赞助功能

效果如下图所示,支持支付宝和微信打赏

赞善功能

2.2 置顶功能

效果如下图所示,当内容拖动到下方时,隐藏的小火箭便现身了。点击小火箭可以快速指定

小火箭置顶

2.3 优化了文章的推荐、反对按钮

如下图所示,左边为优化前,右边为优化后。主要是调整了显示位置和加了方框。

本来通过css可以把反对隐藏掉的,后面想想还是算了。毕竟言论自由,有推荐自然有反对,自己又不是人民币,可以让每个人都喜欢。

image-20230725214134244

2.4 隐藏了文章末尾推荐、排行模块

内容多了看起博客来容易头晕,不专注。所以把下图中红丝框框模块隐藏了

image-20230725214726988

2.5 增加了底部小鱼

在原来空空如也的文章底部增加了跳跃的小鱼

小鱼

2.5 音乐播放器

如下图所示,在左侧边栏增加了音乐播放器

image-20230725215742177

2.6 看板娘

原本已经在左下角添加了如下图所示的一个可爱看板娘,但是由于看板娘要加载额外资源文件,影响博客加载速度,最终还是注释掉了

看板娘

2.7 博主其他账号信息

如下图所示,侧边栏增加了博主其他账号快捷链接,可以在这儿关注博主其他账号

博主其他信息

2.8 公众号信息及个人箴言

如下图所示,在侧边栏增加了博主公众号二维码显示,博友们可以快速关注

公众号

2.9 增加了头图

如下图所示,上方为未加头图的,下方为加了头图之后的。是不是好看很多了呢

头图

2.10 评论区显示

修改了评论区显示功能,如下图所示。本来是要仿照微信聊天的,可惜我太菜,照葫芦画瓢还没画好 (;´д`)ゞ

修改前大概样子

修改前

修改后大概样子

修改后样子

2.11 调整了字体

个人比较喜欢思源字体,所以将博客整体字体都调整成了这个

三、参考博客

当然了以上这些修改都不是自己想出来的,而是参照了几篇博客修改的。

由于自己前端比较菜,没有整体的大换血,只是做了小调整

下面列举下,自己参照的博客园美化教程。如果大家感兴趣可以参考一下

① 【麋鹿鲁哟】 博主 首页: https://www.cnblogs.com/miluluyo/p/setites.html

image-20230725222949206

②【大白技术控】博主 主页:https://www.cnblogs.com/enjoy233/

image-20230725223319432

四小结

本期文章主要记录了自己博客园美化的经过,花了一天时间,学到了很多。

还是那句话,你知道的越多,你不知道的越多。

也欢迎大家关注博客:https://www.cnblogs.com/xiezhr/

本期内容到此就结束了,希望对你有所帮助,我们下期再见 (●’◡’●)


文章作者: xiezhr
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 xiezhr !
评论
  目录