zystrivego
0%

基于Hexo和NexT的博客搭建

发表于 更新于 分类于 Valine：

主要记录一些要注意的点，因为网上教程版本众多，所以尽量以最新的官方文档为准。

官方文档地址

Hexo官网

NexT中文文档

NexT英文文档

版本

  • Node.js v12.16.3

  • hexo: 4.2.1

  • NexT: v8.0.0-rc.2

    1
    2
    3
    2014-2017	https://github.com/iissnan/hexo-theme-next
    2018-2019	https://github.com/theme-next/hexo-theme-next
    2020	    https://github.com/next-theme/hexo-theme-next

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数 描述 默认值
layout 布局
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址
keywords 仅用于 meta 标签和 Open Graph 的关键词（不推荐使用）

分类和标签

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

1
2
3
4
5
categories:
- Diary
tags:
- PS3
- Games

分类方法的分歧

如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：

1
2
3
categories:
  - Diary
  - Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

1
2
3
4
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

搭建要点

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

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

其实主要就是修改这两个文件，有的会需要结合修改部分的描述安装你需要的功能插件。

菜单栏

设置分类和标签

1
2
hexo new page categories
hexo new page tags

分别在Front-matter中设置

1
2
type: "categories"
type: "tags"

5款插件

前4款在站点根目录下安装，后1款在主题根目录下安装

生成RSS

1
npm install --save hexo-generator-feed

修改主题配置文件

1
2
social:
  RSS: /atom.xml || fa fa-rss

文章pinned

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

需要pinned的文章在 Front-matter 中加上 top 即可，数值越大表示等级越高，越靠前显示

显示效果需要修改themes\hexo-theme-next\layout_macro\post.njk，在<header class="post-header">（我这里是第18行）下插入

1
2
3
{% if post.top %}
    <i class="fa fa-thumbtack"></i>
{% endif %}

搜索插件

1
npm install hexo-generator-searchdb --save

编辑 站点配置文件，新增以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑 主题配置文件，启用本地搜索功能：

1
2
3
# Local search
local_search:
  enable: true

部署插件

1
npm install hexo-deployer-git --save

编辑 站点配置文件

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 你的gitee或github库
  branch: master

页面加载进度条

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

修改主题配置文件

1
2
pace:
 enable: true

其它的一些功能

大部分修改下主题配置文件就行了

下面是修改的部分

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 这个是突出页脚红心的
   # Icon between year and copyright info.
   icon:
     # Icon name in Font Awesome. See: https://fontawesome.com/icons
-    name: fa fa-heart
+    name: fa fa-heartbeat
     # If you want to animate the icon, set it to true.
-    animated: false
+    animated: true
     # Change the color of icon, using Hex Code.
     color: "#ff0000"
 
这个是侧栏显示许可证
 # 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: false
+  sidebar: true
   post: false
   language:
 
这个是主题风格修改
 # Schemes
-scheme: Muse
+#scheme: Muse
 #scheme: Mist
 #scheme: Pisces
-#scheme: Gemini
+scheme: Gemini
 
这个是菜单栏修改
 menu:
-  #home: / || fa fa-home
+  home: / || fa fa-home
   #about: /about/ || fa fa-user
-  #tags: /tags/ || fa fa-tags
-  #categories: /categories/ || fa fa-th
-  #archives: /archives/ || fa fa-archive
+  tags: /tags/ || fa fa-tags
+  categories: /categories/ || fa fa-th
+  archives: /archives/ || fa fa-archive
   #schedule: /schedule/ || fa fa-calendar
   #sitemap: /sitemap.xml || fa fa-sitemap
   #commonweal: /404/ || fa fa-heartbeat

这个是头像设置
 # Sidebar Avatar
 avatar:
   # Replace the default image and set the url here.
-  url: #/images/avatar.gif
+  url: /images/王也.jpg
   # If true, the avatar will be dispalyed in circle.
   rounded: false
   # If true, the avatar will be rotated with the cursor.

这个是代码块复制按钮设置
   # Add copy button on codeblock
   copy_button:
-    enable: false
+    enable: true

这个是滚动百分比设置
   # Scroll percent label in b2t button.
-  scrollpercent: false
+  scrollpercent: true
 
 # Reading progress bar
 reading_progress:
@@ -472,7 +475,7 @@
 baidu_site_verification:
 
 百度推送，搜索引擎优化
 # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
-baidu_push: false
+baidu_push: true
 
 
这个是评论系统，适合国内使用
 # Valine
 # For more information: https://valine.js.org, https://github.com/xCss/Valine
 valine:
-  enable: false
-  appId: # Your leancloud application appid
-  appKey: # Your leancloud application appkey
+  enable: true
+  appId: xxxxxx
+  appKey: xxxxxxx
-  placeholder: Just go go # Comment box placeholder
+  placeholder: 无需注册，支持Markdown格式 # Comment box placeholder


搜索引擎优化
 # Google Analytics
 google_analytics:
-  tracking_id: # <app_id>
+  tracking_id: xxxxxx

搜索引擎优化
 # Baidu Analytics
-baidu_analytics: # <app_id>
+baidu_analytics: xxxxxx

插入图片

修改 站点配置文件

开启文章资源文件夹

1
post_asset_folder: true

使用Hexo内置标签：

1
{% asset_img slug [title] %}

如何设置「阅读全文」

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供2种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

  1. 在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式 推荐
  2. 在文章的 front-matter 中添加 description，并提供文章摘录

建议使用 <!-- more -->（即第一种方式），除了可以精确控制需要显示的摘录内容以外， 这种方式也可以让 Hexo 中的插件更好的识别。

渲染跳过

比如404，README文件

修改站点配置文件

1
2
3
skip_render:
  - README.md
  - 404.html

开源协议怎么选

Creative Commons Licenses

Choose an open source license

小图标在哪找

font-awesome:themes\hexo-theme-next\source\lib\font-awesome\css\all.min.css

Iconfont-阿里巴巴矢量图标库

增加阿里巴巴矢量图标库

参考地址

站点根目录下添加source\ _data\styles.styl，把iconfont.css文件内容全拷过去即可。

编辑 主题配置文件：

1
2
3
4
5
6
7
8
9
10
11
 custom_file_path:
-  #style: source/_data/styles.styl
+  style: source/_data/styles.styl

这个是侧栏社交链接和图标设置
 social:
-  #GitHub: https://github.com/yourname || fab fa-github
-  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
+  码云: https://gitee.com/zystrivego/blog || fab iconfont icon-Ggooglelogo
+  邮箱: mailto:zystrivego@163.com || fa iconfont icon-youxiang
+  音乐: http://music.163.com/m/user/home?id=15370305 || fa iconfont icon-netease-cloud-music-line

评论邮件通知

参考地址：Valine-Admin

官方文档摘录

不要处理我的文章

如果你不想你的文章被处理，你可以将 Front-Matter 中的layout: 设为 false 。

草稿

刚刚提到了 Hexo 的一种特殊布局：draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

1
$ hexo publish [layout] <title>

草稿默认不会显示在页面中，您可在执行时加上 --draft 参数，或是把 render_drafts 参数设为 true 来预览草稿。

资源文件夹

资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

文章资源文件夹

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

1
_config.ymlpost_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代，社区创建了很多插件来解决这个问题。但是，随着Hexo 3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

1
2
3
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如说：当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法 ![](/example.jpg) ，它将 不会 出现在首页上。（但是它会在文章中按你期待的方式工作）

正确的引用图片方式是使用下列的标签插件而不是 markdown ：

1
{% asset_img example.jpg [This is an example image] %}

通过这种方式，图片将会同时出现在文章和主页以及归档页中。

指令

init

1
$ hexo init [folder]

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

new

1
$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

1
$ hexo new "post title with whitespace"
参数 描述
-p, --path 自定义新文章的路径
-r, --replace 如果存在同名文章，将其替换
-s, --slug 文章的 Slug，作为新文章的文件名和发布后的 URL

默认情况下，Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说，Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。你可以使用 --path 参数来覆盖上述行为、自行决定文件的目录：

1
hexo new page --path about/me "About me"

以上命令会创建一个 source/about/me.md 文件，同时 Front Matter 中的 title 为 "About me"

注意！title 是必须指定的！如果你这么做并不能达到你的目的：

1
hexo new page --path about/me

此时 Hexo 会创建 source/_posts/about/me.md，同时 me.md 的 Front Matter 中的 title 为 "page"。这是因为在上述命令中，hexo-cli 将 page 视为指定文章的标题、并采用默认的 layout。

generate

1
$ hexo generate

生成静态文件。

选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动
-b, --bail 生成过程中如果发生任何未处理的异常则抛出异常
-f, --force 强制重新生成文件 Hexo 引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。 使用该参数的效果接近 hexo clean && hexo generate
-c, --concurrency 最大同时生成文件的数量，默认无限制

该命令可以简写为

1
$ hexo g

publish

1
$ hexo publish [layout] <filename>

发表草稿。

server

1
$ hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录，使用覆盖记录格式

deploy

1
$ hexo deploy

部署网站。

参数 描述
-g, --generate 部署之前预先生成静态文件

该命令可以简写为：

1
$ hexo d

render

1
$ hexo render <file1> [file2] ...

渲染文件。

参数 描述
-o, --output 设置输出路径

migrate

1
$ hexo migrate <type>

从其他博客系统 迁移内容。

###clean

1
$ hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

list

1
$ hexo list <type>

列出网站资料。

version

1
$ hexo version

显示 Hexo 版本。

选项

安全模式

1
$ hexo --safe

在安全模式下，不会载入插件和脚本。当您在安装新插件遭遇问题时，可以尝试以安全模式重新执行。

调试模式

1
$ hexo --debug

在终端中显示调试信息并记录到 debug.log。当您碰到问题时，可以尝试用调试模式重新执行一次，并 提交调试信息到 GitHub。

简洁模式

1
$ hexo --silent

隐藏终端信息。

自定义配置文件的路径

1
2
3
4
5
# 使用 custom.yml 代替默认的 _config.yml
$ hexo server --config custom.yml

# 使用 custom.yml 和 custom2.json，其中 custom2.json 优先级更高
$ hexo generate --config custom.yml,custom2.json,custom3.yml

自定义配置文件的路径，指定这个参数后将不再使用默认的 _config.yml。
你可以使用一个 YAML 或 JSON 文件的路径，也可以使用逗号分隔（无空格）的多个 YAML 或 JSON 文件的路径。例如：

1
2
3
4
5
# 使用 custom.yml 代替默认的 _config.yml
$ hexo server --config custom.yml

# 使用 custom.yml, custom2.json 和 custom3.yml，其中 custom3.yml 优先级最高，其次是 custom2.json
$ hexo generate --config custom.yml,custom2.json,custom3.yml

当你指定了多个配置文件以后，Hexo 会按顺序将这部分配置文件合并成一个 _multiconfig.yml。如果遇到重复的配置，排在后面的文件的配置会覆盖排在前面的文件的配置。这个原则适用于任意数量、任意深度的 YAML 和 JSON 文件。

显示草稿

1
$ hexo --draft

显示 source/_drafts 文件夹中的草稿文章。

自定义 CWD

1
$ hexo --cwd /path/to/cwd

自定义当前工作目录（Current working directory）的路径。