Hexo配置Next主题

1. 安装环境说明

  • 首先粘贴本教程测试使用的环境,如果在安装配置中,环境有差异,请酌情修改或调整参数.
1
2
3
4
5
6
7
$hexo v
INFO Validating config
hexo: 5.4.0
hexo-cli: 4.3.0
os: linux 5.4.70-amd64-desktop Deepin 20.1 20.1
node: 14.17.6
v8: 8.4.371.23-node.76
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$tree -L 1
your_project_dir/blog
├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
├── scaffolds
├── source
└── _posts
├── hexo
└── rust
└── themes

source 目录下已经有两篇文章,项目能发布到 github 上,能在公网上通过https://pengtechs.net正常访问了.下一步实现尝试一下修改默认的主题,将其替换为 next 主题.

2. 安装 Next 主题

安装 Next 主题有两种方式:

  • 通过压缩包安装
  • 通过 git clone 安装

2.1. 安装方式一: 通过压缩包安装

  • 进入项目

    1
    2
    3
    $cd blog
    $pwd
    your_project_dir/blog

    项目目录结构如上节所示

  • 找到对应的压缩包

  • 下载
    源代码包 Source code(targ.gz)

  • 解压缩
    将源码包解压到 themes/next 目录下即可.

  • 一键安装

    • 前提是你的电脑支持 curl, wget, grep 等命令,针对大多数 windows 用户,建议还是参考上面的步骤一步一步安装主题,对于 MacOs 和 windows 用户,可以使用如下命令一键安装

    • 理解以上步骤,能更好地帮助你理解一键安装命令

    • 这里将以上步骤压缩成一条命令

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

    • 安装完成后,  themes/next 目录的结构如下所示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $tree -L 2
    .
    └── next
    ├── _config.yml
    ├── crowdin.yml
    ├── docs
    ├── gulpfile.js
    ├── languages
    ├── layout
    ├── LICENSE.md
    ├── package.json
    ├── README.md
    ├── scripts
    └── source

安装方式二: 通过 git 克隆安装

1
2
3
git clone --branch v7.8.0 https://github.com/theme-next/hexo-theme-next themes/next
# 或者
git clone --branch v7.8.0 git@github.com:theme-next/hexo-theme-next.git themes/next

3. 配置 Next 主题

3.1. 启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件_config.yml, 找到 theme 字段,并将其值更改为 next。

1
theme: next

3.2. 验证主题

  • 首先启动 Hexo 本地站点

    1
    hexo server
  • 当命令行输出中提示出:
    INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

  • 此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

3.3. 修改主题配置文件

经过以上配置,blog 的主题反而变得更简陋了, 但是有了 next 主题后,我们可以深度定制它
接下我们来深度配置 next 主题,此时我们需要编辑 themes/next/_config.yml 文件

3.3.1. 第一项 修改 schema

  • 目前有四种 shema 可以选择,分别是 Muse, Mist, Pisces, Gemini
  • 这里我选择 scheme: Gemini 这个 schema, 比较适合 PC 端和手机端
1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

制作 logo,并将其存放至/uploads/custom-logo.jpg

1
2
# Custom Logo (Do not support scheme Mist)
custom_logo: /uploads/custom-logo.jpg

说明:
【/uploads/logo.png】 对应的本地 blog 文件夹中位置是 【\blog\themes\next\source\uploads\logo.png】 其中【uploads】文件夹,和【logo.png】文件,都需要自己创建。

3.5. 版权信息声明

设定 license, 设定版权信息显示位置

1
2
3
4
5
6
7
8
9
10
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
license: by-nc-sa
sidebar: true #侧边栏中的版权标识
post: true #每篇文章底部都显示版权信息
language:
  • 首先安装插件

    1
    cnpm install hexo-generator-searchdb --save
  • 修改配置文件

    • 修改站点配置文件_config.yml, 新增以下内容到任意位置:
    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
    • 编辑 theme next 的配置文件,启用本地搜索功能:

    themes/next/_config.yml

    1
    2
    3
    # Local search
    local_search:
    enable: true

3.7. 开启侧边栏社交链接

  • 编辑主题配置文件 themes/next/_config.yml
1
2
3
4
social:
GitHub: https://github.com/your_github_id || fab fa-github
E-Mail: mailto:your_email@gmail.com || fa fa-envelope
Weibo: https://weibo.com/your_weibo || fab fa-weibo

代码块配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
theme:
light: a11y-dark
dark: a11y-dark
highlight:
enable: true
prismjs:
enable: true
light: prism
dark: prism-dark
# Add copy button on codeblock
copy_button:
enable: true
# Available values: default | flat | mac
style: flat

3.8. 开启 Utterances 评论功能 (推荐)

3.9. 配置百度统计

登录 百度统计,定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id,如下图所示:

1
2
3
4
5
6
7
8
9
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxx";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>

编辑 主题配置文件, 修改字段 baidu_analytics,值设置成你的百度统计脚本 id。

1
baidu_analytics: # <app_id>

3.10. 开启 google Analytics

  • 申请 google 账号, 创建 Analytics 账号, 修改 themes/next/_config.
1
2
3
4
# Google Analytics
# See: https://analytics.google.com
google_analytics:
tracking_id: # <app_id>

3.11. 开启页面访问量统计

这里使用不蒜子进行页面访问量统计
其实在 next 中已经集成了不蒜子的统计,在官网上也说了
在主题配置文件_config.yml 下搜索 busuanzi_count,enable 设置为 true

1
2
3
4
5
6
7
8
busuanzi_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: far fa-eye

由于我的 hexo v8.8.0, 不需要额外的配置, 即可以看到统计功能生效了.

3.12. 开启字数统计及阅读时长

安装插件 hexo-symbols-count-time

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

修改主题配置文件_config.yml

1
2
3
4
5
6
symbols_count_time:
separated_meta: true # 是否换行显示 字数统计 及 阅读时长
item_text_post: true # 文章 字数统计 阅读时长 使用图标 还是 文本表示
item_text_total: false # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
awl: 4 # awl(Average Word Length)的数值是设定多少字符统计为一个字(word),中文博客建议设置为 2
wpm: 275 # (Words Per Minute)是假设的读者阅读速度,多少字(word)统计为阅读时长一分钟。

说明:
在配置项中的:
awl(Average Word Length)的数值是设定多少字符统计为一个字(word),中文博客建议设置为 2。
wpm(Words Per Minute)是假设的读者阅读速度,多少字(word)统计为阅读时长一分钟。官方文档里的一些参考值:
慢速:200
中速:275(默认)
快速:350

实测需要清理一下缓存, 才能生效,否则会显示时长位置会显示 NaNa 字样

参考为 NexT 主题添加文章阅读量统计功能

3.13. 设置 侧边栏外链

1
2
3
4
5
6
7
8
9
# Blog rolls
links_settings:
icon: fa fa-globe
title: 赞助商链接
# Available values: block | inline
layout: block

links:
"外链1": https://example.com

3.14. 返回顶部按钮显示阅读进度

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: true #这里我把返回到顶部放在sidebar, 因为我的右下角还要留给分享按钮
# Scroll percent label in b2t button.
scrollpercent: true

3.15. 关闭动画效果

主题中的渐出展开等 js 特效,确实比较炫酷。但是操作延迟也比较高,容易形成一种页面卡顿的错觉。看久了会审美疲劳,我选择关闭。毕竟实用才是最重要的。如果你有同感,可以参考我的配置

1
2
3
motion:
enable: false
async: false

3.16. 修改文章底部的那个带#号的标签

具体实现方法

1
2
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

3.17. 设置用户头像

将要显示的头像保存在 source 下的 imgs 文件夹中并命名为 avatar.jpg

修改 next 配置文件 themes/next/_config.yml, 找到 Avatar 节点将其修改为如下

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /imgs/avatar.jpg
# If true, the avatar will be displayed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: false

3.18. 添加 google 广告

注册 Google Adsense 账号
注册账号流程比较简单,入口在这里:Google Adsense
注册完成后,google 会提供一段广告脚本, 将他放到下面文件的头部位置
修改 themes/next/layout/_partials/head.njk

1
2
3
4
5
<script
data-ad-client="your-ad-client-id"
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
></script>

确认无误之后,在 google adsense 上点击确认,开始验证,一般没问题的话几分钟就会出结果,有问题的话要等待一段时间。
参考hexo 个人 next 主题博客接入谷歌广告

3.19. 忽略一些文章

需求是这样的, 文章还没有写完, 所以我打算把正在写的文章放在 source/in_progress 文件夹下, 等文章写完后准备发布时移动到它该去的位置.
这样我就不用担心未完成的文章被发布出去, 写作时使用 markdown 工具预览.
编辑站点的配置文件_config.yml

1
2
# Directory
skip_render: ["in_progress/**/*"]

3.20. SEO 搜索引擎优化

搜索引擎优化,可以参考我的文章 Hexo 博客搜索引擎优化

3.21. 收到 google 的邮件

出现次数最多的问题,我们在您的网站中发现了以下错误:
文字太小,无法阅读
可点击元素之间的距离太近

解决办法 修改 next 的配置文件, 将 font.global.size 修改为 1.1 相当于 18px
fonts 设为国内站点https://fonts.lug.ustc.edu.cn 或者 https://fonts.loli.net

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
font:
enable: true

# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host: https://fonts.loli.net

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# Global font settings used for all elements inside <body>.
global:
external: true
family: Noto Serif SC, PingFang SC, Microsoft YaHei, sans-serif, Lato
size: 1.1

修改 themes\next\source\css\_variables\base.styl

1
2
3
4
5

$font-family-chinese = "Noto Serif SC", "PingFang SC", "Microsoft YaHei";
$font-family-base = $font-family-chinese, sans-serif;
$font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');

将行间距$line-height-base 修改为 2.2 默认是2
该文件位于 next > source > css > base.styl

1
2
3
4
// Global line height
$line-height-base = 2.2;
$line-height-code-block = 1.6; // Can't be less than 1.3;

3.22. 开启 mermaid 图表功能

开启 mermaid 图表功能,可以参考我的另一篇文章Hexo 中插入 mermaid 图表

3.23. hexo 命令行工具详解

管理站点,或创建博客可能经常会用到 hexo 命令行工具,
可参考我的另一篇文章 Hexo 命令详解.

3.24. 添加打赏功能

启用主题配置文件中的打赏相关字段,并将个人收款码图片置于 \source\imgs\ 目录下,注意保持图片命名与配置文件中一致:

themes\next_config.yml

1
2
3
4
5
6
7
8
9
reward_settings:
# If true, a donate button will be displayed in every article by default.
enable: true
animation: false #关闭悬停收款码上的文字抖动效果
comment: Buy me a coffee

reward:
wechatpay: /imgs/wechatpay.jpg
alipay: /imgs/alipay.jpg

并非每个页面都需要开启打赏功能,可以在 Front-Matter 中添加 reward 字段来控制是否在本文章中添加打赏信息,然后修改文章布局模板中相关的判定条件:

themes/next/layout/_macro/post.njk

1
2
3
4
5
- {%- if post.reward_settings.enable %}
+ {%- if post.reward and post.reward_settings.enable %}
{{ partial('_partials/post/post-reward.njk') }}
{%- endif %}

为了方便可在草稿模板 scaffolds\draft.md 中统一添加 reward 字段默认值:
scaffolds\draft.md

1
2
3
4
5
title: {{ title }}
tags:
categories:

- reward: true

修改打赏按钮的提示

themes\next\languages\en.yml

1
2
3
4
5
6
7
8
9
10
11

reward:
- donate: Donate
+ donate: 打赏
- wechatpay: WeChat Pay
+ wechatpay: 微信支付
- alipay: Alipay
+ alipay: 支付宝
paypal: PayPal
bitcoin: Bitcoin

5. Trouble Shooting

5.1. 链接包含中文不能正常跳转问题

  • 现象:当右侧大纲条目中包括中文时,点击不能正确跳转

    • 打开浏览器开发者模式发现以下错误

      1
      2
      utils.js:240 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
      at HTMLAnchorElement.<anonymous> (utils.js:240)
  • 原因分析:
    中文链接在转码后不能正确的映射到相应的页面元素

  • 解决方案

    • 我已经通过此issue反馈给 hexo 社区,社区的回复是在新的 Next theme 中已经解决此问题,需要升级 next theme 到新版本, 以下是来自社区的回复:

      1
      2
      This issue has been fixed in next-theme/hexo-theme-next@0d2b3af
      Theme NexT version 7.8.0 is outdated. The latest version is v8.8.0 https://github.com/next-theme/hexo-theme-next/releases/tag/v8.8.0

相关阅读

使用 Hexo 搭建自己的博客网站

Hexo 命令详解

Hexo 博客添加评论功能

Hexo 配置 Next 主题

Hexo 博客搜索引擎优化