一、wordpress sakura 美化 添加看版娘

一、wordpress sakura 美化 添加看版娘

（一）、简单使用

1、资源下载

live2d-widget：https://github.com/stevenjoezhang/live2d-widget
live2d_api：https://github.com/fghrsh/live2d_api

2、资源上传

上传资源到主题Sakura 根目录下。

3、引入live2d

编辑Sakura主题中的文件header.php，引入live2d

注：

• <?php echo get_template_directory_uri(); ?>：表示获取live2d在服务器上的位置。如果live2d是放在服务器根目录，可以不用添加。
• live2d也可以放在在线地址（而不是服务器上）之后添加引用即可

（二）目录说明

• live2d_api

目录结构
│  model_list.json              // 模型列表
│
├─model                         // 模型路径
│  └─GroupName                  // 模组分组
│      └─ModelName              // 模型名称
│
├─add                           // 更新皮肤列表
├─get                           // 获取模型配置
├─rand                          // 随机切换模型
├─rand_textures                 // 随机切换皮肤
├─switch                        // 顺序切换模型
├─switch_textures               // 顺序切换皮肤
└─tools
        modelList.php           // 列出模型列表
        modelTextures.php       // 列出皮肤列表
        name-to-lower.php       // 文件名格式化

model_list.json
│
├─model
│  ├─Group1
│  │  ├─Model1
│  │  │      index.json
│  │  │
│  │  └─Model2
│  │          index.json
│  │
│  ├─Group2
│  │  └─Model1
│  │          index.json
│  │
│  └─GroupName
│     └─ModelName
│          │  index.json
│          │  model.moc
│          │
│          ├─motions
│          └─textures
│

（三）、首页隐藏

首页全屏时隐藏看版娘，引入js

// live2d-show.js
 let observer = new IntersectionObserver((entries) => {
        // 可见性修改
        let displayStr = entries[0].intersectionRatio > 0.8 ? "none" : "block";
        let live2d_dom = document.getElementById("waifu");
        if(live2d_dom){
            live2d_dom.style.display = displayStr;
        }
    }, { threshold: [0, 0.1, 0.8, 1]})

let dom = document.getElementById("main-container");
if(dom.firstElementChild){
    observer.observe(dom.firstElementChild)
}

// footer.php
...
<?php endif; ?>
</body>
<!-- 看板娘首页隐藏 -->
<script src="<?php echo get_template_directory_uri(); ?>/js/live2d-show.js"></script>
</html>