Hexo及Markdown使用帮助

因为不熟悉Hexo和Mardown语法，故有此页面来给我做出提示。

Front-matter

Page Front-matter

写法 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标签、分类和友情链接三个页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块 (默认 true)
top_img 【可选】页面顶部图片
aplayer 【可选】在需要的页面加载aplayer的js和css（例如：aplayer: true/false)
random 【可选】配置友情链接是否随机排序（默认为 false)

Post Front-matter

写法 解释
title 【必需】文章标题
date 【必需】文章创建日期
updated 【可选】文章更新日期
tags 【可选】文章标签
categories 【可选】文章分类
keywords 【可选】文章关键字
description 【可选】文章描述
top_img 【可选】文章顶部图片
cover 【可选】文章缩略图（可设为false/图片地址/留空)
copyright 【可选】显示文章版权模块(enable/false)
published 【可选】是否发布文章true/false(false表示未发布)
comments 【可选】显示文章评论模块(默认 true)
toc 【可选】显示文章TOC(默认为设置中toc的enable配置)
copyright_url 【可选】文章版权模块的文章连结链接
copyright_info 【可选】文章版权模块的版权声明文字

HEXO使用方面

如何写作

你可以执行下列命令来创建一篇新文章或者新的页面。

1
2
3
$ hexo new [layout] <title>
例如
$ hexo new 这是我的第一篇文章

layout用来指定文章布局默认为post格式。

引用块

当转载自他人文章有时需要注明转载出处

在文章中插入引言，可包含作者、来源和标题。

别号： quote

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

引用网络上的文章

1
2
3
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

Seth Godin–Welcome to Island Marketing

Butterfly主题相关

文章封面

文章的 markdown 文档上,在 Front-matter 添加 cover ,并填上要显示的图片地址。

如果不配置 cover,可以设置显示默认的 cover。

如果不想在首页显示 cover, 可以设置为 false。

文章封面的获取顺序 Front-matter 的 cover > 配置文件的 default_cover > false

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover:

当配置多张图片时,会随机选择一张作为cover.此时写法应为

1
2
3
4
default_cover:
  - https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg3.png

在文章中使用NOTE标签外挂

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
{% note flat %}
默认 提示块标签
{% endnote %}

{% note default flat %}
default 提示块标签
{% endnote %}

{% note primary flat %}
primary 提示块标签
{% endnote %}

{% note success flat %}
success 提示块标签
{% endnote %}

{% note info flat %}
info 提示块标签
{% endnote %}

{% note warning flat %}
warning 提示块标签
{% endnote %}

{% note danger flat %}
danger 提示块标签
{% endnote %}

以下演示

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

Butterfly外挂标签的使用

mermaid标签（绘制图表）

butterfly支持mermaid标签，使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文档

修改 主题配置文件

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark

写法：

1
2
3
{% mermaid %}
内容
{% endmermaid %}

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% mermaid %}
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
{% endmermaid %}

tag-hide（隐藏文字点击按钮显示隐藏文字）

如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。

inline 在文本里面添加按钮隐藏内容，只限文字

( content不能包含英文逗号)

1
{% hideInline content,display,bg,color %}

content: 文本内容

display: 按钮显示的文字(可选)

bg: 按钮的背景颜色(可选)

color: 按钮文字的颜色(可选)

Demo

1
2
3
哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

门里站着一个人? {% hideInline 闪 %}

哪个英文字母最酷？ 因为西装裤(C装酷)

门里站着一个人? 闪

block独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

( display不能包含英文逗号)

content: 文本内容

display: 按钮显示的文字(可选)

bg: 按钮的背景颜色(可选)

color: 按钮文字的颜色(可选)

Demo

1
2
3
4
查看答案
{% hideBlock 查看答案 %}
傻子，怎么可能有答案
{% endhideBlock %}

查看答案

傻子，怎么可能有答案

Tabs

实现一个选项卡，选择需要查看得内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name   : 选项卡块标记的唯一名称，不带逗号。
                #id 中将使用该名称作为每个选项卡的前缀，并带有索引号。
                如果名称中有空格，对于生成#id，所有空格都将被破折号替换。
                仅适用于帖子/页面的当前网址，必须是唯一的！
[index]       : 激活标签的索引号。
                如果未指定，则将选择第一个选项卡 (1)。
                如果索引为-1，则不会选中选项卡。它类似于扰流板。
                可选参数.
[Tab caption] : 当前选项卡的标题。
                如果未指定标题，则带有选项卡索引后缀的唯一名称将用作选项卡的标题。
                如果未指定标题，但指定了图标，则标题将为空。
                可选参数.
[@icon]       : FontAwesome图标名称（全名，类似于'fas fa-font'）
                可以指定有或没有空格；例如，“Tab caption @icon”类似于“Tab caption@icon”.
                可选参数.

Demo预设自动选择第一个

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test1 %}
<!-- tab 第一个Tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab 第二个Tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab 第三个Tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Button

用于超链接的按钮

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景顔色(默认style时）
                      按钮字体和边框顔色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 按钮佈局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空

Demo

1
2
3
4
5
6
This is my website, click the button {% btn 'https://imjianhao.cn/',Butterfly %}
This is my website, click the button {% btn 'https://imjianhao.cn/',Butterfly,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://imjianhao.cn/',Butterfly,,outline %}
This is my website, click the button {% btn 'https://imjianhao.cn/',Butterfly,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://imjianhao.cn/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://imjianhao.cn/',Butterfly,far fa-hand-point-right,green larger %}

这是我的网站, 点击这个按钮 小羊的博客
这是我的网站, 点击这个按钮 小羊的博客
这是我的网站, 点击这个按钮 小羊的博客
这是我的网站, 点击这个按钮 小羊的博客
这是我的网站, 点击这个按钮 小羊的博客
彩色按钮：Butterfly

inlineImg

主题中的图片都是默认以块级元素显示，如果你想以内联元素显示，可以使用这个标签外挂。

1
2
3
4
{% inlineImg [src] [height] %}

[src]      :    图片链接
[height]   ：   图片高度限制【可选】

直接在文章中正常接着图片链接写即可

1
你怎么那么好看 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %}

你怎么那么好看

Markdown基础语法

标题

使用 = 和 - 标记一级和二级标题

= 和 - 标记语法格式如下：

1
2
3
4
5
我展示的是一级标题
=================

我展示的是二级标题
-----------------

使用 # 号标记

使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。

1
2
3
4
5
6
7
8
井号加空格，可以生成标题格式；几个井号就是几级标题


# 一级标题

## 二级标题

### 三级标题

段落

Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车。

当然也可以在段落后面使用一个空行来表示重新开始一个段落。

列表

有序列表

1
英文输入法下，数字后面加一点，然后空格
  1. AAA 1. AAA
  2. BBB 2. BBB
  3. CCC 3. CCC

无序列表

1
2
1. 有三种语法符号，三种都可以
2. 但更推荐使用短横杠，因为不需要使用组合键

  • AAA - AAA

  • BBB + BBB

  • CCC * CCC

列表嵌套

列表嵌套只需在子列表中的选项前面添加两个或四个空格即可：

1
2
3
4
5
6
1. 第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项：
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

列表的互相嵌套

基础语法：

  1. 一个回车可以使列表递进，两个回车可以取消自动列表
  2. 使用 tab 可以使列表缩进，使用 shift +tab 可以取消列表缩进

有序和无序列表的互相嵌套：

  1. 按 回车 生成列表第二项
  2. 按 tab 缩进列表
  3. 再按 回车 取消列表第二项
  4. 然后使用有序或者无序列表的基础语法即可

字体标记

1
所有符号都需要在英文输入法下
  1. 加粗 **加粗**
  2. 删除 ~~删除~~
  3. 斜体 *斜体*
  4. 高亮 ==高亮==
  5. 带下划线文本 <u>带下划线文本</u>

注：部分笔记软件对 Markdown 的支持不够完全，可能只支持 加粗

段落相关

引用语法

1
> 这是一段引用

这是一段引用

分割线

1
--- ; 三个或以上的短横杠，然后回车

代码

1
`行内代码`  ；这个符号的位置在数字键 1 左边的那个小点上，注意需要在英文输入法下使用

可以在一句话中的任意位置使用 行内代码 语法

代码块

基础语法：

1
2
3
4
5
```
1. 在英文输入法下，输入三个小点 `
2. 部分笔记软件可以直接回车
3. 其他笔记软件则需要手动在末尾补上三个小点
```

超链接

基础链接用法

1
[百度](www.baidu.com)

示例：百度

高级链接用法

两种使用场景：

  • ① 在文稿起草阶段，还没确定具体网址，但可以先给出网址标题
  • ② 同一篇文章需要重复出现同一个网址时

使用方法：

1
2
3
4
1. 格式 ：[网址标题][变量01]
2. 在文档最后解释变量

[变量01]:www.baidu.com

脚注

语法：

1
2
3
这是一句需要添加脚注的话[^01]

[^01]:这是放在文档最底下，用来解释脚注的内容

图片

基础语法

1
2
3
1. 基本格式：![](图片链接)
2. 示例：![](https://mypicture-1257351426.cos.ap-beijing.myqcloud.com/组 4.png)
3. 图片链接可以是本地链接，也可以是在线链接

表格

基础语法：

1
2
3
4
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

表格对齐：

  1. 左对齐：:----
  2. 居中对齐： :----:
  3. 右对齐：----:
1
2
3
| 左对齐 | 居中对齐 | 右对齐 |
| :----|:----:|----:|
| AAA | BBB | CCC |
左对齐 居中对齐 右对齐
AAA BBB CCC

Markdown 高级技巧

支持的 HTML 元素

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。

目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如：

1
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

使用 Ctrl+Alt+Del 重启电脑

转义

Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

1
2
**文本加粗** 
\*\* 正常显示星号 \*\*

输出结果为：

文本加粗
** 正常显示星号 **

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

1
2
3
4
5
6
7
8
9
10
11
12
\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

typora 画流程图、时序图(顺序图)、甘特图

UML时序图源码复杂样例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% mermaid %}
sequenceDiagram
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
{% endmermaid %}

UML标准时序图样例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% mermaid %}
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
{% endmermaid %}

Vscode写markdown的技巧

插件推荐

  1. Markdown All in One

插件功能： 提供了快捷键、目录、自动预览、图片快速上传等功能。首先是快捷键功能，快捷键列表如下

快捷键 命令
Ctrl/Cmd + B 切换加粗
Ctrl/Cmd + I 切换斜体
Alt+S (Windows) 切换删除线
Ctrl + Shift + ] 切换标题（上级）
Ctrl + Shift + [ 切换标题（下级）
Ctrl/Cmd + M 切换数学环境
Alt + C 勾选/取消勾选任务列表项
Ctrl/Cmd + Shift + V 切换预览
Ctrl/Cmd + K + V 切换侧边预览
  1. Markdown Preview Enhanced

强大的预览插件。

评论
WalineLivere
avatar
小🐏
随笔一些个人故事及经历
文章
5
标签
0
分类
0
Follow Me
公告
这是小🐏的个人博客
最新文章
一个可能有轻微X瘾患者的自述
一个可能有轻微X瘾患者的自述
第二次车辆保养
第二次车辆保养
野心和脾气
野心和脾气
游记:上海和杭州之旅
游记:上海和杭州之旅
这是一个新的篇章
这是一个新的篇章
归档
网站资讯
文章数目 :
5
本站总字数 :
4.6k
本站访客数 :
本站总访问量 :
最后更新时间 :