--- title: Add Diana/Ava Live2D Models to Hexo Icarus date: 2024-07-26 excerpt: Add Live2D models to a Hexo Icarus blog, either by loading CDN scripts directly or deploying local model assets with optional webp optimization. tags: - Blog - Hexo - Icarus - Live2d cover: https://assets.vluv.space/cover/FrontEnd/live2d_asoul.webp updated: 2026-07-08 08:12:52 lang: en i18n: cn: /live2d_Asoul translation: 2 --- ## How to Deploy ### Method 1: Add Scripts Directly This method is relatively simple. The Icarus theme defines the HTML structure in `layout.jsx`. Add the following code to the end of that file, and the Live2D model can be displayed on the webpage. Other Hexo themes can use Hexo Injector to add the scripts. ```jsx theme/icarus/layout/layout.jsx module.exports = class extends Component { render() { ... return ... ; } }; ``` ### Local Deployment Download the [Efterklang/live2d_Asoul](https://github.com/Efterklang/live2d_Asoul) repository files and place them under `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 ``` Modify `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, }; ``` Modify `layout.jsx`. ```jsx layout.jsx ``` #### Local Deployment Optimization (Optional) See the method in [[blog_performance_optimization#采取高效编码]]. Here I recommend converting `texture_00.png` in `/Model/Ava/Ava.4096/` and `/Model/Diana/Diana.4096/` to webp format, then modifying the fields in `Ava.model3.json` and `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 ++] ], ``` Compression result: - Ava `3.96MB->565KB` - Diana `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)