Skip to content

网格

¥Grids

Material for MkDocs 可以轻松地将各个部分排列到网格中，将表达相似含义或同等重要性的块分组。网格非常适合构建索引页，用于简要概述文档的大部分内容。

¥Material for MkDocs makes it easy to arrange sections into grids, grouping blocks that convey similar meaning or are of equal importance. Grids are just perfect for building index pages that show a brief overview of a large section of your documentation.

配置

¥Configuration

此配置启用网格，允许将相同或不同类型的块排列成矩形。将以下几行添加到mkdocs.yml中：

¥This configuration enables the use of grids, allowing to bring blocks of identical or different types into a rectangular shape. Add the following lines to mkdocs.yml:

markdown_extensions: # (1)!
  - attr_list
  - md_in_html

  1. 请注意，下面列出的一些示例使用了图标和表情符号，必须单独配置。

    ¥Note that some of the examples listed below use icons and emojis, which have to be configured separately.

查看其他配置选项：

¥See additional configuration options:

用法

¥Usage

网格有两种形式：卡片网格，将每个元素包裹在悬停时悬浮的卡片中；通用网格，允许将任意块元素排列成矩形形状。

¥Grids come in two flavors: card grids, which wrap each element in a card that levitates on hover, and generic grids, which allow to arrange arbitrary block elements in a rectangular shape.

使用卡片网格

¥Using card grids

9.5.0

¥9.5.0

卡片网格用漂亮的悬停卡片包裹每个网格项，悬停时卡片会悬浮起来。它们有两种略有不同的语法：列表语法和块语法，分别支持不同的用例。

¥Card grids wrap each grid item with a beautiful hover card that levitates on hover. They come in two slightly different syntaxes: list and block syntax, adding support for distinct use cases.

列表语法

¥List syntax

列表语法本质上是卡片网格的快捷方式，由一个无序（或有序）列表组成，该列表由一个包含grid和cards类的div包裹：

¥The list syntax is essentially a shortcut for card grids, and consists of an unordered (or ordered) list wrapped by a div with both, the grid and cards classes:

Card grid
<div class="grid cards" markdown>

- :fontawesome-brands-html5: __HTML__ for content and structure
- :fontawesome-brands-js: __JavaScript__ for interactivity
- :fontawesome-brands-css3: __CSS__ for text running out of boxes
- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?

</div>

  • HTML用于内容和结构

    ¥HTML

  • JavaScript用于交互

    ¥JavaScript

  • 文本超出框的CSS

    ¥CSS

  • Internet Explorer ...嗯？

    ¥Internet Explorer

列表元素可以包含任意 Markdown 代码，只要其周围的div定义了markdown属性即可。以下是一个更复杂的示例，其中包含图标和链接：

¥List elements can contain arbitrary Markdown, as long as the surrounding div defines the markdown attribute. Following is a more complex example, which includes icons and links:

Card grid, complex example
<div class="grid cards" markdown>

-   :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__

    ---

    Install [`mkdocs-material`](#) with [`pip`](#) and get up
    and running in minutes

    [:octicons-arrow-right-24: Getting started](#)

-   :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__

    ---

    Focus on your content and generate a responsive and searchable static site

    [:octicons-arrow-right-24: Reference](#)

-   :material-format-font:{ .lg .middle } __Made to measure__

    ---

    Change the colors, fonts, language, icons, logo and more with a few lines

    [:octicons-arrow-right-24: Customization](#)

-   :material-scale-balance:{ .lg .middle } __Open Source, MIT__

    ---

    Material for MkDocs is licensed under MIT and available on [GitHub]

    [:octicons-arrow-right-24: License](#)

</div>

  • 5 分钟内完成设置使用pip安装mkdocs-material ，几分钟内即可启动并运行入门

  • 这只是 Markdown专注于您的内容并生成响应式和可搜索的静态网站参考

  • 量身定制只需几行即可更改颜色、字体、语言、图标、徽标等定制

  • 开源的 MIT Material for MkDocs 已获得 MIT 许可，并可在GitHub许可下使用

如果空间不足以并排渲染网格项，这些项将拉伸至视口的整个宽度，例如在移动端视口上。如果有更多可用空间，网格将以 3 个或更多项的形式渲染，例如在隐藏两个侧边栏时。

¥ Set up in 5 minutes

块语法

¥Block syntax

块语法允许将卡片与其他元素一起排列在网格中，如通用网格部分所述。只需将card类添加到grid内的任何块元素即可：

¥Install mkdocs-material with pip and get up and running in minutes

Card grid, blocks
<div class="grid" markdown>

:fontawesome-brands-html5: __HTML__ for content and structure
{ .card }

:fontawesome-brands-js: __JavaScript__ for interactivity
{ .card }

:fontawesome-brands-css3: __CSS__ for text running out of boxes
{ .card }

> :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?

</div>

HTML用于内容和结构

¥ Getting started

JavaScript用于交互

¥ It's just Markdown

文本超出框的CSS

¥Focus on your content and generate a responsive and searchable static site

Internet Explorer ...嗯？

¥

Internet Explorer ... huh?

虽然这种语法乍一看似乎有些冗长，但前面的示例展示了如何将卡片网格与其他也将延伸到网格的元素混合。

¥ Reference

使用通用网格

¥Using generic grids

9.5.0

¥ Made to measure

通用网格允许在网格中排列任意块元素，包括警告、代码块、内容选项卡等。只需使用带有grid类的div包裹一组块即可：

¥Change the colors, fonts, language, icons, logo and more with a few lines

Generic grid
<div class="grid" markdown>

=== "Unordered list"

    * Sed sagittis eleifend rutrum
    * Donec vitae suscipit est
    * Nulla tempor lobortis orci

=== "Ordered list"

    1. Sed sagittis eleifend rutrum
    2. Donec vitae suscipit est
    3. Nulla tempor lobortis orci

``` title="Content tabs"
=== "Unordered list"

    * Sed sagittis eleifend rutrum
    * Donec vitae suscipit est
    * Nulla tempor lobortis orci

=== "Ordered list"

    1. Sed sagittis eleifend rutrum
    2. Donec vitae suscipit est
    3. Nulla tempor lobortis orci
```

</div>

  • 箭叶松

    ¥Sed sagittis eleifend rutrum

  • 生命终结者

    ¥Donec vitae suscipit est

  • 颞叶无疣

    ¥Nulla tempor lobortis orci

  1. 箭叶松

    ¥Sed sagittis eleifend rutrum

  2. 生命终结者

    ¥Donec vitae suscipit est

  3. 颞叶无疣

    ¥Nulla tempor lobortis orci

Content tabs
=== "Unordered list"

    * Sed sagittis eleifend rutrum
    * Donec vitae suscipit est
    * Nulla tempor lobortis orci

=== "Ordered list"

    1. Sed sagittis eleifend rutrum
    2. Donec vitae suscipit est
    3. Nulla tempor lobortis orci