-
这是个人版本的 LiteLoaderQQNT 主题模板
-
已提供基础 scss 结构
-
技术栈:electron-vite + pnpm + js + scss,支持 scss 热更新
-
Linter:eslint + prettier + stylelint
- node >= 20
- pnpm >= 9
- 开发环境是 win10,未测试其他系统
-
使用 Template 创建自己的 repo,并 clone 到 LiteLoader plugins 文件夹下
-
进入 repo 文件夹,运行
pnpm i
安装依赖
-
修改
package.json
中的name
和version
字段 -
修改
manifest.json
中的所需字段,不要修改injects
部分 -
用自己的 slug 关键词替换代码中全部的
theme_template
-
运行
pnpm devbuild
构建 dev 版本,产物在 dist 文件夹下 -
重启 QQ,查看设置页是否出现新插件、是否报错
-
运行
pnpm devbuild
-
修改 styles 文件夹下的 scss 文件,不出意外的话会实时生效,成功即可继续编写主题
-
styles/chat/*.scss
是聊天页样式,styles/setting/*.scss
是设置页样式 -
index.scss
是 scss 入口 -
项目中已给出聊天页 scss 结构,按需使用
-
样式热更新基于文件监听和 IPC 实现,变更 scss 入口路径需同时修改 main 中对应代码
-
样式较多时,由于 scss 编译时间增加,热更新会有短暂延迟
-
-
修改 renderer 中的 JS 代码后,需
pnpm devbuild
并在 devtools 内按 F5 刷新页面 -
修改 main 或 preload 中的 JS 代码后,需
pnpm devbuild
并重启 QQ -
发布前,修改 README 内容,替换 public 文件夹下的 icon 文件
- icon 可在 Icônes 获取
-
发布时,需使用
pnpm build
构建 prod 版本,prod 版本不含样式热更和文件监听 -
产物由
electron-vite
控制,默认三个文件夹对应三个产物,可按需修改- 产物不含样式文件,css 会以 inline 形式包含在
renderer/index.js
内
- 产物不含样式文件,css 会以 inline 形式包含在