NexT version 8.18.2
开启第三方插件
编辑整个博客文件夹下的themes/next/_config.yml按ctrl+F搜索pjax将false改为true
接下来就可以添加喜欢的第三方插件了
项目地址：live2d-widget
加强版的live2d看板娘，可对话，换装互动
常用配置说明
模型的大小、位置、格式和文本内容等配置，需要自行设置一些配置文件waifu-tips.js 、waifu-tips.json和waifu.css，这里提一些各文件里常用的配置。
waifu-tips.js
这里是模型加载启动/点击工具栏相应按钮时的行为和文本内容定义，具体对应可以对照参考原模型的行为，比如
这个部分是用来显示用户点回本页面时显示的文本，其余同理。
waifu-tips.json
这里是除了上面js里定义的文本以外的其余文本内容，同样可以对照参考原模型猜测来进行修改。
值得注意的是，这个文件里分了几大块，架构大概是：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| {
"mouseover": [{ // 鼠标悬停在某个特定元素时显示的文本
"selector": "...",
"text": "..."
}],
"click": [{ // 鼠标点击某个特定元素时显示的文本
"selector": "...",
"text": "..."
}],
"seasons": [{ // 在特定日期显示的文本
"date": "01/01",
"text": "..."
}]
}
|
text这里很显然是填显示的文本。
date是指定的特定日期。
至于selector就类似于CSS里的CSS选择器，是用来指定元素类型的。
值得注意的，使用cdn来引用GitHub仓库的代码，只会记录第一次上传的代码，后续在github仓库上修改代码，是不会刷新jsdelivr缓存的，这个我暂时没办法解决，最后本地配置调整好在push到仓库上
配置
编辑themes/next/ayout/_layout.njk文件
建议把项目克隆到自己的仓库，这样就可以使用自己的cdn加速，也可以根据自己喜欢来修改配置
在head头部添加
1
| <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/gh/AienH/blog_plugin/live2d/assets/waifu.css"/>
|
在body添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <div class="waifu">
<div class="waifu-tips"></div>
<canvas id="live2d" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
<script src="https://fastly.jsdelivr.net/gh/AienH/blog_plugin/live2d/assets/waifu-tips.js"></script>
<script src="https://fastly.jsdelivr.net/gh/AienH/blog_plugin/live2d/assets/live2d.js"></script>
<script type="text/javascript">
live2d_settings['modelId'] = 1;
live2d_settings['modelTexturesId'] = 87;
initModel("https://fastly.jsdelivr.net/gh/AienH/blog_plugin/live2d/assets/waifu-tips.json")
</script>
|
最后再次编辑整个博客文件夹下的themes/next/_config.yml文件
在最下面添加
音乐播放器插件-APlayer & MetingJS
项目地址：APlayer MetingJS
介绍
- APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器。
- MetingJS 是为 APlayer 添加网易云、QQ音乐等支持的插件。
老规矩，最好把项目拉到自己的GitHub仓库，防止作者链接失效
在head头部添加
1
2
3
4
5
6
| <script src="https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src=" https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/dist/jquery-ui.min.js "></script>
<script rel="preload" src="https://fastly.jsdelivr.net/gh/AienH/blog_plugin@master/APlayer/dist/APlayer.min.js"></script>
<script rel="preload" src="https://fastly.jsdelivr.net/gh/AienH/blog_plugin@master/MetingJS/dist/Meting.min.js"></script>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/AienH/blog_plugin@master/APlayer/dist/APlayer.min.css">
|
在body添加
1
2
3
4
5
6
7
8
9
10
11
| <meting-js
server="netease"
type="playlist"
id="8269382559"
autoplay="true"
volume="0.7"
fixed="true"
order="list"
preload="metadata"
lrc-type="0">
</meting-js>
|
参数说明
- 引用这两个插件的前提是要先引用
jquery.min.js、font-awesome.min.css、jquery-ui.min.js
1
2
3
| <script src="https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src=" https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/dist/jquery-ui.min.js "></script>
|
不然音乐插件不会生效