Add Diana/Ava Live2D Models to Hexo Icarus
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.module.exports = class extends Component { render() { ... return <html lang={language ? language.substr(0, 2) : ''}> <Head site={site} config={config} helper={helper} page={page} /> <body class={`is-${columnCount}-column`}> ... <Scripts site={site} config={config} helper={helper} page={page} /> <Search config={config} helper={helper} /> <script src="https://cdn.jsdelivr.net/npm/greensock@1.20.2/dist/TweenLite.js"></script> <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.6/dist/pixi.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display@0.3.1/dist/cubism4.min.js"></script> <link href="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.css" rel="stylesheet" type="text/css"/> <script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.js"></script> <script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio_sdk4.js"></script> <script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/load.js"></script> </body> </html>; }};
Local Deployment
Download the Efterklang/live2d_Asoul repository files and place them under theme/icarus/source/js.└── 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.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", "/js/live2d_Asoul/Model/Ava/Ava.model3.json", ], tips: true, onModelLoad: onModelLoad,};
Modify layout.jsx.<script src="/js/live2d_Asoul/TweenLite.js"></script><script src="/js/live2d_Asoul/live2dcubismcore.min.js"></script><script src="/js/live2d_Asoul/pixi.min.js"></script><script src="/js/live2d_Asoul/cubism4.min.js"></script><script src="/js/live2d_Asoul/pio.js"></script><script src="/js/live2d_Asoul/pio_sdk4.js"></script><script src="/js/live2d_Asoul/load.js"></script><link href="/js/live2d_Asoul/pio.css" rel="stylesheet" type="text/css" />
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.// File: Ava.model3.json"Textures": [ "Ava.4096/texture_00.png" "Ava.4096/texture_00.webp"],// File: Diana.model3.json"Textures": [ "Diana.4096/texture_00.png" "Diana.4096/texture_00.webp"],
Compression result:
- Ava
3.96MB->565KB - Diana
772KB->402KB