博客折腾小记

八个月前，我把建站之初就使用的 NexT 主题换成了 Material 主题，依稀还记得当时告诉自己：以后就好好写文章，绝对不再耗费时间在这没啥价值的事情上（让你立 Flag！后悔了吧？）。时隔半年多，如今发现对我来说好像不折腾比折腾还要难一些，原因嘛，自然是新鲜感与强迫症在作祟，这次折腾的起因就在于新鲜感——我看上了一个主题。

优点与缺点

这次更换的主题是 inside，该主题相较于其它 hexo 主题的特殊之处就在于它的本质是采用 Angular 编写的 SPA（single page web application，单页应用程序）。优点就在于每次点击不同的链接只产生一个 HTTP 请求，返回的是一个 .json 文件，包含该页面的内容（内容已在 hexo g 时已经转成 HTML 格式了），而一旦接收到 .json 文件后，就会将文件的内容通过 innerHTML 属性嵌入页面。

而缺点在于相较于普通的页面，可能对 SEO 不那么友好。因为阻止页面呈现的 JavaScript 可能会对用户体验造成不好的影响，而我为此在额外方面做了补足：添加了 27 个 <meta> 标签，用 Google Chrome 测试 SEO 那一项拿了 89 分，应该还算不错了（拿不到满分是因为部分字体小于 16px）。

URL 后缀

采用 Angular 编写的 SPA 有一个 BugFeature，即在路由时会自动去掉 URL 结尾的斜线（slash），这就很尴尬了，因为我的博客 URL 是默认在结尾都有一个斜线的，比如：posts/xxxxxx/，我对此的解决办法是：

1. 为每一个页面都添加一个 canonical 标记，其中标记的链接末尾都加上一个斜线；
2. 但这样并不能解决 Google Analytics 的链接地址的问题，因为 Google Analytics 分析发送的 URL 是获取 HTTP 首部信息里的 referrer，为此我修改了发送 Google Analytics 的那部分代码：将每一个 URL 的尾部都加上了斜线；

我在 Stack Overflow 上找到了更好的解决方法，原理是根据请求 URL 的每一个路由地址在末尾都加上斜线。

但若想完美的解决这个问题，还需同时为每个匹配的路由路径在末尾都补足一个斜线（否则带斜线的 URL 一刷新就会出现路由无法匹配的情况）。

...
{ path: 'page/:page', component: VPostListComponent. resolve: { postList: PostListResolver }, data: { id: 'posts' } },
// =>
{ path: 'page/:page/', component: VPostListComponent. resolve: { postList: PostListResolver }, data: { id: 'posts' } },
...

这样一来的话，斜线的问题算是解决了。（这部分也是我折腾耗时最多的部分。）

用户体验

我针对用户体验方面做了如下改进：

• 字体

  原主题的默认字体大小是 14px，我将正文修改成了 16px，代码字体修改为了 15px，这应该会比原主题看起来舒服一点。并且我移除了主题额外加载的字体文件，而纯粹改用 font-family 来呈现。参考了 fonts.css。我能吞下玻璃而不伤身体。The quick brown fox jumps over the lazy dog.

• Service Worker

  原主题不带 Service Worker 功能，但我还是为我的博客注册了 Service Worker 功能。

• 启用盘古之白

  主要是为了解决中英文混排时的问题。因为研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。终于找到了我之前过得如此不得意的原因了，看来从此之后我可以走上人生巅峰了。

• Disqus

  原主题对 Disqus 的 identifier 和 url 识别有误，自己新增的页面会在在首部添加 posts/ 字段，比如我的 life/ 页面会变成 posts/life/，这并不是我希望的。我针对当前 URL 简单的做了一个判断，根据 URL 的不同来生成指定的 identifier。

• API

  我将原主题的 API 请求前缀改了一下，不从源站请求。因为我的网站是使用 Cloudflare 来减加速访问，但国内的速度却不佳，而我博客大部分用户还是国内的。将 API 请求源放在了国内的 CDN 后，会更大的提升页面的访问速度——访问页面几乎感觉不到页面的加载时间。

个人喜好

相较之前的 material 主题，我去除了 localStorage 功能，因为现在的博客内容需要用 JavaScript 来呈现，而放入 localStorage 的资源取出的速度是不如直接从 Service Worker 请求的速度来的快。

同时我也移除了 lazyload-image 的功能，因为之前朋友告诉我说她从 RSS 阅读器阅读文章的时候图片没有显示，想了想应该是 lazyload 的 JS 没有加载所导致的，于是乎干脆去掉了，等以后有空的时候再试试 Angular 的 lazyload 是否也有这个问题。

由于该主题文章的内容是以 innerHTML 呈现的，故 <script> 标签里的内容是不会运行的，导致我的音乐插件 Aplayer 无法加载，于是我另写了一个页面专门呈现单独的音乐插件，再以 iframe 嵌入当前页面，算是比较完美的一个解决方案了。

尾巴

这篇文章一发布，预示着我博客栈的目录收录的文章也已到达两位数（10 篇）¹，强迫症终于满足了。

最后我想说：

• 我真的再也不！想！写！前！端！了！
• 这绝对是我最后一次折腾博客！
• 真香！