Eternal Time Line

凛冬未散尽，星河毋长明。

0%

Build a Blog with Hexo NexT

发表于 更新于

手把手教你用 $\text{Hexo}$ 搭建属于 $\text{NexT}$ 主题的博客。

准备器材

软件须知：Node.js ，用于下载 $\text{Hexo}$ 的插件。

基础设施

安装

在你想要放置博客源文件的位置打开 cmd ，在安装了 Node.js 的前提下输入：

1
npm install -g hexo-cli

其中的 install 可以缩写成 i ，很多插件下载都会用到。

等待下载。

初始化

安装了 hexo 之后，输入指令：

1
hexo init 'yourblogname'

其中的 yourblogname 是你文件夹的名字。

然后进入文件夹，再次打开 cmd 。

初始命令

1
hexo s

生成本地文件，之后可以在所给的地址访问和预览。

使用 hexo s -p 80 可以把后面的 4000 后缀给去掉，也可以换成其他数字（就把 $80$ 换成其他数字），不能超过 $2^{15}-1$ 的大小。

1
hexo cl

删除 public 文件夹，也称为初始化共享文件。

1
hexo g

重新生成 public 文件夹，如果 public 文件夹已经存在，则视为更新。

1
hexo d

上传至 github ，一般不用，一般都是用 github desktop 。

撰写

1
hexo new post 'name'

新建一篇文章。

1
hexo new page 'name'

新建一个页面。

1
hexo new draft 'name'

新建草稿（只存在于本地）。

其中的 new 可以缩写为 n ，如果直接写名字，则视为 post 。

安装 NexT 主题

在 $\text{github.com}$ 上找到 $\text{NexT}$ 主题的源文件（有很多个版本，我现在用的是并不是最新版，有些功能可能不太一样，谨慎观看），拷贝至本地的 \theme 子文件夹里，把主站的 _config.yml 文件中的

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

的 theme 选项修改为 next （与主题文件夹名字一致）。

关于上传

如果您是第一次搭建博客的话，如果您想要您的博客不止在本地浏览，而是在世界的每一个角落都可以访问，可以注册一个 github 账号。

上传

需要器材：github desktop 。

创建了 github 账号之后（假设该账号名为 noone），搭建一个仓库（$\text{repository}$），名字必须是 noone.github.io 。

然后打开 github desktop ，链接您的账号，并把这个仓库 clone 下来。

然后执行：

1
hexo g

并将 public 文件夹置入您 clone 的文件夹内（记得把原有的文件删除），并 push 上传即可。

然后等待一段时间（大概几分钟），进入 noone.github.io ，就可以看到博客了。

添砖加瓦

插入背景图片

找到 NexT 主题的 _config.yml 文件。将其中一段：

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

中的最后一个 style 的注释去掉。

还要把上面一段

1
2
3
4
5
// Custom Layer
// --------------------------------------------------
// for $inject_style in hexo-config('injects.style')
//  @import '_custom/styles.styl';
//  @import $inject_style;

注释掉。

并在 theme/next/source/css 中找到文件 main.styl ，在尾端添加代码：

1
2
//  for $inject_style in hexo-config('injects.style')
@import '../_data/styles.styl';

（实际上只有最后一句有用）。

然后在 theme/next/source 新建文件夹 _data ，并在其中新建文件命名为 styles.styl ，在里面写上代码：

1
2
3
4
5
6
7
8
body {
    background: url("/images/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size: cover;
    opacity: 0.75;
}

第一句：图片源文件路径；

第二句：如果该图片不能填充整个画面，是否重复；

第三句：同第二句；

第四句：中心点位置（50% 50% 为网页正中心）；

第五句：图片大小（cover 一般是整个网页的大小）；

第六句：图片透明度，数字在 $0\sim 1$ 之间，数字越大，不透明度越高。

作者标识

在 theme/next/_config.yml 中有一段代码：（$\text{url}$ 与文件夹内文件位置一致）

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

可以为自己设置站主头像。

rounded 设置圆角，rotated 则设置当鼠标移动时头像会转动。

自设字体

在 theme/next/_config.yml 中有一段代码：

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
font:
  enable: true

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

  # 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: Ma Shan Zheng
    size:

  # Font settings for site title (.site-title).
  title:
    external: true
    family: ZCOOL KuaiLe
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: Zhi Mang Xing
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    family: Ma Shan Zheng

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Fira Code

这是本站的字体选择。记住：需要打开总开关 enable 才会生效。

其中的字体可以在这个需要科学上网的网站上找到。

加入数学公式

在 theme/next/_comfig.ymp 中有一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

可以支持 $\LaTeX$ 公式。

站内搜索

在 theme/next/_config.yml 中有一段代码：

1
2
3
4
5
6
7
8
9
10
11
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

但是，如果仅仅打开总开关是行不通的，我们需要下载第三方插件：

1
npm i hexo-generator-search --save

之后就可以正常使用了。

推荐文章

$\text{Sukwants}$ 的博客教程：https://sukwants.github.io/others/Technology/Hexo-Theme-NexT-Magic-Change-Memo/