next主题美化
以下是本人对于next主题美化和魔改的一些经验
1.2选择合适的插件和尺寸,并复制HTML代码。
我的博客网站是基于hexo框架搭建的,所以ifram插件可以使用。
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;就修改了音乐播放器距离顶部的位置
其他属性根据读者的需要自行修改,此处不再赘述。