开篇减一秒，呱。

也不知这两年怎么了，开始越来越看重自己的博客。前端魔法群有一个人（是谁忘了非常抱歉！ _(┐「﹃ﾟ｡)_）讲了一句话，我非常喜欢，大意是「有一个博客，就像在互联网上有了一块属于自己的领土」。而我渐渐的开始把这个博客当成自己的家，经常写点东西，邀请朋友过来玩，四处跟人交换链接。我是那种把在网上的生活看的比线下生活重的人，有可能是因为自己准 Digital Native 的身份，也有可能是这两年过的真的不顺，也没什么归属感。总之我开始更加频繁的打扮这个小站，水更多的文章、花时间调模板的很多小细节、也花很大的价钱换掉了用了十多年的域名。在做这些事情的时候让我觉得很满足，不知道这种满足的感觉能持续到什么时候。

这次模板大修折腾了好几个休息日，虽然整体的视觉效果没有发生很大的变化，但是难以察觉的地方做了很多微调。于是决定写一个日志记录一下这段时间更新的内容，当作一个里程碑，顺便炫耀一下自己残次的设计功力 ｡:.ﾟヽ(*´∀`)ﾉﾟ.:｡

警告：口水文，流水账，给自己看的。

TL; DR

以下是我个人的模板设计准则：

• 不瞎加傻逼特效、动画；
• 优先优化阅读体验，其次优化视觉效果；
• 这个世界上是存在宽度小于 400px 的设备的，好好优化；
• 打印样式不要忘记调；
• 兼容性优化 tsc 比 babel 好用。

むかしむかし

最开始用的博客系统是 Wordpress，但是因为自己傻逼装了很多有漏洞的插件，经常被各种 Script Kids 花式搞炸，后来就切换到了 Typecho 上。那个时候也是很喜欢写模板，印象最深刻的是那套叫做 Die, with blue 的设计稿，用了 [Dorole Yang] 老师的摄影作品当作头图，花了很久去修内文的排版和细小的动画，最后产出的作品视觉效果相当清爽。不过因为 2017 年一次史诗级的数据迁移灾难，不仅炸了数据库，博客模板的源文件也丢了。恼羞成怒下便迁移到 Hexo 下，一直用到了现在。

切换成静态博客生成器的理由很简单，不想维护数据库。另外比较好的一点是，只需要把博客内容备份到丢丢盒（Dropbox 的爱称）和 Github 上原始数据就不会被搞丢了，而且版本管理超级方便。

之所以选择 Hexo 是因为当初在网上随便刷的时候看到了作者的这篇博客，一瞬间觉得电波对上了，于是乎就架了一个试试，没发现哪里特别不能忍的，就一直用着了。

博客系统部署到本地之后做的第一件事情就是把它的皮从头到尾改一改。这里不得不吐槽一下 Hexo 的默认模板真的是丑到没法看，视觉效果比 Hexo 开发者本人博客差了不止一个档……

那个时候 Material Design 还挺火的，我也很擅长用这个设计系统，于是乎就拽了个 Material Design Lite 库套到了默认模板上，覆盖了一大票的默认样式，一顿魔改，~~最后改的亲娘都不认识了，~~于是乎就有了现在博客模板的雏形（ry。

值得强调的一点是，你现在看到的这个模板真的是从默认的 landscape 上改出来的，源代码的目录名我都没改 OTZ…

至于为什么一个东北糙老爷们，博客的名字要叫 「天才少女螺莉莉的数据中心」 这件事情就是另一个故事了，下次再谈。

虽然从头到尾的每一个设计元素我都花了很大的心思来调，不过这里只聊几个我觉得很有趣的东西。

个人信息卡：就在这篇文章右侧边栏（手机端往下滑能看到），有一个放着我头像的个人信息卡。这个信息卡是我自己加上去的，整体布局参考了 Google Plus（就是那个被傻逼 Luke 搞死的社区）个人信息页设计，下面那一排小图标则是参考了 QQ 的个人信息卡（有没有想起来为了给自己 QQ 号「点灯」而不停四处刷腾讯产品的日月？）。其实这块的布局到现在也还有点问题，不过不知道该怎么修，考虑到影响没那么大就放着了 (ㆆᴗㆆ)。

友情链接：罗列了一些从初中开始认识的各式各样的朋友，交换友情链接这个行为真的是一个很古朴的习俗，我是一个很怀旧的人，所以这个区域一直就这么保留了下来，没事还会往里面多塞一些链接。

文章正文：文章正文的可读性优化一直是我非常看重的东西。你在网上经常能看到各种各样搞的很花哨的博客，用了一百万个 CSS 动画，一亿个所谓的 「HTML5特效」，鼠标在屏幕上点一下就会冒出来社会主义核心价值观，在背景上拽一拽就会有四处乱飞的粒子特效。虽然我不会有病的阻止周围的朋友这么搞，但是我自己绝对不会做这样的事情。原因很简单，在我看来博客的模板就像一个红酒杯一样，它要能帮助读者更愉快的读博客的正文，而不是让各种奇奇怪怪的东西吸引去了注意力。所以模板设计优化的重点应当是内文可读性的优化。比如字体的大小、段落的间距、文本的颜色。这点在和其他朋友们讨论设计稿的时候我都会重点拿出来说。

聊天室：给网站加音乐挂件和聊天室简直是那个年代网络驻民的时尚标配，同样基于怀旧的原则，同时想给访问者一个与我进行讨论的沟通管道，于是乎拿着 Socket.io 的官方范例改了一个聊天室，但是实际上来留言的真的没几个人，我都能列出来：Royink、姆Q、StarkyDS、还有一个陌生的美少女头像访客，而且程序内存消耗还不小（相对于我那个 512M 内存的 VPS来讲），于是乎今年上留言系统之后我就手起刀落把聊天室砍了（。

不过说来惭愧，当年为了视觉效果的匀称，我很无耻的把内文宽度拉的太宽导致一行文本过多，读起来很累。这次模板大修的时候 UTL 老师 指导我系统性的调整了一下模板布局才把内文宽度收回来。

众所周知静态博客是不大可能有评论系统的，那个时候还没有 Gitment 那么高端的玩意，要么然就去用 Disqus 之流的「社会化评论框」，要么就自己写。那些社会化评论框又慢又丑，加之受到李如一的影响（我们的制作人就是不给网站加评论框。——吴涛），于是乎干脆就把评论框砍了，从那开始的两年我的博客都是没有评论框的。

少し前まで（？

前几个月把域名换成了「roriri.one」，一方面真的很喜欢 ONE 这个尾缀（可能跟小时候 Real One 的 UI 设计给自己带来的惊艳感有关系，one 这词给我的感觉非常好，勾起了小学初中时折腾各种软件的美好回忆）。另外一方面被人起了「螺莉莉」这个绰号，觉得挺萌的就采纳成自己的名字了。如果把这个名字口胡成日文的话就是 「ロリリ」，再转成罗马音就是 「RORIRI」了（好绕啊喂！），这就是域名前半部分的由来。RORIRI 这个单词的形状非常可爱，配上 Raleway 这个充满几何感的字体能够创造出一种很圆润的画风，各种意义上都戳中了我的萌点，于是就消费欲爆棚买下了这个域名（然后钱包流血了）。

也是因为这个原因，但凡会频繁出现我名字的文章，排版一般都会用 Raleway，听起来是不是超不理性（

今だ!（？？？

To→Witter

这次博客模板大修始于想加个简易「推特」挂件的想法，国庆假那几天推「AI：梦境档案」推到走火入魔，甚至把那个推特挂件的名字起成了「To→Witter」。建这个挂件的动机非常单纯，当自己话痨发作的时候希望能有个地方说说话而已。那个挂件的更新方法也很阳春，打开博客源代码目录中的 yaml 档案，加一行内容，重新生成博客静态内容，把博客推到服务器上。因为更起来很麻烦所以大多数情况下我都是不更的（

评论系统

其实这两年间我物色 Self Host 博客系统物色了超久，最后决定选择 isso，因为它用 SQLite 数据库，数据库备份起来简单。不过开源的东西基本都有各种麻烦事，部署到生产环境上了之后我才发现这玩意坑真的很多，API 设计各种莫名其妙，前端集成的时候还带了 jQuery （你们这些前端没有框架和库是不是都不会写代码了啊喂！(ﾟ皿ﾟﾒ)）。一开始抱着能少折腾就少折腾的原则，上了一大堆 Dirty Hack 把前端样式调的跟博客模板画风一致，但是后来有计划要给全站恢复 Ajax 加载，但是他那个前端库不支持 lazy loading，于是乎干脆把评论框的前端集成给推了重新写了一遍。

恰逢买了 Nokia 8110，手里的 Lumia 950 也还热着，本着自己的设备至少要能正常访问自己的网站的原则，强迫症一般的对评论框的代码做了一大票的兼容性优化。优化的时候收获了一个很有趣的经验，简单代码 ES6+ 转 ES5，Babel 不好用，tsc 才好用！

除此之外出于对 Bolb 先森（小姐）的缅怀，在设计评论框的时候，用了一些看起来质量很差的 gif。对于这种使用低质量素材的行为，我依旧使用那个很厚颜无耻的理由，怀旧！(✪ω✪)

在调教这个评论系统的时候做了很多使用体验上的优化，比如自动记录来访者的名字和 Email，避免每次都重新打这些东西，再比如草稿缓存。视觉上参考了知乎和 Reddit 和 Telegram。虽然成品看起来有点不伦不类，不过我还是相当喜欢的。

好友列表

友链加太多了……右下角鼓鼓囊囊的，于是按照 Fluent Design System（后文简称 FDS）Persona 组件的设计规范把好友列表重新修了一下，Designer China 群里的朋友在设计上给了非常多的指导，最后调出来的样式我也非常喜欢。

现在我可以肆无忌惮的塞更多友链啦！(((o(*ﾟ▽ﾟ*)o)))

网格调整

前文提到过，按照 Fluent Design System 的网格系统把页面大的网格调了一下，左右栏的间隔、右栏每张卡片的间隔都被修成了 24px，视觉上看起来更加开阔一些，正文的宽度也会被压缩。

为了进一步缩短行长，正文卡片的内间距也被修成了 24px，最后的效果是全宽度下正文单行长度缩短了两个字（好少！），虽然字数少但是阅读体验确实提升了一些。

在这里再次感谢UTL 老师的指导！

超小屏优化

用 8110 刷自己的博客刷着不爽！于是做了一大票的超小屏优化，比如顶端导航区，在屏幕宽度不够的时候不会再顶出页面了，而是变成了可以横向滚动的样子。再比如，如果窗口宽度过小，正文的内边距会适当减小扩大内容显示范围。还有评论框的评论正文、用户信息表单在超小屏下的显示优化，「To→Witter」在超小屏下的显示优化。

Dark ♂ Mode

Jack 菊苣：「你这博客怎么没有暗色模式，眼睛要被刺瞎了（」，于是我光速调出了一个暗色模式。没有用纯黑色，而是 Material Design 经典色板中的灰蓝色，个人很喜欢这个颜色，实际实现出来的效果也不赖。

边栏的最底下塞了个切日间夜间模式的按钮，感兴趣的话可以来回切切看。

切换逻辑是这样的：

• 读取主题色有没有被手动切换过，如果有则使用用户定义的颜色，否则进入步骤2；
• 读取当前用户操作系统主题色，如果是暗色就开启暗色模式；
• 当用户切换主题时，如果切换到了与操作系统主题色不一样的色彩模式，则记录手动切换主题色，否则删除记录。

这样可以最大限度的保留博客配色方案与操作系统配色方案的一致性，同时保留了用户个性化浏览体验的空间。

至于为什么塞在那么旮旯的一个地方……单纯是因为没地方塞了，而且这种功能又没有必要放在那么显眼的位置……我又不是那种什么都要摆出来显摆的三岁小孩子……

打印样式优化

所有我假定与打印无关的东西全都被干掉了，文字颜色统一成黑色，内文的超链接用伪元素加了目标页面地址，都是一些最基本的调整。

移除 jQuery

默认模板用 jQuery 一共做了这么几个事情：

• 图片灯箱：我不在文章里面插大图，不需要；
• 给图片加图注：用 js 给图片加图注会触发 reflow，影响页面加载，所以改用 hexo-image-caption 了；
• 文章分享链接框：根本没人会用这种东西……纯粹是装饰……分享链接砍了之后留了个窟窿，把 Read More 链接挪过去填补了一下空白，一样也是基本没人点的东西……

综上，jQuery 被删，节省了 60+k 的流量并缩短了页面加载时间，非常赞。 ヽ(✿ﾟ▽ﾟ)ノ

CDN

33：「你博客扔了吧，加载慢死了」。于是，CloudFlare ON；CF上一大票的加载优化 ON；HTTP2 ON。过一段时间可能会迁移到玲奈云上，取决于玲奈老板啥时候看我的工单以及我啥时候有时间（

毕竟下周开始周末就要给回形针打工了（

其他想嘚呗的

模板开源么

不开，原因有三：

• 我非常希望保持自己博客的独特性，所以不开源，你也别扒皮，原因见下一条；
• 模板开源了大多数人也用不明白。说实话这个模板挺难用的，本来第一版 Material Design 就很难用的明白，我在设计模板的时候还犯了大错误，文章题头图长宽比太奇葩很难选合适的图塞进去。每次写新文章挑题头图我都要挑半个小时，挑错了就贼 low，你扒了皮拿去用也用不成我现在这种效果，去扒别人家的皮吧，花同样的时间收益更高；
• 代码烂，当年写的时候就没考虑要把源代码给别人用，所以很多地方写的又脏又暴力，你看了肯定要骂的。

Adblock Plus

中国特设社会互联网生态（没有 open web，全是癌批批）不光是傻逼 BAT 的责任，你们这些广告屏蔽规则维护者也得吃一枪。我不知道你们的屏蔽规则是怎么设计的，按照 class 关键词屏蔽也太逗了， .social-info 你屏蔽，.persona 你也屏蔽。我写个模板是不是得把你家所有屏蔽规则都装一遍试一圈再发布？我现在真的非常能理解哪些大厂为什么不愿意写 Web 端以及知乎为什么不迁就你们这些广告屏蔽器了。屏蔽规则能不能好好写，没把握的规则能不能别往里写？！

以上就是本次模板更新记录的全文内容，有没有一种读大学教材的感觉！（

最后，莉莉爱你 (ﾉ>ω<)ﾉ