<div class="page-header only-word">
        <div class="content flex-center " style="">
        <div class="container">
            <header class="post-header">
        <h1 class="post-title" style="">Sakurairo_Nuxt，一款高性能的Headless WordPress主题</h1>
        <div class="post-metas">
                            <span>最后更新于 2026-10-11</span>
                                    <a href="https://moecat.cc/author/nicocat/">
                    <span class="meta-author">
                        <img alt='nicocat' src='https://weavatar.com/avatar/1aeca73a20d6fea54d81269e6bc00175745e013f9a221a1ccd9492e2ff726287?s=24&#038;d=mm&#038;r=g' srcset='https://weavatar.com/avatar/1aeca73a20d6fea54d81269e6bc00175745e013f9a221a1ccd9492e2ff726287?s=48&#038;d=mm&#038;r=g 2x' class='avatar avatar-24 photo avatar-small' height='24' width='24' loading='lazy' decoding='async'/>                        nicocat                    </span>
                </a>
                                <span>271 次阅读</span>
                            </div>
    </header>
            </div>
    </div>
</div>
<div class="block-notice">
    <i class="icon warning fa-icon-solid fa-warning"></i>
    <span>由于Nuxt架构复杂，博主已迁移回经典WordPress主题，当前项目已不再维护。</span>
</div>


<h2 class="wp-block-heading">简介</h2>



<p class="wp-block-paragraph">由于传统WordPress主题速度与开发体验不佳，且优化麻烦，所以我决定采用Nuxt重制我喜爱的Sakurairo WordPress主题。</p>



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



<p class="wp-block-paragraph">此外，本主题还拥有以下增强功能，无需额外配置即可默认拥有：</p>



<ul class="wp-block-list">
<li>全站图片优化</li>



<li>前台CSR体验</li>



<li>前台体积优化</li>



<li>前台历史记录无缝加载</li>



<li>新增的简洁风文章卡片</li>



<li>内置的Markdown和Katex数学公式支持</li>



<li>预渲染的代码高亮支持</li>
</ul>



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



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



<h2 class="wp-block-heading">如何使用</h2>



<p class="wp-block-paragraph">你可以前往Github查看详细说明：<a href="https://github.com/nicocatxzc/Sakurairo_Nuxt" target="_blank" rel="noreferrer noopener nofollow">https://github.com/nicocatxzc/Sakurairo_Nuxt</a></p>



<div class="block-ghcard">
    <div class="github-card">
        <a href="https://github.com/nicocatxzc/Sakurairo_Nuxt" target="_blank" rel="noopener">
            <header class="repo-name">
                <span class="title-text">
                    <i class="icon gh-repo"></i>
                    Sakurairo_Nuxt                </span>
            </header>

                            <div class="repo-desc">
                    Sakurairo主题的nuxt重制版本                </div>
            
            <div class="repo-meta">
                                    <span class="lang">
                        <span class="dot" style="background-color: #999;"></span>
                        Vue                    </span>
                
                <span class="stars">
                    <i class="icon gh-star"></i>
                    5                </span>

                <span class="forks">
                    <i class="icon gh-fork"></i>
                    0                </span>

                                    <span class="license">
                        <i class="icon gh-license"></i>
                        gpl-2.0                    </span>
                            </div>
        </a>
    </div>
</div>


<h3 class="wp-block-heading">方法1<a href="https://github.com/nicocatxzc/hachimi#%E6%96%B9%E6%B3%951" target="_blank" rel="nofollow noopener noreferrer"></a></h3>



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



<h3 class="wp-block-heading">方法2<a href="https://github.com/nicocatxzc/hachimi#%E6%96%B9%E6%B3%952" target="_blank" rel="nofollow noopener noreferrer"></a></h3>



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



<pre class="wp-block-code"><code>NUXT_WORDPRESS_URL="https://your.wordpress.site/"
NUXT_WORDPRESS_USER_NAME="administrator"
NUXT_WORDPRESS_AUTH_TOKEN="yourAdminToken"</code></pre>



<p class="wp-block-paragraph">你可以在WordPress后台的编辑个人资料页面的底部找到应用程序密码设置,你可以在这里创建一个应用程序密码</p>



<p class="wp-block-paragraph">然后使用<code>pnpm run build</code>，在构建完成后将<code>.output</code>目录中的内容上传至你的服务器,然后在目录下使用<code>cd server&amp;&amp;node index.mjs</code>来启动应用程序</p>



<p class="wp-block-paragraph">如果遇到图片无法正常加载的情况,请在server目录下运行<code>pnpm install sharp</code>来安装正确的二进制模块,然后重新启动应用程序</p>



<p class="wp-block-paragraph">你可以添加<code>PORT</code>环境变量来指定监听端口</p>



<p class="wp-block-paragraph">应用程序启动完成后放行其监听端口,为其创建正确的反代服务器即可正常使用</p>



<h3 class="wp-block-heading">首次使用</h3>



<p class="wp-block-paragraph">第一次使用请使用你的wordpress管理员账户登录应用并初始化主题设置</p>



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



<p class="wp-block-paragraph">本主题没有页面模板，你可以在对应页面使用短代码或古腾堡区块来渲染模板</p>



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