部署

使用 vercel 进行Hexo博客部署，后续写作与修改可以直接上传到 Gtihub 或直接在 Github 上进行修改。在仓库文件有变动时可以 vercel 会自动重新构建网页，实现自动化部署。

  1. 新建 Github 仓库（最好是私有仓库），注册 vercel 账号并于 Github 绑定

  2. 将你的已经修改好的主题文件夹上传到GitHub的新建仓库之中，node_modules 文件夹不用上传。

    注意此处如果采用的不是 push 而是直接浏览器上传最好不要启用浏览器翻译功能，会造成文件位置错乱

  3. 在 vercel 中，点击 Overview – + New Project,创建新项目

  4. 选择刚刚创建过的项目，点击 Import

  5. 什么都不用改，会自动识别出为 Hexo ，点击 Deploy ，开始构建，需要等待三到四分钟

写作

Front-matter

Front-matter 是 markdown 文件最上方以 — 分隔的区域，用于指定个别档案的变量配置。

  • Page Front-matter 用于页面配置
  • Post Front-matter 用于文章页配置

Page Front-matter

值 说明
title [必需]页面标题
date [必需]页面创建日期
updated [可选]页面更新日期
type [必需]标签、分类和友情链接三个页面需要配置
comments [可选]显示页面评论模块(默认 true)
description [可选]页面描述
keywords [可选]页面关键字
top_img [可选]页面顶部图片
mathjax [可选]显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex [可选]显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside [可选]显示侧边栏 (默认 true)
aplayer [可选]在需要的页面加载aplayer的js和css,请参考文章下面的音乐配置
highlight_shrink [可选]配置代码框是否展開(true/false)(默認為設置中highlight_shrink的配置)

Post Front-matter

值 说明
title 【必需】文章标题
date 【必需】文章创建日期
sticky 【可选】文章置顶。添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大
updated 【可选】文章更新日期
tags 【可选】文章标籤
categories 【可选】文章分类
keywords 【可选】文章关键字
description 【可选】文章描述
top_img 【可选】文章顶部图片
cover 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
comments 【可选】显示文章评论模块(默认 true)
toc 【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number 【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple 【可选】显示 toc 简洁模式
copyright 【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author 【可选】文章版权模块的文章作者
copyright_author_href 【可选】文章版权模块的文章作者链接
copyright_url 【可选】文章版权模块的文章连结链接
copyright_info 【可选】文章版权模块的版权声明文字
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside 【可选】显示侧边栏 (默认 true)

外挂标签

标籤外挂（Tag Plugins）

Tab

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

Button

1
2
3
4
5
6
7
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
</div>
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

高亮

1
{% label text color %}
参数 解释
text 文字
color 可选】背景颜色，默认为 default
default/blue/pink/red/purple/orange/green

例子：

1
2
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

臣亮言：先帝 创业未半，而中道崩殂 。今天下三分，益州疲敝 ，此诚危急存亡之秋 也！然侍衞之臣，不懈于内；忠志之士 ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸 、犯科 ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

Gallery相册

直接Markdown写法插入md文件之中

1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}

代码高度限制

3.7.0 及以上支持

可配置代码高度限制，超出的部分会隐藏，并显示展开按钮。

1
highlight_height_limit: false # unit: px

注意：

  • 单位是 px，直接添加数字，如 200
  • 实际限制高度为 highlight_height_limit + 30 px ，多增加 30px 限制，目的是避免代码高度只超出highlight_height_limit 一点时，出现展开按钮，展开没内容。
  • 不适用于隐藏后的代码块（ css 设置 display: none）

增强教程合集