写作帮助文档

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

前言：

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

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 %}
    Default {% label default@Default %}
    Primary {% label primary@Primary %}
    Success {% label success@Success %}
    Info {% label info@Info %}
    Waring {% label warning@Waring %}
    Danger {% label danger@Danger %}
    esse <mark>esse</mark>

  • 展示示例

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • 用法

    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.

本文结束 感谢您的阅读
正在加载今日诗词....