# Hexo主题高级自定义

> 作者/来源: UCloud 运营管理员
> 发布时间: 2022-10-08T06:16:00.000Z
> 分类: 解决方案
> 标签: Kubernetes, CDN, 前端
> 原文链接: http://117.50.162.249:3000/yun/articles/2405

---

# Hexo主题高级自定义

> 来源: https://www.ucloud.cn/yun/127935.html
> 作者: 社区管理员
> 发布日期: 发布于2022-10-08 14:16

有一段时间没怎么倒腾博客了，这几天收拾了一下博客，同时将最近阅读和记录的有趣的内容整理一番，分享给大家。主要包括在博客 写作时遇到的一些问题及解决方法，即我是如何构建自己的博客写作工作流的。同时也有一些在博文写作的中一些感悟。

## hexo 及 Butterfly 主题升级

首先，最近升级了 hexo 版本，升级到最新版本`3.1.0`，同时也更新了主题的版本。当然，升级完就出现问题????，定位错误是之前复制 的自定义配置文件`butterfly.yml`缺少一些必要的变量，同时该文件结构也发生了变化，导致没办法渲染成功。暗暗窃喜还好做了 版本管理，直接 merge，但是由于结构改动变化太大，merge过程很不轻松，最终还是手动将之前的配置迁移到新的自定义配置文件, 才解决问题。

这提醒我们`版本管理`并不能解决任何问题，只是当`灾难`降临，提供给我们多一种选择。作为软件的用户，升级前需要做好规划， 特别是很长时间没有更新的情况下。而作为主题开发者，需要提供给用户良好的平滑升级功能，当然有时这需要耗费很大经历。 使用开源项目，有时是需要代价和精力去维护的，而这又体现收费软件的价值所在。

## 图片管理

`Hexo`搭建博客，其中图片的引用和管理是一件令人非常头痛的事。究其根本是`Markdown写作`方式导致的。在不涉及图片时，`markdown` 的轻松写作十分方便，但是当一篇`.md`格式的博文包含了图片引用，情况就不一样了。而博客图片引用分为本地和远程两种方式， 这两种方式都一些不足：

- 引用本地文件：一旦需要导出，要么打包整个目录，所有图片引用相对路径，要么只能借助其他格式(pdf)实现。和word 文档 相比，易用性很差，同时当需要将本地的写作发布到`wiki`上，其发布过程也十分繁琐，这些理应被自动化的体力活动却没有 ，当然会导致`markdown`在使用感受上有很大缺陷。
- 引用远程链接：一般通过图床实现，这种方式在写作之前需要将图片整理并发布到对应存储服务上，写作时通过工具生成 下载链接，这种缺点是插入图片过程很难实现`Copy-And-Paste`，同时博文这个资源需要分为图片和内容两个资源管理，增加了 复杂度。

我的博文写作是通过第二种方式引入图片，这种方式优点是可以减少博客静态资源，同时通过`CDN`可以提高网站访问加速, 配合`vscode paste-image`插件和自己开发的`hexo-image-sync`的工具，能够实现`Copy-And-Paste`流程。但是对于其他工作流， 如工作上`wiki文档`维护,工作日报通过`Markdown`编写等，目前没有探索出很好方案。

在理想的将来，希望能`Markdown写作`够做到博文和图片资源的统一处理。

## Markdown 协议 、渲染引擎和格式化

```
marked:  gfm: true  breaks: false #Enable GFM line breaks. This option requires the gfm option to be true.
```

在使用`Markdown`工具进行写作时，通常强制换行需要通过两个空格实现，但是在通过`Hexo`渲染博文时，是不需要加上两个空格的。 由于无法预知什么需要换行，博文源文件中会出现一段文字一行的情况，这十分影响写作和博客源文件阅读体验。

目前`Markdown`协议还未完全统一，主要有`Markdown`，`GFM`和`CommanMark`三种，这些协议在细节上有所区别。 hexo 其渲染`Markdown`文件是通过了插件hexo-renderer-marked实现， 该插件提供一些配置项，以上关闭自动换行的功能可以在`hexo_config.yml`修改,如下：

这样，我们可以就通过空格控制是否换行。这个问题归根结底是博文`.md`文件的格式化问题，我们不希望在酷炫的UI 下，其博文源文件一团糟， 在通过`vscode`写作时，推荐安装插件`prettier`实现`Markdown`格式文件的格式化， 同时开启`vscode`的自动换行功能，参考下图配置项：

![image.png](https://ucloud-blog.cn-bj.ufileos.com/articles/127935/images/127935_000.png)

配置完，我们写博客就有了通过IDE写代码的感觉。

## 博文代码块

技术类的文章，尤其是源码分析类，博文中需要插入大量的代码块辅助读者阅读，有时会引用一段很长代码，如果大量使用`Markdown Code Block`， 十分影响博文的页面布局，对读者不友好。`Github Gist`功能可以帮助我们更好在博文中引用并展示`Github`代码块。

我们可以从网页创建代码块，同时一些 IDE 开发工具集成`Github Gist`，能够从开发环境中快速创建代码块。 创建完可以拿到对应内嵌 Script 链接`<script src="https://gist.github.com/***/snippet.js"></script>`，Markdown 是支持内联 `HTML`代码的，我们直接插入链接即可。显示效果如下：

这种显示效果很好，而且方便跳转对应源码仓库，查看上下文。除了引用代码块，在引用其他资源链接（如 twitter，medium 文章）时， 也可以优化其显示效果，比如`Medium`对常用第三方链接的显示效果如下：

在`Hexo`中，通过其`Tag Plugins`功能，能够做到美化一些链接的显示，以下展示链接了一篇`Medium`文章:

> Every interaction is both precious and an opportunity to delight.
>
> Thatcher Peskensmedium.com/@thatcher/why-choose-between-grpc-and-rest-bc0d351f2f84

更好的呈现博客内容也有代价，就是博客源文件中出现大量语法，也和其他第三方工具紧密耦合，不方便后续升级维护，我们在维护自己博客时， 就需要在这两者之间权衡代价。

## 主题高级配置-导入字体

最近在浏览文章发现时一个自建博客网站的字体让我阅读起来，十分舒心，这个字体是谷歌新推出的思源宋体，就打算将自己博客的中的字体也替换成思源宋体， 查看了主题`Butterfly`的配置文件，其没有提供对该字体支持，开发者回复说导入字体需要自己实现。

对于不太熟悉前端的小伙伴这可能得需要一点时间，这里我只简单介绍一下`Stylus`以及修改的步骤，建议有一点前端知识的小伙伴了解 hexo 的模版机制，以及相关技术，主要包括`stylus`，`pug`以及 hexo 对应的插件，应该不是特别困难。

目前模板`Butterfly`使用的`css`引擎是`stylus`，这个框架旨在提供 动态、健壮、表现力（EXPRESSIVE，DYNAMIC，ROBUST）的`css`开发方式。大概提供了以下功能：

1. 可以省略 css 括号，冒号符号
2. 提供函数，简化重复代码
3. 提供导入功能，提高可读性
4. 提供一些内置函数

简而言之，就是更优雅的编写`css`。这样我们就可以对`Butterfly`的样式做一些自定义调整啦。`hexo`提供了 `hexo-renderer-stylus`插件，我们就可以通过`hexo-config()`方法获取 yaml 文件定义的变量。

如果需要通过外部变量的方式，可以通过以上方式在配置文件定义变量，目前我的做法是 check 一个自定义分支维护自己的一些更改，因为 暂时没有对外暴露的需求，直接在`layout/includes/header/header.pug`的文件引入 script，然后在修改配置文件`font.font_family` 变量，相关修改参考如下：

对于博客中使用的第三方模板和工具，我们需要深度学习，否则就无法对博客进行美化。

## 重拾对文字的敬畏之心

最近看了两片博文，一篇是是关于信息的半衰期[1]，信息的半衰期值指一半信息变得没有价值所需要的时间,比如软件文档，如果不维护， 随着软件版本的升级，文档中很多内容会变的没有价值。博文按照内容其半衰期也有长短区分，打个比方，一篇介绍 kubernetes指定 版本安装的博文，随着 kubernetes 的升级，其内容价值会越来越低，而kubernetes的升级确实很快，这就造成这类博文的半衰期很短， 而如果一篇介绍 kubernetes apiserver 设计思想及模式的博文，其半衰期相对则更长。信息的半衰期能一定程度体现博文内容的价值。 所以在进行博文创作的过程中，我们应努力提升博文质量，提高其半衰期。

另一篇文章是<<重拾对文字的敬畏之心-三年个人博文的词频解析与反思>>[2]，作者对其博客写作做了一个词频统计分析， 结果很有意思，感兴趣的同学可以阅读原文。

在整理自己博文时，发现之前的博文读起来十分晦涩，而且有很多明显的错误，这对于读者阅读体验是灾难性的。在写作过程中不恰当的措辞， 频繁使用口语化的词汇，这些问题总是存在，如何避免这些问题呢？当然没有捷径可循， 只有踏踏实实多阅读一些优秀的随笔散文，沉淀这些文章，同时多进行写作练习，注意用词，写作完成后自我检查校验。最终形成自己的写作风格。 恍然间才发现，小学到高中的语文课程和写作也是很有意义的。

## 一句话

1. 将文件中的标点符号统一成中文符号，对于技术类的文章，代码和链接中包含了很多`.`，`,`，所以只能由作者保证， 没有工具满足场景。
2. 博文中如何显示一个文件 Diff结果？之前读到过一位作者的博文，很好的展示了`Git diff`的结果，由于没有整理， 已经找不到该文章。如果后续有解决方法，会在后续有关博客的相关博文中分享。
3. 博文在引用别人的图片或文章时，需要注意协议。