Hexo+Butterfly博客搭建记录（2）

外挂标签

配置与使用

配置方法参考博客：
- Fomalhaut - 外挂标签的引入（店长）
使用方法参考博客：
- Fomalhaut - Markdown语法与外挂标签写法汇总
- HappyKing - hexo插件-标签外挂使用手册

样式修改

默认的链接样式颜色不太显眼，微调一下以适应整体风格。

[data-theme="light"] #article-container a.link-card {
  background: rgba(0,150,255,0.3);
  border: 1px solid rgba(0,150,255,0.5);
}

[data-theme="light"] #article-container a.link-card:hover {
  background-color: rgba(0, 150, 255, 0.5);
  box-shadow: 0 2px 8px 0 rgba(0, 150, 255, 0.5);
}

一些问题：
某些情况下，会发生有序列表序号不匹配的问题。
解决方法：
对错误序号之前的内容，每一行前添加一个空格。
参考链接：aworker - hexo下markdown语法有序列表序号不匹配

网站页脚

第一版
第一版只加了徽标，和ICP备案，用的是店长的hexo-butterfly-footer-beautify插件。
参考教程：

页脚Github徽标（店长）
https://www.fomal.cc/posts/eec9786.html
From —— Fomalhaut
引自外站地址，不确保可用性和安全性
第二版
第二版是搬的Fomalhaut的同款页脚。
参考教程：

本站同款页脚(tzy大佬+微调)
https://www.fomal.cc/posts/d739261b.html
From —— Fomalhaut
引自外站地址，不确保可用性和安全性
所用工具
徽标生成方法
参考教程：

Add Github Badge
https://akilar.top/posts/e87ad7f8/
From —— Akilar店长
引自外站地址，不确保可用性和安全性

网站徽章shields制作教程
https://blog.csdn.net/qq_45173404/article/details/123728687
From —— CSDN@Baret-H
引自外站地址，不确保可用性和安全性

对于一些simpleicons上查不到的徽标，可以转成base64图片，格式如下。

1	https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=data:image/png;base64,url

文章加密

插件：hexo-blog-encrypt
教程：Fomalhaut - 文章加密插件
样式预览
- default
- blink
- shrink
- flip
- up
- surge
- wave
- xray

导航栏

友链中有很多大佬的导航栏都很好看，个人比较喜欢简约风格的，所以选择了目前这款导航栏样式，而且这种样式的导航栏用的人还蛮多，看来大家都很喜欢这种类型。我看的教程是安知鱼大佬的（目前也只找到了他的）：
butterfly导航栏修改方案(自用方案)
https://anzhiy.cn/posts/8e53.html
From —— 安知鱼
引自外站地址，不确保可用性和安全性
微调
- 中间部分会显示文章标题，当鼠标移到标题上时，会显示一个巨大的“回到顶部 ”按钮，不太美观，就把它的样式隐藏了，只保留其功能部分。
- 右侧添加控制中心
- 左侧添加和风天气插件（窄屏隐藏不显示）
- 左右两侧在窄屏下会贴边，有点别扭，于是加了一点padding间隔。
- 默认页面下滑会自动隐藏导航栏，上滑显示导航栏，这里改为导航栏常驻，不隐藏。
- 其他color、border、shadow、radius、blur适应性微调。