三月底将博客换成用hexo来搭建,经过一番挑选,选用了next主题,将搭建过程中的一些优化细节记录下来

使用hexo

hexo如何使用,参照官方文档即可,hexo中文文档

使用NexT主题

next主题的安装使用,参照next主题官方文档,开始使用NexT

优化选项

评论系统

由于国内的多说即将关闭网站,所以选用DISQUS,编辑 主题配置文件, 将 disqus 下的 enable 设定为 true,同时提供您的 shortnamecount 用于指定是否显示评论数量。

1
2
3
4
disqus:
enable: false
shortname:
count: true

设置头像

1、找一个喜欢的图片,放到themes\next\source\images文件夹中

2、编辑 站点配置文件,新增字段 avatar:
avatar: /images/avatar.png

1、通过网站favicon在线制作制作favicon图片,logo最好设置32*32。

2、next主题:将图片放在next主题source/images目录下

3、在next主题配置文件中添加:favicon: images/favicon.ico

添加动态背景

  • 参考hexo引用自定义js文件和css样式,在github资源中找到particle.js,将其下载到本地主题文件夹next\source\js\src类似这样的文件夹下。
  • 然后在主题layout/_layout.swig中的最后body标签上添加<script type="text/javascript" src="/js/src/particle.js"></script>

添加RSS功能

1、安装hexo-generator-feed

1
$ npm install hexo-generator-feed --save

安装完后,会在node_modules目录下生成hexo-generator-feed目录。

2、将其配置到站点根目录的_config.yml

1
2
3
4
5
6
7
8
9
10
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

其中,feed是可选项,可配可不配!

3、在当前主题目录下的_config.yml下,添加RSS订阅链接即可:

1
2
3
4
5
feed:
type: atom
path: atom.xml
limit: 20
hub:

修改页面版权所有

修改next\layout\_partials文件夹下的footer.swig文件,读懂里边的代码,改成自己想要的文字就可以了。

鼠标点击心跳效果

主题文件夹next\source\js\src里添加love.js文件,内容为:

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

添加好之后,找到next\layout文件夹下的_layout.swig文件,在body节点下面加入如下代码:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.min.js"></script>

重新部署,运行,看见效果。

文章底部文章版权声明

next\layout\_macro文件夹找到post.swig文件,修改其中内容,在footer节点下添加如下代码:

1
2
3
4
5
6
<div class="copyright" style="clear:both;">
<p><span><b>本文标题:</b> </span><a href="{{ url_for(post.path) }}">{{ post.title }}</a></p>
<p><span><b>原始链接:</b> </span><a href="{{ url_for(post.path) }}" title="{{ post.title }}">{{ post.permalink }}</a></p>
<p><span><b>许可协议:</b> </span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" title="Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)">Attribution-NonCommercial 4.0</a></p>
<p><span><b>版权声明:</b></span>转载请保留以上信息!</p>
</div>

当然, 需要什么样式, 什么内容, 都可以自己写.

文章末尾感谢阅读

next\layout\_macro文件夹中添加一个passage-end-tag.swig文件,内容为:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束 <i class="fa fa-github"></i> 感谢阅读 ------</div>
{% endif %}
</div>

修改同级目录下打post.swig文件,在post-body 之后, post-footer 之前添加如下代码:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

内容啥的都可以自己定,重新部署启动。

添加工具页面

1
hexo new page "工具"

没啥好说的

添加链接页面

1
hexo new page "链接"

没啥好说的

添加书单页面

修改主题配置文件_config.yml,在menu节点下添加books菜单:

1
2
menu:
books: /categories/books/

修改next\languages\文件下下的zh-Hans.ym文件,在menu节点下配置books的中文名:

1
2
menu:
books: 书单

之后,所有分类在books的文章, 都会在书单页面显示。

添加简历页面并加密

参考如下:

主要使用hexo-encrypt这个插件,上面两个链接有详细的使用介绍。。。

使用网易云音乐

待补充

开启听音乐功能

待补充