Next主题设置-安装DaoVoice和Aplayer

更新于 阅读次数： Valine：

安装在线聊天工具DaoVoice

  1. 登录DaoVoice官网注册，点击应用设置–>安装到网站，搜索app_id，复制后面的id。
  2. 在主题配置里添加：
1
2
daovoice: true
daovoice_app_id: 你的id
  1. 在Hexo\themes\next\layout\_partials\head的head.njk文件末尾添加如下内容，粘贴你的id。
1
2
3
4
5
6
7
8
{% if theme.daovoice %}
 <script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/b6dbddb6.js","daovoice")
 daovoice('init', {
  app_id: "粘贴你的id"
});
daovoice('update');
 </script>
{% endif %}
  1. 收到的信息在DaoVoice官网的对话里查看与回复。

安装音乐插件Aplayer、meting

  1. 安装：npm install --save hexo-tag-aplayer
  2. 使用方法：
1
2
3
{% aplayer "title"  "author" "url" [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

"title"  "author" "url" 按顺序必填，其余选填。这里lrc必须是txt格式。
  1. 如果使用网络音乐，可以进入音乐外链网站获取音乐链接。
1
{% aplayer "花儿纳吉" "洛萱" "https://sharefs.ali.kugou.com/202110202136/4bf5427ae89feacb1c10fd2db1c212cc/G202/M00/1C/01/Cg4DAF5QC-CAQbPvADlpgRlSql4871.mp3" "https://satparamita.top/images/my.jpg" "width:100%" "lrc:花儿纳吉-洛萱.txt" %}
  1. 也可以插入本地音乐，需要自定义头像，下载歌词。
1
{% aplayer "花儿纳吉" "洛萱" "./file/洛萱 - 花儿纳吉.mp3" "https://satparamita.top/images/my.jpg" "width:100%" "lrc:花儿纳吉-洛萱.txt" %}

注意:音乐和歌词文件都放在与文章同级的文件夹里，上例里文件夹名为file。

  1. Aplayer可以建立歌单，一般是将歌单放在侧栏。为了在侧栏上方菜单里添加音乐选项，在Hexo/source下新建文件夹music和assets。文件夹assets用来存放歌曲和歌词，文件夹名必须是assets。
  2. 在themes\next\languages\zh-CN里添加music的翻译。
  3. 在music文件夹里新建index.md文件，打开后修改title、type等。添加歌单，参考官方文档的参数解释。注意不要写入参数//后面的注释。歌词可以是lrc格式的。
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
---
title:  #为了标题中出现，可以不填
type: "music" #必须有
comments: false # 是否再下方显示评论栏 
---

{% aplayerlist %}
{
    "narrow": false,
    "autoplay": false,
    "mode": "circulation",
    "showlrc": 3,
    "mutex": true,               
    "theme": "#33a3dc",	       
    "preload": "metadata",        
    "listmaxheight": "420px",    
    "music": [
        {    
            "title": "花儿纳吉",      
            "author": "洛萱",                                  
            "url": "/assets/洛萱、Mario - 花儿纳吉.mp3" ,
            "pic": "https://satparamita.top/images/my.jpg", 
	          "lrc": "/assets/lrc/花儿纳吉-洛萱.lrc"                                       
    	  },
        {    
            "title": "故园情",      
            "author": "重小烟",                                  
            "url": "https://sharefs.ali.kugou.com/202110202226/8ac7afd5dbda58ffe35399be77e4364e/KGTX/CLTX001/bbd71ef535bdac9d124f31c8315d06eb.mp3" ,
            "pic": "https://satparamita.top/images/mine.jpg", 
	          "lrc": "/assets/lrc/故园情-重小烟.lrc"                                     
    	  }
    ]
}
{% endaplayerlist %}

注意事项:

  1. 使用歌单加入网络歌曲时，歌曲链接可能会失效。
  2. 插入单曲时，建议也使用歌单，歌单只有一首歌而已。
  3. Aplayer与Pjax存在冲突，需要手动刷新音乐页面，或者在新标签页打开才能显示。可以关闭pjax，在主题配置里修改为pjax: false，不过对网页运行有一点影响。
  4. 也可以直接在文章里添加音乐，这样就可以在不关闭Pjax的情况下，使用window.open()，在新标签页打开音乐，相当于刷新了音乐的网页。
1
<a onclick="window.open('https://satparamita.top/about/%E9%9F%B3%E4%B9%90.html', '_blank');"></a>
  1. meting支持多个音乐平台，可以插入单曲，也可以插入列表。官方文档里有对参数的解释。"listmaxheight:400px"表示列表长度，单曲时不用加入。
1
{% meting "id" "netease, tencent, kugou, xiami, baidu" "song, playlist, album, search, artist"  "mutex:true" "listmaxheight:400px" "preload:none" "theme:#33a3dc" %}
  1. 在站点配置文件里添加：
1
2
3
aplayer:
  meting: true
  asset_inject: true #  true可能会影响其它功能
  1. 以单曲为例，在文章里写入：
1
2
3
{% meting "0A184307F0CB47068D6E2B12893FB962" "kugou" "song" "mutex:true" "preload:none" "theme:#33a3dc" %}
{% meting "6F30EE14FFE03FD30CA25887DC602C4B" "kugou" "song" "mutex:true" "preload:none" "theme:#33a3dc" %}
{% meting "29747554" "netease" "song" "mutex:true" "listmaxheight:400px" "preload:none" "theme:#33a3dc" %}
  1. meting的另一种使用方式：
1
2
3
4
5
6
7
8
9
10
<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>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js
	server="netease"
	type="song"
	id="29747554">   
</meting-js>

PS：使用酷狗音乐时，本地预览和手机都能用meting，但是我的电脑端不能；而网易云的音乐可以。如果meting能正确显示，建议对单曲优先使用meting，因为自带头像与歌词。aplayer和meting在同一个页面使用时，只显示meting。