使用Hexo + NexT 快速搭建博客

安装

安装 node.js

如果你已经安装了 node.js，请忽略。

访问node.js 官网，根据指引进行安装。

安装 Git

如果你已经安装了 Git，请忽略。

访问Git 官网，根据指引进行安装。

由于众所周知的原因，Windows 从上面的链接下载 git for windows 最好挂上一个代理，否则下载速度十分缓慢。也可以参考这个页面，收录了存储于百度云的下载地址。

安装 Hexo

国内的朋友，因为众所周知的原因，从 npm 直接安装 hexo 会非常慢，所以你需要用到镜像源，参考上面的步骤，使用 cnpm 命令行工具代替默认的 npm: 在 windows 控制台（cmd）里输入并执行npm install -g cnpm --registry=https://registry.npm.taobao.org，然后安装 hexo: cnpm install -g hexo-cli
国外的朋友，请直接打开 windows 控制台，输入npm install -g hexo-cli并执行。

建站

建立本地博客文件夹

在命令行执行如下命令，其中<folder>为文件夹路径

1 2	`hexo init <folder> cd <folder>`

所有有关hexo的命令 均要在<folder>路径下执行。

建立好后文件夹目录如下

.
├── _config.yml
├── package.json
├── .gitignore
├── node_modules
├── scaffolds
├── source
|   ├── _posts
└── themes

其中

_config.yml：站点的配置文件，可以在此配置大部分的参数。

package.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.9.0"
},
"dependencies": {
"version": "3.9.0"
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-stylus": "^0.3.3",
"hexo-renderer-marked": "^1.0.1",
"hexo-server": "^0.3.3"
}

scaffolds：模板文件夹，是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。
source：资源文件夹，存放用户资源的地方。除_posts文件夹之外，开头命名为 _ (下划线)的文件/文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes：主题文件夹。Hexo 会根据主题来生成静态页面。
node_modules：node.js 模块，一些插件和依赖会被安装到这里。

更加详细的解释请参考hexo 官方文档

安装 NexT 主题

进入本地博客文件夹并将 NexT 主题clone至themes文件夹下

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

你会看到，在next下也有一个_config.yml的文件，这是 NexT 主题的配置文件，为了区别它和 博客配置文件，下面会用带路径的文件名来描述它们：

<folder>/_config.yml：站点配置文件
next/_config.yml：主题配置文件

启用 NexT 主题

在<folder>/_config.yml里theme:选项填next，=>theme: next，注意冒号后空一格。

到这里，建站的任务就完成了。你现在可以打开控制台，输入并执行如下命令：

hexo g

完成没有报错之后执行如下命令：

hexo s

其中

hexo g：新建public文件夹，并在其中生成网站静态文件（html，css，等文件）
hexo s：启动 hexo 服务器，默认情况下，访问网址为：http://localhost:4000/

更多有关 hexo 的命令，请参考hexo 官方文档的命令部分。

你最后会看到控制台有如下输出：

1	`INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.`

在浏览器地址栏输入http://localhost:4000/并访问，你应该会看到如下页面：

**恭喜你！你已经完成了博客搭建的主要工作！接下来就是细节的配置了。请耐心阅读以下内容。**

配置

网站脚注

footer:
  #建站时间
  since: 2018
  #作者头像并且是动画效果
  icon:
    name: user
    animated: true
    color: "##66CDAA"
  #显示版权作者
  copyright: aigisss 爱即是诗
  #不显示Hexo
  powered:
    enable: false
    version: false
  #不显示主题和版本
  theme:
    enable: false
    version: false
  #显示备案号
  beian:
    enable: true
    icp: 赣ICP备18013338-1号

版权声明

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true

代码块

codeblock:
  # 自定义边框半径，默认是1
  # 值越大弧度越大
  border_radius: 6
  # 右上角显示复制按钮
  copy_button:
    enable: true
    # 显示复制结果
    show_result: true

needmoreshare2:
  enable: true
  postbottom:
    #文章底部
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
      #左下角悬浮按钮
  float:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

访问次数

# busuanzi统计
busuanzi_count:
  enable: true
  # 总访客数
  total_visitors: true
  total_visitors_icon: user
  # 总浏览量
  total_views: true
  total_views_icon: eye
  # 文章浏览量
  post_views: true
  post_views_icon: eye

顶部阅读进度条

reading_progress:
  enable: true
  color: "#37c6c0"
  height: 2px

加载动画

motion:
  # 启用
  enable: true
  # 异步加载
  async: true
  transition:
    # Transition variants:
    # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
    # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
    # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
    # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
    # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
    # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
    # 文章摘要动画
    post_block: bounceIn
    # 加载各种页面动画（分类，关于，标签等等）
    post_header: fadeIn
    # 文章详情动画
    post_body: fadeIn
    #
    coll_header: fadeIn
    # Only for Pisces | Gemini.
    # 侧边栏（人物头像的那部分）
    sidebar: fadeIn

搜索功能

NexT自带提供了两个搜索

algolia_search
local_search

其实这个local_search已经很好用了，配置algolia_search挺麻烦的，而且搜索功能也用的不多

毕竟有万能的Ctrl + F

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

添加 RSS 订阅

npm install hexo-generator-feed --save

复制代码
# Extensions
plugins:
   hexo-generate-feed
feed: # RSS订阅插件
  type: atom
  path: atom.xml
  limit: 0 #0就是代表所有

数学公式

# Math Equations Render Support
math:
  enable: true

  # Default(true) will load mathjax/katex script on demand
  # That is it only render those page who has 'mathjax: true' in Front Matter.
  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
  per_page: true

  engine: mathjax
  #engine: katex

还需要在文章的 Front-matter 里打开 mathjax 开关，比如：

title: 使用hexo下next主题搭建博客的记录
tags: 日常
abbrlink: 326cb881
date: 2019-09-09 09:58:21
mathjax: true

网上一大堆说会出现语义冲突——-类 Latex 格式书写的数学公式下划线_表示下标，有特殊的含义，如果被强制转换为<em>标签，那么 MathJax 引擎在渲染数学公式的时候就会出错。类似的语义冲突的符号还包括*, {, }, \\等。但是！！

在我试验下没有出现此类问题，只要在主题中打开，md 中申明 mathjax: true 就好了，可能在我使用的next6.7中解决了冲突。比如以下的公式能出来！

1	`\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.`

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

$$
P = \frac
{\sum_{i=1}^n (x_i- x)(y_i- y)}
{\displaystyle \left[
\sum_{i=1}^n (x_i-x)^2
\sum_{i=1}^n (y_i-y)^2
\right]^{1/2} }
$$

$P = \frac {\sum_{i=1}^n (x_i- x)(y_i- y)} {\displaystyle \left[ \sum_{i=1}^n (x_i-x)^2 \sum_{i=1}^n (y_i-y)^2 \right]^{1/2} }$

添加自定义菜单

以新建「相册」菜单为例：在博客目录下的 source 文件夹下新建名为 photo 文件夹，然后在 photo 文件夹下新建一个 index.md 文件，然后在该文件填写：

---
title: 相册
date: 2018-04-16 22:14:07
type: "photo"
---

然后打开主题配置文件 _config.yml，在 menu 中添加：

menu:
  home: / || home
  archives: /archives || archive
  categories: /categories || th
  tags: /tags || tags
  #添加「相册」菜单
  相册: /photo || camera

这里的「相册」是博客中显示的菜单名称，紧跟的 photo 要和前面 index.md 文件的 type 值一致，|| 后面的菜单的图标，图标名称来自于 FontAwesome icon，若没有配置图标，默认会使用问号图标

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

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

参考

Hexo+NexT 打造一个炫酷博客

篇Ⅱ：NexT主题的配置和优化指南

技术

#Hexo #NexT

使用Hexo + NexT 快速搭建博客

https://www.gishai.top/blog/posts/eba3f111.html

作者

Hai

发布于

2019年9月7日

更新于

2021年12月4日

许可协议

markdown的使用总结上一篇

git的操作记录下一篇

使用Hexo + NexT 快速搭建博客

安装

安装 node.js

安装 Git

安装 Hexo

建站

建立本地博客文件夹

安装 NexT 主题

启用 NexT 主题

配置

网站脚注

版权声明

代码块

分享

访问次数

顶部阅读进度条

加载动画

搜索功能

添加 RSS 订阅

数学公式

添加自定义菜单

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

参考