主题开源啦！
今年开发了自有的博客系统——nvPress，并且也提供了一个官方niRvana主题。效果如下：
这个月，niRvana主题开源啦！（源代码详见文章末尾Github或QQ群）
虽然在QQ讨论群中已经有网友成功发布了网友自制版，但为了方便更多人尝试，这里简单介绍一下niRvana主题的基本情况以及本地开发niRvana主题的方法。
基本情况
前后端分离
nvPress的niRv
SSO搜索引擎优化
即便主
后端数据渲染
后端为了能与前端路由渲染的内容相似，需要在nvPress的后端注册与主题前端类似的路由，并根据路由来拼接专为搜索引擎抓取而提供的html代码。
参考代码
function-ssr.js 第14行
add_action( 'register_server_side_render_router' , express=>{ ... } )前后端配合方式
在同一个地址中为了既能为让不支持JS的搜索引擎抓取，又能让浏览器正常使用JS渲染，niRvana主题取巧的采用了一些处理方式：
对于Vue.js而言，有经验的前端开发应该知道：它只需要有打包完成的js和css文件，就可以在 #app 中渲染出整个页面，而 #app 中的任何内容都将被渲染出来的内容替换。
因此，只需要将专为搜索引擎抓取的数据用后端渲染在 #app 标签中即可。这样不支持JS的搜索引擎，可以看到标签中的内容进行抓取；支持JS的浏览器又可以渲染出正常的页面来覆盖专为搜索引擎提供的内容。最简洁的形式就如同下面一样：
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<script type="module" crossorigin="" src="/浏览器使用的JS.js"></script>
<link rel="stylesheet" href="/浏览器使用的CSS.css">
</head>
<body>
<div id="app">
<div>这里是给搜索引擎抓取的内容，vue渲染的时候会覆盖掉</div>
</div>
</body>
</html>
于是，这又回到后端渲染了！总结起来就是：这个主题本质是后端渲染，但后端只渲染搜索引擎抓取的内容，主题前台显示的内容仍然是前后端分离渲染的。自定义修改主题
本地开发调试主题
启动nvPress后端程序
1、下载：nvPress的本地开发版、niRvan
2、将niRvana主题源代码中的niRvana文件夹剪切到nvPress本地开发版的nv-themes文件夹中
3、启动：nvPress
Windows 系统启动 nvPress 方法
1. 在资源管理器中打开nvPress本地开发文件夹
2. 路径定位到nvPress本地开发文件夹：在空白处按住shift点鼠标右键，选择：在此处打开命令行窗口
3. 输入 nvpress.exe 后回车
macOS 系统启动 nvPress 方法
1. 打开&nb
2. 路径定位到nvPress本地开发文件夹：输入”cd”空格，在 访达 app 将nvPress本地开发文件夹图标拖到终端的对话框中后点击回车
3. 拖入nvpress程序到终端后回车
此时，终端中会显示nvPress启动成功并告诉你后台地址。
4、访问nvPress后台地址http://localhost:8081/nv-admin/
5、完成简单的注册流程后，登录后台打开外观-主题
6、启动 niRvana 主题然后重启 nvPress
快速重启 nvPress 方法
凡是使用第三步方法启动nvPress的，均可用下面的方式快速重启。只要修改了后端代码，要让后端代码加载，就用得到这个方法！
1. 在终端中按Ctrl+C（可以愉快的多按几次）
2. 按下方
3. 回车
启动niRvana主题前端
1、安装 nodejs （前端开发者都有的东西，我就不多说了，建议使用v16.15这个版本，毕竟niRvana是在这个版本上开发的，其他版本应该问题不大）
2、定位到nvPress\nv-themes\niRvana\source目录
3、使用npm install安装依赖
4、使用npm run dev启动项目后，自动打开前台页面http://localhost:3000
打包发布
1、 定位到nvPress\nv-themes\niRvana\source目录
2、 使用npm run build打包vue项目
打包完成后，将在niRvana根目录生成web文件夹，这就是主题前端的全部代码了。
niRvana文件夹中的source是源代码，发布时不需要发布此文件夹。根目录中的所有文件以及src文件夹，是后端需要使用的代码。需要配套发布。
最终的目录结构大概是：
niRvana
- srcs（文件夹）
- web（文件夹）
- theme.json
- function.js
- custom_functions.js
- ...其他的js文件最后，喜欢这个主题并且有能力自己增加功能的人，可以在Github搜索nvPress项目下载来用。
QQ讨论群：611246443（官方唯一群，仅200人，不定期清理非活跃用户）
QQ讨论群：790411996（网友自建群，我自己也在里面哦）
您好，这是一条评论。若需要审核、编辑或删除评论，请访问仪表盘的评论界面。评论者头像来自 Gravatar。