基于 Nuxtjs SSR 渲染的 WordPress 主题 Lareina

晴和君 · 2019年05月30日 · 268次阅读 · 预计需要4分钟

外形相近,内里大不同

自从接触了 Vue 以后,我就一直想要用 Vue 写一个 WordPress 主题,正好发现 WordPress 自身就带了 REST API。于是在去年12月份就写了一个极简的 WordPress 主题,不过是基于 Vue 的单页面应用,虽然实际体验很好,但是毕竟是单页面应用,SEO是不用想了的,而且如果页面多的话,首屏呈现时间(加载时间会很长)。所以并不怎么喜欢。后来发现了有后端渲染这个东西,很想研究一下,但是没有时间,也没有技术。这几个月基本都在准备考试,完全抽不出时间来研究。这个月终于把考试都解决了,所以这个主题就诞生了。

我是从 5/20 日开始写,5/29 日上线部署,5/30 部署完成。大概花了整整十天时间。遇到了无数的问题,通过啃官方 Handbook 和 Google ,基本都解决了。

不过昨天部署的时候遇到了很多的问题,尝试了很久,最后是把文件都上传到服务器进行 build 才解决。。。不知道是本地跟服务器 build 的结果不一样还是怎么回事。。。后端服务器这一块其实我也不是很会。。。

这个主题的海报生成部分代码来自轩陌,另外借鉴了一下他的主题结构。此主题的部分动画效果参考了下Mirages,在此对两位作者表示感谢!

这是一款简洁的单栏的适合阅读的 WordPress 主题,适合放大量文字、代码以及图片。

功能与特性:

Ver 1.0.0

  1. 简洁
  2. 响应式设计,适配各种大小屏幕
  3. 搜索自动匹配,快速到达目标文章
  4. Schema 文章评分
  5. 两种评论样式(直接显示/伸缩对话框)
  6. 两种评论头像显示(文字头像/Gravatar)
  7. 两种评论等级显示(文字/图片)
  8. 两种导航栏样式切换(就是自适应下不同屏幕宽度下的那两种)
  9. 针对 Retina 设备优化
  10. 针对移动设备优化
  11. 针对 macOS 优化(并没有针对 Windows,没设备,懒)
  12. 支持无刷新操作
  13. 黑、白及棕色多种主题
  14. 自动模式,会根据用户当地时间自动切换主题色。适配 macOS 下深色模式(Safari 浏览器)
  15. 自定义主题色调(Sass)
  16. 自带卡片式友链样式
  17. 文章目录树显示
  18. 自带代码高亮功能
  19. 文章 / 评论表情功能 (评论、文章中均可使用)
  20. 强大友好的后台配置选项
  21. 其他很多主题应有的功能

就这样。

已知问题:

Ver 1.0.0

  • 返回顶部在 Safari 下无效(已修复)
  • 字体更换在 Windows 下无效(少字体)(已修复)
  • list 样式不好看(已修复)
  • 文章外链需要新窗口打开(已修复)
  • 移动端可能无法评分(:hover 和 text-align 的问题)(已修复)
  • 移动端文章页面刷新后无法显示图标(没有加载css)(已修复)
  • 移动端弹出输入框页面放大问题(已修复)
  • 移动端搜索点击出问题(已修复,全是iOS弹出输入框的锅,太难弄了。)
  • 部分小屏幕手机侧边栏打开二级菜单时会遮挡底部工具按钮,和details页面工具按钮位置调高一点。(已修复)
  • TOC导航背景色

5分
绝妙的文章
null
腐朽的文章
  • 功能与特性:
  • 已知问题: