使用Hexo+Next搭建个人博客

1、博客系统：Hexo

官网：Hexo
安装
需要安装nodejs, nodejs自带了npm包管理, 参考博文：CentOS7.6安装nodejs

1
npm install hexo-cli -g

Hexo 版本：5.4.0

写博文

新增博文可通过命令：

1
hexo new "我的第一个hexo博文"

此命令会在source/_posts文件夹下生成：我的第一个hexo博文.md

1
2
3
4
5
6
7
---
title: 我的第一个hexo博文
date: 2021-12-11 20:49:12
categories: hexo
tags:
  - hexo
---

可手动添加分类及标签。

生成静态文件

1
hexo generate # 可简写为: hexo g

启动服务器

1
hexo server # 可简写为: hexo s

默认情况下，访问网址为：http://localhost:4000/。

清除缓存文件

1
hexo clean

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

2、博客主题：Next

github：GitHub - next-theme/hexo-theme-next

安装
在hexo根目录执行

1
npm install hexo-theme-next

或者克隆仓库

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

Next版本：8.7.1

设置主题
修改hexo的_config.yml

1
theme: next

修改themes/next/_config.yml

1
scheme: Gemini

博客预览：

3、添加本地搜索功能

安装插件，用于生成博客索引数据（在博客根目录下执行下列命令）：

1
npm install hexo-generator-search --save

安装之后，会在站点目录的 public 文件夹下创建一个 search.xml 文件。

3.2、修改站点配置文件

在站点配置文件 _config.yml 中添加如下内容：

1
2
3
4
5
6
# Search 
search:
  path: ./public/search.xml
  field: post
  format: html
  limit: 10000

path：索引文件的路径，相对于站点根目录
field：搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
limit：限制搜索的条目数

3.3、主题配置文件

在主题配置文件themes/next/_config.yml中找到如下内容：

1
2
3
4
local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1

确保 enable 设成 true。
top_n_per_article 字段表示在每篇文章中显示的搜索结果数量，设成 -1 会显示每篇文章的所有搜索结果数量。
然后，重新部署网站即可愉快的使用本地搜索功能了。
功能预览：

4、生成永久文章链接

1
npm install hexo-abbrlink --save

可能会出现依赖，依据提示安装即可。

4.2.配置

修改博客根目录配置文件_config.yml 的 permalink：

1
2
3
4
5
# permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink.html  # posts 是自定义的前缀
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex

不同算法和进制生成不同的格式：

crc16 & hex
https://river106.cn/posts/68d9.html
crc16 & dec
https://river106.cn/posts/12345.html
crc32 & hex
https://river106.cn/posts/9fc08c19.html
crc32 & dec
https://river106.cn/posts/1770090790.html

4.3.验证

先清理下本地的文件

1
hexo clean

然后重新生成

1
hexo g

启动博客

1
hexo s

该插件会在每篇文章的开头增加内容：

1
abbrlink: e821fb9f

这个字符串就是这篇文章的唯一标识，无论修改标题还是发布文章都不会改变。

功能预览：

浏览器访问 https://river106.cn/posts/e821fb9f.html 查看效果。

5、文章底部标签图标

修改主题配置themes/next/_config.yml

1
tag_icon: fa-tag

6、开启文章打赏功能

修改主题配置themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Donate (Sponsor) settings
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: true
  comment: 请博主喝咖啡
 
reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

按照上述配置调整，然后将个人支付宝和微信的收款码图片放在source/images下即可。

7、阅读全文按钮

文章摘要与剩余内容中间加如下标签即可：

1
<!-- more -->

如下图效果：

这样点击阅读全文会自动定位到more所在位置，如果想要从头阅读，修改themes/next/layout/_macro/post.njk中

1
<a class="btn" href="{{ url_for(post.path) }}/#more" rel="contents">

为

1
<a class="btn" href="{{ url_for(post.path) }}" rel="contents">

8、文章目录

修改主题配置themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6

hexo生成目录根据md中的标题来的，比如#(一级标题)， ##(二级标题)，###(三级标题)等等，
上面的配置是：

number: false # 不展示目录的行号
wrap: false #目录太长，不换行，会省略超出部分
expand_all: true # 展示全部目录

9、文章访问量

基于 LeanCloud 这家服务提供商，实现 Hexo 博客文章的浏览数统计功能。
参考Hexo + Next 添加文章阅读量统计 | 栾铸显的博客

1
2
3
4
5
6
7
8
9
10
11
12
# Show number of visitors of each article.
# You can visit https://www.leancloud.cn to get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: # <your app id>
  app_key: # <your app key>
  # Required for apps from CN region
  server_url: # <your server url>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in leancloud counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
  security: false

10、添加 gitalk 评论功能

利用github的issue
在github中创建评论项目
在github中创建一个公开项目：hexo-comments
https://github.com/river106/hexo-comments

github认证配置

首先进入github,点击右上角头像【Settings】->【Developer settings】->【OAuth Apps】->【New OAuth App】进行基本配置（或 Sign in to GitHub · GitHub 直接进入配置）

  • Application name：应用名称
  • Homepage URL：博客的地址
  • Application description：应用描述
  • Authorization callback URL：评论页面的域名地址， 和博客地址保持一致，请使用https

创建好后，点击右上角头像【Settings】->【Developer settings】->【OAuth Apps】，进入hexo-comments，可以查看Client ID、Client secrets。

安装gitalk

在hexo项目中安装gitalk

1
npm i gitalk --save

修改主题配置themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
  active: gitalk
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any navs, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    gitalk:
      order: -1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Gitalk
# For more information: https://gitalk.github.io
gitalk:
  enable: true
  github_id: river106 # GitHub repo owner
  repo: hexo-comments # Repository name to store issues
  client_id:  # GitHub Application Client ID
  client_secret:  # GitHub Application Client Secret
  admin_user: river106 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # When the official proxy is not available, you can change it to your own proxy address
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # This is official proxy adress
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

评论效果图：

11、友情链接页面

使用命令新增页面：

1
hexo new page links

会在source文件夹下新增links文件夹，links文件夹下还有index.md文件

在文件中写入type: “links”，如果还想禁止评论的话就再写一个comments: false

1
2
3
4
5
6
---
title: links
date: 2021-11-20 14:45:26
type: links
comments: false
---

创建友链栏

修改主题配置themes/next/_config.yml，找到menu，在其中添加：

1
links: /links/ || fa fa-link

themes/next/languages/zh-CN.yml配置的menu中添加中文描述：

1
links: 友链

12、将分页的页码调多点

默认的只展示了3个页码，翻页不方便；

修改themes/next/layout/_partials/pagination.njk
mid_size字段原为1， 现改为4

调整后效果：

13、归档页分页记录数多点

安装hexo-generator-archive

1
npm install hexo-generator-archive --save

修改博客配置_config.yml，添加如下内容：

1
2
3
4
5
# 归档页面
archive_generator:
  per_page: 30
  yearly: true
  monthly: true

14、超链接新窗口打开

由于markdown语法目前还不支持这种语法，而hexo的站内域名的超链接默认是页面内跳转，站外域名会新窗口打开。
我们可以使用html语法，来实现markdown超链接由新窗口打开：

1
<a href="http://river106.cn" target="_blank">river's blog</a>

15、博客丝带背景

修改主题配置themes/next/_config.yml，开启丝带背景

1
2
3
4
5
6
7
# Canvas ribbon
# For more information: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: true
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

16、添加图片放大预览查看功能

修改主题配置themes/next/_config.yml, fancybox 改为 true:

1
2
3
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox/
fancybox: true

17、总结

Hexo + Next的个人博客干净清爽，博主感觉不错，推荐给大家！
以上是博主搭建个人博客的记录，有兴趣的可根据个人需求选择配置。

Web前端
#Hexo #Next #个人博客
使用Hexo+Next搭建个人博客
https://river106.cn/posts/9fc08c19.html
作者
river106
发布于
2021年12月11日
许可协议