Hexo Icarus添加嘉然/向晚模型
如何部署
方法一：直接添加脚本
该方法比较简单，Icarus 主题的 layout.jsx 中定义了 html 结构，只需在该文件末尾添加以下代码，即可在网页中显示 live2d 模型；
其它 Hexo 主题可使用 Hexo Injector 添加脚本
STYLUS
File: theme/icarus/layout/layout.jsxmodule.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} /> {/* live2d_Asoul */} <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>; }};本地部署
下载Efterklang/live2d_Asoul仓库文件，放置于 theme/icarus/source/js
SHELL
└── 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", "/js/live2d_Asoul/Model/Ava/Ava.model3.json", ], tips: true, onModelLoad: onModelLoad,};修改layout.jsx
JSX
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" />本地部署优化(可选)
参见博客性能优化中的方法，这里推荐将/Model/Ava/Ava.4096/以及/Model/Diana/Diana.4096/中的texture_00.png改为 webp 格式，同时修改 Ava.model3.json 以及 Diana.model3.json中的字段
JSON
Ava.model3.json & Diana.model3.json
"Textures": [ "Ava.4096/texture_00.png" "Ava.4096/texture_00.webp"],"Textures": [ "Diana.4096/texture_00.png" "Diana.4096/texture_00.webp"],压缩效果：
- 向晚
3.96MB->565KB - 嘉然
772KB->402KB
Ref
木果阿木果
恶 e 魔 m 萝 lo 莉 li 控
如何将嘉然 live2D 添加到博客网站当看板娘
journey-ad/blog-img
journey-ad/oh-my-diana.user.js
Hexo Icarus添加嘉然/向晚模型