圣 · 嘉然 🪐(Live2d 看板娘

1. Eg

2. 引入

代码如下,加入至扩展设置中的 底部HTML代码 即可,当然也可以修改主题源文件 1f436.svg

<!--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", () => {
     ....
})

已发布文章均已修改

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息