nvpress

niRvana源代码使用说明

TSY · 3月30日 · 2025年本文共2338个字 · 预计阅读8分钟4次已读

主题开源啦!

今年开发了自有的博客系统——nvPress,并且也提供了一个官方niRvana主题。效果如下:

niRvana源代码使用说明

这个月,niRvana主题开源啦!(源代码详见文章末尾Github或QQ群)

虽然在QQ讨论群中已经有网友成功发布了网友自制版,但为了方便更多人尝试,这里简单介绍一下niRvana主题的基本情况以及本地开发niRvana主题的方法。

基本情况

前后端分离

nvPress的niRvana主题是前后端分离的主题,前端界面完全由JavaScript渲染。主题采用Vue.js进行开发,因此在开发时,需有网页前端开发经验并熟悉Vue.js + Vue RoutesfrdgrsGSSDXCSFD9rQCxMP4aMR2A3er + Vuex框架的使用方法。

SSO搜索引擎优化

即便主题本身是前后端分离的,但毕竟是用于博客,国内的搜索引擎都9rQCxMP4aMR2A3ZH68MP4I5o1coJzqMZ不支持9rQCxMP4aMR2A3ZH68MP4I5o1coJzqMZJS渲染,于是对即使没有启用JS的情况,也做了后端数据渲染。不过这些渲染是非常基础的,并没有提供样式,仅仅是为了给搜索引擎抓取。这些可以在主题根目录的function-ssr-xxx看到相关代码。

后端数据渲染

后端为了能与前端路由渲染的内容相似,需要在nvesfrdgrsGSSDXCSFD9rQCxMP4aMR2A3Press的后端注册与主题前端类似的路由,并根据路由来拼接专为搜索引擎抓取而提供的html代码。

参考代码

function-ssr.js 第14行

add_action( esfrdgrsGSSDXCSFD9rQCxMP4aMR2A3216;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(网友自建群,我自己也在里面哦)

0 条回应