本博客所用主题为 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 搭建博客教程 /

更新于 阅读次数