0%

Hexo v3.9.0 | NexT v7.4.0 搭建个人博客指南

Posted on Edited on In Valine:

NexT 在 v7.2.0 版本做出重大改动，在我查阅资料过程中发现，中文社区内大量关于 NexT 的自主配置方法已不再适用。为了让后来者少走弯路，我重新整理归类了一篇适用于 Hexo v3.9.0 | NexT v7.4.0 版本的个人博客搭建指南。

本文在第一章中将介绍如何在本地搭建 Hexo 博客，第二章则介绍如何安装使用 NexT 主题，第三章及第四章将介绍针对站点和文章详情页的一些基础优化方案，第五章将介绍如何支持 LaTeX 公式。

开始使用 Hexo

Hexo 是一个快速、简洁且高效的博客框架。 Hexo 使用 Markdown 解析文章，在几秒内，即可利用绚丽的主题生成静态网页。

本地搭建博客

在命令行中通过 npm 来安装 Hexo：

1
$ npm install -g hexo-cli

-g 表示全局安装，会将 Hexo 命令加入环境变量中，以使其在 cmd 下有效。

Hexo 依赖于 Node.js 和 git，所以在安装 Hexo 之前先确保已安装了这两项应用。

在 terminal 或 cmd 中查看 Node.js 及 npm 版本号，以检查 node.js 及 npm 是否正确安装。

1
2
$ node -v
$ npm -v

新建一个目录作为个人博客项目目录，执行如下命令，Hexo 将会在指定文件夹中新建所需的文件。

1
2
3
$ C:\Users\haiwei>hexo init hwchaiblog
$ C:\Users\haiwei>cd hwchaiblog
$ C:\Users\haiwei\hwchaiblog>npm install

官方教程中提到要在项目目录下执行 npm install 命令，事实上不必如此，在执行 hexo init 的过程中就已经自动安装好了项目依赖。

执行完毕后，将会生成以下文件结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├── node_modules         //依赖安装目录
├── scaffolds            //模板文件夹，新建的文章将会从此目录下的文件中继承格式
|   ├── draft.md         //草稿模板
|   ├── page.md          //页面模板
|   └── post.md          //文章模板
├── source               //资源文件夹，用于放置图片、数据、文章等资源
|   └── _posts           //文章目录
├── themes               //主题文件夹
|   └── landscape        //默认主题
├── .gitignore           //指定不纳入git版本控制的文件
├── _config.yml          //站点配置文件
├── db.json            
├── package.json
└── package-lock.json

在项目根目录下执行如下命令启动 Hexo 的内置 Web 服务器

1
$ hexo server   // or hexo s

该命令将会调用 Markdown 引擎解析项目中的博客内容生成网页资源，资源将会存于内存中，所以用户执行完命令之后在项目文件夹中是找不到相关的 Web 资源目录的。该命令还会启动一个简易的 Web 服务器用于提供对内存中网页资源的访问（工作机制类似于 webpack-dev-server），Web 服务器默认监听 4000 端口，用户可在浏览器中通过地址 localhost:4000 访问博客。

此外，可以通过添加命令行参数来支持高级用法：

  • 当 4000 端口已被其他应用占用时，可以添加 -p / --port 参数来设置 Web 服务监听的端口号，如 hexo s -p 8000
  • 默认情况下，Hexo 监听项目目录的文件变化，用户对于项目文件的任何改动都会触发实时解析编译并更新内存中的网页资源，也就是说，用户在本地修改后刷新浏览器就可以看到改动效果。如果不希望 Hexo 监听项目目录的文件变化，可以添加 -s / --static 参数，这样本地改动就不会触发 Hexo 实时解析更新。

上传至 Github

进入 GitHub 官网并登录，直接点击 new repositories 或者进入 You repositories 再点击 new repositories，即可新建用于存放博客项目的 repository。repository 的名称必须为：You account name.github.io。

GitHub 中的 Repository 创建好后，回到本地项目路径，打开项目根目录下的 _config.yml 文件，找到 deploy 标签，在 deploy 标签下添加：

1
2
3
4
deploy:
  type: git
  repository: https://github.com/haiweichai/haiweichai.github.io.git
  branch: master

在 _config.yml 中找到 url，并修改为：

1
url: http://haiweichai.github.io   # haiweichai是我的账号名称，请修改为自己的账号名称

在项目根目录下执行如下命令安装 hexo-deployer-git:

1
$ npm install --save hexo-deployer-git

并执行如下命令告知 Git 你的身份：

1
2
$ git config --global "chw9402@mail.ustc.edu.cn"  # 你的GitHub注册邮箱
$ git config --global "haiweichai"  # 你的GitHub ID

最后，执行如下命令，将本地博客项目文件上传至 GitHub：

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

按照本章节步骤执行至此，便可访问 https://haiweichai.github.io/ 浏览个人博客。

新建博客文章

在博客项目根目录下，执行如下命令创建文章

1
$ hexo new hello-world

创建的文章在 source/_posts 目录下，主体为 hello-world.md 文件。

若要删除文章，只需删除 source/_posts 目录下对应文件，并执行如下命令，即在博客网站上删除了对应文章。

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

安装 NexT 主题

为了达到满意的布局结构，需要进行诸多配置调整，搭建具有自己独特风格的博客。

Hexo 提供了许多主题模板，读者可以查看 Hexo 主题 挑选并下载自己喜欢的布局。接下来章节将重点介绍 NexT主题。

NexT 作为一款符合广大用户审美的主题，始终拥有着较高的出场率。Hexo 中切换主题的方式非常简单，只需要将主题文件拷贝至博客项目根目录下的 themes 文件夹中，然后修改 _config.yml 文件中的 theme 字段即可。

在博客项目根目录下，执行如下命令，下载并安装 NexT 主题包。

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

在项目根目录下打开网站配置文件 _config.yml 将 theme 设置为 next 即可将博客主题切换为 NexT。

也可以在 NexT 版本发布页面 手动下载然后解压到根目录下的 theme 文件夹下，并将文件夹命名为 next 。

注意！Next 仓库已经从 iissnan/hexo-theme-next 转移到了 theme-next/hexo-theme-next，并在新仓库中发布了 v6.x 版本，后续维护也将在新仓库中展开。如果你仍在使用旧仓库中的 NexT 版本，可能会遇到各种 Bug。

NexT 主题风格有四种，用户可以在主题配置文件 theme\next\_config.yml 中修改 scheme 字段以选择自己喜欢的主题风格：

\theme\next\_config.yml
1
2
3
4
5
# Schemes
# scheme: Muse   #这是 Nex默认版本，黑白主调，大量留白
# scheme: Mist   #Muse 的紧凑版本，整洁有序的单栏外观
# scheme: Pisces #双栏 Scheme，小家碧玉似的清新
scheme: Gemini   #双子座，也是双栏形式，和Pisces类似

博客站点优化

博客项目根目录下的 _config.yml 文件负责站点的相关配置，用户可以通过修改该文件来自定义站点内容或功能，修改后需要重启服务器才能看到效果。

本节通过修改站点配置文件完善了网站标题、网站描述、社交链接、站点版权信息、友情链接等，效果如下图：

完善基础信息

在站点配置文件 _config.yml 中记录了博客网站的基础信息。

1
2
3
4
5
6
7
title: 他在时间门外  # 网站标题
subtitle: Hi, I am Hai-Wei Chai (柴海伟) # 网站副标题
description: Be interesting! # 网站描述
keywords: Hai-Wei Chai # 网站关键词
author: Hai-Wei Chai (柴海伟)  # 你的名字
language: en  # 语言
timezone: UTC  # 时区  America/New_York, Japan, UTC

每个字段的冒号与值之间需要间隔一个空格。

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
new_post_name: :title.md   # 新文章文件名称
default: post              # 预设布局
auto_spacing: false        # 在中文与英文间插入空格
titlecase: false           # 把标题转换为 title case
external_link: true        # 在新标签中打开链接
filename_case: 0           # 把文件名称转换为(1)小写或(2)大写
render_drafts: false       # 显示草稿
post_asset_folder: false   # 启动Asset文件夹
relative_link: false       # 把链接改为与根目录的相对路径
futrue: true               # 显示未来的文章
highlight:                 # 代码块设置
per_page: 10               # 每页显示文章数（0 关闭分页功能）
pagination_dir: page       # 分页目录

封面头像设置

用户将自己喜欢的图像放置在 next/source/images 路径中，并按照下方规则命名即可。

theme\next\_config.yml
1
2
3
4
5
avatar:
  url: /images/gamersky.gif  # 头像图片路径，放置在 next/source/images
  rounded: false  # 是否显示圆形头像
  opacity: 0.7  # 透明度
  rotated: false  # 是否旋转

标签栏设置

在博客项目根目录下执行如下命令创建标签栏本地文件。

1
2
3
4
5
6
7
$ hexo new page "categories"
$ hexo new page "archives"
$ hexo new page "tags"
$ hexo new page "scholar"
$ hexo new page "sources"
$ hexo new page "gallery"
$ hexo new page "about"

在主题配置文件中找到 menu 标签，添加分类。

theme\next\_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
  home: / || home
  categories: /categories/ || th
  archives: /archives/ || archive
  tags: /tags/ || tags
  scholar: /scholar/ || bar-chart
  sources: /sources/ || rss
  gallery: /gallery/ || file-image-o
  about: /about/ || user

menu_settings:
  icons: true  # 是否显示图标
  badges: false  # 标签右侧显示数字

标签分类中第三列为 Font Awesome 图标编码。

首页文章摘要

根据默认的主题配置，首页将会显示每一篇文章的全文，如果想要只显示文章摘要，可以在主题配置文件中做出如下更改：

themes\next\_config.yml
1
2
3
auto_excerpt:
  enable: true  # 开启自动摘要提取
  length: 150

此时将会从文章中提取 150 个字符作为摘要。

用户也可以在文章中通过 <!-- more --> 标记来精确划分摘要信息，标记之前的段落将作为摘要显示在首页。

如果在文章的 Front-Matter 中有非空的 description 字段，则该字段的内容会被作为摘要显示在首页。

修改站点页脚

在主题配置文件中修改网站页脚信息：

themes\next\_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
footer:  # 底部信息区
  since: 2019  # 建站时间
  icon:
    name: user   # 图标名称
    animated: false   # 开启动画
    color: "#808080"   # 图标颜色

  powered:
    enable: true  # 显示由 Hexo 强力驱动
    version: true  # 隐藏 Hexo 版本号

  theme:
    enable: true  # 显示所用的主题名称
    version: true  # 隐藏主题版本号

更改后效果如下：

修改网站图标

网站图标即浏览器标签左侧的标志。下载自己喜欢的图标并放置于 themes\next\source\images\ 目录下，命名方式参考主题配置文件中的 favicon 字段。

themes\next\_config.yml
1
2
3
4
5
favicon:
  small: /images/favicon-16x16-next.png  # 小图标
  medium: /images/favicon-32x32-next.png  # 大图标
  apple_touch_icon: /images/apple-touch-icon-next.png  # 苹果图标
  safari_pinned_tab: /images/logo.svg  # safari 浏览器标签页图标

添加友情链接

在主题配置文件中修改相应字段：

themes\next\_config.yml
1
2
3
4
5
6
7
8
links_settings:
  icon: link
  title: Links
  layout: inline  # block 竖排； inline 横排

links:
  PIMS: http://www.pims.ac.cn  # 顶峰多尺度科学研究所
  USTC: https://ustc.edu.cn    # 中国科学技术大学

添加社交链接

用户可以在主题配置文件中根据样例提示添加个人社交软件链接：

themes\next\_config.yml
1
2
3
4
5
6
7
8
social:
  GitHub: https://github.com/haiweichai || github
  E-Mail: mailto:chw9402@mail.ustc.edu.cn || envelope

social_icons:
  enable: true  # 是否显示图标
  icons_only: false  # 只显示图标
  transition: false  #

若要取消社交图标前的小圆点，可以在自定义样式文件中添加如下样式规则：

themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
//隐藏社交图标前的圆点
.links-of-author a,
.links-of-author .exturl {
  &:before {
    display: none;
  }
}

添加版权协议

在主题配置文件中开启相关字段并选择知识共享协议：

themes\next\_config.yml
1
creative_commons: by-nc-sa

文章页优化

主题目录下的 themes\next\_config.yml 文件负责与主题相关的配置，用户可以通过修改该文件来自定义与主题相关的内容或功能，修改后刷新浏览器即可即时生效。

修改文章目录导航

在主题配置文件中关闭目录中的数字编号：

themes\next\_config.yml
1
2
3
4
5
6
toc:
  enable: true
  number: false  # 关闭目录中的数字编号
  wrap: false
  expand_all: true  # 默认展开多级目录  
  max_depth: 3  # 三级目录及更低层级目录将被隐藏

修改文章 meta 信息

默认主题配置中，标题下方会显示文章的创建时间、文章的修改时间、文章分类信息等元数据，用户可以在主题配置文件中自定义设置需要显示的 meta 元信息：

themes\next\_config.yml
1
2
3
4
5
6
7
post_meta:
  item_text: true  # 显示文字说明
  created_at: true  # 显示文章创建时间
  updated_at:
    enabled: true  # 显示文章修改时间
    another_day: false  # 只有当修改时间和创建时间不是同一天的时候才显示
  categories: true  # 显示分类信息

中英文之间自动添加空格

该功能由 pangu 提供，在根目录下执行如下命令克隆插件到项目中：

1
$ git clone https://github.com/theme-next/theme-next-pangu.git themes/next/source/lib/pangu

在主题配置文件中设置 pangu: true 即可启用该动能。

不推荐使用 hexo-filter-auto-spacing 实现该功能，该插件会导致目录中带有中英文的标题失效，无法跳转到文章指定章节。

文字字号设置

修改文字字号的文件路径是：themes/next/source/css/_variables/base.styl，配置内容主要修改如下：

themes/next/source/css/_variables/base.styl
1
2
3
4
5
6
7
8
9
10
// Font size
$font-size-base           = 16px;     // 1em;
$font-size-base           = unit(hexo-config('font.global.size'), em) if hexo-config('font.global.size') is a 'unit';
$font-size-smallest       = .75em;
$font-size-smaller        = .8125em;  // 侧边栏 字号
$font-size-small          = .875em;   // Read more 字号
$font-size-medium         = 1em;      // posts | categories | tags 上方数字
$font-size-large          = 16px;     // 1.125em;  // 正文字号
$font-size-larger         = 1.25em;
$font-size-largest        = 1.375em;

修正文末导航跳转逻辑

本章节参考 reuixiy | 打造个性超赞博客 Hexo+NexT+GitHubPages 的超深度优化 #5.2

如果不是看到 reuixiy 的文章，可能一辈子都不会注意到这个奇葩的逻辑：文章底部的左侧 / 右侧箭头分别导航到更旧 / 更新的文章链接，就好像你在手机相册里左滑却看到了更久以前的照片，细细想想这个逻辑毫无社会主义可言，至少没有中国特色。

themes\next\layout\_macro\post.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% if not is_index and (post.prev or post.next) %}
  <div class="post-nav">
    <div class="post-nav-next post-nav-item">
-      {% if post.next %}
+      {% if post.prev %}
-        <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
+        <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
-          <i class="fa fa-chevron-left"></i> {{ post.next.title }}
+          <i class="fa fa-chevron-left"></i> {{ post.prev.title }}
        </a>
      {% endif %}
    </div>

    <span class="post-nav-divider"></span>

    <div class="post-nav-prev post-nav-item">
-      {% if post.prev %}
+      {% if post.next %}
-        <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
+        <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
-          {{ post.prev.title }} <i class="fa fa-chevron-right"></i>
+          {{ post.next.title }} <i class="fa fa-chevron-right"></i>
        </a>
      {% endif %}
    </div>
  </div>
{% endif %}

打赏功能

NexT主要提供三种打赏方式，分别为微信、支付宝、比特币，在 themes\next 内搜索 Reward。

1
2
3
4
5
# Reward
reward_comment: Donate comment here  # 描述
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
bitcoin: /images/bitcoin.png

Table表格美化

将如下代码添加至：\source\_styles.styl。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
table {
    width: 100%; /*表格宽度*/
    max-width: 65em; /*表格最大宽度，避免表格过宽*/
    border: 1px solid #dedede; /*表格外边框设置*/
    margin: 15px auto; /*外边距*/
    border-collapse: collapse; /*使用单一线条的边框*/
    empty-cells: show; /*单元格无内容依旧绘制边框*/
}
table th,
table td {
  height: 35px; /*统一每一行的默认高度*/
  border: 1px solid #dedede; /*内部边框样式*/
  padding: 0 10px; /*内边距*/
}
table th {
    font-weight: bold; /*加粗*/
    text-align: center !important; /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
    background: rgba(158,188,226,0.2); /*背景色*/
}
table tbody tr:nth-child(2n) {
    background: rgba(158,188,226,0.12); 
}
table tr:hover {
    background: #cfcfcf; 
}
table th {
    white-space: nowrap; /*表头内容强制在一行显示*/
}
table td:nth-child(1) {
    white-space: nowrap; 
}

LaTeX公式支持

HEXO 默认的Markdown渲染引擎是marked，但是 marked 不支持 mathjax，所以需要更换Markdown渲染引擎为kramed，后者支持mathjax公式。

1
2
$ npm uninstall hexo-renderer-marked --save
$ npm install hexo-renderer-kramed --save

更改 hexo-renderer-kramed 渲染器部分设置：

/node_modules/hexo-renderer-kramed/lib/renderer.js
1
2
3
4
5
6
// Change inline math rule
function formatText(text) {
    // Fit kramed's rule: $$ + \1 + $$
-    return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
+    return text;
}

停止使用 hexo-math，并安装 mathjax 包：

1
2
$ npm uninstall hexo-math --save
$ npm install hexo-renderer-mathjax --save

打开 mathjax 设置文件，更改 <script> 为：

/node_modules/hexo-renderer-mathjax/mathjax.html
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

因为 LaTeX 与 Markdown 存在语义冲突，所以 Hexo 默认的转义规则会将一些字符错误转义，所以我们需要对默认的规则进行修改。打开 /node_modules\kramed\lib\rules\inline.js,

/node_modules\kramed\lib\rules\inline.js
1
2
3
4
- escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
+ escape: /^\\([`*\[\]()# +\-.!_>])/,
- em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
+ em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

打开主题配置文件，开启mathjax：

/themes/next/_config.yml
1
2
3
4
5
6
math:
  enable: true
  per_page: true
  mathjax:
    enable: true
    mhchem: false

需要渲染公式的博客文章必须在title下添加mathjax: true。

结束语

不同版本 Hexo|Next 间配置项可能存在差异，本系列文章中的配置有效性以 Hexo v3.9.0 和 Next v7.4.0 为准。

至此你已在本地搭建起了 Hexo 博客，更换 NexT 主题，并对站点进行了基础的自定义配置，已经实现了一个可正常使用的站点。但仅仅如此可能无法满足你的需求，仍可针对个人喜好尽情尝试修改。

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