关于我的博客的美化

这次对博客的魔改我本着“流畅、功能、美观”三点。
所以就没有加太多特效了，更多的还是偏向“功能”。

减少对主题源代码的修改

为了方便后续升级主题，在博客根目录的 source 文件夹内建一个 custom.css 文件，你可以通过下面的链接查看该博客的 custom.css 文件。

当前的 css

https://cdn.jsdelivr.net/gh/JonnyJong/blogStaticResource@main/css/custom.css

4.0.0 之前的 css

https://cdn.jsdelivr.net/gh/JonnyJong/blogStaticResource@main/css/v3_custom.css

H1~H6标题优化

默认的 H1 ~ H6 标题并不易读，加大各级标题大小差距的效果也不会很好；至于用不同的颜色来区分，对于我来说我会觉得不好看，因此直接将标题前的图标替换成 H1 ~ H6 更为直观。
网上找了很久没有直观的教程（对于我这种小白来说），最后还是去扒了别人的 css 来看才知道的。
具体的操作直接看上面我的 custom.css。

2022.01.15 更新：简化了 css，具体查看上方当前的 css。

背景美化

看了小康博客的背景，也想着把背景给换了，为了有更好的效果，把 post 和 aside 的背景调成了白色 80% 透明度，网页背景选用了比较纯的使得阅读起来依旧比较轻松。

Hexo 博客之 butterfly 主题优雅更换背景 | 小康博客

但我并没有直接用小康博客的方法，因为直接用没效果。
最后研究了一番，用了伪元素、调整 z-index 等方法处理好了这个问题。现在无论是亮色模式还是暗色模式背景都会有一些渐变。

此时还有一个问题，链接的蓝色在暗色模式下与背景的对比度不足，不易读。
直接在 custom.css 中修改就可以了。

2022.01.15 更新：直接在主题 config 中先配置背景图片，再通过 custom.css 模糊背景。另外，通过直接修改变量 --card-bg，简化了 css。

问题：图片上边框与描述文字

似乎在加入 Tag Plugins Plus 插件之后会导致图片上边框过窄，图片描述文字居左的问题，同样可以在 custom.css 处理此问题。
不过我的处理方式可能有隐患。
对于图片上方边框过窄，再试了几次后找不到好的解决方式，只能在写文章时在图片上方手动加一个换行。

2022.01.15 更新：上边框问题仍需手动增加换行，但已经不再出现图片描述居左的问题，因此无需另加 css。

加载进度条

因为一些原因，要加入进度条，Hexo 官方有提供进度条的插件。

对于 Butterfly 主题，可以在主题 config 文件中添加一个 js 和一个 css，如下。

yml


inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CodeByZach/pace/themes/green/pace-theme-flash.css">
  bottom:
    - <script defer src="https://cdn.jsdelivr.net/gh/CodeByZach/pace/pace.min.js"></script>