hexo基础操作及fluid主题配置

本文最后更新于：2023年4月19日 下午

我的上一篇文章hexo + vps 搭建个人博客记录了搭建博客的整个过程，下面记录一下hexo的基础操作及fluid主题的相关配置。

该部分的内容参考以下网站：

fluid官网

Hexo Fluid 用户手册

GitHub Pages + Hexo搭建个人博客网站，史上最全教程

1. 下载安装fluid主题

我采用的是使用release压缩包安装主题的方式。

下载release最新版本，将解压出来的文件夹重命名为 fluid，并且放入博客文件夹下的themes目录，比如我是放在C:\Users\dabod\Blog\blog\themes目录下。

如下修改 Hexo 博客目录（不是themes目录）中的 _config.yml：

1
2
3
theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

首次使用主题的「关于页」需要手动创建：

1
hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

1
2
3
4
5
6
---
title: about
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

然后本地启动可以预览fluid的主题效果。

2. 创建文章

关于hexo的相关操作可以参考：

hexo官方文档

可以使用如下命令创建文章：

1
hexo new post 测试文章

在博客目录的\source\_post目录下会生成测试文章.md的文件。

也可以不用命令，直接在该目录下新建测试文章.md文件。

如果要删除的话，进入\source\_post目录下删除文章对应的文件即可。

3. 添加分类及标签

参考Hexo 添加分类及标签。

3.1 创建“分类”选项

生成“分类”页并添加tpye属性，进入博客目录，执行命令下方命令

1
hexo new page categories

categories文件夹下会有index.md这个文件，打开后默认内容是这样的：

1
2
3
4
---
title: categories
date: 2019-04-22 14:47:40
---

添加type: categories到内容中，添加后是这样的：

1
2
3
4
5
---
title: categories
date: 2023-02-26 13:43:12
type: categories
---

保存并关闭文件。

给文章添加categories属性：

打开需要添加分类的文章，为其添加categories属性。下方的categories: Hexo表示这篇文章添加到到Hexo这个分类。注意：一篇文章只会添加到一个分类中，如果是多个默认放到第一个分类中。

1
2
3
4
5
---
title: Hexo 添加分类及标签
date: 2017-05-26 12:12:57
categories: Hexo
---

如果使用：

1
categories: [Hexo,fluid]

这样的格式，那么分类Hexo下面会多出一个子分类fluid。

至此，成功给文章添加分类，点击首页的“分类”可以看到该分类下的所有文章。当然，只有添加了categories: xxx的文章才会被收录到首页的“分类”中。

3.2 创建“标签”选项

生成“标签”页并添加tpye属性：

1
hexo new page tags

在\source\tags文件夹下，找到index.md这个文件，打开后默认内容是这样的：

1
2
3
4
---
title: tags
date: 2023-02-26 13:47:02
---

添加type: tags到内容中，添加后是这样的：

1
2
3
4
5
---
title: tags
date: 2023-02-26 13:47:02
type: tags
---

保存并关闭文件。

给文章添加“tags”属性,打开需要添加标签的文章，为其添加tags属性。

1
2
3
4
5
---
title: Hexo 添加分类及标签
date: 2019-04-24 15:40:24
categories: Hexo
tags: fluid

如果要添加多个标签，可以使用如下格式：

1
tags: [fluid, blog]

4. 文章中插入图片

如下修改 Hexo 博客目录中的 _config.yml：

1
2
3
4
post_asset_folder: true
marked:
    prependRoot: true
    postAsset: true

其中第一行配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件，后面的配置是允许无需使用 asset_img 标签插件就可以在 markdown 中嵌入图片，例如image.jpg 位置为 /test/image.jpg ，这表示它是 test 文章的一张资源图片， ![](image.jpg) 将会被解析为 <img src="/test/image.jpg"> 。

执行如下命令创建新文章，名为测试文章：

1
hexo new post 测试文章

执行完成后在source\_posts目录下生成了一个md文件和一个同名的文件夹测试文章（用于存放图片）。

在测试文章文件夹中放入一张图片test.png。

在测试文章.md中添加内容如下，演示了图片的三种引用方式：

1
2
3
4
5
6
7
这是一篇测试文章

{% asset_img test.png [图片引用方法一] %}

![图片引用方法二](test.png)

![图片引用方法三](/images/test.png)

第一种为官方推荐用法，第二种为markdown语法，第三种和前两种图片存放位置不一样，是将图片放在\source\images目录下。这三种写法在md文件中图片是无法显示的，但是在页面上能正常显示。图片的引入方式官方文档有详细介绍。

5. 添加阅读量统计

fluid 主题写好了统计阅读量的代码，但是缺少相应配置所以没有开启，需要借助三方服务来统计阅读量，这里是有 Leancloud 的免费服务来进行统计。

进入LeanCloud官网注册账户，实名认证之后才能使用各项服务，接着验证邮箱。

创建应用，选择开发版即可，免费的。

进入该应用的 设置->应用凭证，找到 AppID 和 AppKey，记录下来后面配置要用。

然后修改fluid主题配置。打开themes\fluid下的_config.yml文件，修改如下配置：

将web_analytics选项改成true：

1
2
3
4
# 网页访问统计
# Analysis of website visitors
web_analytics:  # 网页访问统计
  enable: true

往下，还是在web_analytics这一项下面，配置leancloud的app_id和app_key，如果不希望本地访问被记录，可将ignore_local选项改成true：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
# LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
leancloud:
  app_id: 填写自己的app_id
  app_key: 填写自己的app_key
  # REST API 服务器地址，国际版不填
  # Only the Chinese mainland users need to set
  server_url: https://vuphjw5j.lc-cn-n1-shared.com
  # 统计页面时获取路径的属性
  # Get the attribute of the page path during statistics
  path: window.location.pathname
  # 开启后不统计本地路径( localhost 与 127.0.0.1 )
  # If true, ignore localhost & 127.0.0.1
  ignore_local: true

打开计数功能，统计来源为leancloud，这一选项在文章页post配置下面，如下：

1
2
3
4
5
6
7
8
9
# 浏览量计数
# Number of visits
views:
  enable: true
  # 统计数据来源
  # Data Source
  # Options: busuanzi | leancloud
  source: "leancloud"
  format: "{} 次"

页面底部展示网站的PV、UV统计数，在Footer配置下找到statistics选项，打开，然后添加pv_format和uv_format格式，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 展示网站的 PV、UV 统计数
# Display website PV and UV statistics
statistics:
  enable: true

  # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
  # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
  # Options: busuanzi | leancloud
  source: "leancloud"
  # 页面显示的文本，{}是数字的占位符（必须包含），下同
  # Displayed text, {} is a placeholder for numbers (must be included), the same below
  pv_format: "总访问 {} 次"
  uv_format: "总访客 {} 人"

6. 添加评论功能

fluid主题的评论功能也写好了，默认没有开启，需要修改一些配置。

打开主题目录 themes\fluid下的 _config.yml 文件，修改如下配置：

首先启用评论插件，找到comments选项，打开，然后将type改成valine，如下：

1
2
3
4
5
6
7
8
# 评论插件
# Comment plugin
comments:
  enable: true
  # 指定的插件，需要同时设置对应插件的必要参数
  # The specified plugin needs to set the necessary parameters at the same time
  # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
  type: valine

找到valine的配置，添加LeanCloud的appID和appkey：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Valine
# 基于 LeanCloud
# Based on LeanCloud
# See: https://valine.js.org/
valine:
  appId: 填写自己的app_id
  appKey: 填写自己的app_key
  path: window.location.pathname
  placeholder:
  avatar: 'monsterid'
  meta: ['nick', 'mail', 'link']
  requiredFields: []
  pageSize: 10
  lang: 'zh-CN'
  highlight: false
  recordIP: false
  serverURLs: ''
  emojiCDN:
  emojiMaps:
  enableQQ: false

关于valine评论系统下面的头像配置，可以参考头像配置。我将valine配置下的avatar选项改成了monsterid，如上。

Valine 目前使用的是Gravatar 作为评论列表头像，登录或注册Gravatar，然后修改自己的头像。评论的时候，留下在Gravatar注册时所使用的邮箱即可。

部署在本地时评论可能无法提交，发布之后可以正常提交评论。

正常情况下会有三个选项，昵称、邮箱和网址。其中邮箱和网址是可选的信息，可以填写或者留空。如果填写了邮箱，那么当有人回复评论时，可以收到邮件提醒（需要额外配置，参考valine-admin）。如果填写了网址，那么当有人点击昵称时，可以跳转到个人网站。

7. 显示文章更新时间

网站的大部分设置都是修改博客目录下的_config.yml和主题目录下的_config.yml文件，这里不一一描述，可以在配置文件中按照注释自行修改。

在fluid主题文件下的_config.yml文件中，可以打开更新时间的显示开关。在文章页post配置里的meta配置（即文章标题下方的信息）和copyright配置（文章结尾的版权声明）处可以分别找到updated和update_date选项，改成true即可，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 在文章开头显示文章更新时间，该时间默认是 md 文件更新时间，可通过 front-matter 中 `updated` 手动指定（和 date 一样格式）
# Update date is displayed at the beginning of the post. The default date is the update date of the md file, which can be manually specified by `updated` in front-matter (same format as date)
updated:
  enable: true

  # 格式参照 ISO-8601 日期格式化
  # ISO-8601 date format
  # See: http://momentjs.cn/docs/#/parsing/string-format/
  date_format: "LL a"

  # 是否使用相对时间表示，比如："3 天前"
  # If true, it will be a relative time, such as: "3 days ago"
  relative: true
1
2
3
4
5
# 显示更新日期
# Show update date
update_date:
  enable: ture
  format: "LL"

在撰写文章的时候，可以在开头添加更新日期的信息，如下：

1
2
3
4
5
6
7
---
title: hexo基础操作及fluid主题配置
date: 2023-02-26 17:10:00
update: 2023-02-27 00:52:00
categories: 技术笔记
tags: [博客,hexo,fluid]
---

8. 为hexo添加latex支持

参考Hexo Fluid用户手册——Latex数学公式。

我将specific选项改成了true，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 数学公式，开启之前需要更换 Markdown 渲染器，否则复杂公式会有兼容问题，具体请见：https://hexo.fluid-dev.com/docs/guide/##latex-数学公式
# Mathematical formula. If enable, you need to change the Markdown renderer, see: https://hexo.fluid-dev.com/docs/en/guide/#math
math:
  # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `math: true`
  # If you want to use math on the custom page, you need to set `math: true` in Front-matter
  enable: true

  # 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
  # If true, only set `math: true` in Front-matter will enable math, to load faster when the page does not contain math
  specific: true

  # Options: mathjax | katex
  engine: mathjax

更换markdown渲染器，在博客目录下打开命令行，输入：

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

这里可能会报错，我无视了。在实际使用过程中，发现分数在行内公式中无法显示，但是在单行公式中就能正常显示，不知道为什么。

9. 后记

经过如上配置之后，博客网站该有的功能差不多都齐了。

接下来也许还会对网站配置进行一些修改，不过主要精力应该会放在内容创作上。

技术笔记
#博客 #hexo #fluid
hexo基础操作及fluid主题配置
https://www.zhouw.top/2023/02/26/hexo 操作及 fluid 主题/
作者
Dabod Zhou
发布于
2023年2月26日
更新于
2023年4月19日
许可协议