hexo-theme-yilia-plus主题集成aplayer音乐插件和gitalk评论系统

本文主要介绍怎么使用hexo-theme-yilia-plus主题集成aplayer音乐插件和gitalk评论系统

简单方法：

• hexo-theme-yilia-plus这个主题现在作者已经没有维护了，我fork了这个repo，原本该主题的gitment和giteement评论系统用不了了并在他的基础上集成了aplayer音乐插件和gitalk评论系统，开箱即用，如有需要，请查看repo，如果您想要使用我这个主题，您可以将该主题clone到本地theme目录下，并重命名文件夹为yilia-plus，具体使用方法和官方的一样。

• 需要注意的是，如果您clone了我的仓库，如果您要使用aplayer音乐插件,请先在自己博客文件的根目录安装hexo-tag-aplayer ，npm install --save hexo-tag-aplayer,找到自己博客的根目录的配置文件_config.yml，在最后面加上这两句即可使用，如果您要使用gitalk评论系统，则需要看下面的集成gitalk评论系统的前两步即可，其他细节请具体看主题的_config.yml文件

aplayer:
    meting: true

复杂方法：

• 如果您使用的官方的hexo-theme-yilia-plus主题，具体的集成步骤如下：

使用hexo-theme-yilia-plus主题集成aplayer音乐插件

• 详细见官网 aplayer音乐插件

1. 因为hexo-theme-yilia-plus 主题使用的网易云插件只能播放一首歌，不大符合我的预期，因此自己集成了一个analyer音乐插件，可以播放多首歌曲，同时也支持调节音量，切换歌曲等操作。

2. 自己博客文件的根目录安装hexo-tag-aplayer ，npm install --save hexo-tag-aplayer

3. 找到自己博客的根目录的配置文件_config.yml，在最后面加上这两句

   aplayer:
       meting: true

4. 找到hexo-theme-yilia-plus 主题的_config.yml文件，修改里面music这个配置项,修改成如下所示

   # 网易云音乐插件
   music:
     cloudMusic:
       enable: false
     # 播放器尺寸类型(1：长尺寸、2：短尺寸)
       type: 2
     #id: 1334445174  # 网易云分享的音乐ID(更换音乐请更改此配置项)
       autoPlay: true  # 是否开启自动播放
     # 提示文本(关闭请设置为false)
       text: '学习之余来听首歌叭'
   # 添加aplayer 音乐插件
    # aplayer 音乐插件，https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
     # {% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86" ... %}
     aplayer:                # aplayer 音乐插件
       enable: true          # 使用aplayer
       id: '8444951237'      # 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
       server: 'tencent'	  # 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
       type: 'playlist'	  # 必须值 song, playlist, album, search, artist
       fixed: true	          # false 开启固定模式 true 开启吸底模式
       loop: none	          # 列表循环模式：all, one,none
       order: random	      # 列表播放模式： list, random
       volume: 0.4	          # 播放器音量
       listfolded: true	  # 指定音乐播放列表是否折叠
       autoplay: false	      # 自动播放，移动端浏览器暂时不支持此功能
       mutex: true	          # 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
       listmaxheight: 400px  # 播放列表的最大长度
       preload: none	      # 音乐文件预载入模式，可选项： none, metadata, auto
       theme: '#C7A3AD'	  # 播放器风格色彩设置

5. 找到themes\yilia-plus\layout\_partial\left-col.ejs，在left-col.ejs文件夹中

   

   如图，第一个箭头的地方，把这行代码改成图片所示那样

   <% if (theme.music && theme.music.cloudMusic.enable){ %>

   在网易云插件的末尾，即第二个箭头处添加如下代码

     <!-- 添加aplayer音乐插件-->
   <% if (theme.music.aplayer.enable){ %>
     <%# "aplayer音乐插件" %>
     <div id="aplayer-hjnObCgk" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="<%=theme.music.aplayer.id%>"
       data-server="<%=theme.music.aplayer.server%>" data-type="<%=theme.music.aplayer.type%>" data-loop="<%=theme.music.aplayer.loop%>"
       data-order="<%=theme.music.aplayer.order%>" data-lrctype="0" data-listfolded="<%=theme.music.aplayer.listfolded%>"
       data-fixed="<%=theme.music.aplayer.fixed%>" data-autoplay="<%=theme.music.aplayer.autoplay%>"
       data-volume="<%=theme.music.aplayer.volume%>" data-mutex="<%=theme.music.aplayer.mutex%>"
       data-listmaxheight="<%=theme.music.aplayer.listmaxheight%>" data-preload="<%=theme.music.aplayer.preload%>"
       data-theme="<%=theme.music.aplayer.theme%>">
     </div>
    <% } %>

6. 此时已经完成了aplayer插件的添加，打开博客即可看到效果。

7. 修改播放列表

   • 这里我使用的是qq音乐的歌单列表播放，其他的播放平台自行寻找方法
   • 打开QQ音乐的歌单，分享歌单，复制分享的链接，链接格式像这样https://c.y.qq.com/base/fcgi-bin/u?__=K8wodTSr4vs7,之后将链接粘贴到浏览器中打开，url会变成类似这样https://y.qq.com/n/ryqq/playlist/8444951237,最后面的数字就是歌单id，将上面配置项里的id换成自己的即可播放自己歌单里的歌，vip歌曲播放不了

使用hexo-theme-yilia-plus主题集成gitalk评论系统

• gitalk的具体配置见gitalk官网

1. 因为一些原因，Gitment和giteement已经用不了了，当时我不知道，搞这两个东西搞了好久，一直出问题用不了，真是气死我了，发现用不了了之后决定自己在原本的基础上集成gitalk评论系统。

2. 这里需要自己去GitHub创建一个注册一个新的 OAuth Application ➡️ OAuth Application

   

   //Application name     应用的名称,可以随便填
   //Homepage URL         一般是填自己的网站域名，
   //Application description  描述，随便填
   //Authorization callback URL   填写网站域名

   之后创建完成之后会给你一个client_id和secret，找到hexo-theme-yilia-plus主题的_config.yml配置文件，在giteement的评论系统的后面添加上如下配置项

   #5、自己集成gitalk评论系统
   gitalk:
     client_id: '' #上面得到的client_id
     client_secret: '' #上面得到的secret
     repo: 'blog.github.io' #填写你存储评论的仓库名称，一般填写自己的博客仓库名即可
     owner: 'left0ver' #仓库的所有者,填写你的用户名即可
     admin: ['left0ver'] #仓库的管理员，没有特殊情况填你一个你自己的用户名即可
     id: location.href  #issue的id,具有唯一性，默认是location.href，长度小于50，下面的步骤中后面会对id做一些修改
     distraction_free_mode: true #类似Facebook评论框的全屏遮罩效果
     labels: ['Comment'] #issue的标签，默认['Gitalk']

3. 找到主题下的article.ejs文件夹，themes\yilia-plus\layout\_partial\article.ejs，搜索

   <% if (!index && post.comments){ %>,在它的下面一行添加如下代码,这个代码是有响应式的

    <% if (theme.gitalk && theme.gitalk.client_id && theme.gitalk.client_secret){ %>
       <section id="comments" class="comments">
         <style>
           .comments{margin:30px;padding:10px;background:#fff}
           @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
         </style>
         <%- partial('post/gitalk', {
           key: post.slug,
           title: post.title,
           url: config.url+url_for(post.path)
           }) %>
     </section>
   <% } %>

4. 在themes\yilia-plus\layout\_partial\post 文件夹下新建gitalk.ejs文件，添加如下代码

   <% if (!index && theme.gitalk.client_id && theme.gitalk.client_secret){ %>
   <div id="gitalk-container"></div>
   <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
   <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
   <script>
   var gitalk = new Gitalk({
     clientID: '<%=theme.gitalk.client_id%>',
     clientSecret: '<%=theme.gitalk.client_secret%>',
     repo: '<%=theme.gitalk.repo%>',
     owner: '<%=theme.gitalk.owner%>',
     admin: '<%=theme.gitalk.admin%>',
    //id 是为了保证issue的唯一性，id长度不能大于50，因此这里我们使用路径来当id，做一个截取，最好不要修改此配置项，否则可能导致评论丢失  
     id: <%=theme.gitalk.id%>.slice(<%=theme.gitalk.id%>.length-25),
     distractionFreeMode: '<%=theme.gitalk.distraction_free_mode%>',
     labels: '<%=theme.gitalk.labels%>'.split(',').filter(l => l) ,
   })
   gitalk.render('gitalk-container')
   </script>
   <% } %>

5. 这行面这个labels，在配置文件里面定义的是数组，但是在这上面使用的时候就成字符串了，因此我们需要将其转换成数组，否则会报Error: r.concat(...).join is not a function这种错误

6. 至此即完成了gitalk评论系统的添加。重新运行即可看到效果

鸣谢

• 本文大多内容来自于下面两位的博客和PR，在这里衷心感谢他们
• 感谢yansheng836的博客为我集成gitalk评论系统指引了方向
• 感谢ProudRabbit的PR，为我集成aplayer插件提供了很大的帮助

• 本文作者： leftover
• 版权声明： 本文版权归leftover所有,如需转载清标明来源！