menu
关于新的 Hexo 主题「Spectre」

终于用了快一个寒假的所有空闲时间,写完了「Spectre」主题。

Yet the begin of a new story.

缘起

我最早接触博客时使用的是 Typecho,因为我看中了这款 PHP 驱动的博客程序的简洁。当时在选主题时就看到了 Vioseytypecho-theme-material,当时着实被惊艳到了。那时候我高一,从用户到开始提 issue,然后自己一点点学习,开始为主题贡献了一些代码。后来 viosey 弃坑以后开始写 hexo-theme-material,我也迁移到了 Hexo,然后很自豪地成为了 hexo-theme-material 的 Contributor。

Material 主题一开始的起源只有一个 Material Design Lite Blog Demo,最后经过几番周折和魔改,从几个 HTML 到 typecho-theme-material 到 hexo-theme-material。

但是随着我开始为 hexo-theme-material 贡献代码,我发现,hexo-theme-material 主题太过于笨重:css 即使压缩和优化过仍然加起来有 146k,js 更是达到了 181k(Spectre 主题的 css 和 js 加起来是 180k,包括 inline 了的 Material Icons);hexo-theme-material 的很多后期添加的功能都是侵入性的改造。加上我不满意 Material 主题的部分 UI 布局,于是我决定重写一个主题。

碰巧最近完成的几个坑中,有一个我使用了 Hexo。这个坑让我熟悉了如何从头写一个 Hexo 主题。

选型

之前我热衷于使用 MDUI 框架,因为 MDUI 框架轻便易上手。然而碰巧 Indexyz 把我拉进了另外一个坑里,那个坑使用的 CSS Framework 是 Spectre.CSS。当我看见了 Spectre CSS 的简洁和轻量,我一下子被这个框架吸引住了。这个框架不仅轻量,还使用了不少 CSS Hack 代替了 JS(比如可收放的侧边栏、弹窗和 dropdown 菜单都不依赖 JS),于是我决定就使用这个框架。
由于 hexo-theme-material 使用的 EJS,我之前的几个关于 Hexo 的项目也是使用的 EJS,所以我决定 Spectre 主题也是使用的 EJS。

UI

UI 方面,我参考了很多博客主题的设计,但是最后首页的 UI 我依然几乎是复刻了一个 Material 主题(但是有做了不少的微调);侧边栏则是修改为模仿 Google Plus 的设计,仅在较小屏幕上收起,在桌面端展开。

文章页面的 Markdown 样式全盘照抄 Material 主题的,不过引来了相同的 PrismJS 代码高亮的 Bug。我的解决方案就是使用自己 patch 过的 prism.css
友链和标签云页面基本也是直接照搬的 Material,只做了一点微调;映像页面则是基本完全照抄的。。以后有空了上 Codepen 上找个新的图库的模板重写一个吧;归档页面则是学了 NexT 主题做了一个时间轴样式。

最后

这玩意还处于 canary 阶段没有 Release;很多东西的实现方法很 dirty,写死了不少东西,很多功能(比如 TOC)都没有动,所以大家还是别想着换这个主题就行了(反正又不好看),以后有机会得从头再写一遍。


本文作者:neoFelhz
本文链接:https://blog.nfz.moe/archives/hexo-theme-spectre-story-begin.html
本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可,阅读 相关说明