Hexo-NexT(v7.0+)主题配置

写在前面:本文配置适用于NexT-7.1.2,现在(2020年1月13日)NexT主题已经更新至7.7.0,不少配置已经改变,大家可以结合一下这两篇文章:Hexo-NexT 版本更新记录本博客当前使用的插件总结

一、获取NexT

1、下载最新 release 版本

通常情况下请选择 stable 版本。推荐不熟悉的用户按此方式进行。

这种方式将仅提供最新的 release 版本(其中不附带 .git 目录)。因此,你无法通过 git 更新这一方式安装的主题。

更新:推荐使用独立的配置文件(数据文件)而不在主题源代码进行更改,便于后续的更新(下载最新版本,替换掉旧版本)

二、站点配置

1、设置hexo的next主题

我们在站点的配置文件_config.yml中找到theme后添加:

1
theme: next  # 配置成刚下载的next主题

2、配置hexo网站相关信息

我们在站点的配置文件_config.yml中,修改:

1
2
3
4
5
6
7
8
# Site
title: # 网站标题
subtitle: # 网站副标题
description: # 描述,介绍网站的
keywords: # 网站的关键字
author: # 博主姓名
language: zh-CN # 语言:zh-CN 是简体中文
timezone: UTC # 时区

注意:博客框架默认的语言是英文,我们需要到/themes/next/languages目录下,查看当前NexT版本简体中文对照文件的名称是zh-Hans还是zh-CN。这里是zh-CN

3、设置hexo永久链接

我们在站点的配置文件_config.yml中,修改:

1
2
3
4
5
6
7
url: https://tding.top/
root: /
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
permalink_defaults:

注:这个文章永久链接设置需要安装插件,详细安装配置过程见:本博客当前使用的插件总结中的Hexo 文章永久链接插件

4、nofollow标签的使用

减少出站链接能够有效防止权重分散,hexo有很方便的自动为出站链接添加nofollow标签的插件。

首先安装hexo-filter-nofollow插件:

1
npm install hexo-filter-nofollow --save

然后我们在站点的配置文件_config.yml中添加配置,将nofollow设置为true

1
2
3
4
5
6
7
# 外部链接优化
nofollow:
enable: true
field: site
exclude:
- 'exclude1.com'
- 'exclude2.com'

其中exclude(例外的链接,比如友链)将不会被加上nofollow属性。

三、主题配置

1、配置hexo中的about、tag、categories、sitemap菜单

默认的主题配置文件_config.yml中,菜单只开启了首页和归档,我们根据需要,可以添加about、tag、categories、sitemap等菜单,所以把它们也取消注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 菜单设置为 菜单名: /菜单目录 || 菜单图标名字
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
sitemap: /sitemap.xml || sitemap
commonweal: /404/ || heartbeat

menu_settings:
icons: true # 显示图标
badges: true # 显示统计信息

注:hexo所有图标均来自fontawesome,其中||后面是你想要设置的图标的名字。

2、手动生成hexo菜单对应文件

新菜单开启后是没有对应文件的,所以要手动生成about、tags、categories、404页面。

新建about页面

about页面一般用来介绍站点信息和博主信息。

我们可以在博客根目录下输入以下命令新建页面:

1
hexo new page about

然后你会发现多了一个hexo/source/about文件夹,里面有一个index.md文件,你可以根据自己的需要在这个Markdown文件中写一些内容(同文章一样,用Markdown语法)。

新建一个tags页面

同样的,我们可以新建tags页面:

1
hexo new page tags

tags页面文件hexo/source/tags/index.md的头部修改为:

1
2
3
4
5
6
---
title: 标签
date: 2019-06-29 11:35:42 # 时间随意
type: "tags" # 类型一定要为tags
comments: false # 提示这个页面不需要加载评论
---

新建一个categories页面

同样的,我们可以新建categories页面:

1
hexo new page categories

categories页面文件hexo/source/categories/index.md的头部修改为:

1
2
3
4
5
6
---
title: 文章分类
date: 2018-10-15 00:03:57
type: "categories"
comments: false
---

新建一个404页面

这里我们将404替换成腾讯的公益页面。

首先我们在hexo/source目录下创建自己的404.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script>
</body>
</html>

注意:Hexo博客的基本内容是一些Markdown文件,放在source/_post文件夹下,每个文件对应一篇文章。除此之外,放在source文件夹下的所有开头不是下划线的文件,在hexo generate的时候,都会被拷贝到public文件夹下。但是,Hexo默认会渲染所有的HTML和Markdown文件

因此我们可以简单地在文件开头加上layout: false一行来避免渲染:

1
2
3
4
5
6
7
8
9
10
11
12
13
+layout: false
+---

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script>
</body>
</html>

这样我们就完成了404页面的创建。

注意:本地测试不出来,发布出来就可以了。

3、配置hexo本地搜索

本地搜索的原理

对于动态网站来说,可以通过php实现。但是,Hexo博客是静态网站,用不了php。

NexT主题已经实现这个功能,它用了Hexo的拓展包 hexo-generator-searchdb,预先生成了一个文本库 search.xml,然后传到了网站里面。在本地搜索的时候,NexT直接用javascript调用了这个文件,从而实现了静态网站的本地搜索。

设置过程

安装插件:

1
npm install hexo-generator-searchdb --save

然后我们修改站点配置_config.yml文件,添加如下内容:

1
2
3
4
5
6
# 本地搜索
search:
path: search.xml
field: post
format: html
limit: 100
  • path:索引文件的路径,相对于站点根目录
  • field:搜索范围,默认是 post,还可以选择 page、all,设置成 all 表示搜索所有页面
  • limit:限制搜索的条目数

然后修改主题配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

4、设置hexo中的rss订阅

安装插件:

1
npm install hexo-generator-feed --save

在站点配置文件_config.yml中添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:

5、配置hexo站点的footer信息

底部footer可以开关显示hexo信息、theme信息、建站时间等个性化配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
footer:
since: 2018 # 建站开始时间
icon:
name: user # 设置 建站初始时间和至今时间中间的图标,默认是一个'小人像',更改user为heart可以变成一个心
animated: true
color: "#808080" # 更改图标的颜色,红色为'#ff0000'
powered:
enable: true # 开启hexo驱动
version: true # 开启hexo版本号
theme:
enable: true # 开启主题驱动
version: true # 开启主题版本号
custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a> # 这里的底部标识是为了添加coding page服务时的版权声明 打开注释就可以看到底部有一个 hosted by coding pages

6、配置hexo中next主题样式选择

NexT一共提供了4种首页样式,按照自己喜好选择一个,选择一个其他主题样式后其他的主题前一定要加上注释#

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

7、头像信息设置

1
2
3
4
5
avatar:
url: /images/avatar.jpg # 设置头像资源的位置
rounded: true # 开启圆形头像
opacity: 1 # 不透明的比例:0就是完全透明
rotated: false # 不开启旋转

8、社交信息和友链配置

这里和菜单设置格式一样,社交名字: 社交url || 社交图标,图标信息来自fontawesome

1
2
3
4
5
6
7
8
social: 
GitHub: https://github.com/yourname || github
E-Mail: mailto:yourname@gmail.com || envelope
Google: https://plus.google.com/yourname || google

social_icons:
enable: true # 显示社交图标
icons_only: false # 只显示图标,不显示文字

友链配置:

1
2
3
4
5
6
7
# Blog rolls
links_icon: link # 友链的图标 参考上文
links_title: Links # 友链的title 比如你可以更改为 友情链接
links_layout: block # 友链摆放的样式:按块(一行一个)
#links_layout: inline # 友链摆放的样式:按线摆放(一行很多个),注意,同时只能一种样式
links:
Title: http://example.com/ # 友链的地址

官方提供的友链放在侧边栏下面,视觉上比较臃肿。这里我新建了一个友链页面:友情链接,设置教程见:Hexo-NexT 新增友链

9、首页文章不展示全文显示摘要

我们可以在主题配置文件中设置:

1
2
3
4
5
6
7
8
9
scroll_to_more: true      # 点击阅读全文后是否跳到<!--more-->标记处,设为false时点击阅读全文可以从头阅读

save_scroll: false # 自动保存每篇文章或页面上一次滚动的地方

excerpt_description: true # 自动在首页对文章进行摘要描述作为前言文本

auto_excerpt: # 是否自动截取摘要
enable: false # 设置为true则自动截取150字当做首页摘要
length: 150 # 自动截取的字数

官方公告:auto_excerpt可以自动截断文章内容作为摘要。此功能不是一个 Hexo 主题应当负责的,这为主题的维护者带来了太大压力。自 7.6.0 版本开始,此功能被移除,请自行安装第三方插件,或阅读 Hexo 有关文档。当然,我们仍然建议通过<!-- more -->来精确控制 Read More 的位置。

因此,这个功能在新版的NexT已经被废弃了,大家可以直接在文章中添加<!-- more -->来精确控制摘要内容

10、首页文章属性

1
2
3
4
5
6
7
post_meta:
item_text: false # 设为true 可以一行显示,文章的所有属性
created_at: true # 显示创建时间
updated_at:
enabled: true # 显示修改的时间
another_day: true # 设true时,如果创建时间和修改时间一样则显示一个时间
categories: true # 显示分类信息

11、页面阅读统计

1
2
3
4
5
6
7
8
busuanzi_count:
enable: false # 设true 开启
total_visitors: true # 总阅读人数(uv数)
total_visitors_icon: user # 阅读总人数的图标
total_views: true # 总阅读次数(pv数)
total_views_icon: eye # 阅读总次数的图标
post_views: true # 开启内容阅读次数
post_views_icon: eye # 内容页阅读数的图标

12、字数统计、阅读时长

首先安装插件:

1
npm install hexo-symbols-count-time --save

主题配置文件_config.yml修改如下:

1
2
3
4
5
6
symbols_count_time:
separated_meta: true # false会显示一行
item_text_post: true # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
item_text_total: true # 底部footer是否显示字数统计属性文字
awl: 4 # 计算字数的一个设置,没设置过
wpm: 275 # 一分钟阅读的字数

站点配置文件_config.yml新增如下:

1
2
3
4
5
6
7
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true

13、内容页里的代码块新增复制按钮

1
2
3
4
codeblock:
copy_button:
enable: false # 增加复制按钮的开关
show_result: false # 点击复制完后是否显示 复制成功 结果提示

14、配置微信,支付宝打赏

1
2
3
4
5
# Reward
reward_comment: # 打赏描述
wechatpay: /images/wechatpay.png # 微信支付的二维码图片地址
alipay: /images/alipay.png # 支付宝的地址
#bitcoin: /images/bitcoin.png # 比特币地址

15、相关文章推荐

安装推荐文章的插件:

1
npm install hexo-related-popular-posts --save

主题配置信息如下:

1
2
3
4
5
6
7
8
9
10
related_posts:
enable: true
title: 相关文章推荐 # 属性的命名
display_in_home: false # false代表首页不显示
params:
maxCount: 5 # 最多5条
#PPMixingRate: 0.0 # 相关度
#isDate: true # 是否显示日期
#isImage: false # 是否显示配图
isExcerpt: false # 是否显示摘要

16、文章原创申明

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: false
post: true # 默认显示版权信息
language:

17、背景动画设置

Canvas-nest风格

进入theme/next目录,执行命令:

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

实际上就是将一个显示动效的js文件clone到对应目录。

这时将配置文件_config.yml中的canvas_nest: false改为canvas_nest: true才能真正生效。

个人认为在站点中添加动态背景并没有实际的意义,只会凭空增加页面内存占用及 CPU 消耗

18、添加Google统计

访问Google Analytics,按照提示填写网站信息开通GA服务,获取统计ID。

然后编辑主题配置文件_config.yml,找到关键字google_analytics,删除注释#并填写获取到的统计ID:

1
2
3
4
# Google Analytics
google_analytics:
tracking_id:
localhost_ignored: true

19、Google Search Console

该版本已经集成了HTML标记的验证方式。

  • 查看原标记,将其中content字段引号内的内容拷贝出来
  • 修改主题配置文件_config.yml。搜索google_site_verification,将上述拷贝的内容复制在该值后面:
1
2
3
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification: uW8bwgMGUwIA01nPfItoty1rmtmmuVkOVTeS9O0nAUg

四、参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡