live2d配置

安装hexo-helper-live2d插件

1
npm install --save hexo-helper-live2d

安装人物模型

所有模型都可在Github查看预览

1
2
# 示例：安装初音未来模型
npm install --save live2d-widget-model-miku

补充一些人物模型

1
2
3
4
live2d-widget-model-shizuku
live2d-widget-model-hijiki
live2d-widget-model-koharu
live2d-widget-model-haruto

配置启用

在 Hexo 根目录的_config.yml文件中，添加以下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-miku   # 改成你安装的模型名称
  display:
    position: right                 # 显示位置: left 或 right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

本地预览

1
hexo cl;hexo g;hexo s

动态部署推送至GitHub

1
2
3
4
git init
git add .
git commit -m "feat: 添加 Live2D 看板娘"
git push

（纯静态 hexo d 即可）

获取免费live2d模型方法

from

  1. live2d官方数据集：address
  2. 模之屋：address
  3. unity商店：address
  4. b站：address
  5. youtube：address
  6. Booth：address

音乐aplayer配置

安装插件

1
npm install hexo-tag-aplayer --save

修改配置文件

打开博客根目录下的_config.yml文件，添加或修改以下配置：

1
2
3
aplayer:
  meting: true
  asset_inject: false

在主题配置文件中如butterfly，查找aplayerInject，修改为：

1
2
3
aplayerInject:
  enable: true
  per_page: true

并在inject：bottom下注入播放器代码：

1
2
3
inject:
  bottom:
    - '<div class="aplayer no-destroy" data-id="你的歌单/歌曲ID" data-server="音乐平台" data-type="playlist" data-fixed="true" data-autoplay="false"> </div>'

data-fixed=’true’ 配置了全局吸顶

介绍相关音乐平台：

  • netease 网易云音乐
  • tencent QQ音乐
  • kugou 酷狗音乐
  • baidu 百度音乐

添加音乐页面

创建页面文件

1
hexo new page music

执行后，它会在source/目录下生成/music/index.md文件

插入音乐播放器

1
{% meting "歌曲id" "音乐平台" "playlist" "autoplay" "mutex:false" "listmaxheight:400px" "preload:none" "theme:#ad7a86"%}

如果你想播放自己的音乐文件，不受平台VIP限制，可以用自定义的HTML播放器代码。同样打开source/music/index.md,注入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<div id="aplayer"></div>
<script>
var ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: false, // 设为false，让播放器固定在页面上
    audio: [
        {
            name: '歌曲名1',
            artist: '歌手1',
            url: '/music/你的歌曲文件名1.mp3',
            cover: '封面图片网址'
        },
        {
            name: '歌曲名2',
            artist: '歌手2',
            url: '/music/你的歌曲文件名2.mp3',
            cover: '封面图片网址'
        }
    ]
});
ap.init();
</script>

需要注意前提准备：

  • 在 source/ 文件夹下新建一个 music 文件夹，把你所有的MP3音乐文件放进去
  • 代码中 url: ‘/music/你的歌曲文件名.mp3’ 这一行的 你的歌曲文件名.mp3 必须改成和 source/music/ 文件夹里对应的文件名完全一致，包括扩展名。

添加到导航菜单

打开博客根目录的_config.yml文件，找到menu配置项，并添加：

1
音乐: /music/ || fas fa-music

让音乐播放更流畅

在主题配置文件中找到pjax项，修改为：

1
2
pjax:
  enable: true