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

本文主要介绍怎么使用hexo-theme-yilia-plus主题集成aplayer音乐插件和gitalk评论系统简单方法：hexo-theme-yilia-plus这个主题现在作者已经没有维护了，我fork了这个repo，原本该主题的gitment和giteement评论系统用不了了并在他的基础上集成了aplayer音乐插件和gitalk评论系统，开箱即用，如有需要，请查看repo，如果您想要使

left0ver

674人浏览 · 2022-04-22 20:44:07

left0ver · 2022-04-22 20:44:07 发布

本文主要介绍怎么使用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音乐插件

因为hexo-theme-yilia-plus 主题使用的网易云插件只能播放一首歌，不大符合我的预期，因此自己集成了一个analyer音乐插件，可以播放多首歌曲，同时也支持调节音量，切换歌曲等操作。
自己博客文件的根目录安装hexo-tag-aplayer ，npm install --save hexo-tag-aplayer
找到自己博客的根目录的配置文件_config.yml，在最后面加上这两句
```
aplayer:
    meting: true
```

找到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'	  # 播放器风格色彩设置

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

此时已经完成了aplayer插件的添加，打开博客即可看到效果。
修改播放列表
- 这里我使用的是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官网

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

这里需要自己去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']

找到主题下的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>
<% } %>

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