添加嘉然Live2D以及修复夜间模式按钮

发布于 2022-09-07  1131 次阅读


  • 上面的教程简单来说,分4步
    • 1. 下载文件(原教程里关注公众号)
    • 2. 上传到服务器
    • 3. 将下列代码插入到footer.php文件的<footer>标签里即可
    • 4. 需要将代码里面的路径改成自己的路径


<!-- Load TweenLite -->
<script src="https://cdn.jsdelivr.net/npm/greensock@1.20.2/dist/TweenLite.js"></script>
 
<!-- Copyrighted cubism SDK -->
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<!-- Load Pixi (dependency for cubism 2/4 integrated loader) -->
<script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.6/dist/pixi.min.js"></script>
<!-- Load cubism 4 integrated loader -->
<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>

  • 可选项:修复嘉然夜间模式按钮,这里(以sakurairo主题为例) 打开live2d内的pio.js,找到175行左右的夜间模式,将下列代码插入即可
document.documentElement.style.backgroundColor = "#333";
document.getElementsByClassName("site-content")[0].style.backgroundColor = "#333";
document.body.classList.add("dark");
  • 结果如下:(不同主题黑暗模式的语句不一样,你可以把对应的语句放进去即可)


// 夜间模式
if (prop.night) {
    elements.night.onclick = function () {
        console.log("修复夜间模式按钮 -- CC");
        document.documentElement.style.backgroundColor = "#333";
        document.getElementsByClassName("site-content")[0].style.backgroundColor = "#333";
        document.body.classList.add("dark");
        //eval(prop.night);
    };
    elements.night.onmouseover = function () {
        modules.render("夜间点击这里可以保护眼睛呢");
    };
    current.menu.appendChild(elements.night);
}

我已经躺好啦~