Skip to content
Novaix 目前处于早期开发阶段,功能尚未稳定,可能存在严重的 Bug。请勿用于生产环境。

主题系统

Novaix 支持通过主题系统自定义前端界面外观。您可以安装社区主题或基于官方默认前端开发自己的主题,无需修改后端代码。

工作原理

主题是一份完整的前端构建产物(pnpm build 的输出),打包为 zip 格式。系统通过 OverlayFS 机制工作:当有主题被激活时,HTTP 请求优先从主题目录获取文件;未找到时 fallback 到系统内嵌的默认前端。

切换主题无需重启服务,激活后下一次请求即生效。

安装主题

有三种方式安装主题:

主题市场安装

在后台「主题管理」页面切换到「主题市场」Tab,浏览可用主题,点击「安装」即可自动下载并安装。已安装的主题如有新版本,会显示「更新」按钮。

上传安装

在后台「主题管理」页面点击「上传安装」按钮,选择 .zip 格式的主题包上传。系统会自动解压、校验并安装。

手动安装

将主题目录放到 Novaix 数据目录下的 data/themes/ 中:

data/themes/
└── my-theme/                ← 主题目录
    ├── theme.json           ← 主题信息(必需)
    ├── screenshot.png       ← 预览图(可选)
    └── ui/                  ← 前端构建产物(必需)
        ├── index.html
        └── assets/
            ├── index-xxx.js
            └── index-xxx.css

手动放置后,重启 Novaix 或在主题管理页点击「刷新」即可识别。

切换主题

在后台「主题管理」页面的已安装主题列表中,点击目标主题的「启用」按钮。当前使用的主题会显示「当前使用」标记。

切换后刷新浏览器页面即可看到效果。点击「恢复默认」按钮可回到系统内嵌前端。

卸载主题

在主题管理页点击「卸载」按钮,确认后系统会删除主题目录。如果卸载的是当前活跃主题,系统会自动恢复为默认前端。

主题包格式

theme.json

每个主题必须包含一个 theme.json 文件:

json
{
  "id": "flavor-dark",
  "name": "暗黑主题",
  "version": "1.0.0",
  "description": "深色风格主题,适合夜间使用",
  "author": {
    "name": "作者名",
    "url": "https://github.com/example"
  },
  "requires": "~0.2.5",
  "homepage": "https://github.com/example/novaix-theme-dark"
}
字段必填说明
id主题唯一标识,仅允许小写字母、数字和连字符,2-63 字符
name主题展示名称
version语义化版本号(如 1.0.0
description主题简短描述
author作者信息,包含 nameemailurl
requiresNovaix 版本兼容约束(如 ~0.2.5 表示兼容 0.2.x),不满足时主题无法加载
homepage主题项目主页 URL

预览图

在主题根目录放置 screenshot.png 文件,管理页面会展示为主题预览图。建议尺寸 1280×800(16:10),文件大小不超过 500KB。

ui 目录

ui/ 目录必须包含完整的前端构建产物,至少包含 index.html。这是 pnpm build 的输出目录内容。

开发主题

基于官方前端开发

推荐方式:Fork 官方前端仓库 novaix-ui,在此基础上修改。

bash
# 1. Fork 并克隆
git clone https://github.com/your-name/novaix-ui.git
cd novaix-ui

# 2. 安装依赖
pnpm install

# 3. 开发(连接到你的 Novaix 后端)
pnpm dev

# 4. 构建
pnpm build

打包为主题

构建完成后,将产物打包为主题 zip:

bash
# 创建主题目录结构
mkdir -p my-theme/ui
cp -r dist/* my-theme/ui/

# 创建 theme.json
cat > my-theme/theme.json << 'EOF'
{
  "id": "my-theme",
  "name": "我的主题",
  "version": "1.0.0",
  "author": {"name": "你的名字"},
  "requires": "~0.2.5"
}
EOF

# 可选:添加预览图
cp screenshot.png my-theme/

# 打包
cd my-theme && zip -r ../my-theme.zip . && cd ..

生成的 my-theme.zip 即可通过后台上传安装。

版本兼容性

主题是完整的前端构建产物,与后端 API 紧密耦合。theme.json 中的 requires 字段用于声明兼容的 Novaix 版本范围:

约束含义示例
~0.2.5兼容 0.2.x(patch 更新)匹配 0.2.5、0.2.6,不匹配 0.3.0
^0.2.5兼容 0.x.x(minor 更新)匹配 0.2.5、0.3.0,不匹配 1.0.0
>=0.2.5大于等于指定版本匹配所有 ≥0.2.5 的版本

WARNING

建议使用 ~ 约束(tilde),仅允许 patch 版本更新。前端与后端 API 强耦合,minor 版本升级可能引入新的 API 接口或变更响应格式,导致旧主题不兼容。

主题市场配置

主题市场默认从 Novaix 官方索引获取可用主题列表。如需使用自定义源,可在配置文件中设置:

yaml
theme:
  dir: data/themes
  marketplace_url: https://your-server.com/themes/index.json

TIP

主题目录的路径可在配置文件中通过 theme.dir 自定义,默认为 data/themes。也可通过环境变量 NOVAIX_THEME_DIR 覆盖。

故障恢复

如果安装的主题存在 bug 导致页面白屏或无法操作,可以在浏览器地址栏的 URL 后面加上 ?_fallback 参数恢复到内嵌默认前端:

https://your-domain.com/admin/themes?_fallback

访问后系统会设置一个 30 分钟的 cookie,期间所有请求(包括 JS/CSS 等静态资源)都使用内嵌默认前端,确保页面完整可用。进入默认前端后,你可以在主题管理页面正常切换或卸载有问题的主题。

修复主题问题后,访问 ?_fallback=0 可立即退出 fallback 模式,恢复使用活跃主题:

https://your-domain.com/admin/themes?_fallback=0

不手动退出的话,cookie 会在 30 分钟后自动过期。

注意事项

  • 主题包(zip)最大 50MB,解压后总体积最大 200MB
  • 切换主题后需要刷新浏览器页面,已缓存的旧资源不会自动更新
  • 版本不兼容的主题会显示错误状态,无法激活
  • 主题只影响前端界面,不会修改后端逻辑或数据
  • 多个主题可以同时安装,但同一时间只能激活一个
  • 前端源码开源在 novaix-ui,可 fork 后开发自定义主题