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

安装评论valine

1. 注册Leancloud，建议选择国际版。Leancloud既能管理评论，也能统计阅读情况。在创建的应用里点击数据存储-结构化数据-创建Class，点击创建Class，新建名为Comment，选择无限制，其它默认，然后点击创建，用来查看评论。
   再在数据存储-结构化数据-创建Class，点击创建Class，新建名为Counter，选择无限制，其它默认，用来统计阅读。
2. 有些主题已经自带valine评论，如果没有，安装：npm install next-theme/hexo-next-valine。valine相关文件会下载至Hexo\node_modules\hexo-next-valine，打开该文件夹里的default.yaml，全部复制，粘贴到主题配置文件里。

   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]

3. 在Leancloud设置-应用凭证里复制AppID和AppKey，粘贴到appId和appKey，注意冒号后面有空格，并且不要和#连着。
   在设置-安全中心-Web安全域名里添加自己的网址。其余按需修改。
   注意，如果出现Code 401: 未经授权的操作,请检查你的AppId和AppKey，会发现有评论框但是不能提交评论。在设置-应用凭证里复制REST API 服务器地址，粘贴到serverURLs: ，即可解决。
4. 主题配置里自带leancloud的阅读统计功能。如果启用，其中app_id: app_key: server_url: 按照valine里的填写。

   leancloud_visitors:
     enable: 
     app_id:   
     app_key:  
     server_url: 
     security: true

5. valine、leancloud和busuanzi的统计有冲突，建议如下设置：

   valine:
     enable: true
     visitor: false  // 关闭

   leancloud_visitors: 
     enable: true //打开

   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

6. 如果在阅读统计中出现Counter not initialized! More info at console err msg.，设置leancloud_visitors.security = false，如下：

   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等，添加以下内容：

   ---
   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>

2. 更多颜色，可以参考颜色1、颜色2。
3. 在themes\next\languages\zh-CN里添加shuoshuo的翻译，可以是“说说”、“闲言碎语”、“碎碎念”等。

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

<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. 使用方法：

   {% aplayer "title"  "author" "url" [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}
   
   "title"  "author" "url" 按顺序必填，其余选填。这里lrc必须是txt格式。 

3. 如果使用网络音乐，可以进入音乐外链网站获取音乐链接。

   {% 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" %}

4. 也可以插入本地音乐，需要自定义头像，下载歌词。

   {% aplayer "花儿纳吉" "洛萱" "./file/洛萱 - 花儿纳吉.mp3" "https://satparamita.top/images/my.jpg" "width:100%" "lrc:花儿纳吉-洛萱.txt" %}

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

5. Aplayer可以建立歌单，一般是将歌单放在侧栏。为了在侧栏上方菜单里添加音乐选项，在Hexo/source下新建文件夹music和assets。文件夹assets用来存放歌曲和歌词，文件夹名必须是assets。

6. 在themes\next\languages\zh-CN里添加music的翻译。

7. 在music文件夹里新建index.md文件，打开后修改title、type等。添加歌单，参考官方文档的参数解释。注意不要写入参数//后面的注释。歌词可以是lrc格式的。

   ---
   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 %}

   注意事项:

8. 使用歌单加入网络歌曲时，歌曲链接可能会失效。

9. 插入单曲时，建议也使用歌单，歌单只有一首歌而已。

10. Aplayer与Pjax存在冲突，需要手动刷新音乐页面，或者在新标签页打开才能显示。可以关闭pjax，在主题配置里修改为pjax: false，不过对网页运行有一点影响。

11. 也可以直接在文章里添加音乐，这样就可以在不关闭Pjax的情况下，使用window.open()，在新标签页打开音乐，相当于刷新了音乐的网页。

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

12. meting支持多个音乐平台，可以插入单曲，也可以插入列表。官方文档里有对参数的解释。"listmaxheight:400px"表示列表长度，单曲时不用加入。

    {% meting "id" "netease, tencent, kugou, xiami, baidu" "song, playlist, album, search, artist"  "mutex:true" "listmaxheight:400px" "preload:none" "theme:#33a3dc" %}

13. 在站点配置文件里添加：

    aplayer:
      meting: true
      asset_inject: true #  true可能会影响其它功能

14. 以单曲为例，在文章里写入：

    {% 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" %}

15. meting的另一种使用方式：

    <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。