主题小更新

Posted on In Disqus: Word count in article: 1.4k Reading time ≈ 5 mins.

最近一时兴起更新了一下博客主题。三天打鱼两天晒网，文章没写多少，主题倒是一直在更新 2333……工欲善其事，必先利其器，再利其器，又利其器，复利其器，重利其器，更利其器，终忘其事……

Hexo

Hexo 主题之前使用 git submodules 来维护的，每次升级都很麻烦，几乎都是推倒重来，主要是魔改的一些东西要 merge 来 merge 去，merge 到最后头都大了。现在 Hexo 把主题变成了一个 node.js module，然后引入了 Data Files 的概念，于是用户的魔改都写在 source/_data/ 里，而且每个主题还支持 _config.[theme].yml，升级就随便升了，npm i hexo-theme-next@latest 结束，啥也不用担心。

我也在考虑换成其他的静态网站生成器，例如 Hugo，但是留住我的还是 NexT 这个主题。虽然说这个主题用的人太多了，有点烂大街的嫌疑，但是我仍然觉得这是我见过的最漂亮的主题。即使 Hugo 有 hugo-theme-next 但感觉还是不如正版的 Hexo 主题。Hugo 的一个优势是网站生成速度快，Hexo 生成一次也就几秒钟，不碍事。

静态文件管理

之前我是把这些静态文件也放在 git 仓库里，导致现在的 git repo 挺大的。现在觉得这类文件不应该放在 git 里，就应该单独放在某个地方集中管理，而且 Asset Folders 也应该关掉，原因有四个：

  1. git：减小 git repo 大小。主要是这个 repo 放在 GitHub 上，不好意思太占人家资源 →_→
  2. CDN：把图片集中保存，放在 /source/images 下，之后可以考虑单独放在一个 object storage，加个 CDN，岂不美哉？虽然现在 DNS 用 CloudFlare 解析后就自带 CDN
  3. Typora：对于图片而言，有了 url 后就可以方便的在 Typora 里面插了。如果开了 Asset Folders，Hexo 要求把图片放在 Markdown 自己的 assets 文件夹里（例如 /source/_posts/[title]/a.jpg），但在 Markdown 里引用仍然是 [a](./a.jpg)，所以 Typora 会去找 /source/_posts/a.jpg，自然找不到。用绝对路径就不会出现这种问题。GitHub 上还有个 issue 但是看起来短期内不会解决。
  4. pandoc：假设我在文章预览中引用了一张图片 [a](./a.jpg) 。pandoc 不会改变图片路径，仍然是 ./a.jpg，从渲染好的 html（/[title]/index.html）来看，这个图片链接是没问题的，但是在根目录（/index.html）看时，对应的图片路径是 /a.jpg 而不是 /[title]/a.jpg，这就导致找不到文件。hexo-renderer-marked 专门有个选项来解决这个问题，但是对于 hexo-renderer-pandoc 就无能为力了。同样的，用绝对路径就不会出现这个问题。

顺便提一句，我这次就发现好多之前的图片已经无了，甚至远在我提交第一个 git commit 之前，不免唏嘘。

细调

这里主要是看到了频率这个博客，虽然也是 NexT 主题，但是作者对其魔改了一发，看起来非常舒服。其中改动包括但不限于：

  1. 换了个字体霞鹜文楷；
  2. 换了个调色板；
  3. 加了个照片集和文艺清单；
  4. 除此之外还有一些小改动，例如版权声明和主页上文章预览的样式也都改了。

换字体这个好搞，NexT 配置文件里面直接支持换，但是我们还得把字体源加进去。这个 repo 里提供了 css 可以直接用，把下面这段代码加入 source/_data/variables.styl 就可以了：

1
@import url("https://cdn.jsdelivr.net/npm/[email protected]/style.css");

为什么是 variables.styl 而不是 styles.styl 呢？因为 Safari 要求所有的 @import 在 css 最前面，否则忽略这个 @import……

颜色这块我一直摸不着头脑，我自己调的颜色基本上就是一坨翔……本来都不想整这活了，又不好意思直接抄人家博客，后来突然想起了 Nord：直接抄 Nord 的 color palette 不就好了！于是颜色就变成了现在这样，看起来也还算清新吧。

另外我还给 NexT 提了两个 issue：

  • #606：把主页文章列表的动画顺序换一换。
  • #607：由于用了 pjax，载入新文章时 disqus 评论数量不会刷新。

这里就不得不夸夸 NexT 的开发者，反应速度超快。第二个 issue 从 open 到 close 不到两个小时。

评论系统还是用的 Disqus，懒得整一个 self-hosting 了。之前看到有人吐槽：

1202 年了，Disqus 还在用 iframe 加载，我除了露出 震撼猫咪.jpg 的表情之外，已经没有什么更能形容遭受的震惊感了。

我除了跟着吐槽一下，似乎也没啥特别想法。说好的前端框架半衰期一个月呢……倒是在 F12 的时候发现 Disqus 悄咪咪地给 ib.adnxs.com 发请求，于是我就把 anonymous tracking 关了。

目前看起来还有两个不满意的：

  • 缺少一个照片集之类的展示界面。这个可能最方便的解决方案就是抄别人的 23333……事实上我觉得频率这个样式非常合我口味：图片，标题，评分，一句话点评，这对大部分电影、游戏、书籍来说足够了，觉得能多说几句的就再开文章写吧。
  • 图像大小。我插图片的时候并不希望宽度 100%。Markdown 的原始语法 []() 里没法调整宽度，只能自己强行写 <img>。频率的做法是把图片文件名带上宽度信息，然后 css 样式会根据文件名改。