Wordpress主题:二〇一九,Ghost版

Wordpress主题:二〇一九,Ghost版

2023-05-13
#设计 , #分享

之前用的主题 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样式适配~

加入评论