工具教程

为你的博客添加 Live2D 看板娘

cnguu · 11月2日 · 2018年 · · ·

前言

最近看到一个 Typecho 插件,非常好玩:22&33 看板娘

于是乎,在两天两夜不眠不休下,终于移植到 Hexo 博客中:Github

环境

框架测试主题依赖
Hexo 3.7.0NexT 6.5.0JQuery
Font Awesome

主题修改

修改文件 theme/next/layout/_layout.swig,在 </body> 前添加以下内容:

{% include '_third-party/l2d233.swig' %}

在目录 theme/next/layout/_third-party 下新建文件 l2d233.swig`,内容如下:

{% if config.l2d233.enable %}
    <link rel="stylesheet" href="{{ url_for(theme.vendors._internal + '/l2d233/css/waifu.min.css') }}?v={{ version }}" type="text/css">
    <div class="waifu">
        <div class="waifu-tips"></div>
        <canvas id="live2d" width="230" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fa fa-home"></span>
            <span class="fa fa-comments"></span>
            <span class="fa fa-drivers-license-o"></span>
            <span class="fa fa-street-view"></span>
            <span class="fa fa-camera"></span>
            <span class="fa fa-info-circle"></span>
            <span class="fa fa-close"></span>
        </div>
    </div>
    <script src="{{ url_for(theme.vendors._internal + '/l2d233/js/live2d.min.js') }}?v={{ version }}"></script>
    <script src="{{ url_for(theme.vendors._internal + '/l2d233/js/waifu-tips.min.js') }}?v={{ version }}"></script>
{% endif %}

修改站点配置文件

# 看板娘
l2d233:
  enable: true

特点

  1. 22 和 33 可互换
  2. 一键换衣
  3. 一言 API 数据本地化(四百多句)
  4. 小屏幕自动隐藏
0 条回应