Next 主题设置-安装Valine、Artitalk、Aplayer

更新于 阅读次数： Valine：

安装评论valine

  1. 注册Leancloud，建议选择国际版。Leancloud既能管理评论，也能统计阅读情况。在创建的应用里点击数据存储-结构化数据-创建Class，点击创建Class，新建名为Comment，选择无限制，其它默认，然后点击创建，用来查看评论。
    再在数据存储-结构化数据-创建Class，点击创建Class，新建名为Counter，选择无限制，其它默认，用来统计阅读。
  2. next主题没有自带valine评论，安装：npm install next-theme/hexo-next-valine。valine相关文件会下载至Hexo\node_modules\hexo-next-valine，打开该文件夹里的default.yaml，全部复制，粘贴到主题配置文件里。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
valine:
  enable: true
  appId:  #你的leancloud里面的AppID
  appKey:  #你的leancloud里面的AppKey
  serverURLs:  #REST API服务器地址 https://。。。。 # When the custom domain name is enabled, fill it in here
  placeholder: Just go go # Comment box placeholder
  avatar: mm # gravatar style
  meta: [nick, mail, link] # Custom comment header
  pageSize: 10 # pagination size
  lang: # Language, available values: en, zh-cn
  visitor: true #文章阅读量统计  
  comment_count: true # If false, comment count will only be displayed in post page, not in home page 评论计数
  recordIP: true # Whether to record the commenter IP
  enableQQ: true
  requiredFields: [] # Set required fields: [nick] | [nick, mail]
  1. 在Leancloud设置-应用凭证里复制AppID和AppKey，粘贴到appId和appKey，注意冒号后面有空格，并且不要和#连着。
    在设置-安全中心-Web安全域名里添加自己的网址。其余按需修改。
    注意，如果出现Code 401: 未经授权的操作,请检查你的AppId和AppKey，会发现有评论框但是不能提交评论。在设置-应用凭证里复制REST API 服务器地址，粘贴到serverURLs: ，即可解决。
  2. 主题配置里自带leancloud的阅读统计功能。如果启用，其中app_id: app_key: server_url: 按照valine里的填写。
1
2
3
4
5
6
leancloud_visitors:
  enable: 
  app_id:   
  app_key:  
  server_url: 
  security: true
  1. valine、leancloud和busuanzi的统计有冲突，建议如下设置：
1
2
3
valine:
  enable: true
  visitor: false  // 关闭
1
2
leancloud_visitors: 
  enable: true //打开
1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: false  # 关闭
  post_views_icon: far fa-eye
  1. 如果在阅读统计中出现Counter not initialized! More info at console err msg.，设置leancloud_visitors.security = false，如下：
1
2
3
leancloud_visitors: 
  enable: true    # 必须开
  security: false

安装Artitalk说说

Next主题还没有添加Artitalk，需要用到Leancloud。在安装Valine评论系统时，已经注册了Leancloud国际版，在leancloud里的创建操作，请参考Artitalk官网，从这里开始，按照以下步骤。

  1. 一般是在侧栏上方菜单里添加说说，在Hexo\source下新建文件夹shuoshuo，在Hexo\source\shuoshuo里新建文件index.md，修改title、type等，添加以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title:  #为了标题中出现，可以不填
type: "shuoshuo" #必须有
comments: false # 是否再下方显示评论栏 
---

<!-- 引用 artitalk -->
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<!-- 存放说说的容器 -->
<div id="artitalk_main"></div>
<script>
new Artitalk({
    appId: '', // Your LeanCloud appId
    appKey: '', // Your LeanCloud appKey
    pageSize: 50, //每页评论数量
    shuoPla: '', //评论框里显示，可以不填
    motion: 0, //加载动画的开关 0（关闭），1（开启）
    atComment: 1, //评论功能的开关 0（关闭），1（开启）
    bgImg: '', //评论框里的背景，可以不填
    color1: 'linear-gradient(102.7deg, #fddaff 8.2%, #dfadfc 19.6%, #adcdfc 36.8%, #adfcf4 73.2%, #caf8d0 90.9%)', //自定义颜色，有几种方式
    color2: 'linear-gradient(50deg, rgb(30,227,207) 10%, rgb(249,188,221) 90%)',
    color3: '#3b9a9c',
})
</script>
  1. 更多颜色，可以参考颜色1、颜色2。
  2. 在themes\next\languages\zh-CN里添加shuoshuo的翻译，可以是说说、闲言碎语、碎碎念等。

重要：由于Artitalk与Pjax存在冲突，需要手动刷新说说页面，或者在新标签页打开才能显示。可以关闭pjax，在主题配置里修改为pjax: false，不过对网页运行有一点影响。
也可以直接在文章里添加说说，这样就可以在不关闭Pjax的情况下，使用window.open()，在新标签页打开说说，相当于刷新了说说的网页。

1
<a onclick="window.open('https://satparamita.top/about/%E9%9F%B3%E4%B9%90.html', '_blank');"></a>

安装音乐插件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。