基于 Nuxtjs SSR 渲染的 WordPress 主题 Lareina

发布于
基于 Nuxtjs SSR 渲染的 WordPress 主题 Lareina
本文导览

基于 Nuxtjs SSR 渲染的 WordPress 主题 Lareina

外形相近,内里大不同

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

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

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

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

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

功能与特性:

Ver 1.0.0

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

就这样。

已知问题:

Ver 1.0.0

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