写作帮助文档

发表于 更新于 分类于 本文字数： 5.6k 阅读时长 ≈ 9 分钟

前言：

写作帮助文档是一种为写作过程提供指导和支持的文档。它旨在帮助作者更好地组织思维、表达观点和撰写文稿。

Button

  • 用法

    1
    2
    3
    {% button url, text, icon [class], [title] %}
    或者
    {% btn url, text, icon [class], [title] %}
    • url : URL 的绝对或相对路径。
    • text ：按钮文本。如果未指定图标，则为必填项。
    • icon ：Font Awesome 图标名称。如果未指定文本，则为必填项。
    • [class]：可选参数。Font Awesome 类：fa-fw| fa-lg| fa-2x| fa-3x| fa-4x|fa-5x
    • [title]：可选参数。鼠标悬停时的工具提示。

  • 示例

    • 拷贝基础工程 
      1
      {% btn  https://suyin-tools.lanzoui.com/i4OLlfg2qti, 拷贝基础工程, download %}
    • 苏寅 Tools 
      1
      {% btn  https://suyin-tools.cn/, 苏寅 Tools, toolbox %}
    • 苏寅 Blog 
      1
      {% btn  https://suyin-blog.club/, 苏寅 Tools, blog %}
    • 好书推荐 
      1
      {% btn  https://suyin-blog.club/, 好书推荐, book %}

Group Pictures

  • 用法

    1
    2
    3
    4
    5
    {% grouppicture [number]-[layout] %}
    {% endgrouppicture %}
    或者
    {% gp [number]-[layout] %}
    {% endgp %}
    • [number]：可选参数。要添加到组图片中的图片总数。
    • [layout]：可选参数。布局的索引，可以根据下图获取。
    • 建议在启用 Fancybox 的情况下使用集体图片。

  • 示例

    1
    2
    3
    4
    5
    {% grouppicture 3-3 %}
    ![](/images/next.svg)
    ![](/images/next.svg)
    ![](/images/next.svg)
    {% endgrouppicture %}

Label

  • 用法

    1
    {% label [class]@text %}
    • [class]：可选参数。支持的值：default| primary| success| info| warning| danger。
      如果不指定，将使用浏览器的默认样式，不同浏览器中可能会有所不同。
    • text : @text 可以指定有或没有空格

  • 示例

    颜色及样式 代码示例
    Default {% label @Default %}
    Primary {% label primary@Primary %}
    Success {% label success@Success %}
    Info {% label info@Info %}
    Waring {% label warning@Waring %}
    Danger {% label danger@Danger %}
    Default {% label default@Default %}
    esse <mark>esse</mark>

  • 用法

    1
    2
    3
    4
    5
    6
    {% linkgrid [image] [delimiter] [comment] %}
    {% endlinkgrid %}
    或者
    {% lg [image] [delimiter] [comment] %}
    {% endlg %}

    • [image] ：可选参数。默认图像 URL。
    • [delimiter]：可选参数。如果给出了可选的 delimiter 参数，它将被解释为每行中项目的分隔符。
    • [comment] ：可选参数。如果给出了可选的注释参数，它将被解释为注释掉一行的符号。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    {% linkgrid %}
    Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
    Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
    Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
    Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
    % Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
    {% endlinkgrid %}

Mermaid

  • 设置

    • NexT config file

      1
      2
      3
      4
      5
      6
      7
      # Mermaid tag
      mermaid:
        enable: true
        # Available themes: default | dark | forest | neutral
        theme:
          light: default
          dark: dark

    • Hexo config file

      1
      2
      3
      highlight:
        exclude_languages:
          - mermaid

  • 用法

    1
    2
    3
    4
    5
    6
    7
    {% mermaid type %}
    {% endmermaid %}
    或者
    ```mermaid
    type

    ```

  • 示例

    1
    2
    3
    4
    5
    6
    7
    ```mermaid
    graph TD
    A[Hard] -->|Text| B(Round)
    B --> C{Decision}
    C -->|One| D[Result 1]
    C -->|Two| E[Result 2]
    ```
    graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

    1
    2
    3
    4
    5
    {% mermaid pie %}
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
    {% endmermaid %}
    pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

Note

  • 设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    note:
      # Note tag style values:
      #  - simple    bs-callout old alert style. Default.
      #  - modern    bs-callout new (v2-v3) alert style.
      #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
      #  - disabled  disable all CSS styles import of note tag.
      style: simple
      icons: false
      # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
      # Offset also applied to label tag variables. This option can work with disabled note tag.
      light_bg_offset: 0

  • 用法

    1
    2
    3
    {% note [class] [no-icon] [summary] %}
    Any content (support inline tags too).
    {% endnote %}
    • [class] ：可选参数。支持的值：default | primary | success | info | warning | danger。
    • [no-icon]：可选参数。禁用注释中的图标。
    • [summary]：可选参数。可选的注释摘要。

  • 示例

    Default Header

    Welcome to Hexo!

    1
    2
    3
    4
    {% note default %}
    #### Default Header
    Welcome to [Hexo!](https://hexo.io)
    {% endnote %}

    Primary Header

    Welcome to Hexo!

    1
    2
    3
    4
    {% note primary %}
    #### Primary Header
    **Welcome** to [Hexo!](https://hexo.io)
    {% endnote %}

    Info Header

    Welcome to Hexo!

    1
    2
    3
    4
    {% note info %}
    #### Info Header
    **Welcome** to [Hexo!](https://hexo.io)
    {% endnote %}

    Success Header

    Welcome to Hexo!

    1
    2
    3
    4
    {% note success %}
    #### Success Header
    **Welcome** to [Hexo!](https://hexo.io)
    {% endnote %}

    Warning Header

    Welcome to Hexo!

    1
    2
    3
    4
    {% note warning %}
    #### Warning Header
    **Welcome** to [Hexo!](https://hexo.io)
    {% endnote %}

    Danger Header

    Welcome to Hexo!

    1
    2
    3
    4
    {% note danger %}
    #### Danger Header
    **Welcome** to [Hexo!](https://hexo.io)
    {% endnote %}

PDF

  • 设置

    • NexT config file

      1
      2
      3
      4
      pdf:
        enable: true
        # Default height
        height: 500px

  • 用法

    1
    {% pdf url [height] %}
    • url ：PDF 文件的 URL（绝对路径）。
    • [height]：可选参数。PDF 显示元素的高度，例如 800px。
    • pdf.js 或 pdf 文件的加载可能会被 CORS 策略阻止。如果要从其他网站加载资源，请确保正确设置 Access-Control-Allow-Origin 标头。另请参见访问控制允许来源 - HTTP | MDN。

  • 示例

    1
    2
    {% pdf https://example.com/sample.pdf %}
    {% pdf /path/to/your/file.pdf 600px %}

Tabs

  • 设置

    • NexT config file

      1
      2
      3
      4
      5
      6
      tabs:
        # Make the nav bar of tabs with long content stick to the top.
        sticky: false
        transition:
          tabs: false
          labels: true

  • 用法

    1
    2
    3
    4
    5
    {% tabs Unique name, [index] %}
    <!-- tab [Tab caption] [@icon] -->
    Any content (support inline tags too).
    <!-- endtab -->
    {% endtabs %}
    • Unique name ：
      • 选项卡块标记的唯一名称，不带逗号。
      • 将在 #id 中用作每个选项卡及其索引号的前缀。
      • 如果名称中有空格，则生成 #id 时所有空格都将替换为破折号。
      • 仅对于帖子 / 页面的当前 url 必须是唯一的！
    • [index] ：
      • 活动选项卡的索引号。
      • 如果未指定，将选择第一个选项卡 (1)。
      • 如果索引为 - 1，则不会选择任何选项卡。这会有点像剧透。
      • 可选参数。
    • [Tab caption]：
      • 当前选项卡的标题。
      • 如果未指定标题，则带有选项卡索引后缀的唯一名称将用作选项卡的标题。
      • 如果未指定标题，而是指定了图标，则标题将为空。
      • 可选参数。
    • [@icon] ：
      • Font Awesome 图标名称。
      • 可以指定有或没有空格；例如 “选项卡标题 @icon” 与 “选项卡标题 @icon” 相同。
      • 可选参数。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% tabs Fourth unique name %}
    <!-- tab Solution 1 -->
    **This is Tab 1.**
    <!-- endtab -->

    <!-- tab Solution 2 -->
    **This is Tab 2.**
    <!-- endtab -->

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

    This is Tab 1.

    This is Tab 2.

    This is Tab 3.