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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| <script>
/*!
* Live2D Widget
* https://github.com/stevenjoezhang/live2d-widget
*/
// Recommended to use absolute path for live2d_path parameter
// live2d_path 参数建议使用绝对路径
const live2d_path = 'https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0-rc.6/dist/';
// const live2d_path = '/dist/';
// Method to encapsulate asynchronous resource loading
// 封装异步加载资源的方法
function loadExternalResource(url, type) {
return new Promise((resolve, reject) => {
let tag;
if (type === 'css') {
tag = document.createElement('link');
tag.rel = 'stylesheet';
tag.href = url;
}
else if (type === 'js') {
tag = document.createElement('script');
tag.type = 'module';
tag.src = url;
}
if (tag) {
tag.onload = () => resolve(url);
tag.onerror = () => reject(url);
document.head.appendChild(tag);
}
});
}
(async () => {
// If you are concerned about display issues on mobile devices, you can use screen.width to determine whether to load
// 如果担心手机上显示效果不佳，可以根据屏幕宽度来判断是否加载
// if (screen.width < 768) return;
// Avoid cross-origin issues with image resources
// 避免图片资源跨域问题
const OriginalImage = window.Image;
window.Image = function(...args) {
const img = new OriginalImage(...args);
img.crossOrigin = "anonymous";
return img;
};
window.Image.prototype = OriginalImage.prototype;
// Load waifu.css and waifu-tips.js
// 加载 waifu.css 和 waifu-tips.js
await Promise.all([
loadExternalResource(live2d_path + 'waifu.css', 'css'),
loadExternalResource(live2d_path + 'waifu-tips.js', 'js')
]);
// For detailed usage of configuration options, see README.en.md
// 配置选项的具体用法见 README.md
initWidget({
waifuPath: live2d_path + 'waifu-tips.json',
// cdnPath: 'https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/',
cubism2Path: live2d_path + 'live2d.min.js',
cubism5Path: 'https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js',
tools: ['hitokoto', 'asteroids', 'switch-model', 'switch-texture', 'photo', 'info', 'quit'],
logLevel: 'warn',
drag: false,
});
})();
console.log(`\n%cLive2D%cWidget%c\n`, 'padding: 8px; background: #cd3e45; font-weight: bold; font-size: large; color: white;', 'padding: 8px; background: #ff5450; font-size: large; color: #eee;', '');
/*
く__,.ヘヽ. / ,ー､ 〉
＼ ', !-─‐-i / /´
／｀ｰ' L/／｀ヽ､
/ ／, /| , , ',
ｲ / /-‐/ ｉ L_ ﾊ ヽ! i
ﾚ ﾍ 7ｲ｀ﾄ ﾚ'ｧ-ﾄ､!ハ| |
!,/7 '0' ´0iソ| |
|.从" _ ,,,, / |./ |
ﾚ'| i＞.､,,__ _,.イ / .i |
ﾚ'| | / k_７_/ﾚ'ヽ, ﾊ. |
| |/i 〈|/ i ,.ﾍ | i |
.|/ / ｉ： ﾍ! ＼ |
kヽ>､ﾊ _,.ﾍ､ /､!
!'〈//｀Ｔ´', ＼ ｀'7'ｰr'
ﾚ'ヽL__|___i,___,ンﾚ|ノ
ﾄ-,/ |___./
'ｰ' !_,.:
*/
</script>
<!-- 关键 CSS：防止首次加载时文章背景透明 -->
<style>
/* 确保文章容器始终有白色背景 */
.article-page .main-article,
main .main-article {
background: #fff !important;
}
/* 深色模式 */
[data-scheme="dark"] .article-page .main-article,
[data-scheme="dark"] main .main-article {
background: #424242 !important;
}
</style>
<!-- 自定义样式：将看板娘移动到右下角 -->
<style>
#waifu {
left: auto !important;
right: 0 !important;
bottom: 0 !important;
}
#waifu-tips {
left: auto !important;
right: 0 !important;
}
#waifu-tool {
left: auto !important;
right: 0 !important;
}
</style>
|
评论
评论区加载中...