本文主要记录一下博客美化的过程
在github上主要有两个博客园美化的项目
第一种
作者博客地址https://www.cnblogs.com/bndong/
项目地址https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
部署文档https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/
个人感受
优点：
- 酷炫，动画多，完全看不出是博客园
- 菜单栏不错，目录也好看
- 部署文档详细，简单好上手，也有很多可以根据自己意愿开启或者关闭的功能
- 有很多小功能小细节很有意思
缺点：
- 行间距之间，以及与图片之间，间距小。阅读还是有些别扭
- 因为酷炫，所以用到了很多js，所以用到很多托管在码云上的外链，有时候加载速度较慢，有一次甚至加载不出来
- 在手机端还是不太好看
效果
首页
菜单栏
顶部
底部
补充
关于部署文档中的流量统计，需要到友盟https://workbench.umeng.com注册账号，之后添加站点
其中这个就是你的id，之后看部署文档即可
第二种
作者博客地址https://www.cnblogs.com/esofar/
项目地址https://github.com/esofar/cnblogs-theme-silence
部署文档https://github.com/esofar/cnblogs-theme-silence/blob/master/docs/deploy.md
个人感受
优点：
- 确实便于阅读，简洁，而且加载也快
- 部署也很简单，还可以自己添加一些小功能
缺点：
- 作者的原始字体配置的不太好，有些发虚
- 部署文档没有第一种详细
- 手机端也有一些问题
一些美化的tips
其实网上的美化教程很多，有很多有意思的小功能很有意思，大多数是代码直接复制粘贴即可。应用上述模板也可以自己进行修改，或增加一些东西
一
补充一些小技巧，如果应用模板，看到哪个地方不满意，可以F12查看源码，点击如下所示的小按钮，选中想改的位置，就可以查看，修改对应的css代码，调试好后，再到博客设置里的css代码找到相应的位置修改即可，不过要有一点css的基础
例如，我想该如上选中处的字体，选中后，发现font-size为16px，可以先在这修改不同大小
找到满意的大小之后，到源代码处，ctrl+f，查找上图中.对应的entrylistPostSummary，找到后修改即可
二
博客园的美化很多问题其实有人提过了，并得到了解决，一些问题在这里搜索挺有用
https://group.cnblogs.com/ideas/
三
一些引用的外部代码可以先保存下来，再上传到这里
一来防止别人把代码改动了，可能影响自己。二来提高响应速度
上传文件后，点击该文件，浏览器上显示的url就是这个文件的链接，只要把原来的外部链接替换为这个就可以了
四
修改网页上的titledocument.title='定义的字符串'
进而实现动态显示
<script>
document.addEventListener('visibilitychange', function (){
if (document.visibilityState == 'hidden') {
normal_title=document.title;
document.title = '改变为……';
} else {
document.title=normal_title;
}
});
</script>
写博客的工具
自己先后尝试了很多工具
- 直接在博客园上写，体验不好
- 使用Open Live Writer，体验也不好
- 小书匠，有网页版和客户端版，体验还不错，可以直接在这个上面发布博客
- 想学吗，和小书匠相似
- 在有道云笔记上写完复制上去。图片不好办。
- typroa，也感觉不适合
- 用vs code中一个插件WriteCnblog，还可以，现在正在用这个，虽然也有一些bug。作者的博客和使用说明https://www.cnblogs.com/caipeiyu/p/11774968.html