在 Hexo 中使用 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
{% note default %}
一个 default 提示
{% endnote %}

{% note primary %}
一个 primary 提示
{% endnote %}

{% note success %}
一个 success 提示
{% endnote %}

{% note info %}
一个 info 提示
{% endnote %}

{% note warning %}
一个 warning 提示
{% endnote %}

{% note danger %}
一个 danger 提示
{% endnote %}

一个 default 提示

一个 primary 提示

一个 success 提示

一个 info 提示

一个 warning 提示

一个 danger 提示

使用 Tabs 标签

1
2
3
4
5
6
7
8
9
10
11
12
{% tabs 标签, 1 %} 
<!-- tab -->
**选项卡 1** 
<!-- endtab -->
<!-- tab -->
**选项卡 2**
<!-- endtab -->
<!-- tab 标签三 -->
**选项卡 3** , 名字为 `TAB三`
<!-- endtab -->
{% endtabs %}

选项卡 1

选项卡 2

选项卡 3 , 名字为 TAB三

支持github alerts style

安装设置

[!Tip]

  1. markdown-it-alerts语法支持
  2. Hexo 美化：添加 Github alerts 支持

  1. 安装 markdown-it-alerts

    1
    npm i markdown-it-alerts --save

  2. 更新hexo根目录下（不是主题）_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    markdown:
      render:
        html: true
        xhtmlOut: false
        breaks: true
        linkify: true
        typographer: true
        quotes: '“”‘’'
      plugins:
        - markdown-it-alerts
      anchors:
        level: 2
        collisionSuffix: ''
        permalink: false
        permalinkClass: 'header-anchor'
        permalinkSide: 'left'
        permalinkSymbol: '¶'
        case: 0
        separator: ''

  3. 更新hexo根目录下的scripts

    这里通过扩展 markdown-it，实现检测 > [!NOTE] 等字段并给所在 blockquote 添加 class，实现自定义样式。

    在 hexo 目录下 scripts 新建任意名称脚本，把下面 js 复制进去。

    默认情况下 scripts 目录下 js 是会全局加载的。

    scripts/github-alerts.js (没有就创建一个scripts文件夹)

    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
    39
    40
    41
    hexo.extend.filter.register("markdown-it:renderer", function (md) {
      md.core.ruler.after("block", "github-alert", function (state) {
        const tokens = state.tokens;
        for (let i = 0; i < tokens.length; i++) {
          if (tokens[i].type === "blockquote_open") {
            // 找到 blockquote 的内容
            let j = i + 1;
            // 只处理第一个段落
            if (
              tokens[j] &&
              tokens[j].type === "paragraph_open" &&
              tokens[j + 1] &&
              tokens[j + 1].type === "inline"
            ) {
              let content = tokens[j + 1].content.trim();
              // 兼容 [!NOTE]、[!NOTE]<br>、[!NOTE]\n
              const match = content.match(
                /^\[!(NOTE|WARNING|TIP|IMPORTANT|CAUTION|INFO|SUCCESS|ERROR)\][\s:：-]*(.*)$/i
              );
              if (match) {
                const alertType = match[1].toLowerCase();
                let restContent = match[2].trim();

                // 给 blockquote_open 加 class
                let className = tokens[i].attrGet("class") || "";
                className += (className ? " " : "") + `alert alert-${alertType}`;
                tokens[i].attrSet("class", className);

                if (restContent) {
                  // [!NOTE] 和内容在同一行
                  tokens[j + 1].content = restContent;
                } else {
                  // [!NOTE] 单独一行，移除该段
                  tokens.splice(j, 3);
                }
              }
            }
          }
        }
      });
    });

  4. 配置alert的css

    我用的是butterfly主题，以该主题为例, 在themes/butterfly/source/css， 创建一个alerts.style

    1
    2
    3
    4
    5
    - themes
      - butterfly
       - source
       	  - css
       	    - alerts.style

    写入格式配置

    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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    .alert
      padding: 1em
      margin: 1em 0
      border-radius: 4px
      position: relative
      display: block
      // font-family: "Helvetica Neue", Helvetica, Arial, sans-serif

      // 确保 alert 样式不会被 blockquote 样式覆盖
      &.content blockquote, .content &
        border-left: 4px solid #0078d4
        padding: 1em 1.5em 1em 1em
        margin: 1em 0
        border-radius: 4px

      // 添加标题前的图标和文本
      &::before
        font-weight: bold
        margin-bottom: 0.5em
        display: block
        font-family: "Font Awesome 5 Free", sans-serif
        letter-spacing: 0.15em

    // 黑夜模式下的基本样式
    body.night .alert,
    body.night .content .alert,
    body.night .alert.content blockquote,
    body.night .content .alert blockquote
      background-color: #373d48 !important
      border-color: #434a56 !important

    .alert-note
      border-color: #0078d4 !important
      background: #f3f6fb !important
      &::before
        content: "\f05a  NOTE"  // 信息图标 (i)
        color: #0078d4

    .alert-warning
      border-color: #e0a800 !important
      background: #fffbe6 !important
      &::before
        content: "\f071  WARNING"  // 警告图标 (!)
        color: #e0a800

    .alert-tip
      border-color: #28a745 !important
      background: #e6ffed !important
      &::before
        content: "\f0eb  REFERENCE"  // 灯泡图标
        color: #28a745

    .alert-important
      border-color: #d63384 !important
      background: #f3f6fb !important
      &::before
        content: "\f06a  IMPORTANT"  // 感叹号图标
        color: #d63384

    .alert-caution
      border-color: #fd7e14 !important
      background: #fff5e6 !important
      &::before
        content: "\f06d  CAUTION"  // 火焰图标
        color: #fd7e14

    .alert-info
      border-color: #17a2b8 !important
      background: #e6f7ff !important
      &::before
        content: "\f129  INFO"  // 信息图标 (i)
        color: #17a2b8

    .alert-success
      border-color: #28a745 !important
      background: #e6ffed !important
      &::before
        content: "\f00c  SUCCESS"  // 勾选图标 (√)
        color: #28a745

    .alert-error
      border-color: #dc3545 !important
      background: #ffe6e6 !important
      &::before
        content: "\f00d  ERROR"  // 错误图标 (×)
        color: #dc3545

  5. 导入css

    在themes/butterfly/source/css/index.styl, 导入上面创建的styl

    1
    2
    3
    4
    5
    6
    7
    8
    9
    if hexo-config('css_prefix')
      @import 'nib'
    @import '_third-party/normalize.min.css'

    @import 'alerts.styl' // <---插入这个！！

    // project
    @import 'var'
    /* ........

  6. 刷新缓存

    更改脚本后需要刷新缓存，目录下执行 clean 命令：

    1
    hexo clean

使用

markdown里输入以下这些，就可以显示了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
> [!NOTE]
>
> This is a note block.

> [!TIP]
>
> This is a tip block.

> [!IMPORTANT]
>
> This is an important block.

> [!WARNING]
>
> This is a warning block.

> [!CAUTION]
>
> This is a caution block.

> normal quote

Alerts:

[!NOTE]

This is a note block.

[!TIP]

This is a tip block.

[!IMPORTANT]

This is an important block.

[!WARNING]

This is a warning block.

[!CAUTION]

This is a caution block.

normal quote