博客折腾小记

Author Avatar
Wincer 8月 22, 2018
  • 在其它设备中阅读本文章

八个月前,我把建站之初就使用的 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 篇)[^1],强迫症终于满足了。

最后我想说:

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

[^1]: 最近我将写得不是很满意的文章隐藏了起来(原本想删除的,后来想了想实在有些舍不得),有二十余篇,我的博客现在不提供这些文章的入口,你仍然可以通过我的 MyBlog 仓库查看这些文章。

本文标题: 博客折腾小记
最后更新:2018 年 09 月 11 日 - 20:09
本文链接:https://blog.itswincer.com/posts/50658b02/
本文采用:署名-非商业性使用-禁止演绎 4.0 国际 协议进行许可,阅读 相关说明