修改博客主题

没有记录的就没有存在过。所以稍微记录一下。其实不是第一次折腾主题了，之前应 邹扒皮 之约，研究过一次的 Jekyll 的 Next 主题，当然是别人 port 到 Hugo 的版本，但是最终放弃了，因为各种细节都很粗糙，我也没有想要改的动力。

这次是昨天看到 kubectl-debug 的作者的 博客，文章宽度更宽一些，超链接样式很可爱，图例也有专门的样式，文章的 meta 信息也不那么抢眼，总之就是撞到我心坎里了吧，然后看了下也是 hugo 主题，之前其实就想换主题来着，一直没找到心仪的，于是决定这次就把现在的主题换掉。

哦对了，新主题是 Hermit。

下面说一说替换主题都做了什么修改。

之前用 even 的时候其实也做了一些定制化，比如分享啊，把目录从文章右侧挪到左边啊，根据文章 front Matter 里的 keyword 加推荐阅读啊，这种小小的修改。之前涉及到样式的修改，是先安装 node 和 yarn，然后在 even 目录里 yarn install/build 这样非常笨地在做，这次在 Hermit 的 ReadMe 里看到只要下载 extended 的 hugo 就可以编译 scss 了，之前要是知道的话能省不少事。

不打算写成教程向的，纯粹随缘记录。

遇到第一个麻烦的事情是，Hermit 的主题颜色只有一种，没有像 even 那样定义成不同主题一键切换，不过总的来说用到的颜色也不多，只是自己用，全局查找替换一下不是什么问题。问题是，要用什么颜色。。这个花了蛮久的，在这个网站上复制粘贴了很多色值，一个个试的，其实底部栏的颜色也不是特别满意，但实在已经试到心焦气燥了，就先这样。

然后是解决目录不显示的问题，even 里是在全局和文章的 front matter 变量两个地方同时控制，并且文章的优先级高一些，hermit 是只能用文章的 front matter 变量。但是我现有的文章都没有显示指定，直接在全局变量设置的，于是想改成和 even 一样的逻辑。但是试来试去，目录就是不出现，后来发现 hermit 的目录有两个地方，一个是文章目录本录，另外一个是文章右下角的目录开关，即使有目录也要先按开关切换以后才会出现，很不爽啊，于是直接改了下目录 css 类，让它直接显示，后面修改是否出现目录的逻辑也就水到渠成了。

想起来，第一个事情应该是修改配置文件，从 exampleSite 里拷贝出来的默认的配置文件是 toml 格式的，但是上次折腾推荐阅读的时候发现，其实对 yaml 的支持度更好，于是那时就换成了 yaml 格式。只是当时比较直愣愣，一行一行手动改的，今天突然想起了应该有 convert 工具啊，hugo 确实有个子命令是 convert，但可惜是转换文章 front matter 格式的，于是上网随便搜了个网站转了下，复制粘贴回来。然后照着之前 even 主题时候的配置增删改查一下。说到这里不得不提一下，even 的配置还是蛮良心的，量大，还有注释。这次修改去掉了不少配置，包括 busuanzi 的 PV/UV 统计，虽然之前一直看一直看，但它总是不变看着也闹心啊。留了一个 GgoogleAnalytics，以后想起来去看看就得了。

嗯，配置了 MathJax，这个之前 even 支持，把对应的 js/partial 抠出来补过来就可以了。

修改代码的样式，这个也花了不少功夫，不过因为也是从 even 里拿过来的，也没什么有创意的东西就是了，主要就是找到对应的 scss 文件和它控制的类，对应的来回改就好了。Hermit 这边多提供了一个复制代码的功能，在我来回杂交的过程中被搞坏了，纠结了下要不要直接去掉算了，不过凭着我这一股犟劲，最后还是还是花了一点时间调好了，两个问题，一个是样式上 absolute 直接按整个页面的坐标来了，找到它的父元素并且加上 position: relative; 就修好了。另外一个问题是，改完样式后代码块里多显示了行数，拷贝的时候会多出行数来，本来以为盲改就得了，最后还是得用 chrome 的 debug 去看下到底是哪个元素，还蛮幸运，js 没有混淆。

Hermit 的 RSS 地址是 /post/index.xml，和我之前的不一样，改成了到 /sitemap.xml。

把之前 even 的一溜分享按钮移过来，就是这个：

原生评论是 disqus，但是最近喜欢基于 GitHub issue 的 utterances，同样，也是从之前主题里拿过来就好，是 iframe 做的，插入一段 js 即可。由于这边文章变宽了，在 scss 里稍微做了下调整，让评论框和文本宽度保持一致。

啊，字数统计，这个花了超久。原生的看上去只统计了英文单词数，中文都不给算，找了一圈什么 runecount 之类的，各种瞎猜乱试，对比 even 里的学啥的，都到放弃的边缘了，最后还真让我试出来了，哈哈。

配合字数统计，顺便也搞了搞 i18n 的配置

修改了日期格式，这个还挺好改的，直接改 config.yaml 里的 dateformShort 和 dateform 就好了。

还有一些杂七杂八的改动，但是好像也没什么值得一说的了。

哦对还有就是，图片的左右 float 功能，没有料想中好用，没办法和内容很好的排在一起，只能让它随遇而安，到头来不如规规矩矩坐中间。

接下来还可以折腾：

1. 配置一下选中文本后的高亮颜色
2. 文章的头部图片和背景图片
3. 现在推荐阅读是根据 tags 匹配的，改成根据自定义 key 匹配（之前是用的 keyword）