Grid

15 分钟阅读 • 516 字 + 2036 词
PageForge 支持网格布局语法。

注意

该功能需要在配置文件中启用，可以在 pageforge.yaml 中配置 feature.grid.enable: true
基本语法
  • 源代码
markdown
::: grid
- 第一个网格项
- 第二个网格项
- 第三个网格项
- 第四个网格项
:::
  • 显示效果
第一个网格项
第二个网格项
第三个网格项
第四个网格项
设置列数
  • 源代码
markdown
::: grid cols-3
- 第一列内容
- 第二列内容
- 第三列内容
- 第四列内容（自动换行）
- 第五列内容
- 第六列内容
:::
  • 显示效果
第一列内容
第二列内容
第三列内容
第四列内容（自动换行）
第五列内容
第六列内容
设置间距
  • 源代码
markdown
::: grid cols-2 gap-8
- 这是第一个网格项
  可以包含多行内容
- 这是第二个网格项
  间距设置为 8 (2rem)
- 这是第三个网格项
- 这是第四个网格项
:::
  • 显示效果
这是第一个网格项 可以包含多行内容
这是第二个网格项 间距设置为 8 (2rem)
这是第三个网格项
这是第四个网格项
禁用响应式
默认情况下，网格布局是响应式的：
  • 移动设备：1列
  • 平板设备：最多2列
  • 桌面设备：完整列数
使用 no-responsive 可以禁用响应式布局：
markdown
::: grid cols-4 no-responsive
- 第一列
- 第二列
- 第三列
- 第四列
:::
完整选项
网格布局支持以下选项：
  1. cols-{number} : 设置列数（默认：2）
    • 例如： cols-3 、 cols-4 、 cols-6
  2. gap-{number} : 设置网格间距（默认：4）
    • 例如： gap-4 、 gap-6 、 gap-8
  3. no-responsive : 禁用响应式布局
    • 默认启用响应式
可以组合使用这些选项：
markdown
::: grid cols-3 gap-6 no-responsive
- 内容1
- 内容2
- 内容3
:::
实际应用示例
创建特色卡片布局：
markdown
::: grid cols-3 gap-6
- ### 🚀 快速上手
  零配置，开箱即用，
  支持 Markdown 所有基础语法。

- ### 📦 功能丰富
  内置大量扩展组件，
  支持自定义扩展。

- ### 🎨 主题系统
  提供多套主题，
  支持自定义主题。
:::
🚀 快速上手
零配置，开箱即用， 支持 Markdown 所有基础语法。
📦 功能丰富
内置大量扩展组件， 支持自定义扩展。
🎨 主题系统
提供多套主题， 支持自定义主题。
java
console.log(1)
提交于 2025年2月7日 08:27
修改于 2025年2月7日 08:37
首次提交 (90957500)
末次提交 (b12bf5c5)
贡献者
qianmoQ
qianmoQ
2 次提交

目录