Hexo个人免费博客(三) next主题、评论、阅读量统计和站内搜索

使用Next主题美化界面：

安装好hexo之后，主题使用的是hexo默认自带的landscape主题，Next主题是iissnan设计的，使用指南其实可以直接参考Next官方网：http://theme-next.iissnan.com/

1.Next主题下载：

打开Git shell，在当前项目根目下使用git从github上checkout主题的代码，输入指令：

git clone https://github.com/iissnan/hexo-theme-next themes/next

下载完成后，在hexo\theme目录下回多出一个next文件夹，里面就是next主题所需的文件,当然我们也可以看到在theme文件目录还有一个landscape文件夹，这也就是hexo默认的主题。

2.配置主题：

之前我们配置hexo的时候，有用到_config.yml文件，称其为站点配置文件，而我们打开next主题文件夹，发现里面也有一个_config.yml文件，我们称这个为主题配置文件。在hexo中启用next主题的方式：就是打开站点配置文件，找到theme字段，将其值改为“next”，如下：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

配置完成后，在Git shell中使用hexo server指令启动本地博客，在浏览器中访问http://localhost:4000可以看到如下结果：

3.next的样式选择：

next的样式其实有三种：Muse、Mist和Pisces，步骤2中看到的其实是next默认的模式Muse，根据官方说明三个样式的特点如下：

• Muse： 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
• Mist： Muse 的紧凑版本，整洁有序的单栏外观
• Pisces： 双栏 Scheme，小家碧玉似的清新

切换的控制其实很简单，使用next主题配置文件中的scheme字段来控制，假设我们选择Mist样式（个人认为最好看的样式），操作步骤是：打开next文件夹中的_config.yml文件，找到scheme字段，将其设置为“Mist”，如下所示：

# ------------------------------------------------------
# Scheme Settings
# ------------------------------------------------------

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

重新启动博客，刷新浏览器可以看到：

额外的优化：

1.设置favicon：

favicon的全称Favorites Icon，即地址栏左侧的图标：

有个在线工具可以上传自己的图片去生成指定规格的favicon.ico文件：http://www.atool.org/ico.php。打开主题配置文件_config.yml可以看到favicon的配置信息：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

根据说明，我们将图标取名为favicon.ico然后放到当前工程的hexo\source目录下，重启博客即可生效。

2.菜单栏控制：

我们看到页面顶部的菜单栏，其实是由主题配置文件中的menu字段控制的，例如原本的样子是这样：

我们修改一下主题配置文件，如下把about页面前面的注释去掉，即让此页签处于显示状态：

# ------------------------------------------------------
# Menu Settings
# ------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  #categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  #commonweal: /404.html

重启博客可以看到效果如下：

然而，点击打开About却出现了“Cannot GET /about/”的页面错误，这是因为我们还没有about这个页面，需要使用hexo new page "页面名称"进行创建：

hexo new page about

执行结果就是在hexo\source目录下面多出了一个about文件夹，里面有index.md，这就是点击About会展示的内容页面。同理，也可以创建tags页面。

3.语言设置：

在站点配置文件中假如如下内容，明确指定使用的语言，例如中文：

language: zh-Hans

设置完毕后，发现菜单栏也发生了变化：

4.侧栏设置：

在主题配置文件的sidebar字段，此处我直接设置为侧栏一直显示，而且显示在右边：

sidebar:
  # Sidebar Position, available value: left | right
  position: left
  #position: right

  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggler.
  #display: post
  display: always
  #display: hide
  #display: remove

5.设置头像和作者名称：

在站点配置文件中，新加一个字段avatar，值就是头像的连接地址，这里我使用站内地址，将avatar.png放到本地目录hexo\source\images中；作者名称直接设置站点配置文件中author字段的值：

# Site
title: Linsh-何乐不为~
subtitle:
description:
author: Linshuhe
avatar: /images/avatar.png
language: zh-Hans
timezone:

第三方服务：

1.多说评论：

进入多说官网，登录后点击“我要登录”，填写相关信息，注意要记住多说域名这个字段填写的内容，http://(duoshuo_shortname).duoshuo.com，这个duoshuo_shortname将用于我们站点配置文件中的配置。步骤：在站点配置文件中新建一个duoshuo_shortname的字段，填写注册使用的duoshuo_shortname，例如：

duoshuo_shortname: linshuhe1

2.百度统计：

用于统计阅读的次数，步骤如下：

• 登录百度统计官网：http://tongji.baidu.com/web/welcome/login定位到站点的代码获取页面；
• 复制hm.js?后面的那串id；
• 在站点配置文件中，新增一个字段baidu_analytics，设置其值为上面复制的百度统计的id
• 阅读次数统计，使用LeanCloud来实现，详情查看：https://notes.wanghao.work/2015-10-21-%E4%B8%BANexT%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E9%87%8F%E7%BB%9F%E8%AE%A1%E5%8A%9F%E8%83%BD.html#%E9%85%8D%E7%BD%AELeanCloud

3.Swiftype搜索

使用 Swiftype 之前需要前往 Swiftype 配置一个搜索引擎。 而后编辑 站点配置文件， 新增 swiftype_key 字段，值为你的 swiftype 搜索引擎的 key。 详细的配置请参考： http://theme-next.iissnan.com/third-party-services.html#swfitype

Local Search:添加百度/谷歌/本地 自定义站点内容搜索：

• 安装hexo-generator-search:

 npm install hexo-generator-search --save

• 在站点配置文件中加入：

    search:
        path: search.xml
        field: post

---

最终结果可以查看我的博客：https://linshuhe1.github.io/

补充：

可能有人跟我一样遇到了带你麻烦，那就是主页面的文章列表中，博客内容全部显示出来而不是只显示文章一部分和 阅读全文》 按钮，这样显得首页的列表很杂乱和冗长，其实要解决这个问题很简单，只需要在我们编写markdown内容的时候，在适当的位置假如如下标签：

<!--more-->

那么在首页显示的部分就是此标签前面的文章内容，而非全文显示：