Skip to content

注释

¥Annotations

Material for MkDocs 的旗舰功能之一是能够注入注释 - 几乎可以在文档的任何位置添加的小标记,并在单击或键盘焦点时展开包含任意 Markdown 的工具提示。

¥One of the flagship features of Material for MkDocs is the ability to inject annotations – little markers that can be added almost anywhere in a document and expand a tooltip containing arbitrary Markdown on click or keyboard focus.

配置

¥Configuration

此配置允许向所有内联和块级元素以及代码块添加注释,并且可以将注释嵌套在一起。将以下几行添加到mkdocs.yml中:

¥This configuration allows to add annotations to all inline- and block-level elements, as well as code blocks, and nest annotations inside each other. Add the following lines to mkdocs.yml:

markdown_extensions:
  - attr_list
  - md_in_html
  - pymdownx.superfences

查看其他配置选项:

¥See additional configuration options:

注释图标

¥Annotation icons

9.2.0

¥9.2.0

注释图标可以更改为主题附​​带的任何图标,甚至可以是自定义图标,例如,更改为material/arrow-right-circle:。只需将以下几行添加到mkdocs.yml即可:

¥The annotation icon can be changed to any icon bundled with the theme, or even a custom icon, e.g. to material/arrow-right-circle:. Simply add the following lines to mkdocs.yml:

theme:
  icon:
    annotation: material/arrow-right-circle # (1)!
  1. 输入几个关键字,使用我们的图标搜索找到完美的图标,然后单击短代码将其复制到剪贴板:

一些受欢迎的选择:

¥Enter a few keywords to find the perfect icon using our icon search and click on the shortcode to copy it to your clipboard:

  • - material/plus-circle

    ¥ - material/plus-circle

  • - material/circle-medium

    ¥ - material/circle-medium

  • - material/record-circle

    ¥ - material/record-circle

  • - material/arrow-right-circle

    ¥ - material/arrow-right-circle

  • - material/arrow-right-circle-outline

    ¥ - material/arrow-right-circle-outline

  • - material/chevron-right-circle

    ¥ - material/chevron-right-circle

  • - material/star-four-points-circle

    ¥ - material/star-four-points-circle

  • - material/plus-circle-outline

    ¥ - material/plus-circle-outline

用法

¥Usage

使用注释

¥Using annotations

9.2.0

注释由两部分组成:标记,可以放置在标有annotate类的块中的任何位置,以及位于包含标记的块下方的列表中的内容:

Text with annotations
Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.
{ .annotate }

1.  :man_raising_hand: I'm an annotation! I can contain `code`, __formatted
    text__, images, ... basically anything that can be expressed in Markdown.

Lorem ipsum dolor sat amet,(1) consectetur adipiscing elit。

¥Some popular choices:

  1. 我是一个注释!我可以包含code格式化文本、图像……基本上任何可以用 Markdown 编写的内容。

请注意, annotate类只能添加到最外层的块中。所有嵌套元素都可以使用相同的列表来定义注释,除非注释本身是嵌套的。

¥9.2.0

在注释中

¥in annotations

启用SuperFences后,可以通过将注释类添加到annotate注释内容的列表项,将注释嵌套在注释中,重复该过程:

¥Annotations consist of two parts: a marker, which can be placed anywhere in a block marked with the annotate class, and content located in a list below the block containing the marker:

Text with nested annotations
Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.
{ .annotate }

1.  :man_raising_hand: I'm an annotation! (1)
    { .annotate }

    1.  :woman_raising_hand: I'm an annotation as well!

Lorem ipsum dolor sat amet,(1) consectetur adipiscing elit。

¥Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

  1. 我是注解!(1)我也是注解!

在警告中

¥in admonitions

警告的标题和正文也可以通过在类型限定符后添加annotate修饰符来承载注释,这与内联块的工作方式类似:

¥Note that the annotate class must only be added to the outermost block. All nested elements can use the same list to define annotations, except when annotations are nested themselves.

Admonition with annotations
!!! note annotate "Phasellus posuere in sem ut cursus (1)"

    Lorem ipsum dolor sit amet, (2) consectetur adipiscing elit. Nulla et
    euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo
    purus auctor massa, nec semper lorem quam in massa.

1.  :man_raising_hand: I'm an annotation!
2.  :woman_raising_hand: I'm an annotation as well!

菜豆 (Phasellus posuere in sem ut cursus) (1)

¥When SuperFences is enabled, annotations can be nested inside annotations by adding the annotate class to the list item hosting the annotation content, repeating the process:

Lorem ipsum dolor sat amet,(2) consectetur adipiscing elit。 Nulla et euismod nulla。 Curabitur feugiat、tortor non consequat finibus、justo purus auctor Massa、nec semper lorem quam in Massa。

¥Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

  1. 我是一个注解!

  2. 我也是注解啊!

在内容标签中

¥in content tabs

内容选项卡可以通过将annotate类添加到专用内容选项卡的块(而不是添加到容器,因为不支持)来托管注释:

¥🙋‍♂️ I'm an annotation! (1)

Content tabs with annotations
=== "Tab 1"

    Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.
    { .annotate }

    1.  :man_raising_hand: I'm an annotation!

=== "Tab 2"

    Phasellus posuere in sem ut cursus (1)
    { .annotate }

    1.  :woman_raising_hand: I'm an annotation as well!

Lorem ipsum dolor sat amet,(1) consectetur adipiscing elit。

¥The titles and bodies of admonitions can also host annotations by adding the annotate modifier after the type qualifier, which is similar to how inline blocks work:

  1. 我是一个注解!

菜豆 (Phasellus posuere in sem ut cursus) (1)

¥Phasellus posuere in sem ut cursus (1)

  1. 我也是注解啊!

在其他一切事情上

¥in everything else

Attribute Lists扩展是向大多数元素添加注释的关键要素,但它有一些局限性。不过,始终可以利用Markdown in HTML扩展,使用带有annotate类的div包裹任意元素:

¥Lorem ipsum dolor sit amet, (2) consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

HTML with annotations
<div class="annotate" markdown>

> Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

</div>

1.  :man_raising_hand: I'm an annotation!

Lorem ipsum dolor sat amet,(1) consectetur adipiscing elit。

¥

Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

  1. 我是一个注解!

使用此技巧,注释也可以添加到块引用、列表以及许多其他属性列表扩展不支持的元素中。此外,请注意,代码块遵循不同的语义

¥Content tabs can host annotations by adding the annotate class to the block of a dedicated content tab (and not to the container, which is not supported):

已知限制

¥Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

请注意,注释目前在数据表中不起作用,如#3453中所述,因为数据表是可滚动元素,并且定位非常棘手。这个问题可能会在未来得到修复。

¥Phasellus posuere in sem ut cursus (1)