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;就修改了音乐播放器距离顶部的位置
 其他属性根据读者的需要自行修改,此处不再赘述。