Hexo一些功能的实现

网易云音乐播放插件，Valine样式的修改。
主要是列举了解决这两个比较难搞的功能。

网易云音乐：

安装：

npm install aplayer --save

实现播放列表

将E:\hexo\node_modules\aplayer内的dist文件夹复制到E:\hexo\themes\next\source内
并在该文件夹内新建music.js

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    autoplay: true,
    theme: '#FADFA3',
    listFolded: false,
    listMaxHeight: '300px',
    mutex: true,
    loop: 'all',
    order: 'random',
    preload: 'auto',
    volume: 0.7,
    lrcType: 1,
    audio: [
        {
            name: '夜空中最亮的星',
            artist: '逃跑计划',
            url: 'http://music.163.com/song/media/outer/url?id=25706282.mp3',
            cover: 'http://p1.music.126.net/d541jx7SqoDzVkenhmtg6g==/19193074974743620.jpg',
            lrc: '',
            theme: '#ebd0c2'
        },
        {
            name: '出卖',
            artist: '简弘亦',
            url: 'http://music.163.com/song/media/outer/url?id=406086090.mp3',
            cover: 'http://p1.music.126.net/FiZafE2FWKsw3kEcJCsHSw==/1380986606501842.jp',
            lrc: '',
            theme: '#46718b'
        },
        {
            name: '温柔',
            artist: '五月天',
            url: 'http://music.163.com/song/media/outer/url?id=386001.mp3',
            cover: 'http://p2.music.126.net/_B1Fn_Z1WxHzqGLzLZDf-w==/109951163263882447.jpg',
            lrc: '',
            theme: '#FF9933'
        },
        {
            name: '再见再见',
            artist: '逃跑计划',
            url: 'http://music.163.com/song/media/outer/url?id=25706285.mp3',
            cover: 'http://p1.music.126.net/d541jx7SqoDzVkenhmtg6g==/19193074974743620.jpg',
            lrc: '',
            theme: '#336666'
        },
         {
            name: 'Promise',
            artist: '山岡晃',
            url: 'http://music.163.com/song/media/outer/url?id=18861490.mp3',
            cover: 'http://p1.music.126.net/QbadLxlMMmb4iStV4JnKLA==/6664139976590904.jpg',
            theme: '#663300'
        }

    ]
});

添加到侧边栏

sidebar.swing内添加：

<link rel="stylesheet" href="/dist/APlayer.min.css">
      <div id="aplayer"></div>
      <script type="text/javascript" src="/dist/APlayer.min.js"></script>
      <script type="text/javascript" src="/dist/music.js"></script>

添加到其它位置

上面这段引用也可以添加到文章中实现播放器。

网易云MP3链接获取

http://music.163.com/song/media/outer/url?id=.mp3‘
添加上对应歌曲的id即可。

网易云lrc歌词链接获取

http://music.163.com/api/song/media?id=
添加上对应歌曲id即可。然后复制lyric的值，不用去除\n。

Valine样式修改

修改评论数量的样式：

目的：改成中文，“评论数量”

一开始在Next主题目录下的layout_macro\post.swing寻找该样式发现

图片中除了想找的都在这个post.swing文件实现了，就是没有这个valine！
本地没有，网页部署后就有这个样式？

一番苦苦寻找后，发现它是用js动态生成的，位于next\scripts\filters\comment\valine.js文件夹内：

     injects.postMeta.raw('valine', `
       {% if post.comments and (is_post() or theme.valine.comment_count) %}
       <span class="post-meta-item">
         ${iconText('comment-o', 'valine')}
         <a title="valine" href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
           <span class="post-comments-count valine-comment-count" data-xid="{{ url_for(post.path) }}" itemprop="commentCount"></span>
         </a>
       </span>
       {% endif %}
      `, {}, {}, theme.valine.post_meta_order);

再到同一文件夹下的common.js文件查看这个iconText方法：

     iconText(icon, key, defaultValue) {
             if (!defaultValue) {
                 defaultValue = capitalize(key);
             }
             return `
           <span class="post-meta-item-icon">
             <i class="fa fa-${icon}"></i>
           </span>
           {%- set post_meta_comment = __('post.comments.${key}') %}
          {%- if post_meta_comment == 'post.comments.${key}' %}
            {%- set post_meta_comment = '${defaultValue}' %}
          {%- endif %}
          <span class="post-meta-item-text">{{ post_meta_comment + __('symbol.colon') }}</span>
        `;
        }

原来只要修改key这个值即可实现！

${iconText('comment-o', '评论数量')}

完成。

网站无效果

一套hexo clean+hexo g+hexo d下来，github page并没有实现更新一部分功能，可以把public文件夹删除，再次执行上述步骤！