Skip to content

网格

Material for MkDocs 使得将部分内容排列成网格变得简单，能够将传达相似含义或具有相等重要性的块进行分组。网格非常适合构建索引页面，以展示文档大型部分的简要概述。

配置

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

markdown_extensions: # (1)!
  - attr_list
  - md_in_html
  1. 请注意，下面列出的一些示例使用了 icons and emojis，这些需要 单独配置。

查看其他配置选项：

使用

网格有两种类型：卡片网格，它将每个元素包裹在一个悬浮的卡片中，以及 通用网格，它允许将任意块元素排列成矩形形状。

使用卡片网格

9.5.0

卡片网格将每个网格项包裹在一个美观的悬浮卡片中。它们有两种略微不同的语法：列表和 块语法，为不同的用例提供支持。

列表语法

列表语法本质上是 卡片网格 的快捷方式，由一个无序（或有序）列表包裹在一个同时具有 grid 和 cards 类的 div 中：

卡片网格
<div class="grid cards" markdown>

- :fontawesome-brands-html5: __HTML__ 用于内容和结构
- :fontawesome-brands-js: __JavaScript__ 用于交互
- :fontawesome-brands-css3: __CSS__ 用于文本溢出
- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... 嗯？

</div>
  • HTML 用于内容和结构
  • JavaScript 用于交互
  • CSS 用于文本溢出
  • Internet Explorer ... 嗯？

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

卡片网格，复杂示例
<div class="grid cards" markdown>

-   :material-clock-fast:{ .lg .middle } __5分钟内设置__

    ---

    使用 [`mkdocs-material`](#) 和 [`pip`](#) 安装并在几分钟内启动

    [:octicons-arrow-right-24: 开始](#)

-   :fontawesome-brands-markdown:{ .lg .middle } __这只是Markdown__

    ---

    专注于您的内容，生成一个响应式和可搜索的静态网站

    [:octicons-arrow-right-24: 参考](#)

-   :material-format-font:{ .lg .middle } __量身定制__

    ---

    通过几行代码更改颜色、字体、语言、图标、徽标等

    [:octicons-arrow-right-24: 自定义](#)

-   :material-scale-balance:{ .lg .middle } __开源，MIT__

    ---

    Material for MkDocs 采用MIT许可，并可在 [GitHub] 上获取

    [:octicons-arrow-right-24: 许可证](#)

</div>

  • 5分钟内设置

    使用 mkdocs-material 和 pip 安装并在几分钟内启动

    [ 开始][getting started]

  • 这只是Markdown

    专注于您的内容，生成一个响应式和可搜索的静态网站

    [ 参考][reference]

  • 量身定制

    通过几行代码更改颜色、字体、语言、图标、徽标等

    [ 自定义][customization]

  • 开源，MIT

    Material for MkDocs 采用MIT许可，并可在 GitHub 上获取

    [ 许可证][license]

如果没有足够的空间并排渲染网格项，项将拉伸到视口的全宽，例如在移动视口上。如果有更多可用空间，网格将以3个及以上的项渲染，例如在 隐藏两个侧边栏 的情况下。

块语法

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

卡片网格，块
<div class="grid" markdown>

:fontawesome-brands-html5: __HTML__ 用于内容和结构
{ .card }

:fontawesome-brands-js: __JavaScript__ 用于交互
{ .card }

:fontawesome-brands-css3: __CSS__ 用于文本溢出
{ .card }

> :fontawesome-brands-internet-explorer: __Internet Explorer__ ... 嗯？

</div>

HTML 用于内容和结构

JavaScript 用于交互

CSS 用于文本溢出

Internet Explorer ... 嗯？

虽然这种语法在开始时可能显得冗长，但前面的示例展示了卡片网格如何与其他元素混合，这些元素也会拉伸到网格中。

使用通用网格

9.5.0

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

通用网格
<div class="grid" markdown>

=== "无序列表"

    * 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

``` title="内容标签"
=== "无序列表"

    * 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
```

</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
内容标签
=== "无序列表"

    * 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