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