next主题美化

以下是本人对于next主题美化和魔改的一些经验

1. 音乐播放器的添加

   1.1我的音乐播放器是使用的是网易云音乐自动生成的外链插件。
   打开网易云音乐，将喜欢的歌加入创建的歌单中，然后点击生成外链。

1.2选择合适的插件和尺寸，并复制HTML代码。
  我的博客网站是基于hexo框架搭建的，所以ifram插件可以使用。

1.3代码插入与修改 打开/themes/next/layout/_macro/sidebar.njk文件,在下面的位置插入刚才复制的HTML代码

在next主题的_config.yml文件中写下以下代码

 music:
      enable: true
      autoplay: true #自动播放
    
**至此，音乐播放器功能就可以使用了，下面是一些优化**

1.4音乐播放器刷新网页间断问题的解决

问题: 音乐播放器在博客刷新页面时会重新播放。  解决方法：引入pjax插件
打开cmd控制台，转到next主题的根目录：cd blog/themes/next ,安装pjax模块
安装代码：git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax
接着在next主题的_config.yml文件中启用pjax模块，就解决了。

 1.5音乐播放器的位置调整(此优化需要打开主题的自定义调整，此处不再叙述)
 由于<iframe>标签本身是一个独立的文档嵌入，无法在其内部修改属性。
 但我们可以通过修改<iframe>的外部容器(比如一个<div>元素)的css样式实现
 首先给<div>元素添加一个类名，修改之前插入到外链代码为：
 
 然后打开 blog/source/_data/styles.styl 写如下代码：
 .music-player-container
 {
    margin-top: 20px;
 }
 此代码中 margin-top: 20px;就修改了音乐播放器距离顶部的位置
 其他属性根据读者的需要自行修改，此处不再赘述。