主题开源啦!
今年开发了自有的博客系统——nvPress,并且也提供了一个官方niRvana主题。效果如下:
这个月,niRvana主题开源啦!(源代码详见文章末尾Github或QQ群)
虽然在QQ讨论群中已经有网友成功发布了网友自制版,但为了方便更多人尝试,这里简单介绍一下niRvana主题的基本情况以及本地开发niRvana主题的方法。
基本情况
前后端分离
nvPress的niRvana主题是前后端分离的主题,前端界面完全由JavaScript渲染。主题采用Vue.js进行开发,因此在开发时,需有网页前端开发经验并熟悉Vue.js + Vue Router + Vuex框架的使用方法。
SSO搜索引擎优化
即便主题本身是前后端分离的,但毕竟是用于博客,国内的搜索引擎都不支持JS渲染,于是对即使没有启用JS的情况,也做了后端数据渲染。不过这些渲染是非常基础的,并没有提供样式,仅仅是为了给搜索引擎抓取。这些可以在主题根目录的function-ssr-xxx看到相关代码。
后端数据渲染
后端为了能与前端路由渲染的内容相似,需要在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的本地开发版、niRvana主题源代码,并解压
2、将niRvana主题源代码中的niRvana文件夹剪切到nvPress本地开发版的nv-themes文件夹中
3、启动:nvPress
Windows 系统启动 nvPress 方法
1. 在资源管理器中打开nvPress本地开发文件夹
2. 路径定位到nvPress本地开发文件夹:在空白处按住shift点鼠标右键,选择:在此处打开命令行窗口
3. 输入 nvpress.exe 后回车
macOS 系统启动 nvPress 方法
1. 打开 终端 app
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(网友自建群,我自己也在里面哦)