Hexo+Next主题配置

Hexo+Github快速搭建个人博客
这是之前写的一篇文章，说了怎么使用Hexo在Github上免费搭建一个个人博客，这篇文里面只写了博客从0到1的过程，这篇再来写一写从1到正无穷，博客的个性化设置。

1. hexo的配置文件

在博客的根目录，也就是Node.js的项目根目录下，有个名字是_config.yml的文件，这个是hexo的配置文件。在这个文件里可以配置网站的常规配置，比如主标题，副标题，语言，域名，等等，这个文件不用解释太多，因为里面每一项都有很详细的解释，只要打开看一眼便知。

这里面有一项是theme，是用来配置主题的，在这里写主题的名字就可以，主题需要下载到根目录下的themes目录下，然后通过名字就会去这个目录下找对应的主题，所以名字不能写错，我用的next主题。

2. 主题的配置的文件

以我所用的next主题为例，在目录themes/next/下，也有个_config.yml文件，打开就可以看出来，这里的解释也很详细，而且都是中文，这对于国内的使用者算是相当友好了，这里面配置的都是一些个性化设置，比如图标，页脚，备案信息，颜色，大小，间距，等等，开始时用默认值就可以，可以在使用过程中不断优化、调整，形成一个自己喜欢的风格。

3. 文章截断

在首页上会按时间倒序展示所有的文章，如果不做处理，每篇文章的内容就会完整的显示出来，非常的不美观，按照往常的阅读经验，每篇文章只需要展示前面几行就可以了，所以需要在适当的地方截断，截断文章使用more标记

<!--more-->

这个标记下面的内容就不会显示，除非点进到文章的详情。

4. 增加左侧菜单

左侧菜单就是指首页、标签、归档的那个栏目，如果默认的那几个满足不了设想需求，可以按需增加、删除，或者调整。菜单栏里的每个按钮，点击之后打开的都是一个页面，所以要想增加一个菜单，就要增加一个对应的页面。增加页面使用这个命令，

hexo new page 'message'

执行完之后，就会发现source目录下多了个message的目录，目录里又个index.md的文件，是的，刚刚的命令就是创建了这两个，如果不使用命令，也可以手动创建。假定message这个页面用来当作留言板用，现在页面有了，然后就是把它加到菜单栏里，打开next的配置文件，注意是next的，不是hexo的，在里面搜索menu关键词，就可以看到了，这个文件很长，每次想要配置哪个项，直接搜索关键字是最方便的，配置格式里面有说明，分隔符||前面的是路径，后面的菜单栏按钮前的小icon，icon去这个网站，然后把名字复制过来就可以

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  message: /message/ || fas fa-envelope-open-text

重新生成之后，发现菜单栏里已经多了一个按钮，但是按钮名字怪怪的，是英文单词message，也就是刚刚创建的文件夹的名字。这个的原因是，多语言，只要在配置一下多语言就可以了，我使用的是中文，所以需要打开next主题下的languages目录下的zh-CN.yml文件，在里面的menu下增加一个message，就可以了

5. 增加评论

打开next的配置文件，搜索关键词comments，可以看到它支持多种评论插件，changyan、disqus、disqusjs、gitalk、livere、valine。在这里，我用的gittalk，试了几个都要花钱，就这个是免费的，光这免费一点，就压过了所有，以绝对的优势胜出。稍微再往下滚几行，就会看到gittalk的配置了

gitalk:
  enable: true
  github_id: oynix # GitHub repo owner
  repo: oynix.github.io # Repository name to store issues
  client_id: xxxxxxxxxx # GitHub Application Client ID
  client_secret: xxxxxxxxxxxxxx # GitHub Application Client Secret
  admin_user: oynix # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language:

它内部的流程就是，获取操作一个仓库的权限，然后每当有人留言的时候，就相当于给这个仓库提了一个issue，每篇文章下面展示的评论，其实就是所有issue中，和这篇文章相关联的issue。获取权限，打开Github首页，右上角个人信息里打开Settings，左侧菜单栏最下面有个Developer settings，进去就能看到OAuth Apps，创建一个新的OAuth App，Application name可随意写，Homepage URL和Authorization callback URL都填博客的域名就可以了，创建成功后把得到的client_id和client_secret填到上面gittalk的位置就可以了。

6. 统计和分析

通过第三方的统计分析插件，可以知道自己的网站的访问情况，比如今天有多少个人进来过，不做商业化的话，统计这数据就是图一乐。它支持多种三方渠道，比如Google Analytics、百度统计等，我加了一个GA的，还是老样子，打开next的配置文件，在里面搜索关键词google_analytics就可以看到，GA的比较好配置，在GA后台创建一个网页应用，把博客的域名填进去，然后把生成的id复制过来就可以了。而且，这个也是免费的

7. 统计阅读人数

还是那个标准，看谁是免费的，next也只支持了多个三方统计渠道，多数的路子都是你花钱买个云存储空间，然后调用他们提供的API接口，把访问数据传上去，就这么简单。但是有个插件特立独行，它把数据存到了本地，自然就不用花钱了，这就是busuanzi_count，还是在next的配置文件里

Show Views / Visitors of the website / page with busuanzi.
Get more information on http://ibruce.info/2015/04/04/busuanzi
suanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: fa fa-eye

8. 开通打赏功能

这个和现在的主流打赏方式类似，在文章底部有个按钮，点开就是收钱的二维码，next的配置文件里，搜索关键词reward，然后像下面这样

reward:
wechatpay: /images/wechatpay.jpeg
alipay: /images/alipay.jpeg

这两张图在next/source/images目录下，我只配置了这两个，还能配置别的，想配置什么收款方式就配置什么收款方式，但我觉得没有差别，至今尚未开张。

9. 给文章添加通用结尾

我在每篇文章最下面都加了这样一行

--------------完---------

在每篇文章结尾手动写上也不是不行，但是既然都是一样的，就可以配置到样式文件里。这种配置不在配置文件里写，需要稍微修改一下样式文件。在next/layout/_macro下有个post.swig文件，用个文本编辑器打开就可以看里面的内容，这个就是显示文章内容的，里面不是很长，可以清晰看到几个大大的标记

{##################}
{### POST BLOCK ###}
{##################}

  {#################}
  {### POST BODY ###}
  {#################}

  {#####################}
  {### END POST BODY ###}
  {#####################}

{######################}
{### END POST BLOCK ###}
{######################}

成对出现的，很清晰吧，POST就是文章的意思，BODY中间夹着的部分就是我们写的文章，既然我想在文章后面加标记，那么加到END POST BODY后面就可以了，不需要懂swig，会一点html的语法知识就够用，在_macor目录下创建文件passage-end-tag.swig，里面写上

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">------------- (完) -------------</div>
    {% endif %}
</div>

is_index是在其他地方定义的一个变量，首页也会显示文章，文章详情页也会显示文章，用这个变量加以区分，当不是首页的时候，就加个div，这几行表达的就是这个意思，然后，在END POST BODY后面引用一下刚刚新建的这个文件，

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

这几行表示，当不是在首页显示的时候，把刚才创建的这个文件包括进来，就这样，给每篇文章加个结尾的想法就实现了。

总结

就先说这么多吧，next的可配置修改项是在太多太多，同时还可以修改它的源码，相互配合，能玩出的花样层出不穷，具体的呢，还是要回到最初那句话，看自己有着什么样的个性化需求，只要能想到的，就尽管去改配置就好。