hexo & markdown 备忘
2025-01-22 08:19:30    2.5k 字    #备忘 #hexo #markdown
This post is also available in English and alternative languages.

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


1. Hexo多端初始化

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

1
2
npm install -g hexo-cli
npm install

2. Hexo 中实现 Live Photos 支持

Hexo 中实现 Live Photos 支持


3. 文章置顶

  • 卸载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: 数字 数字越大，文章越靠前。


4. 站内引用文章

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

1
{% post_link Hello %}

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

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

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


5. 跳转本文锚点

示例：Bark小节

1
[Bark小节](#Bark)

注意：包含特殊符号可能导致无法解析

  • 空格使用-替换
  • 尖括号<>使用\转义

6. iframe 内嵌网页

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

7. 代码块

两个代码块并列：

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>
1
2
3
4
5
// No
enum Position {
    TOP = 'TOP',
    BOTTOM = 'BOTTOM',
}
1
2
3
4
5
// Yeppers
enum Position {
    TOP, // = 0
    BOTTOM, // = 1
}

8. 添加思维导图

如何在 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 %}

9. plantUML

参考：在hexo中画图-PlantUml

1
2
3
4
5
{% plantuml %}
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
{% endplantuml %}

10. 脚注插件

Hexo 里的脚注插件
https://github.com/kchen0x/hexo-reference

配置文件：_config.yml 中添加以下配置

1
2
3
4
_config.yml

plugins:
  - hexo-reference

11. 草稿

Hexo 文章保存为草稿


11.1. 传统建立文章方式

一般我们都会使用 hexo new <title> 来建立文章，这种建立方法会将新文章建立在 source/_posts 目录下，当使用 hexo generate 编译 markdown 文件时，会将其 HTML 结果编译在 public 目录下，之后 hexo deploy 将会把 public 目录下所有文章部署到 GitHub，这是我们熟悉的 Hexo 流程。

这种建立文章方式的缺点是：若我们同时编辑多篇文章，只要其中一篇文章尚未编辑完成，也会随着 hexo deploy 一起部署到 GitHub，也就是 GitHub 可能会看到我们尚未完成的文章。


11.2. 建立文章草稿

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

1
hexo new draft <title>

11.3. 本机预览草稿

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

1
hexo S --draft

11.4. 将草稿发布为正式文章

其中 <filename> 为不包含 md 后缀的文章名称。它的原理只是将文章从 source/_drafts 移动到 source/_posts 而已。 之后的 hexo generate 与 hexo deploy 的用法就完全一样了。

1
hexo P <filename>

若日后想将正式文章转为为草稿，只需手动将文章从 source/_posts 目录移动到 source/_drafts 目录即可。


12. 分割线样式

12.1. 普通样式

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

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

12.2. 包含内容

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>
我是内容

13. 引用

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>

点我试试~


13.1. 跳转本文锚点

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

1
2
3
<blockquote style="border-left: 4px solid #ff7676; background-color: #F5F5F5; padding: 10px 20px;">
  <p><a href="#%E8%B7%B3%E8%BD%AC%E6%9C%AC%E6%96%87%E9%94%9A%E7%82%B9">点击跳转 -> 跳转本文锚点</a></p>
</blockquote>

点击跳转 -> 跳转本文锚点


14. 表格

14.1. 自定义宽度&对齐方式

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

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              | 布尔值       |
English
中文
Primitive Data Types原始数据类型
Integer整数
Float浮点数
Char字符
String字符串
Boolean布尔值

14.2. 单元格合并

MarkDown表格合并单元格

14.2.1. 简单样式

xxxxxxxxx
xxxxxxxxx
1
2
3
4
<table>
  <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
</table>

14.2.2. 上下两行合并

分类元字段描述
文档属性元字段_index文档所属的索引
_id文档的id
_type文档所属类型
_uid由_type和_id字段组成
文档元字段_source文档的原生json字符串
_size整个_source字段的字节数大小
索引元字段_all自动组合所有的字段值
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
36
37
38
<table>
    <tr>
        <th>分类</th>
        <th>元字段</th>
        <th>描述</th>
   </tr>
    <tr>
        <td rowspan="4">文档属性元字段</td>    
        <td >_index</td>
        <td >文档所属的索引</td>
    </tr>
    <tr>
        <td >_id</td>
        <td >文档的id</td>
    </tr>
    <tr>
        <td >_type</td>
        <td >文档所属类型</td>
    </tr>
    <tr>
        <td >_uid</td>
        <td >由_type和_id字段组成</td>
    </tr>
    <tr>
        <td rowspan="2">文档元字段</td>    
        <td >_source</td>
        <td >文档的原生json字符串</td>
    </tr>
    <tr>
        <td >_size</td>
        <td >整个_source字段的字节数大小</td>
    </tr>
    <tr>
        <td rowspan="3">索引元字段</td>    
        <td >_all</td>
        <td >自动组合所有的字段值</td>
    </tr>
</table>

14.2.3. 左右两行合并

xxxxxx
xxxxxxxxx
xxxxxxxxx
1
2
3
4
5
<table>    
  <tr><th colspan="2">xxx</th><th>xxx</th></tr>
  <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
</table>

14.2.4. 设置单元格宽度

xxxxxx
xxxxxxxxx
xxxxxxxxx
1
2
3
4
5
<table style="width: 50%;">    
  <tr><th colspan="2">xxx</th><th>xxx</th></tr>
  <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
</table>

15. 图片处理

15.1. 图片居中

使用 <center></center> 标签包裹。

神舟十五号载人飞船飞行任务任务标

15.2. 图片并列

1
2
3
4
5
6
7
8
9
10
<div style="text-align:center">
    <span style="width:48%;display:inline-block">
        <img src="./hexo&markdown/长征五号B运载火箭首次飞行任务标识.png" alt="长征五号B运载火箭首次飞行任务标识"
             style="zoom:55%;"/>
    </span>
    <span style="width:48%;display:inline-block">
        <img src="./hexo&markdown/神舟十五号载人飞船飞行任务任务标.png" alt="神舟十五号载人飞船飞行任务任务标"
             style="zoom:55%;"/>
    </span>
</div>
长征五号B运载火箭首次飞行任务标识 神舟十五号载人飞船飞行任务任务标

16. 文字格式

  • 文字高亮：<mark></mark>
  • 文字加粗：<b></b>
  • 文字颜色：<font color=#FF4500></font>

17. 转义符号

符号写法备注
<&lt;左尖括号
>&gt;右尖括号
示例：&lt;a&gt; --> <a>
|&#124;竖线
⬜️复选框（空白）
解决标准复选框语法（- [ ]）在表格中无法渲染使用
&#9744;是另一种方式，但在typora中可以渲染而某些hexo主题无法渲染
✅复选框（打钩）
解决标准复选框语法（- [x]）在表格中无法渲染使用
&#9745;是另一种方式，但在typora中可以渲染而某些hexo主题无法渲染