Hexo使用NexT主题及配置

前言

前篇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 IDApp KeyApp 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 IDApp Key

  2. 修改 主题配置文件,将App IDApp 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 %}

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

修改 主题配置文件,将b2tscrollpercent两个字段设为true即可。

b2t的功能只适用于 PiscesGemini这两个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. 修改主题配置文件
    若没有搜到sitemapbaidusitemap 两个字段,则在文件末尾填上如下内容:用于指定站点地图

    1
    2
    3
    4
    5
    # Google sitemap
    sitemap:
    path: sitemap.xml
    baidusitemap:
    path: baidusitemap.xml
  3. 运行本地站点。
    可发现 站点/public/ 文件夹下生成了sitemap.xmlbaidusitemap.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"字段,提示搜索引擎不要将这类链接收录。

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