博客新主题 Abyss 发布, 谈谈设计思路和 Ghost 的弊端

两天前博客终于换上了新的主题 Abyss, 这个主题是我前阵子基于原先 Casper-Mine 的模板砍掉 CSS 文件重制出来的, 修复了一些原来 Casper-Mine 存在的问题, 增加了一些个人风格.

之前一直没换主题的一个主要原因就在于 Ghost 的默认主题 Casper 设计水平实在太高了, 让人根本想不出超越和改进的方法. 原先博客用的 Casper-Mine 主题也仅仅是一个 Casper主题的临时Pjax化解决方案 加上中文字体, 代码高亮和多说评论框而已.

就这样用了一年多, 慢慢觉得 Capser 主题和我的理想主题还是有一些出入:

  1. Casper 考虑到了作者会为文章添加题图这一点, 而我写文章是从来不用题图的, 平时连配图都很少用, 所以这样就浪费掉了 Casper 的很多设计考虑.

  2. Casper 没能处理好 Ghost 的导航栏——确切的说是没有人能处理好导航栏, 这个功能会完全破坏 Casper 的极简风格, 而目前 Casper 把导航栏隐藏到菜单按钮的方式只能说是一个不破坏功能性完整的解决方案, 实际上没有解决任何问题(降低了导航栏内容的曝光程度, 同时对 Pjax 产生了一定阻碍).

  3. Casper 默认博客是多作者协作的, 而 BlackGlory.Me 实际上的作者只有我一个人, 所以多作者的设计考虑对我也是多余的.

  4. Casper 会调用 Gravatar 的头像, 我个人是相当认可这个全球化的头像服务, 但由于国内的网络环境问题, 很多人是看不到我的 Gravatar 头像的, 同时还会影响页面载入的速度, 所以我认为应该把 Gravatar 在主题中移除.

  5. Casper 终归还是一个面向英文排版而且对文章中的代码块不够友好的主题.

上述要素最终成为了我开发 Abyss 的契机, Abyss 本身也受 Casper 的设计风格影响很深.

我一直偏爱于页面中有一张能够填充起整张网页的背景图片, 从最开始写博客时就是这样了, 也因此我很不情愿去使用题图一类的特性(因为很容易破坏背景的美感), 但 Casper 的极简风格是无法满足这一点的 —— 为了让文字的可读性增强, 你不能把文字和背景直接融合在一起, 一个好的解决方案是给文字加上一层半透明, 削弱背景图片的亮度, 以防止文章本体被过于华丽的背景图片喧宾夺主. 可 Casper 的模式是纯色背景 + 文字, 一旦加入了降低亮度的背景图片, 就会破坏整个 Casper 的风格, 同时页面也会变得丑陋.

在尝试背景大图无果后, 我就用起了一些工程师的"邪门歪道", 来试图取得一个纯色和图片背景的折中效果, 试着让新主题显得别太难堪. Abyss 用的邪门歪道有两个, 一个是 Webkit 内核浏览器特有的文字镂空 CSS, 一个是 WebGL 粒子动画背景. 另外由于我懒得用 SCSS, PostCSS, Stylus, LESS 一类的工具, 所以这次是用了 CSS 原生的变量特性, 而这个特性目前只有 Chrome 和 Firefox 实现了, 对于 IE 和 Edge 之流, 包括他们的用户, 我采取了直接放弃支持的态度.

不过自打开始用这些功能起, 我就已经是在向原主题 Casper 投降了, 但既然步子已经迈出来了, 人就会纠结于沉没成本, 只能硬着头皮继续做下去.

先说说 Webkit 的文字镂空吧, 它是只有 Webkit 内核才能使用的 CSS 属性, Firefox 是用不了的, 所以如果你用 Firefox 打开这个博客, 所有标题文字是没有渐变色的, 只有白色这一种颜色. 文字渐变色的实现方法就是文字背景 + 文字镂空, 可以说是纯 CSS + HTML 唯一的一种让文字支持渐变色的方法. 为了让 Firefox 显示同样的效果, 我也试过用 Canvas 和 SVG 去实现, 但我尝试出的实现并不完美, 所以就放弃了非 Webkit 内核的浏览器的努力, 写了个唯有 Webkit 能用的 hack 区分了一下浏览器, 这件事就算结束了.

再说说粒子动画, 由于我在计算机图形学方面没有什么积累, 所以做粒子动画本身对我来书是一件挺新鲜的事情, 也同时让我体验到了做不出自己想要的效果的那种无奈. 说句题外话, 拿长时间持续的粒子动画当作博客背景, 对于那些在页面上挂着广告, 同时也没有正确实现 Pjax 的博客而言是非常没用的, 这方面可以算是 BlackGlory.Me 的一个独特优势.

一开始我是用 Canvas 2D Context 做的, 在 500 个粒子时遇到了性能问题, 于是就转用有硬件加速的 WebGL. 我的 WebGL 知识在几年前啃了一本书之后就没用上过, 现在已经全部遗忘, 幸好还有 Pixi.js 这个 2D 的 WebGL 渲染器, 这才把 WebGL 的硬件加速用上来.

但即使上了 WebGL, 也还是很尴尬的, 因为 Chrome 的 WebGL 性能够强, 可别的浏览器不是这样, 比如 Firefox 就不是很强, 而且双方在实现原理上有一定区别, 更加造成了 WebGL 的不定性. 比方说我之前考虑给粒子加一层高斯模糊, 视觉效果好一点, 然后 Chrome 和 Firefox 都跑不动, 怎么办? 我就用 CSS3 的 filter 直接给 Canvas 加了一层 blur 效果, Chrome 很流畅, 画面很好, 可 Firefox 还是卡得一塌糊涂, 这我就没办法, 最后只能把粒子从由程序绘制变成了直接加载图片材质, 这才解决了性能上的问题.

期间我做过差不多 4 种不同类型的粒子动画效果, 但都不太满意, 比如这个:

这些粒子动画有的颜色太鲜亮让文字变得很难辨认, 有的则是不够美观. 所以最后就从里面调了一个还算自然一点的, 也就是现在博客用的这个背景动画, 为了美观把粒子数量砍到只剩几十个, 也许第一眼见到这个背景觉得还可以, 但看久了必然是会审美疲劳的. 我对现在的结果还是很不满意的, 希望有哪一天我能把自己想要的效果做出来.

再谈谈 Ghost 的弊端. 在我的设计思路里, 一个理想的主题要同时满足很多特征, 比如语义化, 无障碍, 各个组件没有耦合, 高度可定制的样式变化, SPA, 甚至支持 VR 等等...但在我实际动手制作新主题时, 我发现这个理想的主题是无法在 Ghost 里实现的, 这样的一个主题必然要涉及到很多超出了它作为"主题"定位的代码 —— 而Ghost 的模板引擎 Handlebars 不允许我只通过编辑主题文件的形式来实现. Ghost 相比 WordPress, 还是缺失了太多应有的功能, 换句话说就是 Node.js 的各种模板引擎与 PHP 的那种原生能够让代码直接和 HTML 混合的自由度相比还是逊色了许多. 我就不明白了, 为什么 Node.js 的那批博客程序总是要用做网站的模板引擎来为难博客程序的主题开发? 不排除今后我自己生造一个博客程序的可能性.

最后, 希望这个新主题还不至于让人觉得太难看.