手把手教你搭建个人博客（第四期）

live2d 官网：https://www.live2d.com/

aplayer 插件官网：https://aplayer.js.org/#/zh-Hans/

安装 live2d

打开 webstrom 的 终端（explore）页面，输入命令：

1
2
# 安装live2d
npm install --save hexo-helper-live2d

安装模型

1
2
# 安装模型
npm install --save live2d-widget-model-koharu

配置 live2d

在 _config.yml 中添加配置代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true #开关插件版看板娘
  scriptFrom: local # 默认
  # scriptFrom: https://... # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-koharu # npm-module package name
    # use: ... # 你的自定义 url
  display:
    position: right #控制看板娘位置
    width: 150 #控制看板娘大小
    height: 300 #控制看板娘大小
  mobile:
    show: false # 手机中是否展示

安装音乐播放器 aplayer

打开 webstrom 的 终端（explore）页面，输入命令：

1
npm install hexo-tag-aplayer --save

配置 aplayer

在 _config.butterfly.yml 中修改配置代码：

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

并添加以下代码：

1
2
3
4
5
bottom:
   # aplayer音乐
   # - <script src="xxxx"></script>
   - <div class="aplayer no-destroy" data-id="自己的网易云歌单" data-server="tencent" data-type="playlist" data-order="list" data-fixed="true" data-preload="auto" data-autoplay="false" data-mutex="true" data-listFolded="true" data-narrow="false"></div>

更多的aplayer的配置， 可参考aplayer的官方文档 ，自行修改配置哦！

设置aplayer侧边缩进

只需要在css中的 custom.css 代码的最后加入以下代码即可实现收入侧边栏

1
2
3
4
5
6
7
.aplayer.aplayer-narrow .aplayer-body {
    left: -66px !important;
}
.aplayer-body:hover {
    left: 0px !important
}

歌词颜色修改

直接将以下代码复制粘贴到css中的 custom.css 的末尾即可

1
2
3
4
5
6
7
8
9
10
11
.aplayer .aplayer-lrc p.aplayer-lrc-current {
    /* 大小 */
    font-size: 17px;
    /* 颜色 */
    color: #1b82f1;
    opacity: 1;
    overflow: visible;
    height: auto !important;
    min-height: 16px;
}

1
2
3
4
5
6
7
8
9
10
11
12
.aplayer .aplayer-lrc p {
    font-weight: 700;
    font-size:15px;
    color:#777;
    line-height:16px!important;
    height:16px!important;
    padding:0!important;
    margin:0!important;
    transition:all .5s ease-out;
    opacity:.4;
    overflow:hidden
}