本文章部分内容转载自: https://akilar.top/posts/5b8f515f/
插件作者原文: 在网页中添加 Live2D 看板娘

看板娘太可爱辣，谁不想拥有一个可爱又伶俐的看板娘呢~

配置教程参考https://akilar.top/posts/5b8f515f/ ,下面是我整理的一些配置方法

Hexo插件版看板娘（不能换装）

点击查看方法

安装

  1. 在Hexo根目录[Blogroot]下打开终端，输入以下指令安装必要插件。

    1
    npm install --save hexo-helper-live2d

  2. 打开站点配置文件[Blogroot]\config.yml
    搜索live2d,按照如下注释内容指示进行操作。
    如果没有搜到live2d的配置项，就直接把以下内容复制到最底部。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true #开关插件版看板娘
      scriptFrom: local # 默认
      pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
      pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
      pluginModelPath: assets/ # 模型文件相对与插件根目录路径
      # scriptFrom: jsdelivr # jsdelivr CDN
      # scriptFrom: unpkg # unpkg CDN
      # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
      tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
      debug: false # 调试, 是否在控制台输出日志
      model:
        use: live2d-widget-model-wanko # npm-module package name
        # use: wanko # 博客根目录/live2d_models/ 下的目录名
        # use: ./wives/wanko # 相对于博客根目录的路径
        # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
      display:
        position: right #控制看板娘位置
        width: 150 #控制看板娘大小
        height: 300 #控制看板娘大小
      mobile:
        show: true # 手机中是否展示

  3. 完成后保存修改，在Hexo根目录下运行指令

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    之所以必须要使用hexo clean是因为我们需要清空缓存重新生成静态页面，不然看板娘没被加入生成的静态页面里，是不会出现的。

更换看板娘

  1. 同样是在Hexo根目录[Blogroot]下，打开终端，选择想要的看板娘进行安装，例如我这里用到的是 live2d-widget-model-koharu，一个Q版小正太。其他的模型也可以在模型预览里查看以供选择。

  2. 输入指令

    1
    npm install --save live2d-widget-model-koharu

  3. 然后在站点配置文件[Blogroot]\_config.yml里找到model项修改为期望的模型。

    1
    2
    3
    model:
    	use: live2d-widget-model-koharu
    	# 默认为live2d-widget-model-wanko

  4. 之后按部就班的运行

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    就能在localhost:4000上查看效果了。

卸载看板娘

卸载插件和卸载模型的指令都是通过npm进行操作的。在博客根目录[Blogroot]打开终端，输入：

1
2
npm uninstall hexo-helper-live2d #卸载看板娘插件
npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称

卸载后为了保证配置项不出错，记得把[Blogroot]\_config.yml里的配置项给注释或者删除掉。

大神魔改看板娘（会说话，能换装）

点击查看方法

配置流程：

  1. 在 [Blogroot]\themes\butterfly\source\ 目录下打开终端，输入

    1
    git clone https://github.com/stevenjoezhang/live2d-widget.git live2d-widget

    这行指令的意思就是 clone 这个项目到 source 路径下并重命名为 live2d-widget。emm，貌似本来就叫 live2d-widget。反正算是一个踩坑点。如果是用下载项目压缩包，解压后放到这里的，也记得把文件夹更名为live2d-widget。

  2. 找到路径 [Blogroot]\themes\butterfly\source\live2d-widget\autoload.js，打开 autoload.js，修改内容：

    1
    2
    -	const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
    +	const live2d_path = "/live2d-widget/";

    此处引用一下参考教程原话：autoload.js 中的注释的绝对地址指的是，将资源打包放到 [Blogroot]/theme/next/source 中后，以 [Blogroot]/theme/next/source 为根目录（/）的绝对路径。

  3. 在 Butterfly 的主题配置文件 [Blogroot]\_config.butterfly.yml 中，
    butterfly 主题其实自带 fontawesome 依赖，无需引入，

    1
    2
    3
    4
    5
    6
    7
    8
    9
        # Inject
        # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
        # 插入代码到头部 </head> 之前 和 底部 </body> 之前
        inject:
          head:
            # - <link rel="stylesheet" href="/xxx.css">
          bottom:
            # - <script src="xxxx"></script>
    +       - <script defer src="/live2d-widget/autoload.js"></script>

  4. 保存所有文件的修改，然后照例执行

    1
    2
    3
    hexo clean
    hexo g
    hexo s

    就能在 localhost:4000 看到预览了。

本地化配置 （本站使用）

  1. fork两个github仓库，https://github.com/Akilarlxh/live2d_api (或原作者的https://github.com/fghrsh/live2d_api) 和 https://github.com/stevenjoezhang/live2d-widget
    ps: live2d-widget 是看板娘主要的源文件，live2d_api 是看板娘的模型文件，可自定义添加模型
    本站使用的两个仓库地址为

  2. 修改live2d_api项目内的~\live2d-widget\autoload.js，修改cdnPath为自己fork的live2d_api仓库发包之后的cdn路径
    这里cdn地址可根据需要加上@latest，如https://npm.elemecdn.com/jamesyao-live2dapi@latest/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  // 加载 waifu.css live2d.min.js waifu-tips.js
  if (screen.width >= 768) {
  	Promise.all([
  		loadExternalResource(live2d_path + "waifu.css", "css"),
  		loadExternalResource(live2d_path + "live2d.min.js", "js"),
  		loadExternalResource(live2d_path + "waifu-tips.js", "js")
  	]).then(() => {
  		initWidget({
  			waifuPath: live2d_path + "waifu-tips.json",
  			//apiPath: "https://live2d.fghrsh.net/api/",
-  			cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
+  			cdnPath: "https://npm.elemecdn.com/jamesyao-live2dapi/"
//因为jsdelivr不支持50MB以上的包的加速，可能报403错误，所以用的vercel的CDN服务。
//可以考虑clone我配置好的live2d_api仓库自己部署到其他更快的cdn服务上。
  		});
  	});
  }
  1. fork的两个仓库都各自创建autopublish.yml编写构建配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
name: Node.js Package

on:
  push:
    branches:
      - master

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 10
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

  1. 提交代码，自动触发构建任务并发布到 npm，如何发包参考Github 之 Actions 自动发布 npm 包

  2. 主题配置引用刚刚发布的仓库里的autoload.js，如 <script defer src="https://npm.elemecdn.com/jamesyao-live2dwidget/autoload.js"></script>