Hexo Icarus添加嘉然/向晚模型
发表Dev / FrontEnd5 分钟读完 (约762字)Views:   

Hexo Icarus添加嘉然/向晚模型

如何部署

方法一：直接添加脚本

该方法比较简单，Icarus 主题的 layout.jsx 中定义了 html 结构，只需在该文件末尾添加以下代码，即可在网页中显示 live2d 模型；
其它Hexo主题可使用Hexo Injector添加脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
File: theme/icarus/layout/layout.jsx

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} />

+               {/* live2d_Asoul */}
+               <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TweenLite.js"></script>
+               <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
+               <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
+               <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>;
    }
};

该方法在国内不使用魔法加速的情况下，加载速度较慢，且不能修改样式；

针对显示效果，个人建议对pio.css进行如下两处修改

1
2
3
4
5
6
7
8
9
10
11
12
.pio-container {
  bottom: 0;
+ z-index: 2000;
  color: #666;
  position: fixed;
  user-select: none;
}

.pio-action .pio-night {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M186.744 40.493a15.34 15.34 0 0 1 9.956-.097 15.743 15.743 0 0 1 10.643 17.018l-.639 2.794-2.549 8.484a230.05 230.05 0 0 0 21.824 175.818c41.315 73.085 119.925 117.041 203.82 113.977l8.093-.491h2.649c11.217 1.139 18.309 12.601 14.32 23.148l-1.374 2.795-2.256 3.727-6.472 8.533a225.604 225.604 0 0 1-62.629 54.194c-107.795 63.019-245.655 25.599-307.89-83.57-62.235-109.12-25.257-248.695 82.49-311.715a219.638 219.638 0 0 1 17.755-9.319l9.022-4.07 3.286-1.226zm176.702 52.576a4.402 4.402 0 0 1 2.108 2.156l11.181 23.982c1.08 2.305 2.944 4.218 5.297 5.296l24.031 11.182c3.06 1.482 3.366 5.717.554 7.626-.176.12-.361.227-.554.32l-24.031 11.181a10.994 10.994 0 0 0-5.297 5.296l-11.181 24.031c-1.482 3.058-5.717 3.366-7.625.554a4.11 4.11 0 0 1-.32-.554l-11.23-24.031a10.998 10.998 0 0 0-5.297-5.296l-23.981-11.181c-3.06-1.482-3.367-5.717-.555-7.626.176-.12.362-.227.555-.32l24.029-11.182a10.993 10.993 0 0 0 5.249-5.296l11.23-24.031a4.412 4.412 0 0 1 5.837-2.107zm-62.825-73.812c.491.246.883.589 1.08 1.08l5.59 11.967a5.346 5.346 0 0 0 2.649 2.647l12.015 5.592c1.548.699 1.757 2.812.377 3.804-.12.084-.244.157-.377.218l-12.015 5.589a5.496 5.496 0 0 0-2.649 2.649l-5.59 11.966c-.778 1.512-2.9 1.611-3.819.182a2.694 2.694 0 0 1-.105-.182l-5.64-11.966a5.491 5.491 0 0 0-2.649-2.649l-11.966-5.64c-1.548-.699-1.757-2.814-.377-3.803.119-.085.244-.158.377-.218l11.966-5.589a5.498 5.498 0 0 0 2.649-2.65l5.591-11.965a2.205 2.205 0 0 1 2.942-1.08z' fill='%23FFCB3C'/%3E%3C/svg%3E");
+ display: none;
}

如果只希望修改部分样式，可以选择自己 fork github repo 后修改文件再上传至 github
下方 src url 中修改为自己仓库的 url；格式gh/<username>/<repo>/<path>

1
2
3
4
5
6
7
8
<script src="https://cdn.jsdelivr.net/gh/efterklang/live2d_Asoul/scripts/TweenLite.js"></script>
<script src="https://cdn.jsdelivr.net/gh/efterklang/live2d_Asoul/scripts/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/efterklang/live2d_Asoul/scripts/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/efterklang/live2d_Asoul/scripts/cubism4.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/efterklang/live2d_Asoul/scripts/pio.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/gh/efterklang/live2d_Asoul/live2d/lib/pio.js"></script>
<script src="https://cdn.jsdelivr.net/gh/efterklang/live2d_Asoul/live2d/lib/pio_sdk4.js"></script>
<script src="https://cdn.jsdelivr.net/gh/efterklang/live2d_Asoul/live2d/lib/load.js"></script>

本地部署

将所需文件放置于 theme\icarus\source 下，路径可参考如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
PATH: Efterklang.github.io\themes\icarus\source

├─css
│  └─...
├─img
└─js
    ├─...
    └─live2d_Asoul

##################################################

$ ll js\live2d_Asoul

-a--- 144k 26 Jul 00:57 cubism4.min.js
-a--- 207k 26 Jul 00:56 live2dcubismcore.min.js
-a--- 6.4k 26 Jul 22:35 load.js
da---    - 26 Jul 22:31 Model
-a--- 7.8k 26 Jul 22:23 pio.css
-a---  11k 26 Jul 00:59 pio.js
-a--- 4.7k 26 Jul 00:59 pio_sdk4.js
-a--- 403k 26 Jul 00:57 pixi.min.js
-a---  28k 26 Jul 22:29 TweenLite.js

##################################################

$ ll js\live2d_Asoul\Model
da--- - 26 Jul 22:31 Ava
da--- - 26 Jul 22:31 Diana
da--- - 26 Jul 22:31 lib

修改 load.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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

1
2
3
4
5
6
7
8
<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" />

本地部署优化(可选)

参见Blog性能优化记录中的方法，这里推荐使用webp格式存储model_texture
优化后向晚模型加载速度有较显著的提升

将/Model/Ava/Ava.4096/以及/Model/Diana/Diana.4096/中的texture_00.png改为webp格式；
同理对Ava.model3.json和Diana.model3.json中Textures字段进行如下修改;

  • 向晚3.96MB->565KB
  • 嘉然772KB->402KB
1
2
3
4
5
6
7
8
9
10
11
12
13
# 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"
],

Ref

木果阿木果
恶 e 魔 m 萝 lo 莉 li 控
如何将嘉然 live2D 添加到博客网站当看板娘
journey-ad/blog-img
journey-ad/oh-my-diana.user.js

   Mitiglinide.

Hexo Icarus添加嘉然/向晚模型

https://vluv.space/Dev/FrontEnd/live2d_Asoul/

作者

GnixAij

发布于

2024-07-26

更新于

2025-02-20

许可协议

#

评论

×