Hexo使用NexT主题及配置

发表于 | 分类于 | | 阅读次数:
字数统计: 4,284 | 阅读时长 ≈ 17

前言

前篇Hexo初次使用及部署到云服务器详细指南介绍了Hexo相关的一些配置。
本篇就趁热打铁，整理介绍一下Hexo上热度非常高的一款主题NexT。

NexT安装

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。
主题文件的下载主要有两种：

  • NexT主题zip文件下载，解压到站点目录的 themes 目录下
  • Git 克隆最新版本

小编使用的安装方式是第二种。

  1. 进入本地博客根目录
    小编的博客根目录为/Users/nht/WorkSpace/blog/hexo
    该目录下有如下文件

    1
    2
    3
    4
    5
    6
    ➜  hexo pwd
    /Users/nht/WorkSpace/blog/hexo
    ➜  hexo ls
    _config.yml       node_modules      public            themes
    db.json           package-lock.json scaffolds
    debug.log         package.json      source

  2. 前往 NexT 版本 页面

  3. 下载最新稳定版

    1
    2
    $ mkdir themes/next
    $ curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

    这样，NexT的最新稳定版代码就通过Git下载到themes/next 目录下了。
    如果想要切换NexT的版本，可以按如下步骤：

    1. 进入NexT主题文件目录，`cd themes/next` 
2. 查看当前有哪些版本，`git tag` 
3. 切换至指定tag代码，比如切换至最新版`v5.1.4` ,`git checkout tags/v5.1.4`

  4. 修改 站点配置文件_config.yml 

    1
    theme: next

  5. 配置完成，运行博客站点查看

    1
    hexo g && hexo s

NexT主题配置

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。目前 NexT 支持三种 Scheme，他们是：

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

小编当前使用的是Gemini

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

设置 「语言」

编辑 站点配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：

1
language: zh-Hans

目前 NexT 支持的语言如以下表格所示：

语言 代码 设定示例
English en language: en
简体中文 zh-Hans language: zh-Hans
Français fr-FR language: fr-FR
Português pt language: pt or language: pt-BR
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko

设置 「菜单」

点击查看官方文档 设置 「菜单」

设置 「侧栏」

点击查看官方文档 设置 「侧栏」

设置 「头像」

点击查看官方文档 设置 「头像」

设置 「作者昵称」

点击查看官方文档 设置 「作者昵称」

设置 「站点描述」

点击查看官方文档 设置 「站点描述」

进阶&修改

设置摘录

默认情况下，首页上显示的是文章的所有内容，可以将NexT主题的_config.yml文件中的auto_excerpt字段下的enable改为true。

1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

阅读次数统计（LeanCloud）

在注册完成LeanCloud帐号并验证邮箱之后，我们就可以登录我们的LeanCloud帐号，进行一番配置之后拿到AppID以及AppKey 这两个参数即可正常使用文章阅读量统计的功能了。

配置LeanCloud

  1. 创建应用。输入应用名称，选择应用计价方案（开发版）
  2. 进入刚创建的应用
  3. 点击最左侧存储 标签
  4. 点击数据 项
  5. 点击创建 Class项
  6. 输入Class 名称 Counter ，设置数据条目的默认 ACL 权限 为无限制
  7. 点击创建 按钮
    创建完成之后，左侧数据栏应该会多出一栏名为Counter的栏目
  8. 点击最左侧设置 标签

  9. 点击应用Key 项
    可以看到App ID、App Key、App ID 三项
    复制App ID以及App Key并在NexT主题的_config.yml文件中我们相应的位置填入即可，正确配置之后文件内容像这个样子:

    1
    2
    3
    4
    5
    6
    # Show number of visitors to each article.
    # You can visit https://leancloud.cn get AppID and AppKey.
    leancloud_visitors:
      enable: true
      app_id: gaKW5SWAvf7NBolU9wFbxN8O-gzGxoHsz
      app_key: susRJyHS8Fq1SyKXg0r9ad65

这个时候重新生成部署Hexo博客，应该就可以正常使用文章阅读量统计的功能了。需要特别说明的是：记录文章访问量的唯一标识符是文章的发布日期以及文章的标题，因此请确保这两个数值组合的唯一性，如果你更改了这两个数值，会造成文章阅读数值的清零重计。

后台管理

当你配置部分完成之后，初始的文章统计量显示为0，但是这个时候我们LeanCloud对应的应用的Counter表中并没有相应的记录，只是单纯的显示为0而已，当博客文章在配置好阅读量统计服务之后第一次打开时，便会自动向服务器发送数据来创建一条数据，该数据会被记录在对应的应用的Counter表中。

我们可以修改其中的time字段的数值来达到修改某一篇文章的访问量的目的（博客文章访问量快递提升人气的装逼利器）。双击具体的数值，修改之后回车即可保存。

  • url字段被当作唯一ID来使用，因此如果你不知道带来的后果的话请不要修改。
  • title字段显示的是博客文章的标题，用于后台管理的时候区分文章之用，没有什么实际作用。
  • 其他字段皆为自动生成，具体作用请查阅LeanCloud官方文档，如果你不知道有什么作用请不要随意修改。

Web安全

因为AppID以及AppKey是暴露在外的，因此如果一些别用用心之人知道了之后用于其它目的是得不偿失的，为了确保只用于我们自己的博客，建议开启Web安全选项，这样就只能通过我们自己的域名才有权访问后台的数据了，可以进一步提升安全性。

  1. 选择应用的设置的安全中心选项卡
  2. 在Web 安全域名中填入我们自己的博客域名，来确保数据调用的安全

添加评论系统

NexT 支持多款评论系统，包括Disqus，Facebook Comments，HyperComments ，网易云跟帖，来必力，Valine 等

如需取消某个 页面/文章 的评论，在 md 文件的 front-matter 中增加 comments: false

小编由于阅读次数统计用了LearnCloud，所以评论系统使用了Valine。

Valine一款快速、简洁且高效的无后端评论系统。

如需集成其他评论系统，请查阅官方文档 评论系统。

Valine界面

具体操作

  1. 登录LeanCloud，获取之前创建好的app的App ID和App Key

  2. 修改 主题配置文件，将App ID和App Key 填入，enable改为true 。具体代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Valine.
    # You can get your appid and appkey from https://leancloud.cn
    # more info please open https://valine.js.org
    valine:
      enable: true
      appid:  gaKW5SWAvf7NBolU9wFbxN8O-gzGxoHsz
      appkey: susRJyHS8Fq1SyKXg0r9ad65
      notify: false # mail notifier , https://github.com/xCss/Valine/wiki
      verify: false # Verification code
      placeholder: 您的评论可以一针见血 (*^ω^*)~~ # comment box placeholder
      avatar: mm # gravatar style
      guest_info: nick,mail,link # custom comment header
      pageSize: 10 # pagination size

隐藏 Powered By Valine

Valine默认样式如下：

valine 原始图

其中Code 403 是因为给LeanCloud添加了Web 安全域名，而本地调试无法加进去，这个在正式平台上是不会有的。

对于有些许强迫症的小编而言，怎么能忍受这个呢！
必须隐藏掉！
必须隐藏掉！
必须隐藏掉！

查看Elements可以看到这个div，那么我只要移除这个div下的所有子节点，就可以去掉这个Powered By了。修改对应的文件valine.swig（路径：站点跟路径/themes/next/layout/_third-party/comments/valine.swig），直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	···
    new Valine({
        ···
        pageSize:'{{ theme.valine.pageSize }}' || 10,
    });

//新增以下代码即可，可以移除.info下所有子节点。
var infoEle = document.querySelector('#comments .info');
if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
  infoEle.childNodes.forEach(function(item) {
    item.parentNode.removeChild(item);
  });
}

  </script>
{% endif %}

Ok~大功告成

赶紧去看看效果吧～

修改页面底部显示内容

隐藏”NexT.Pisces v5.1.4”

修改主题配置文件。

将footer内的theme内的enable改为false即可。

添加备案号

我的备案号为浙ICP备17020869号

大家可以替换为你们的备案号。

打开文件博客根目录/themes/next/layout/_partials/footer.swig

替换{ % if theme.footer.powered %}和{ % endif %}之间的显示内容为如下

1
2
3
4
5
{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered',  '<a class="theme-link" target="_blank" href="http://www.miitbeian.gov.cn/" rel="external nofollow" title="工业和信息化部ICP/IP地址/域名信息备案管理系统">浙ICP备17020869号</a>') }}{#
#}</div>
{% endif %}

显示返回顶部和当前阅读进度

修改 主题配置文件，将b2t和scrollpercent两个字段设为true即可。

b2t的功能只适用于 Pisces 和Gemini这两个NexT的主题样式。

由于scrollpercent是显示在b2t按钮上面的，所以如果需要显示scrollpercent就必须将b2t也同时设为true。

1
2
3
4
5
# Back to top in sidebar (only for Pisces | Gemini).
b2t: true

# Scroll percent label in b2t button.
scrollpercent: true

添加css样式

可以看到上文中的站点配置文件和 主题配置文件使用了自己编写的css样式。

这里就和大家简单说明一下如何实现添加自定义的css样式。

其实很简单，NexT主题已经给我们做好了准备，您只需要到本地博客地址/themes/next/source/css/_custom/打开custom.styl文件，编写css样式就OK了。之后就可以在博客文章中使用了。

custom.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Custom styles.

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0;
}
.label-primary {
    background-color: #2780e3;
}

.label-info {
    background-color: #9954bb;
}

使用：

1
2
<span class="label label-primary">站点配置文件</span>
<span class="label label-info">主题配置文件</span>

效果：
站点配置文件
主题配置文件

提交Baidu和Google收录

一个网站的SEO对一个网站非常重要，SEO指的是搜索引擎优化。通过搜索引擎优化，可以提高网站的网站关键词排名以及博客文章的曝光度。一般来说，我们针对百度和Google这两个搜索引擎进行优化，提高对网站资源的索引量，使我们的文章更容易被发现。虽然我的博客的主要读者是我自己，但也不妨碍我做些优化，对吧！接下来向大家展示如何使博客被百度和Google收录。

搜索引擎收录本站点

若未被搜索引擎收录，则需进行以下配置，首先要让搜索引擎先验证我们对网站的所有权，Google和Baidu搜索引擎提交的入口分别为：

这两个搜索引擎支持多种验证方式，这里介绍其中的两种：

  • HTML 文件上传
  • HTML 标记

这里就以Google为例，Baidu配置也一样的。

HTML 文件上传

Google验证-HTML文件上传

第一步之后，将下载的HTML验证文件放入站点/source/路径下，并打开此验证文件，在其最上面添加以下代码：

1
2
layout: false
---

以告诉Hexo不要将此文件加入到生成的sitemap中。

发布之后，再继续进行第3步。

HTML 标记

小编当前的Next版本为5.1.4，该版本已经集成了HTML 标记的验证方式。

  1. 查看原标记,将其中content字段引号内的内容拷贝出来
    Google验证-HTML标记

  2. 修改主题配置文件。
    搜索google_site_verification,将上述拷贝的内容复制在该值后面。

    1
    2
    3
    # Google Webmaster tools verification setting
    # See: https://www.google.com/webmasters/
    google_site_verification: uW8bwgMGUwIA01nPfItoty1rmtmmuVkOVTeS9O0nAUg

  3. 发布后点击该页面上的确认按钮以验证。

Baidu 添加HTML标记

关于添加Baidu的HTML标记，NexT主题也集成了,可以在站点跟路径/themes/next/layout/_partials/head.swig文件中看到百度的字段

1
2
3
{% if theme.baidu_site_verification %}
  <meta name="baidu-site-verification" content="{{ theme.baidu_site_verification }}" />
{% endif %}

但是没有在 主题配置文件中添加baidu_site_verification字段。

所以需要自己添加该字段

1
baidu_site_verification: NeR7tPD3G2

站点地图

站点地图即sitemap， 是一个页面，上面放置了网站上需要搜索引擎抓取的所有页面的链接。站点地图可以告诉搜索引擎网站上有哪些可供抓取的网页，以便搜索引擎可以更加智能地抓取网站。

生成站点地图

  1. 安装插件

    1
    2
    cnpm install hexo-generator-sitemap --save
    cnpm install hexo-generator-baidu-sitemap --save

    hexo-generator-sitemap:Google站点地图生成插件

    hexo-generator-baidu-sitemap：Baidu站点地图生成插件

  2. 修改主题配置文件
    若没有搜到sitemap、baidusitemap 两个字段，则在文件末尾填上如下内容：用于指定站点地图

    1
    2
    3
    4
    5
    # Google sitemap
    sitemap:
        path: sitemap.xml
    baidusitemap:
        path: baidusitemap.xml

  3. 运行本地站点。
    可发现 站点/public/ 文件夹下生成了sitemap.xml和baidusitemap.xml 两个文件。

  4. 发布站点。

    1
    hexo g -d

添加robots.txt

robots.txt（统一小写）是一种存放于网站根目录下的ASCII编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。
在 source 目录下增加 rebots.txt 文件，网站生成后在网站的根目录(站点目录/public/)下。
（请将域名改为自己的网站）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
User-agent: *
Allow: /
Allow: /archives/
Allow: /tags/
Allow: /categories/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://www.nhtzj.com/sitemap.xml
Sitemap: http://www.nhtzj.com/baidusitemap.xml

搜索引擎添加站点地图

添加站点地图，方便搜索引擎抓取站点内容。

以添加到Google为例。

提交sitemap

  1. 进入站点地图
  2. 点击添加/测试站点地图
  3. 输入sitemap.xml
  4. 点击提交

在提交前可以先测试一下，看看站点地图有没有问题。之后再提交 。

此刻，点击robots.txt测试工具，会发现我们的robots.txt文件也被上传到Google了。并且可以对站点下的网页进行 拦截/抓取 的测试。

robots测试工具

Baidu添加sitemap的地址在：数据引入-链接提交（自动提交-sitemap） 。

Url持久化

我们可以发现hexo默认生成的文章地址路径是

网站名称/年/月/日/文章名称

它的url结构超过了三层，太深了,对搜索爬虫是很不友好的。

推荐使用hexo-abbrlink，将连接持久化（不会因为修改文章MarkDown文件名而改变文章地址）。

  1. 安装 hexo-abbrlink

    1
    cnpm install hexo-abbrlink --save

  2. 配置 站点配置文件

    1
    2
    3
    4
    5
    6
    permalink: :abbrlink/
    permalink_defaults:
    # abbrlink config
    abbrlink:
      alg: crc32  # 算法：crc16(default) and crc32
      rep: dec    # 进制：dec(default) and hex

    小编是直接将一级目录设为了文章名，二级格式为permalink: archives/:abbrlink.html ,其中archives 可自行修改

  3. 部署一下，就可以看到你的链接变了

添加 nofollow 标签

给非友情链接的出站链接添加「nofollow」标签，nofollow 标签是由谷歌领头创新的一个「反垃圾链接」的标签，并被百度、yahoo 等各大搜索引擎广泛支持，引用 nofollow 标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有 nofollow 属性的任何出站链接，以减少垃圾链接的分散网站权重。

首先修改 footer.swig（your-hexo-site\themes\next\layout\_partials)

1
2
3
'<a class="theme-link" href="http://hexo.io">Hexo</a>') }}
改成
{{ __('footer.powered', '<a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>') }}

1
2
3
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
改成
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">

再修改 sidebar.swig（your-hexo-site\themes\next\layout\_macro）

1
2
3
<a href="{{ link }}" target="_blank">{{ name }}</a>
改成
<a href="{{ link }}" target="_blank" rel="external nofollow">{{ name }}</a>
1
2
3
<a href="http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0" class="cc-opacity" target="_blank">
改成
<a href="http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0" class="cc-opacity" target="_blank" rel="external nofollow">

总得来说，就是将所有可能的外链地址填上rel="external nofollow"字段，提示搜索引擎不要将这类链接收录。

坚持原创技术分享，您的支持是对我最大的鼓励！