背景

最早知道有这么一个工具是在tumblr还没有被墙的时候,平行四界第一代作品 就是将自己页面使用了这个模板。一眼就被这个出众的效果和强大的可复用性而惊讶。随即之后展开了对这个模板的研究。

模板的作者是Sanographix老师,官方github.io展示页是 https://sanographix.github.io/tokusetsu3/,项目地址是 https://github.com/sanographix/tokusetsu3

我的工作

作者的源模板主要面对tumblr自带的自定义模板系统,使用gulp+gulp-ejs打包静态文件。并且从本地site.json文件读取站点的metadata填入网页。老师已经尽量给了我们大量自定义的空间,不过ejs模板文件有几处不方便我们使用:

  • 嵌入式播放器只支持youtubesoundcloudbandcamp。不支持中国本土的音视频平台。社交媒体分享按钮也只支持国外的御三家。
  • STAFF列表和曲目列表是固定数量的。要是需要增多或者减少,只能自己手撸HTML代码。非常不便。
  • 部分gulp库的使用比较旧了,不适应新版本

我这里修改的tokusetsu-ejs项目特点是:

  • 增加了Aplayer开源播放器 https://github.com/DIYgod/APlayer
  • 将NICO和YTB播放器替换成B站嵌入式播放器(自带iframe样式)
  • site.json中添加可选的语言字段,可以根据语言自动修改页面版块标题。
  • 修改ejs模板的逻辑判断,让生成结果自动适应列表长度(有多少歌有多少STAFF都自动生成)避免了手动修改的烦恼。
  • 新增导航条,修改了部分版块的CSS

效果

本魔改网站的应用:泠鸢yousa个人专辑《折纸信笺》着陆页:http://www.lyyousa.cn/2ndalbum

音乐组合aeterne的专辑展示页: https://aeterne-florere.tumblr.com/

展望

目前本系统只是进行了简单的移植。目前本项目正在与国内同人音乐站dizzylabcnsouka老师合作,将项目改进为线上编辑、对接dizzylab网站音乐库的在线编辑发布系统。

本魔改模板的协作项目地址:https://github.com/ryan-friends/tokusetsu3-CMS 欢迎联系我的telegram与我协作

目标

  • [ ] 独立打包成node.js上跑的界面
  • [ ] 添加更多独立特性
  • [ ] 与本站cdn对接
  • [ ] 与网站的数据库对接
最后修改:2020 年 03 月 21 日
如果觉得我的文章对你有用,请随意赞赏