简介

由于传统WordPress主题速度与开发体验不佳，且优化麻烦，所以我决定采用Nuxt重制我喜爱的Sakurairo WordPress主题。

Hachimi主题采用了Nuxt作为Web框架，使用WPgraphql和hachimi_rest与WordPress进行交互，保留了Sakurairo WordPress主题的样式，但是性能有了巨大的提升，且仍然可以享受WordPress的可视化排版与管理体验，得益于本主题特殊的设计，古腾堡区块的所见即所得在前台能得到基本的保留。

此外，本主题还拥有以下增强功能，无需额外配置即可默认拥有：

  • 全站图片优化
  • 前台CSR体验
  • 前台体积优化
  • 前台历史记录无缝加载
  • 新增的简洁风文章卡片
  • 内置的Markdown和Katex数学公式支持
  • 预渲染的代码高亮支持

所以，本主题可以做到加载过的页面缓存在前台会话中，同一标签页在穿梭中不会重复请求已加载过的页面，意味着用户返回文章列表不会有任何延迟！
CSR意味着相比pjax，加载相同的数据用户只需要拉取更少的页面数据。
经过优化的前台体积相比传统的主题体积更小，Nuxt的SSR优化也使本主题的首屏延迟更低。

目前本主题已经完成的大部分的开发任务，博主已经用上了这款主题，喜欢的话可以多看看，或者跑个分？使用F12，在开发者工具中查看lighthouse对本主题的评分。

如何使用

你可以前往Github查看详细说明：https://github.com/nicocatxzc/hachimi

方法1

使用仓库中的docker-compose.yml编排模板，填上其中的后端连接信息环境变量，然后启动编排，创建反代服务器代理至8886接口即可（如果你没有改编排模板中的网络信息）

方法2

编辑项目中的.env.example,将其中的配置项改为你的WordPress连接信息,并保存为.env 或者随后在你的运行环境添加以下变量,其中对应的值换成你自己的站点连接信息,管理员名称,以及管理员的应用程序密码:

NUXT_WORDPRESS_URL="https://your.wordpress.site/"
NUXT_WORDPRESS_USER_NAME="administrator"
NUXT_WORDPRESS_AUTH_TOKEN="yourAdminToken"

你可以在WordPress后台的编辑个人资料页面的底部找到应用程序密码设置,你可以在这里创建一个应用程序密码

然后使用pnpm run build，在构建完成后将.output目录中的内容上传至你的服务器,然后在目录下使用cd server&&node index.mjs来启动应用程序

如果遇到图片无法正常加载的情况,请在server目录下运行pnpm install sharp来安装正确的二进制模块,然后重新启动应用程序

你可以添加PORT环境变量来指定监听端口

应用程序启动完成后放行其监听端口,为其创建正确的反代服务器即可正常使用

首次使用

第一次使用请使用你的wordpress管理员账户登录应用并初始化主题设置

在后台的外观——导航栏中你可以看到插件自行创建或分配的导航栏，你可以编辑菜单来修改导航栏的内容（最大两层）， 如果你没有给主题导航栏分配菜单，那么插件将自动创建或给自己分配一个可用的菜单

本主题没有页面模板，你可以在对应页面使用短代码或古腾堡区块来渲染模板

你可以继续使用古腾堡编辑器排版，插入任何内容以及下载链接，本主题完全支持渲染，WordPress后端的内容和文件会被完全代理