首页 编程杂谈 技术分享 HEXO+NEXT 主题个性化配置

本博客所用主题为 shoka，此博文是之前旧版 HEXO 博客的配置记录！

此文章所用 NEXT 版本可能过老，部分代码不具有参考性，请酌情享用！

此文章用来记录本网站个性化的设置更改，以便备用，或者供人参考。
提醒一下：博主 next 主题风格用的是 Mist，若主题风格不一样，有些地方需酌情修改。
在其他地方能找到的教程这里就不重复赘述，文章结尾会给出一些更为详尽的其他参考链接。

# 自定义音乐播放器

描述：本站所用的音乐播放器是由 DIYgod 所制作的 APlayer，其详细资料可参见这里。

# 安装 APlayer 插件

$ npm install aplayer --save

安装完后在 node_modules 目录下找到 APlayer.min.js 文件，将其复制到 theme/next/source/js/src/ 目录下。

# 生成音乐播放器

在你想要加入音乐播放器的地方插入以下代码，
本站把他放在了侧边栏里，具体操作如下。
打开 theme/next/layout/_custom/ 文件夹下的 sidebar.swig 文件，向其中添加以下代码：

<div id="player1" class="aplayer"></div>
<script src="/js/src/APlayer.min.js"></script>
<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('player1'),                       // Optional, player element
    narrow: false,                                                     // Optional, narrow style
    autoplay: true,                                                    // Optional, autoplay song(s), not supported by mobile browsers
    showlrc: 0,                                                        // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
    mutex: true,                                                       // Optional, pause other players when this player playing
    theme: '#e6d0b2',                                                  // Optional, theme color, default: #b7daff
    mode: 'random',                                                    // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
    preload: 'metadata',                                               // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    listmaxheight: '513px',                                             // Optional, max height of play list
    music: {                                                           // Required, music info, see: ###With playlist
        title: 'Preparation',                                          // Required, music title
        author: 'Hans Zimmer/Richard Harvey',                          // Required, music author
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',  // Required, music url
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg',  // Optional, music picture
        lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'                   // Optional, lrc, see: ###With lrc
    }
});
</script>

# 自定义播放器样式

包含颜色更改，列表歌曲信息的排版修改。
在 theme/next/source/css/_custom 文件夹下打开 custom.styl 文件，往里面添加以下代码：

.aplayer-list ol li:hover {   /* 列表悬停颜色 */
                  background:rgba(颜色代码,透明度) none repeat scroll !important;}
.aplayer-list ol li {   /* 列表底色 */
                        background:rgba(颜色代码,透明度);}
.aplayer-list-light {   /* 列表播放歌曲颜色 */
                      background:rgba(颜色代码,透明度) none repeat scroll !important;}
#player1 {    /* 边框样式 */
          border-radius: 6px;
          div,ol {border-radius: 6px;}
        }
#player1 *{color: 颜色代码;}    /* 字体颜色 */
/* 列表歌曲信息的排版 */
.aplayer-list-index{float:left;}
.aplayer-list-title{float:left;}
.aplayer-list-author{float:right;}
# 自定义萌萌哒音乐播放控制边栏
描述：效果见本博客右方。

播放器状态提示方面：当播放器加载数据到能够播放后点击其会出现控制选项，若音乐不能播放点击其会出现提示信息；若自加载页面 30s 后仍不能播放，则提示播放器无响应；若播放器出错，则提示播放器错误；当音乐能够播放时提示加载完成。
播放器控制方面：播放模式控制，上一首，暂停 / 播放，下一首四个按钮。此自定义的模块会记录下你所有播放过的歌曲，所以上一首歌返回的是绝对的上一首歌，不管播放模式如何。当处于上一首歌的状态下（按下了上一首歌按钮一次或者多次），当点击下一首按钮时，还是会按照历史记录的顺序播放；一旦退出此状态，则会按照播放模式进行播放。
注：此自定义过程可能有些麻烦，请读者斟酌修改。
由于把这个控制栏部分单独做成了一个引用方便的对象，现在创建更加简单了，自定义也更方便了。
其详细的使用方法见我的另一篇博文
# 添加 js 代码
安装 APlayer-Controler 的 js 文件：APlayer-Controler
将其放入 theme/next/source/js/src 下。
# 创建按钮区域
在 theme/next/layout/_custom/ 文件夹下新建一个 myapcontroler.swig 的文件。向其中添加以下代码：
<script src="/js/src/Aplayer-Controler.js"></script>
<div id="AP-controler"></div>
<script type="text/javascript">
var myapc=new APlayer_Controler({
		APC_dom:$('#AP-controler'),
		aplayer:ap, // 此为绑定的 aplayer 对象
		attach_right:true,
		position:{top:'300px',bottom:''},
		fixed:true,
		btn_width:100,
		btn_height:120,
    img_src:['https://t1.picb.cc/uploads/2019/02/18/VhsfTw.gif',
				'https://t1.picb.cc/uploads/2019/02/18/VhzJAe.gif',
				'https://t1.picb.cc/uploads/2019/02/18/VhzVBs.gif',
				'https://t1.picb.cc/uploads/2019/02/18/Vhzt46.gif',
				'https://t1.picb.cc/uploads/2019/02/18/VhzZbT.gif'],
		img_style:{repeat:'no-repeat',position:'center',size:'contain'},
		ctrls_color:'rgba(173,255,47,0.8)',
		ctrls_hover_color:'rgba(255,140,0,0.7)',
		tips_on:true,
		tips_width:140,
		tips_height:25,
		tips_color:'rgba(255,255,255,0.6)',
		tips_content:{},
		timeout:30
	});
</script>
以上为本站设置，可自定义修改
# 将控制按钮加入 body 页面
在 theme/next/layout 文件夹下打开 _layout.swig 文件，在 </body> 前添加以下代码：
{% include '_custom/myapcontroler.swig' %}

到此，自定义音乐播放控制边栏就基本完成，完成整个配置需要根据自己的主题背景进一步修改完善。
# DOS 风格的 404 页面
本站所用的 404 页面是博主无意间发现的，dos 风格的 404，逼格满满啊 233
不多说了，该放链接了：
DOS 风格 404 页面
使用说明：
进入页面后代码全部都展示出来了，注意 CSS 部分是 SCSS。选择到右边选择栏找到选项：View Compiled CSS，这样它就将代码转换为 CSS 了。然后新建 404.html ，将代码复制粘贴（可以适当自定义修改一下）过来后保存到 themes\next\source 文件夹下即可。
# 网站的备份
源自知乎：
使用 hexo，如果换了电脑怎么更新博客？
相信不少人都有这个问题，我的博客采用的是 Hexo 的版本控制与持续集成这个方式。
只需要将最新的网站文件 git push 到 Github 你的备份仓库里，AppVeyor 在几分钟内就会自动更新你托管静态网站的仓库。
# 总结
从开始一直折腾了将近一周，到处查资料，自定义修改，找 bug 修 bug，不过也学到了很多东西，这里要感谢感谢很多很多的大神们的文章的指导。
接下来就是分享其他博主的个性化教程了：
https://segmentfault.com/a/1190000009544924#articleHeader21
http://blog.csdn.net/MasterAnt_D/article/details/56839222#t50
https://thief.one/2017/03/03/Hexo 搭建博客教程 /
    
 更新于   阅读次数  次