换上了自己写的新主题!(つ•̀ω•́)つ
✨小透明・宸✨
2020-08-29 13:33:28

之前网站的主题是 hexo-theme-material。这个主题的质量还是很高的,今天仍然有不少用户在它的 Issue 里询问使用问题,但是它的最后一次 Commit 和 Release 停留在了 2018 年 8 月,之后就再也没有任何动静了……主题的文档挂了,原作者自己的博客兼 Demo 也挂了,似乎的确已经是弃坑了。

几个月前就有了“换一个主题”的想法,不过又不能抛弃自己喜欢的 Material Design 样式所以就想着自己写一个,然后整个暑假又被某个项目耗光了时间就一直咕咕咕到现在(っ’-‘)╮ 现在我被关在学校里又没什么事干,于是只用了几天时间就自己摸索着把主题给做出来了摸鱼是第一生产力,勉强能看~当然样式还是有不少地方chāo了原来的主题的,所以看上去和换主题之前好像没有什么区别 ( ε:)

顺便吐槽一下,Hexo 的文档的评论区里有一堆好几年前的评论吐槽文档质量极差,我看了以后的感觉就是想自己做主题的话只看官方文档很难上手,简单来说就是告诉你:“新建某某文件,在文件里写上一些 HTML 代码,主题就可以使用啦!”至于如何获取各种数据以及类型定义等等,几乎是一字未提,有时候还得用 console.log 自己看。

GitHub 上有人做了个类似于 Vue CLI 的工具,选择模板引擎和文章渲染器之后,就可以自动新建一个主题项目的基本结构,当然我是不想再 npm install -g 往自己的电脑上装一堆东西了,所以直接把它的页面模板拿下来就开始改了~EJS 模板还是很容易掌握的,只需要记住 <% %> 表示 JS 代码、<%= %> 表示转义输出、<%- %> 表示不转义输出,大部分情况下这三个标签已经够用了。

因为是自己做给自己用的主题,所以很多地方都很随便啦……这个新主题的一些特性:

  • 包含我之前魔改主题时添加的所有功能,例如图片懒加载、代码复制、图片放大(使用 medium-zoom)等等。
  • 图片懒加载支持 WebP 格式自适应(浏览器不支持时会自动回退到传统格式),甚至还可以使用 Firefox 和 Chrome 正在逐渐开始支持的 AVIF 格式,比如这一篇的封面图就有个 AVIF 格式的版本
  • 支持深色模式(MDUI 内置功能)。
  • 和之前一样继续使用 LiveRe不蒜子分别提供评论区和访问计数功能。至于其他评论区和计数……因为我没有用过所以就没有适配了。
  • 不使用 jQuery。但是 LiveRe 仍然会单独加载一个 jQuery,这就不是我能控制的了 ɿ(。・ɜ・)ɾ
  • 不支持 Internet Explorer,因为我使用了一些 ES6 以上的语法和特性编写 JS 代码而我又懒得用 Babel 转换再添加一大堆 Polyfill。如果用 IE 访问的话会直接跳转到这里

主题的源代码我上传到 GitHub 了,但是除了我自己以外应该不会有第二个人用了吧……|ω•`) 不过 README 和设置文档我也还没写,以后心情好的时候(比如哪天不用被关在学校里了)再补充~(咕咕咕)

封面图:Pixiv ID: 61882373 「モカ姉誕生日おめでとうございます。」 by チノマロン

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
本文作者:✨小透明・宸✨
本文链接:https://akarin.dev/2020/08/29/migrate-to-new-theme/
chevron_left 上一篇 下一篇 chevron_right