对博客园美化和定制界面

合集 - IT人必备技能(6)   1.如何使用jsDelivr+Github 实现免费CDN加速?2023-05-092.【云原生】这么火，你不来了解下？2023-05-113.打开windows批处理大门2023-05-13 4.没忍住终究还是对博客园下手了2023-07-26 5.手把手教你使用Vite构建第一个Vue3项目2023-09-056.怎么样零代码零成本搭建个人网站？04-22 收起  

写在前面

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

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

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

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

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

直到前段时间无意间发现，原来博客园的主页是可以自己定制的（可以通过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/

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

2024-04-22 15:46:46【出处】：https://www.cnblogs.com/xiezhr/p/17581484.html

=======================================================================================