--- title: Hexo Icarus添加嘉然/向晚模型 date: 2024-07-26 excerpt: 本文介绍如何给Hexo博客添加Live2d模型 tags: - Blog - Hexo - Icarus - Asoul - Live2d cover: https://assets.vluv.space/cover/FrontEnd/live2d_asoul.webp --- ## 如何部署 ### 方法一：直接添加脚本该方法比较简单，Icarus 主题的 `layout.jsx` 中定义了 html 结构，只需在该文件末尾添加以下代码，即可在网页中显示 live2d 模型；其它 Hexo 主题可使用 Hexo Injector 添加脚本 ```stylus File: theme/icarus/layout/layout.jsx module.exports = class extends Component { render() { ... return ... {/* live2d_Asoul */} // [!code ++] // [!code ++] // [!code ++] // [!code ++] // [!code ++] // [!code ++] // [!code ++] // [!code ++] // [!code ++] ; } }; ``` ### 本地部署下载[Efterklang/live2d_Asoul](https://github.com/Efterklang/live2d_Asoul)仓库文件，放置于 `theme/icarus/source/js` ```wikitext └──  live2d_Asoul/ ├──  Model/ │ ├──  Ava/ │ │ ├──  Ava.4096/ │ │ ├──  Ava.moc3 │ │ ├──  Ava.model3.json │ │ ├──  Ava.physics3.json │ │ ├──  motions/ │ │ ├──  raw.ex.json │ │ └──  raw.model3.json │ └──  Diana/ │ ├──  Diana.4096/ │ ├──  Diana.moc3 │ ├──  Diana.model3.json │ ├──  Diana.physics3.json │ ├──  motions/ │ ├──  raw.ex.json │ └──  raw.model3.json ├──  TweenLite.js ├──  cubism4.min.js ├──  live2dcubismcore.min.js ├──  load.js ├──  pio.css ├──  pio.js ├──  pio_sdk4.js └──  pixi.min.js ``` 修改 `load.json` ```javascript load.json const initConfig = { mode: "fixed", hidden: true, content: { link: 引流[Math.floor(Math.random() * 引流.length)], welcome: ["Hi!"], touch: "", skin: ["诶，想看看其他团员吗？", "替换后入场文本"], custom: [ { selector: ".comment-form", text: "Content Tooltip" }, { selector: ".home-social a:last-child", text: "Blog Tooltip" }, { selector: ".list .postname", type: "read" }, { selector: ".post-content a, .page-content a, .post a", type: "link" }, ], }, night: "toggleNightMode()", model: [ "/js/live2d_Asoul/Model/Diana/Diana.model3.json", // [!code ++] "/js/live2d_Asoul/Model/Ava/Ava.model3.json", // [!code ++] ], tips: true, onModelLoad: onModelLoad, }; ``` 修改`layout.jsx` ```jsx layout.jsx ``` #### 本地部署优化(可选) 参见 [[blog_performance_optimization#采取高效编码]] 中的方法，这里推荐将 `/Model/Ava/Ava.4096/` 以及 `/Model/Diana/Diana.4096/` 中的 `texture_00.png` 改为 webp 格式，同时修改 `Ava.model3.json` 以及 `Diana.model3.json` 中的字段 ```json // File: Ava.model3.json "Textures": [ "Ava.4096/texture_00.png" // [!code --] "Ava.4096/texture_00.webp" // [!code ++] ], // File: Diana.model3.json "Textures": [ "Diana.4096/texture_00.png" // [!code --] "Diana.4096/texture_00.webp" // [!code ++] ], ``` 压缩效果： - 向晚`3.96MB->565KB` - 嘉然`772KB->402KB` ## Ref [木果阿木果](https://space.bilibili.com/886695) [恶 e 魔 m 萝 lo 莉 li 控](https://nocilol.me) [如何将嘉然 live2D 添加到博客网站当看板娘](https://www.moeshou.com/310/) [journey-ad/blog-img](https://github.com/journey-ad/blog-img/tree/master/live2d) [journey-ad/oh-my-diana.user.js](https://gist.github.com/journey-ad/be8d977683297fd32d5680cdd6e914a7)