hexo-fluid 初体验

hexo-fluid 主题的一些配置

1. hexo 基础

1.1. 写作命令

  1. 新建分页：hexo new page 名称
  2. 新建文章：hexo new 名称 或 hexo n 名称
  3. 新建草稿：hexo new draft 名称 或 hexo n draft 名称
  4. 草稿生成文章：hexo publish 名称 或 hexo p 名称
  5. 草稿生成分页：hexo publish page 名称 或 hexo p page 名称

1.2. 操作命令

  1. 清除已生成文件： hexo clean
  2. 运行本地服务器（预览）：hexo s
  3. 运行本地服务器（预览草稿）：hexo s --drafts
  4. 生成静态文件：hexo g
  5. 部署到服务器：hexo d
  6. 生成并部署文件：hexo g -d 或 hexo d -g

1.3. 常见事项

  1. 多标签：

    1
    2
    3
    tags:
    - 标签1
    - 标签二

    或者 tags: [标签1, 标签2]

  2. 阅读全文：

    • 在需要添加的位置手动使用 <!-- more --> 进行截断，这是 hexo 提供的方式，推荐使用这种；

      本人使用的是下面这种方式，自定义 post.md 文件，手动添加描述，然后截断，顺便可以加一个这个标签：<meta http-equiv="refresh" content="20"> 20 秒刷新一次，可以做到边写边更新，做到类似于 Live Server 的效果

      1
      2
      3
      <p class="note note-info">hexo-fluid 主题的一些配置</p>
      <!--more-->
      <meta http-equiv="refresh" content="20">

    • 在文章的 front-matter 中添加 description，并提供文章摘录；

    • 在主题配置文件中修改对应配置项（不同主题不太一样，参考对应主题的文档）

2. fluid 配置

2.1. Tag 插件

2.1.1. 便签

有多种彩色便签可以选择，采用如下方式来使用便签：

1
2
3
4
{% note success %}
文字 或者 `markdown` 均可
{% endnote %}
**注意 {% note success %} 和 {% endnote %} 要单独一行，否则可能会解析错误**

或者使用 HTML 形式：

1
<p class="note note-primary">标签</p>

可选便签：

success

primary

secondary

danger

warning

info

light

2.1.2. 行内标签

在 markdown 中加入如下的代码来使用 Label；

1
2
{% label primary @text %}
**注意 {% label primary @text %} 中的 text 不能以 @ 开头**

或者使用 HTML 形式：

1
<span class="label label-primary">Label</span>

可选 Label：

primary，default，info，success，warning，danger

2.1.3. 勾选框

在 markdown 中加入如下的代码来使用 Checkbox：

1
2
3
4
{% cb text, checked?, incline? %}
**text：显示的文字**
**checked：默认是否已勾选，默认 false**
**incline：是否内联（可以理解为后面的文字是否换行），默认为 false**

示例：

  1. 这是默认示例的代码
    1
    {% cb "这是默认示例的代码" %}
  2. 勾选框选中
    1
    {% cb "勾选框选中", true %}
  3. 勾选框自带的文字 紧跟其后的文字不换行
    1
    {% cb "勾选框自带的文字", false, true %} <span class="label label-success">紧跟其后的文字不换行</span>
  4. 文字写在后边（这样不支持外联）
    1
    {% cb false %} 文字卸载后面（这样不支持外联）

2.1.4. 按钮

可以在 markdown 中加入如下的代码来使用 Button：

1
2
3
4
{% btn url, text, title %}
**url：跳转链接**
**text：显示的文字**
**title：鼠标悬停时显示的文字（可选）**

或者使用 HTML 形式：

1
<a class="btn" href="url" title="title">text</a>

示例：

text

2.1.5. 组图

如果想要把多张图片按照一定布局组合显示，可以在 markdown 中按如下格式：

1
2
3
4
5
6
7
8
9
{% gi total n1-n2-... %}
  ![](url)
  ![](url)
  ![](url)
  ![](url)
  ![](url)
{% endgi %}
**total：图片总数量，对应中间包含的图片 url 数量**
**n1-n2-...：每行的图片数量，可以省略，默认单行最多 3 张图，求和必须相等于 total，否则按默认样式**

示例：gi 5 3-2，代表共 5 张图，第一行 3 张图，第二行 2 张图。

2.2. 页面美化

可以引入一些别人的 css、js 样式来美化自己的博客页面；

在主题的配置文件 _config.yml 中找到 custom_js、custom_css，添加自定义的 css 文件的位置（相对路径 / 网络路径）

2.2.1. css 美化

示例：

1
2
3
# 引入 mac 风格代码块
custom_css:
  - /css/macpanel

在本地主题文件夹下的 source/css/ 新建 macpanel.styl 文件并写入如下代码：

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
/* mac 风格代码块 */
.highlight
    background: #21252b
    border-radius: 5px
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
    padding-top: 30px
    &::before
      background: #fc625d
      border-radius: 50%
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
      content: ' '
      height: 12px
      left: 12px
      margin-top: -20px
      position: absolute
      width: 12px
		
/* 首行缩进 */
.markdown-body p { text-indent: 2em; }
.markdown-body li p { text-indent: 0em; }

/* 隐藏水平滚动条 */
body {
  overflow-x: hidden;
  /*解决ios上滑动不流畅*/
  -webkit-overflow-scrolling: touch;
}

2.2.2. js 动态效果

示例：

1
2
3
4
5
6
7
8
9
10
# 引入一些特效
custom_js:
  - https://cdn.jsdelivr.net/gh/bynotes/texiao/source/js/caidai.js # 动态彩带
  - https://cdn.jsdelivr.net/gh/bynotes/texiao/source/js/jingtaisidai.js # 静态彩带
  - https://cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiantiao.js # 动态黑色线条
  - https://cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiaoxuehua.js # 小雪花飘落
  #- https://cdn.jsdelivr.net/gh/bynotes/texiao/source/js/yinghua.js # 樱花飘落
  #- https://cdn.jsdelivr.net/gh/bynotes/texiao/source/js/daxuehua.js # 大雪花飘落
  - https://cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiaoxingxing.js # 鼠标跟随小星星
  - https://cdn.jsdelivr.net/gh/bynotes/texiao/source/js/love.js # 鼠标点击出小爱心❤

2.2.3. 首行缩进

在本地主题文件夹下的 source/css/ 文件夹内新建或找到任意一个 styl 文件，加入如代码样式即可；

1
.markdown-body p { text-indent: 2em; }

2.3. LaTeX 数学公式

hexo 默认的渲染器不支持 mathjax，而 kramed 支持 mathjax，需要重新安装渲染器

2.3.1. 重新安装渲染器

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

2.3.2. 修改配置文件

1
2
3
4
5
6
7
8
# 主题文件的 _config.yaml
math:
  # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `math: true`
  enable: true
  # 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
  specific: true
  # Options: mathjax | katex
  engine: mathjax

2.3.3. 开启使用

开启配置如上后需要再 front-matter 中手动开启数学工具支持：

1
math: true

2.3.4. 数学公式示例

详细公式可以参考这篇博客：https://blog.csdn.net/ViatorSun/article/details/82826664

心型函数：

2.4. Mermaid 流程图

2.4.1. 开启 Mermaid 支持

1
2
3
4
mermaid:
  enable: true # 开启 mermaid 支持
  specific: true # 在 front-matter 中默认关闭，需要手动开启
  options: { theme: 'default' }

2.4.2. 绘图

可以借助 Mermaid 绘制如下类型的图：参考知乎

  1. 饼状图：关键字 pie 关键字
  2. 流程图：使用 graph 关键字
  3. 序列图：使用 sequenceDiagram 关键字
  4. 甘特图：使用 gantt 关键字
  5. 类图：使用 classDiagram 关键字
  6. 状态图：使用 stateDiagram 关键字
  7. 用户流程图：使用 journey 关键字

详细文档建议搜索引擎，官方文档：https://mermaid-js.github.io/mermaid/#/

pie
	title 个人能力图
	"技术": 50
	"生活": 10
	"社交": 10
	"探索": 30
	"情感": 5

3. plugins 拓展

3.1. 加密文章

3.1.1. 安装搭建

需要安装拓展：

1
npm install --save hexo-blog-encrypt

在博客根目录的配置文件 _config.yml 加入如下配置项：

1
2
3
4
5
6
7
8
9
encrypt: # hexo-blog-encrypt
  abstract: 不给看不给看🍭，正在耕耘中......🎉
  message: 当前文章暂不对外可见，请输入密码后查看！
  tags:
  - {name: Private, password: xiaoding}
  theme: shrink # 旧版使用的是 template 让用户自定义主题，效果不好，具体主题可查看：
  # https://github.com/D0n9X1n/hexo-blog-encrypt/blob/master/ReadMe.zh.md#%E4%BF%AE%E6%94%B9%E5%8A%A0%E5%AF%86%E6%A8%A1%E6%9D%BF
  wrong_pass_message: 抱歉，您输入的密码错误，请检查后重新输入。
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

3.1.2. 使用

只需要在需要加密的文章的头文件中加入：password: xxx 的字段即可，或者使用统一标签密码，给需要加密的文章加上上面配置的文件标签：Private 等；

3.2. 压缩文件

3.2.1. 安装搭建

需要安装拓展：

1
npm install hexo-all-minifier --save

3.2.2. 使用

在博客根目录的配置文件 _config.yml 加入如下配置项：

1
all_minifier: true

也可以细分对哪些文件进行优化：

  1. HTML 优化

    1
    2
    3
    4
    5
    html_minifier:
      enable: true
      ignore_error: false # 忽略 HTML 优化时遇到的错误
      silent: false # 禁止日志优化，默认为 false
      exclude: # 排除文件

  2. CSS 优化

    1
    2
    3
    4
    5
    css_minifier:
      enable: true
      silent: false 
      exclude: 
        - '*.min.css'

  3. JS 优化

    1
    2
    3
    4
    5
    6
    7
    8
    js_minifier:
      enable: true
      mangle: true
      silent: false
      output: # 输出选项。如果为空，请从 .yml 文件中将其删除！否则，它将被设置为 null，null 不同于 undefined。
      compress: # 压缩选项
      exclude: 
        - '*.min.js'

  4. 图片优化

    1
    2
    3
    4
    5
    6
    7
    8
    image_minifier:
      enable: true
      interlaced: false
      multipass: false # 多次优化 svg 图片，直到完全优化
      optimizationLevel: 2 # 图片优化等级：0 - 7
      pngquant: false # 开启 imagemin-pngquant 插件，默认为 false
      progressive: false
      silent: false

3.3. 引擎收录

主动推送 Hexo 博客新链接至谷歌、必应、百度搜索引擎站长平台以 提升网站收录质量和速度

3.3.1. 安装搭建

需要安装拓展：

1
npm install hexo-submit-urls-to-search-engine --save

在博客根目录的配置文件 _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
hexo_submit_urls_to_search_engine:
  # 提交最新的 n 个链接
  count: 10
  # 提交修改时间在 n 秒内的链接，单位秒。例如：
  # 有两个文件 a.txt 和 b.txt，分别对应 https://yoursite.com/a.txt 和 https://yoursite.com/b.txt
  # 其更新时间距当前分别为 800s 和 1000s（period 字段设为 900）
  # 则 https://yoursite.com/a.txt 会被提交，https://yoursite.com/b.txt 不会
  period: 900
  # 提交链接的条件，可选值：count | period。不同取值的含义如下：
  # count ：应用上述的 count  配置项，现仅支持此方式
  # period：应用上述的 period 配置项
  submit_condition: count
  # 是否向 Google 提交，可选值：1 | 0（0：否；1：是）
  google: 1
  # 是否向 Bing 提交，可选值：1 | 0（0：否；1：是）
  bing: 1
  # 是否向 Baidu 提交，可选值：1 | 0（0：否；1：是）
  baidu: 1
  # 文本文档的地址，要推送的链接会保存在此文本文档里
  txt_path: submit_urls.txt
  # 在百度站长平台中注册的域名
  baidu_host: https://yoursite.com/
  # 百度自动推送 API 的 token（获取方式见插件文档：https://cjh0613.com/20200603HexoSubmitUrlsToSearchEngine.html）
  baidu_token: xxxxx
  # 在必应站长平台中注册的域名
  bing_host: https://yoursite.com/
  # 必应自动推送 API 的 token（获取方式见插件文档：https://cjh0613.com/20200603HexoSubmitUrlsToSearchEngine.html）
  bing_token: xxxxx
  # 在谷歌站长平台中注册的域名
  google_host: https://yoursite.com/
  # 存放 google key 的 json 文件，放于网站根目录
  google_key_file: google_key.json
  replace: 0  # 是否替换链接中的部分字符串，可选值：1 | 0（0：否；1：是）
  find_what: http://cjh0613.github.io/blog
  replace_with: https://cjh0613.com

3.4. 文章永久链

3.4.1. 安装搭建

1
2
npm install hexo-abbrlink --save
# 提示安装失败就根据提示安装相关的依赖包即可

在博客根目录的配置文件 _config.yml 加入如下配置项：

1
2
3
4
5
6
7
8
9
10
permalink: articles/:abbrlink.html # hexo-abbrlink
pretty_urls:
  trailing_index: true # false：删除 xxx/*.html 中的 *.html
  trailing_html: false # false：删除 xxx/*.html 中的 html
# 插件配置项
abbrlink:
  alg: crc16 # 算法： crc16(default) and crc32
  rep: dec # 进制： dec(default) and hex
  drafts: false
  #start: 1 # the first id, default 0, 这个是 hexo-abbrlink2 才有的

4. 自动部署

使用 Github Action 自动部署，简化开发，参考博文：https://www.biubiubiu.ml/autodeploy/

5. 部署至七牛云

目前是部署在 vercel + github pages，但是随着花里胡哨的插件、拓展的安装，加载速度明显跟不上了，自己的小破站访问量很小，所以可以使用七牛云的免费空间，基本上用不完，以下是部署步骤；

5.1. 注册七牛云

点击注册：七牛云

5.2. 配置 qshell

qshell 是七牛云提供的命令行管理工具，下载地址：qshell 下载，下载后是一个 exe 的可执行文件（windows），将其存储在适当位置然后配置环境变量；

注意：配置文件书写的时候 windows 下要使用 \\来进行路径分隔，然后使用 "" 双引号不能使用单引号；

5.2.1. 配置密钥

在七牛云官网，个人中心 -> 密钥管理 中可以创建、查看密钥；

在 CMD 内配置密钥：

1
2
3
4
5
# ak、sk 在控制台查看，name 随意
qshell account ak sk name

# 查看是否配置成功
qshell user ls

5.2.2. 创建存储空间

在 home 页找到存储空间，选择新建存储空间，命名，选择地域（根据访问用户多的区域选择地域）然后设为公开即可；

5.3. 搭建

在 hexo 根目录创建 upload.conf 文件：

1
2
3
4
5
6
7
8
9
10
11
{
  // 注意，在配置文件内请将注释全部删除
  // 这个地址是根目录地址，不可使用相对路径
  "src_dir": "D:\\Data\\hexo\\public",
  // 储存空间名称
  "bucket": "xbai-hang",
  // 是否覆盖
  "overwrite" : true,
  // 检查新增文件
  "rescan_local" : true
}

5.3.1. 上传

之后只需要在写好博客之后，使用下面的命令：

1
2
3
4
# 生成静态资源
hexo g
# 上传
qshell qupload upload.conf

5.4. 一键部署

在 hexo 根目录下的 package.json 文件中找到 scripts（没有就自己添加），在里面加入如下配置：

1
2
3
4
5
"scripts": {
  "build": "hexo clean && hexo generate",
  "view": "hexo clean && hexo generate && hexo s",
  "publish": "hexo generate && qshell qupload upload.conf"
}

之后只需要在博客写好后使用 npm run publish 即可实现一键打包部署到七牛云。

6. 奇淫技巧⭐

6.1. 文章头

文章头 front-matter 中有许多可以配置的字段，目前使用的到字段如下

字段描述
title博客标题
date发布时间，若无则以文件创建时间为准 2020-12-28 21:40:59
abbrlink文章永久链
math开启 LaTex 数学公式支持
mermain开启 Mermain 流程图支持
index_img博客预览图 URL
banner_img博客详情页 banner 图 URL
tags博客标签，可以根据标签快速找到同标签博客，可以设置多个标签[tag1,tag2]
category博客分类，可以根据分类快速找到同类博客，建议每篇博客只归属于一个分类
hide博客是否隐藏
password为文章设置密码

6.2. 写作篇

6.2.1. 自动刷新

写博客时可以自动更新,做到类似于 live server 的效果

1
<meta http-equiv="refresh" content="20">

完成博文撰写后记得将该行代码注释掉或者删除掉，否则会给博客阅读者造成较差的观看体验。

6.2.2. 文章摘要

通过注释配合 fluid 的标签优雅的完成文章摘要

1
2
<p class="note note-info">我是本篇文章的摘要</p>
<!--more-->
教程
Tool

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！