圣 · 嘉然 🪐(Live2d 看板娘
1. Eg
2. 引入
代码如下,加入至扩展设置中的 底部HTML代码 即可,当然也可以修改主题源文件
<!--live2d start-->
<!-- Load TweenLite -->
<script src="https://alioss.xiamoqwq.com/blog/npm/greensock%401.20.2/dist/TweenLite.js"></script>
<!-- Copyrighted cubism SDK -->
<script src="https://xiamo.oss-cn-shenzhen.aliyuncs.com/live2d/live2dcubismcore.min.js"></script>
<!-- Load Pixi (dependency for cubism 2/4 integrated loader) -->
<script src="https://alioss.xiamoqwq.com/blog/npm/pixi.js@5.3.6/dist/pixi.min.js"></script>
<!-- Load cubism 4 integrated loader -->
<script src="https://alioss.xiamoqwq.com/blog/npm/pixi-live2d-display@0.3.1/dist/cubism4.min.js"></script>
<!-- Load pio and alternative loader -->
<link href="https://alioss.xiamoqwq.com/blog/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.css" rel="stylesheet"
type="text/css"/>
<script src="https://alioss.xiamoqwq.com/blog/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.js"></script>
<script src="https://alioss.xiamoqwq.com/blog/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio_sdk4.js"></script>
<!-- 嘉然 -->
<script src="https://alioss.xiamoqwq.com/blog/gh/journey-ad/blog-img@76ba2b3/live2d/lib/load.js"></script>
<!--live2d 夜间模式控件-->
<script>
function toggleNightMode() {
if ( $('body').hasClass('dark')) {
$('body').removeClass('dark');
} else {
$('body').addClass('dark');
}
}
</script>
<style>
#pio {
width: 14rem !important;
height: 14rem !important;
}
#pio-container {
width: auto !important;
z-index: 999;
}
.pio-action {
top: unset !important;
transform: translateX(20px);
overflow: hidden;
}
.pio-container .pio-dialog {
top: -5em !important;
}
</style>
<!--live2d end-->
3. Another
顺带也说一说之前文章的缺陷
之前有用到 window.onload ,而博客中应该尽量避免使用它才对,因为多个 window.onload 会导致覆盖
// =
window.onload = () => {}
这里应使用监听来代替,即
window.addEventListener("DOMContentLoaded", () => {
....
})
已发布文章均已修改
空空如也!