362 字
1 分钟
Gridea | Live2D 看板娘手动添加教程 (主题联动)
1. 前言 | 准备
- 相关软件: Gridea
- 注意事项: 涉及对主题文件的三处改动，若主题更新需重新执行以下步骤。
资源准备
需要准备 Live2D 的相关资源文件（通常包含 assets 文件夹）。
导入资源
将 assets 文件夹放置在网站根目录下。
- Gridea 导入方法: 打开
\Gridea\static目录，将文件夹直接放入即可。
待修改文件清单
依次打开以下文件准备编辑：
\Gridea\themes\你的主题\config.json\Gridea\themes\你的主题\templates\include\head.ejs\Gridea\themes\你的主题\templates\include\footer.ejs
2. 修改步骤
1. 修改 config.json
在文件倒数第 3 行左右添加配置项。
注意: 记得在上一行末尾添加英文逗号
,。具体位置见下图：
{ "name": "Waifu", "label": "Waifu", "group": "Waifu", "value": "off", "type": "select", "options": [ { "label": "开", "value": "on" }, { "label": "关", "value": "off" } ]}2. 修改 head.ejs
在文件末尾插入：
<% if (site.customConfig.Waifu == "on") { %> <link rel="stylesheet" type="text/css" href="/assets/waifu.css"/><%}%>3. 修改 footer.ejs
在文件开头插入：
<% if (site.customConfig.Waifu == "on") { %> <div class="waifu"> <div class="waifu-tips"></div> <canvas id="live2d" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="/assets/waifu-tips.js"></script> <script src="/assets/live2d.js"></script> <script type="text/javascript"> live2d_settings['modelId'] = 3; live2d_settings['modelTexturesId'] = 0; initModel("/assets/waifu-tips.json") </script><%}%>3. 启用设置
在 Gridea 客户端中进入 主题 - 自定义 - Waifu，将其选项设为 “开”。 点击 保存 并执行 预览 或 同步，看板娘即可出现在页面右下角。
4. 后记
由于看板娘的初始设置已在 footer.ejs 中硬编码：
live2d_settings['modelId'] = 3;live2d_settings['modelTexturesId'] = 0;因此直接修改 waifu.css 无法改变模型。若需更换模型，请在 footer.ejs 中修改上述两个 ID 即可。你可以通过浏览器控制台 (F12) 查看不同看板娘对应的编号。
参考文章
Gridea | Live2D 看板娘手动添加教程 (主题联动)
https://fuc.us.ci/posts/live2d-tutorial/ 部分信息可能已经过时