官方live 2d 地址

我这里使用的是张书樵大神的项目,以hexo-theme-butterfly为例。

  1. 下载 张书樵live2d,解压到本地博客目录的 themes/Butterfly/source 下,修改文件夹名为 live2d-widget,修改项目中的 autoload.js 文件:
    1
    const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
    改为
    1
    const live2d_path = "/live2d-widget/";
  1. 在/themes/Butterfly/layout/includes/layout.pug中,新增如下内容:

    1
    <script src="/live2d-widget/autoload.js"></script>
  2. 在 主题配置文件 中,新增如下内容:

    1
    2
    live2d:
    enable: true

想修改看板娘大小、位置、格式、文本内容等,可查看并修改 waifu-tips.jswaifu-tips.jsonwaifu.css

预览效果:
图片

  1. 注意:此项目需要 jQuery 和 font-awesome支持。我的项目因为其他插件需要,所以在很早之前就下载这两个文件到本地关联了,因此不需要再重复添加。若是没有添加依赖的小伙伴,可以在页面中加载。例如在<head>中加入:
    1
    2
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">