WordPress添加2D模型看板娘

前言

WordPress相比较hexo首页的两边有点空的感觉，所以我们可以加点东西，比如可爱的看板娘

界面截图

教程

首先下载Live2D看板娘的主体文件，然后到CoreNext主题的后台添加页头代码

<link rel="stylesheet" type="text/css" href="https://www.xrbk.cn/live2d/assets/waifu.css"/>

再到页脚代码里添加如下代码

  <div class="waifu">
        <div class="waifu-tips"></div>
        <canvas id="live2d" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
    
    <script src="https://www.xrbk.cn/live2d/assets/waifu-tips.js"></script>
    <script src="https://www.xrbk.cn/live2d/assets/live2d.js"></script>
    
    <script type="text/javascript">
        live2d_settings['modelId'] = 1;
        live2d_settings['modelTexturesId'] = 87;
    	initModel("/live2d/assets/waifu-tips.json")
    </script>

如果想要修改看板娘的设置可以到live2d -assets -waifu-tips.js 中修改还有waifu-tips.json 文件里修改。

文件下载

Live2D

来源：蓝奏云

立即下载