灵感
这两天在添加“留言”以及“关于”页面，准备先简单设计一下自已的页面。留言页面可以放置一些自已比较感兴趣的音乐、以及一些JS特效，再集成一个第三方的留言功能。关于页面可以放置一些简单的联系方式、以及基础信息的存放，还有自已帅照。嘿嘿嘿嘿。。。。。
音乐插件的集成不在这里过多复述，请参考：hexo添加音乐
关于页面帅照采用NexT的扩展标签fullimage。嘿嘿嘿嘿。。。。
在官方的常见方案中关于NexT的优化，看到一篇帖子，是关于gulp插件的介绍，自动化构建工具，通过一系列的Task,完成引用的优化。主要思想就是通过压缩HTML，CSS，JavaSCript减少加载内容的大小，提升网站响应效率。
关于Gulp的优化，可以参照“使用gulp精简hexo博客代码”，也可以参考我写一篇博客“Next 调优”。
从1000到1
通过hexo g命令生成静态页面，随便打开一个index.html都可以发现有几百行到上千行的代码，其中大部分都是空白片段。关于大片的空白片段可以通过gulp插件进行压缩，下面方法主要是要讲怎么压缩HTML中的JavaScript代码。
插件对于HTML页面进行压缩时，不会对HTML中包含的JavaScript代码进行压缩，参考浏览器--》反键查看源码，还是有一些小段的JavaScript代码，对于存在有代码洁癖的程序猿，肯定会去想方设法去优化掉。
定位该段JavaScript
由于站点是部署在Linux系统下，切换到站点主题目录(/blog/themes/next)。执行find . -type f | xargs grep -F "code标识"。定位该段代码在何配置文件中。
[root@luisyang next]# find . -type f | xargs grep -F "var NexT=window.NexT||{};"
./layout/_partials/head.swig:<script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{};var CONFIG={root:'{{ theme.root }}',scheme:'{{ theme.scheme }}',sidebar:{{theme.sidebar|json_encode}},fancybox:{{theme.fancybox}},motion:{{theme.use_motion}},duoshuo:{userId:'{{ theme.duoshuo_info.user_id | default() }}',author:'{{ theme.duoshuo_info.admin_nickname | default(__('author'))}}'},algolia:{applicationID:'{{ theme.algolia.applicationID }}',apiKey:'{{ theme.algolia.apiKey }}',indexName:'{{ theme.algolia.indexName }}',hits:{{theme.algolia_search.hits|json_encode}},labels:{{theme.algolia_search.labels|json_encode}}}};</script>
可以发现该段代码存在./layout/_partials/head.swig中。特别注意：{ { xxx } }标识模板会引用页面变量中的某个属性，这段代码是不能单独抽取成一个JS文件。
var NexT=window.NexT||{};var CONFIG={root:'{{ theme.root }}',scheme:'{{ theme.scheme }}',sidebar:{{theme.sidebar|json_encode}},fancybox:{{theme.fancybox}},motion:{{theme.use_motion}},duoshuo:{userId:'{{ theme.duoshuo_info.user_id | default() }}',author:'{{ theme.duoshuo_info.admin_nickname | default(__('author'))}}'},algolia:{applicationID:'{{ theme.algolia.applicationID }}',apiKey:'{{ theme.algolia.apiKey }}',indexName:'{{ theme.algolia.indexName }}',hits:{{theme.algolia_search.hits|json_encode}},labels:{{theme.algolia_search.labels|json_encode}}}};
修改模板
再次打开模板文件。
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '{{ theme.root }}',
scheme: '{{ theme.scheme }}',
sidebar: {{ theme.sidebar | json_encode }},
fancybox: {{ theme.fancybox }},
motion: {{ theme.use_motion }},
duoshuo: {
userId: '{{ theme.duoshuo_info.user_id | default() }}',
author: '{{ theme.duoshuo_info.admin_nickname | default(__('author'))}}'
},
algolia: {
applicationID: '{{ theme.algolia.applicationID }}',
apiKey: '{{ theme.algolia.apiKey }}',
indexName: '{{ theme.algolia.indexName }}',
hits: {{ theme.algolia_search.hits | json_encode }},
labels: {{ theme.algolia_search.labels | json_encode }}
}
};
</script>
替换为
<script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{};var CONFIG={root:'{{ theme.root }}',scheme:'{{ theme.scheme }}',sidebar:{{theme.sidebar|json_encode}},fancybox:{{theme.fancybox}},motion:{{theme.use_motion}},duoshuo:{userId:'{{ theme.duoshuo_info.user_id | default() }}',author:'{{ theme.duoshuo_info.admin_nickname | default(__('author'))}}'},algolia:{applicationID:'{{ theme.algolia.applicationID }}',apiKey:'{{ theme.algolia.apiKey }}',indexName:'{{ theme.algolia.indexName }}',hits:{{theme.algolia_search.hits|json_encode}},labels:{{theme.algolia_search.labels|json_encode}}}};</script>
注意点
JavaScript的压缩原理就是将多行代码转成一行代码，代码换行的地方记得要用“；”隔开，不然浏览器解析的时候会报错。
这里只介绍一段JavaScript的优化，其余的地方类似。
添加音乐
音乐采用的是hexo-tag-aplayer插件。声明歌单的时候我们会使用如下数据字符串。
{% aplayerlist %}{"narrow": false,"autoplay": true,"showlrc": 3,"mode": "random","music": [{"title": "平凡之路","author": "朴树","url": "http://xxx.com/%E5%B9%B3%E5%87%A1%E4%B9%8B%E8%B7%AF.mp3","pic": "https://xxx.com/1.jpg","lrc": "http://og9ocpmwk.bkt.clouddn.com/%E5%B9%B3%E5%87%A1%E4%B9%8B%E8%B7%AF.txt"},{"title": "野子","author": "苏运莹","url": "http://xxx.com/01%20%E9%87%8E%E5%AD%90.m4a","pic": "http://xxxx.com/%E9%87%8E%E5%AD%90.jpg","lrc":"https://xxx.com/%E9%87%8E%E5%AD%90.txt"}]}{% endaplayerlist %}
其中url表示音乐的地址（mp3,mp4）,lrc表示歌词文件的地址，pic表示歌曲的封面图片。
音乐的下载
可以下载“网易云音乐”客户端，选择喜欢的音乐，点击下载。比较简单。
歌词的下载
歌词下载网站
通过网易云音乐下载会自动下载歌词，不过会保存在%USERPROFILE%AppDataLocalNeteaseCloudMusicwebdatalyric路径下。
反键编辑找到自已喜欢歌曲的歌词，如成都-赵雷：
{"sgc":false,"sfy":false,"qfy":false,"lrc":{"version":4,"lyric":"[00:00.00] 作曲 : 赵雷
[00:01.00] 作词 : 赵雷
[00:16.75]让我掉下眼泪的 不止昨夜的酒
[00:25.91]让我依依不舍的 不止你的温柔
[00:33.91]余路还要走多久 你攥着我的手
[00:41.70]让我感到为难的 是挣扎的自由
[00:52.10]分别总是在九月 回忆是思念的愁
[00:59.63]深秋嫩绿的垂柳 亲吻着我额头
[01:07.53]在那座阴雨的小城里 我从未忘记你
[01:15.41]成都 带不走的 只有你
[01:23.69]和我在成都的街头走一走
[01:31.08]直到所有的灯都熄灭了也不停留
[01:39.69]你会挽着我的衣袖 我会把手揣进裤兜
[01:47.08]走到玉林路的尽头 坐在(走过)小酒馆的门口
[02:30.37]分别总是在九月 回忆是思念的愁
[02:38.10]深秋嫩绿的垂柳 亲吻着我额头
[02:46.13]在那座阴雨的小城里 我从未忘记你
[02:54.02]成都 带不走的 只有你
[03:02.34]和我在成都的街头走一走
[03:10.41]直到所有的灯都熄灭了也不停留
[03:18.34]你会挽着我的衣袖 我会把手揣进裤兜
[03:25.51]走到玉林路的尽头 坐在(走过)小酒馆的门口
[04:35.96][03:35.40]和我在成都的街头走一走
[04:42.76][03:45.39]直到所有的灯都熄灭了也不停留
[03:53.62]和我在成都的街头走一走
[04:01.35]直到所有的灯都熄灭了也不停留
[04:08.95]你会挽着我的衣袖 我会把手揣进裤兜
[04:17.27]走到玉林路的尽头 坐在(走过)小酒馆的门口
"},"klyric":{"version":0},"tlyric":{"version":0,"lyric":null},"code":200}
格式排版存在问题，需要优化成如下方式：
[ti:成都]
[ar:赵雷]
[al:成都]
[by:赵雷]
[00:00.00] 作曲 : 赵雷
[00:01.00] 作词 : 赵雷
[00:16.75]让我掉下眼泪的 不止昨夜的酒
[00:25.91]让我依依不舍的 不止你的温柔
[00:33.91]余路还要走多久 你攥着我的手
[00:41.70]让我感到为难的 是挣扎的自由
[00:52.10]分别总是在九月 回忆是思念的愁
[00:59.63]深秋嫩绿的垂柳 亲吻着我额头
[01:07.53]在那座阴雨的小城里 我从未忘记你
[01:15.41]成都 带不走的 只有你
[01:23.69]和我在成都的街头走一走
[01:31.08]直到所有的灯都熄灭了也不停留
[01:39.69]你会挽着我的衣袖 我会把手揣进裤兜
[01:47.08]走到玉林路的尽头 坐在(走过)小酒馆的门口
[02:30.37]分别总是在九月 回忆是思念的愁
[02:38.10]深秋嫩绿的垂柳 亲吻着我额头
[02:46.13]在那座阴雨的小城里 我从未忘记你
[02:54.02]成都 带不走的 只有你
[03:02.34]和我在成都的街头走一走
[03:10.41]直到所有的灯都熄灭了也不停留
[03:18.34]你会挽着我的衣袖 我会把手揣进裤兜
[03:25.51]走到玉林路的尽头 坐在(走过)小酒馆的门口
[04:35.96][03:35.40]和我在成都的街头走一走
[04:42.76][03:45.39]直到所有的灯都熄灭了也不停留
[03:53.62]和我在成都的街头走一走
[04:01.35]直到所有的灯都熄灭了也不停留
[04:08.95]你会挽着我的衣袖 我会把手揣进裤兜
[04:17.27]走到玉林路的尽头 坐在(走过)小酒馆的门口aba
保存为txt文本，保存编码格式一定要是UNIX / UTF-8w/o BOM的方式，而且命名最好不是中文。
封面图片下载
打开网页版的网易云音乐，搜索“成都-赵雷”，回车。打开控制台，下载歌词封面图片。
