hexo主题配置

hexo可以非常方便的渲染markdown语法，生成并且部署我们的文档；甚至默认集成了一款主题让我使用(再也不担心网站不好看了=——=)。但是不满足的我当然要选择一款适合我的hexo主题，并且还要个性化定制一番。看了这篇文章，大家肯定都会定制自己的博客主题了。

定制功能

以下定制功能的配置都是基于next5.1.4，不同版本的next主题配置可能有所区别，具体以next主题和github仓库和文档为准

博客标题、作者、语言、主题和部署git repo等基础信息

打开根目录_config.yml博客配置文件(以下统称根配置)，分别修改以下配置项：

title: 小清
author: 小清
language: zh-Hans (themes/next/languages/ 下边有对应的语言yml文件)
theme: next
deploy:
- type: git
- repository:
- branch: master

首页显示文章摘要

打开使用的主题next文件夹目录下的_config.yml主题配置文件(以下统称主题配置)，打开以下配置即可，另外可以通过 <!–more–>来控制首页显示的内容的结尾。

auto_excerpt: true

fork me on github

先在这里或者这里选择一款自己喜欢的样式，复制一下，
然后打开themes/next/layout/_layout.swig文件中，粘贴在\

的下面，并把href改为你的github地址，大功告成。

添加动态背景

同样next自带了几款不同类型的动态效果，主题配置找到canvas_nest节点，配置你喜欢的效果即可

canvas_nest:
three_waves:

点击效果

目前我见到的就两种，上浮桃心，显示文字。效果都不错的，使用的人还是很多的。需要先在在/themes/next/source/js/src下新建文件clicklove.js，接着把该链接下的代码拷贝粘贴到clicklove.js文件中。其中代码如下：

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);

在/themes/next/ayout/layout.swig文件末尾添加：

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

侧边栏和个人社交信息

侧边栏可以控制左侧或者右侧显示、条件显示隐藏，具体配置项含义见主题配置：

siderbar:
- position:
- display:

主题配置中的社交信息:

social
- GitHub:
- E-Mail:
social_icons:
- enable: true

文章访问量

直接使用主题集成的不蒜子，主题配置，它的缺点是统计不准确。需要准确的统计，请使用LeanCloud统计。

busuanzi_count
- enable: true
- site_uv: true
- site_pv: true

本文结束
在/themes/next/layout/_macro中新建passage-end-tag.swig文件，并填写以下内容：

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

修改/themes/next/layout/_macro/post.swig文件，在post-body后，post-footer前，添加下面内容：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

修改主题配置文件：

passage_end_tag:
- enabled: true

隐藏底部信息

在主题配置中设置footer

footer:
- powered: false

分享

本博客采用百度分享的，分享的配置比较简单，也是主题配置文件

baidushare:
- type: slide
  但是百度分享的sdk有个静态资源不支持https，我们直接把sdk的静态代码放到next主题中集成即可。sdk下载地址，将static文件夹保存至/themes/next/source目录下，修改/themes/next\layout_partials/share/baidushare.swig，将http://bdimg.share.baidu.com/static/ 改为 ./static

搜索
next集成了两种搜索，本地搜索和Algolia搜索，具体配置见官方文档。需要注意的是，配置完app后，设置Algolia搜索ACL（访问控制列表）权限。其实

创建app，获取正确的appid、appkey等，配置acl权限(我们就可以搜索创建索引，上传索引了)

主题配置文件配置相关的参数

本地设置全局变量，本地索引上传（该过程依赖安装npm i hexo-algolia –save,上传索引命令：hexo algolia）

根配置url为/，控制返回结果的url前缀，默认是http://yoursite.com/

valine 评论

next集成了多款评论插件：Duoshuo、Disqus、Hypercomments、changyan、Valine和Gitment，通过对比，本博客采用了Valine，原因有两个基本功能能用，允许匿名发布，没别墙。

配置过程：

注册Leancloud
创建一个应用，获取到appid aapkey
next配置文件valine:
- enable: true
- appid:
- appkey:

热门主题

定制功能