前言

适用于 Hexo 的看板娘有两种方式，哑巴看板娘和灵动看板娘，其中哑巴看板娘占用资源少、加载快、配置简单，适合萌新使用。

哑巴看板娘

安装 hexo-helper-live2d[1]

1
yarn add hexo-helper-live2d

下载资源

去 Eikanya 的模型库[2] 下载看板娘资源。个人喜欢 AK12/normal。

Info

单独下载 repo 内的文件需要安装 GitZip 插件。

Warning

只有 .moc 资源可用，moc3 不可用。

配置

编辑 _config.yml

简单配置

1
2
3
4
5
6
7
8
9
10
11
12
# live2d
live2d:
  enable: false
  scriptFrom: local
  model:
    use: ./source/assets/live2d/ak12    # `model.json` 所在位置
  display:
    position: right
    width: 300
    height: 300
  mobile:
    show: true

详细配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/[email protected]/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://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json # 你的自定义 url
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 0
    vOffset: -20
  mobile:
    show: true
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

灵动看板娘

前置要求

Fork live2d-widget[3] 和 live2d_api[4]。如需发布 NPM 包，用 Akilarlxh/live2d_api[5] 替代 live2d_api[4:1]，以便获得更多的 CDN 支持。

安装

  1. 克隆 forked live2d_api 到本地任意位置。
1
git clone https://github.com/<USERNAME>/live2d_api
  1. 克隆 forked live2d-widget 到 <HEXO_ROOT>/source/assets/live2d/live2d-widget。
1
git clone https://github.com/<USERNAME>/live2d-widget source/assets/live2d/live2d-widget

配置

Forked live2d_api 配置

我删除了自己不喜欢的模型

  1. 备份 model_list.json。
  2. 编辑 model_list.json。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "models": [
    [
      "HyperdimensionNeptunia/nepgearswim",
      "HyperdimensionNeptunia/nepgear_extra"
    ],
    [
      "HyperdimensionNeptunia/vert_swimwear",
      "HyperdimensionNeptunia/vert_normal"
    ],
    [
      "HyperdimensionNeptunia/noireswim",
      "HyperdimensionNeptunia/noir",
      "HyperdimensionNeptunia/noir_santa"
    ]
  ],
  "messages": [
    "Nep! Nep! 超次元游戏：海王星 系列"
  ]
}
  1. Commit and Push.
  2. Tag and Release.

发布 Release 后才能当作 API 使用。



更换 forked live2d_api CDN


用 GitHub Releases 部署 API 需要 jsdelivr 加速，即使如此依然有网络问题，而且 GitHub Releases 需要手动打 tag，Azure DevOps Pipelines 无法全自动发布


另一种方案是参考 Akilarlxh/live2d_api[5:1] 。发布 NPM 包，CDN 使用 vercel。


    

  1. 

    清理模型
    

      

    • Fork 后删除 model/ 下不使用的模型，或者加入 .gitignore，这是避免 NPM 包过大而导致发布失败。
      • 

    

    2. 

  2. 

    修改 package.json
    

      

    • 先注册 NPM 账号并完成邮箱验证。
      • 

    • 包名需要用 @username/package-name 的形式，因为重复的包名会发布失败。
      • 

    • 注意版本号，不能发布已存在的版本。
      • 

    

    3. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
{
  &quot;name&quot;: &quot;@kamasylvia/live2d-api&quot;,
  &quot;version&quot;: &quot;1.0.7&quot;,
  &quot;description&quot;: &quot;看板娘模型资源文件&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
  },
  &quot;repository&quot;: {
    &quot;type&quot;: &quot;git&quot;,
    &quot;url&quot;: &quot;git+https://github.com/kamasylvia/live2d_api.git&quot;
  },
  &quot;keywords&quot;: [
    &quot;live2d&quot;,
    &quot;model&quot;,
    &quot;api&quot;,
    &quot;assets&quot;
  ],
  &quot;author&quot;: &quot;kamasylvia&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;bugs&quot;: {
    &quot;url&quot;: &quot;https://github.com/kamasylvia/live2d_api/issues&quot;
  },
  &quot;homepage&quot;: &quot;https://github.com/kamasylvia/live2d_api.git&quot;
}</code></pre>
</div>

3. Azure DevOps 创建 Service connection[^6]
4. 编辑 `azure-pipelines.yml`

```yml
# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml

trigger:
- main
- master

pool:
  vmImage: ubuntu-latest

steps:

# Prerequisite of syncing with GitHub (Option)
- script: |
    git config --global user.email "$(EMAIL)"
    git config --global user.name "$(USERNAME)"
  displayName: 'Set git configs.'

# Sync with GitHub (Option)
- task: mirror-git-repository-vsts-task@1
  inputs:
    sourceGitRepositoryUri: '$(Build.Repository.Uri)'
    destinationGitRepositoryUri: 'https://github.com/kamasylvia/live2d_api.git'
    destinationGitRepositoryPersonalAccessToken: '$(PERSONAL_ACCESS_TOKEN)'

# Publish
- task: Npm@1
  inputs:
    command: 'custom'   # DO NOT USE "NPM Publish" command.
    customCommand: 'publish --access=public'    # The package will be private if without `--access=public`
    customEndpoint: 'NpmConnection' # Service connection name


Forked live2d-widget 配置


    

  1. 编辑 waifu.css
    2. 



1
2
3
4
5
6
7
8
9
10
11
#waifu {
	bottom: -1000px;
	/* left: 0; */
	right: 25px;    # 修改看板娘位置到右侧
	line-height: 0;
	margin-bottom: -10px;
	position: fixed;
	transform: translateY(3px);
	transition: transform .3s ease-in-out, bottom 3s ease-in-out;
	z-index: 1;
}


    

  1. 编辑 autoload.js
    2. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = '/assets/live2d/live2d-widget/'
...
// 加载 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(() => {
    // 配置选项的具体用法见 README.md
    initWidget({
      waifuPath: live2d_path + 'waifu-tips.json',
      // apiPath: "https://live2d.fghrsh.net/api/",
      // Default CDN
      // cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
      // Akilar CDN
      // cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/",
      // Custom CDN
      // cdnPath: 'https://fastly.jsdelivr.net/gh/<USERNAME>/live2d_api/',
      cdnPath: "https://npm.elemecdn.com/@<USERNAME>/live2d-api@latest/",
      tools: [
        'hitokoto',
        'asteroids',
        'switch-model',
        'switch-texture',
        // 'photo',
        // 'info',
        'quit',
      ],
    })
  })
}


导入脚本


编辑 _config.butterfly.yml


1
2
3
inject:
  bottom:
    - <script src="/assets/live2d/live2d-widget/autoload.js?v1"></script>


参考资料







其他资源







引用






    

  1. EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo! ↩︎
    

    2. 

  2. Eikanya/Live2d-model: Live2d model collection ↩︎
    

    3. 

  3. stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ ≧∇≦)ノ | Live2D widget for web platform ↩︎
    

    4. 

  4. fghrsh/live2d_api: Live2D 看板娘插件上使用的后端 API ↩︎ ↩︎
    

    5. 

  5. Akilarlxh/live2d_api ↩︎ ↩︎
    

    6.