Wordpress 主题:二〇一九,Ghost 版

Wordpress 主题:二〇一九,Ghost 版

May 13, 2023
设计 , 分享 ,

之前用的主题 Attila 自 22 年 6 月修改完成后用到现在也差不多一年了,不可否认 Attila 是个非常好的主题,而且在使用期间我还陆陆续续做了很多喜欢的功能集成,如:豆瓣、TOC、友链。

前端时间看到 imzm.im 的 Wordpress 主题 二〇一九,初见的第一眼感觉很舒服。虽然只是 Wordpress 的一个免费默认主题,但是较大的字体和舒适的排版让人在阅读方面能感受到很强烈的愉悦感,当时搜了一下发现没有 Ghost 的办法,所以就又萌生了移植的想法。

以前写 Attila 没太搞明白 Glup 的作用,但是体会过他的方便,所以这次也打算从头开始用一个比较方便的脚手架枸橘,最后选定了 @royalfig  的 Ghost-theme-starter 主题脚手架做开发,这个脚手架主要工具有下面这些:

  • 打包工具:Rollup
  • sass 工具:postcss

不过刚开始就遇到了调试环境无法启动的问题,检查后发现启动命令有点问题,看了 @royalfig 最新的一个主题的配置文件后发现启动命令要对应着修改成 "watch": "rollup -c --environment NODE_ENV:development -w" 后才可以正常启动。

之后又在移植 scss 文件后发现新版本的 sass2.0 后不支持 / 符号计算,报了很多错误,起初还想着自己手动改,发现越改越错,后来在错误提示中发现可以整体自动迁移:Automatic Migration

第一次使用 Rollup.js 这个脚手架(其实也是第一正式从头开始用脚手架开发),发现要把 cssi 引入在入口 js 文件中后文件才会被编译。

踩过这些坑之后才算是顺利进入主题移植阶段。


目前简单完成了初步的移植,大部分功能都可以正常使用了,不过大概率存在 BUG,待后续完善。

GitHub - rebron1900/twentynineteen-ghost: This is a Ghost port of WordPress’s Twenty Nineteen theme. Ghost theme development scaffolding uses Ghost-theme-starter, thanks to @royalfig for the tool.
This is a Ghost port of WordPress's Twenty Nineteen theme. Ghost theme development scaffolding uses Ghost-theme-starter, thanks to @royalfig for the tool. - GitHub - rebron1900/twentynineteen-g…
项目地址

目前已完成的功能和发现的问题:

  1. 主页正常
  2. 内容页正常
  3. page 页面正常
  4. 暗黑模式 (用户切换功能还没写)
  5. 评论功能 (目前只适配了 twikoo,加入评论那里应该要显示最评论近的六个头像,看了 twikoo 的文档大概率可以实现)
  6. css 是 wordpress 里移植的,可能有很多问题,页面结构是从 hugo 版里拿的,也可能有很多问题。
  7. 有搜索功能 (目前是直接文字,考虑做一下美化?)

待实现的

  1. 评论区头像重叠
  2. 友情链接、douban 页面移植美化适配,思路是以前的思路 (attila)
  3. 前端切换主题,并持久化保存
  4. TOC
  5. 代码高亮
  6. 持续修复 BUG
  7. Ghost 样式适配~

加入评论