🔖 hexo & markdown Cheat Sheet

hexo 相关配置/操作，markdown 相关格式。

多端初始化

新电脑加入时，进行初始化：

1
2

npm install -g hexo-cli
npm install

草稿

Hexo 文章保存为草稿

• 传统建立文章方式
  一般都会使用 hexo new <title> 来建立文章，这种建立方法会将新文章建立在 source/_posts 目录下，当使用 hexo generate 编译 markdown 文件时，会将其 HTML 结果编译在 public 目录下，之后 hexo deploy 将会把 public 目录下所有文章部署到 GitHub，这是常规的 Hexo 流程。
  这种建立文章方式的缺点是：若同时编辑多篇文章，只要其中一篇文章尚未编辑完成，也会随着 hexo deploy 一起部署到 GitHub，也就是 GitHub 可能会看到尚未完成的文章。

• 建立文章草稿
  Hexo 另外提供 draft 机制，它的原理是新文章将建立在 source/_drafts 目录下，因此 hexo generate 并不会将其编译到 public 目录下，所以 hexo deploy 也不会将其部署到 GitHub。
  hexo new draft <title>

• 本机预览草稿
  虽然 hexo generate 不会编译 source/_drafts 目录下的文章，但 Hexo 的 Hexo server 另外提供 --draft 参数，这让只要搭配 hexo-browsersync plugins，就可以达到一边编辑 markdown 文章，一边使用浏览器预览的目的。
  hexo S --draft

• 将草稿发布为正式文章
  其中 <filename> 为不包含 md 后缀的文章名称。它的原理只是将文章从 source/_drafts 移动到 source/_posts 而已。 之后的 hexo generate 与 hexo deploy 的用法就完全一样了。
  hexo P <filename>
  若日后想将正式文章转为为草稿，也可以手动将文章从 source/_posts 目录移动到 source/_drafts 目录。

分割线样式

• 普通样式

  1	<hr style="border:1px solid #a3cb38;">

  ---

  1	<hr style="height:2px;border-width:0;color:#FF0000;background-color:#FF0000">

  ---

• 包含内容样式

  1 2 3 4 5

  <div style="display: flex; align-items: center;"> <hr style="flex-grow: 1; height: 1px; border: none; background-color: #FF8C00;"> <span style="margin: 0 10px; color: #FF8C00;">我是内容</span> <hr style="flex-grow: 1; height: 1px; border: none; background-color: #FF8C00;"> </div>

  ---

  我是内容

  ---

  
  

引用

点我试试~

1
2
3

<blockquote style="border-left: 4px solid #6495ED; background-color: #F5F5F5; padding: 10px 20px;">
  <p><a href="https://baidu.com" target="_blank">点我试试~</a></p>
</blockquote>

跳转本文锚点

• 标准语法方式
  示例：多端初始化

  1	[多端初始化](#多端初始化)

  注意：包含特殊符号可能导致无法解析
  • 空格使用-替换
  • 尖括号<>使用\转义

• HTML 方式
  使用 HTML 语法在引用中添加 ‘本文锚点’，如果不生效，需要将锚点内容中的中文使用<URL编码>进行处理。

  点击跳转 -> 多端初始化

  1 2 3

  <blockquote style="border-left: 4px solid #ff7676; background-color: #F5F5F5; padding: 10px 20px;"> <p><a href="#%E5%A4%9A%E7%AB%AF%E5%88%9D%E5%A7%8B%E5%8C%96">点击跳转 -> 多端初始化</a></p> </blockquote>

  
  

表格

• 自定义宽度&对齐方式

  English	中文
  Primitive Data Types	原始数据类型
  Integer	整数
  Float	浮点数
  Char	字符
  String	字符串
  Boolean	布尔值

  1 2 3 4 5 6 7 8

  | English<div style="width:400px"> | 中文<div style="width:300px"> | | :------------------------------- |------------------------------:| | Primitive Data Types | 原始数据类型 | | Integer | 整数 | | Float | 浮点数 | | Char | 字符 | | String | 字符串 | | Boolean | 布尔值 |

  • 自定义宽度：<div style="width:400px">
  • 对其方式
    • -: 设置内容和标题栏居右对齐
    • :- 设置内容和标题栏居左对齐
    • :-: 设置内容和标题栏居中对齐

图片并列

1
2
3
4
5
6
7
8
9
10

<div style="text-align:center">
    <span style="width:48%;display:inline-block">
        <img src="长征五号B运载火箭首次飞行任务标识.png" alt="长征五号B运载火箭首次飞行任务标识"
             style="width:100%;"/>
    </span>
    <span style="width:48%;display:inline-block">
        <img src="神舟十五号载人飞船飞行任务任务标.png" alt="神舟十五号载人飞船飞行任务任务标"
             style="width:100%;"/>
    </span>
</div>

文字格式

• 文字高亮：你说啥？

  1	<mark>你说啥？</mark>

• 文字加粗：你瞅啥

  1	<b>你瞅啥</b>

• 文字颜色：<font color=#FF4500></font>

  1	<font color=#FF4500>瞅你咋地</font>

转义符号

脚注插件

Hexo 里的脚注插件~

代码块

>folded：折叠

1
2
3

{% codeblock "可选文件名" lang:代码语言 folded %}
...代码块内容...
{% endcodeblock %}

1
2
3
4
5
6

<div class="buttons">
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
</div>

内容折叠

• 方式一：hexo-sliding-spoiler
  npm install hexo-sliding-spoiler --save

  我是标题

  我是内容

  1 2 3

  {% spoiler 我是标题 %} 我是内容 {% endspoiler %}

• 方式二：hexo-fold
  npm i hexo-fold

  我是标题

  我是内容

  • 我也是内容呀

  1 2 3 4

  {% fold 我是标题 %} 我是内容 - 我也是内容呀 {% endfold %}

Live Photos 支持

• Hexo 中实现 Live Photos 支持

文章置顶

• 卸载hexo-generator-index

  1	npm uninstall hexo-generator-index

• 安装hexo-generator-index-pin-top

  1	npm i hexo-generator-index-pin-top --save

  在需要置顶的文章的 Front-matter 中加上 top: true，或者 top: 数字 数字越大，文章越靠前。

站内引用文章

网上查到的都是下面这种使用这种语法，直接写md的文件名即可：

1

{% post_link Hello %}

但我这边不行，出现Post not found异常，后来看到这个问题：请问博主，next或者hexo，链接站内文章的方法？ · Issue #978。

简单来说，需要填写_post目录下的路径。

举例来说：常用工具类.md这篇文章的本地完整路径是../../hexo/source/_post/技术/java/常用工具类.md，那么站内引用的正确写法是：{% post_link 技术/java/常用工具类 %}。

iframe 内嵌网页

1

<iframe width="100%" scrolling=auto height="500" frameborder="0" src="https://reference-henna.vercel.app/docs/javascript.html"></iframe>

两个代码块并列

1
2
3
4
5

// No
enum Position {
    TOP = 'TOP',
    BOTTOM = 'BOTTOM',
}

1
2
3
4
5

// Yeppers
enum Position {
    TOP, // = 0
    BOTTOM, // = 1
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div style="display:flex; flex-wrap:wrap; align-items:stretch;">
    <div style="flex:1 1 200px; min-width:0; padding:10px;">
        {% code lang:javascript %}
        // No
        enum Position {
            TOP = 'TOP',
            BOTTOM = 'BOTTOM',
        }
        {% endcode %}
    </div>
    <div style="flex:1 1 200px; min-width:0; padding:10px;">
        {% code lang:javascript %}
        // Yeppers
        enum Position {
            TOP, // = 0
            BOTTOM, // = 1
        }
        {% endcode %}
    </div>
</div>

思维导图

• 如何在 Hexo 中较为优雅的插入思维导图？hexo-markmap 演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{% markmap 350px %}

## 思维导图

- 使用现有的插件或组件？
    - Mermaid：更偏向流程图
    - Kityminder
        - 现成hexo插件有些小问题。
        - 二次开发，失败
- 找寻相关项目？
- Markmap大法！
  - 直接弄，失败
  - 使用jsdom，失败
  - 寻找现成库，成功
- 咕咕咕咕咕咕咕咕咕咕咕咕
- 凑一下行数让版面好看点
- 现已支持 markdown/链接/等特性
  - [links](https://zhangmaimai.com)
  - **inline** ~~text~~ *styles*
  - multiline
    text
  - `inline code`

{% endmarkmap %}

plantUML

参考：在hexo中画图-PlantUml

1
2
3
4
5

{% plantuml %}
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
{% endplantuml %}

Github 项目分享

Apache Camel Demo(Learning Sample Demo)

1
2
3
4

<a href="https://github.com/Simba-cheng/ApacheCamelDemo" class="github-link">
  <img class="preview-img" no-lazy no-link src="https://opengraph.githubassets.com/b1330d2c1ce09a9be1c10994129f537498cf40c686e5df762a58b187eea59e11/Simba-cheng/ApacheCamelDemo" style="aspect-ratio: 1200/600;">
  <span class="title">Apache Camel Demo(Learning Sample Demo)</span>
</a>

封面信息

在封面右下角，可以添加作者或者是位置信息（2选1）

• 作者信息

  1 2 3

  coverInfo: author: freestocks url: https://unsplash.com/photos/top-view-of-opened-magazine-near-up-of-coffee-VFs2fZEVkXo

• 位置信息

  1 2 3

  coverInfo: location: 澳门·市政署大楼 url: https://maps.apple.com/place?address=Avenida%20de%20Almeida%20Ribeiro%20No.%20163,%20Macao%20SAR,%20China&coordinate=22.193346,113.539592&name=%E5%B8%82%E6%94%BF%E7%BD%B2&place-id=IC211FBD448B1E6C&map=explore

悬浮文字

有的时候想要写一些说明文字，但是又不想总是在文字后面添加括号（比如这样），可以通过添加下面的配置为文字添加悬浮的说明文案。

比如这里：

1
2
3
4

customComments:
  - text: 比如这里：
    index: 0
    comment: 看到悬浮文案了吗

• text：决定对哪个文字生效
• index：决定第几次出现时生效（避免全文多处同名文字都被标注）
• comment：决定浮出什么内容