结构排版
结构排版指令
用于组织文章版面，实现多列布局、切换面板、折叠内容等效果。
网格（grid）
将内容分为多列展示，适合并排呈现关联信息。
快速开始
npm create astro@latest核心概念
- 群岛架构
- 内容集合
- 视图过渡
部署指南
- 构建项目：
npm run build - 选择平台：Vercel / Netlify
- 一键部署
:::grid{cols="3" gap="12"}
**快速开始**
```bash
npm create astro@latest
```
---
**核心概念**
- 群岛架构
- 内容集合
- 视图过渡
---
**部署指南**
1. 构建项目：`npm run build`
2. 选择平台：Vercel / Netlify
3. 一键部署
:::cols列数，可选2|3|4，不传则按最小宽度自动换行gap格子间距，单位 pxminw自动列数时的最小列宽，默认240pxbg格子背景样式：card（默认） |box|none- 用
---分隔每个格子
标签页（tabs）
将内容组织为可切换的标签页，节省纵向空间。
:::tabs
tab: 安装
使用你喜欢的包管理器安装依赖：
```bash
npm install remark-directive
```
tab: 配置{color=blue}
在 `astro.config.mjs` 中引入插件：
```js
import remarkDirective from 'remark-directive';
export default defineConfig({
markdown: {
remarkPlugins: [remarkDirective]
}
});
```
tab: 使用
直接在 Markdown 中书写指令语法即可生效，无需额外导入。
:::tab: 标签名后需要空一行，再写内容tab: 标签名{color=blue}可给标签设置颜色
折叠面板（folding）
可展开/收起的内容块，适合放置补充说明或长代码。
查看完整配置
// astro.config.mjs
import { defineConfig } from 'astro/config';
import remarkDirective from 'remark-directive';
export default defineConfig({
markdown: {
remarkPlugins: [remarkDirective]
}
});默认展开的折叠块
通过 open="true" 让折叠块默认展开。适合放置重要但较长的内容。
:::folding{title="查看完整配置"}
```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import remarkDirective from 'remark-directive';
export default defineConfig({
markdown: {
remarkPlugins: [remarkDirective]
}
});
```
:::
:::folding{title="默认展开的折叠块" open="true"}
通过 `open="true"` 让折叠块默认展开。适合放置重要但较长的内容。
:::title折叠按钮上的文字open="true"默认展开color自定义颜色
时间线（timeline）
按时间顺序展示事件，适合记录项目历程或成长轨迹。
项目启动
确定技术栈为 Astro + Tailwind CSS
初版完成
基础博客功能上线，支持文章发布
主题迭代
添加暗色模式、搜索、评论等功能
开源发布
正式开源到 GitHub，社区开始贡献
内容指令
新增丰富的 Markdown 内容指令系统
:::timeline
- 2024-01 | 项目启动 | 确定技术栈为 Astro + Tailwind CSS
- 2024-03 | 初版完成 | 基础博客功能上线，支持文章发布
- 2024-06 | 主题迭代 | 添加暗色模式、搜索、评论等功能
- 2024-12 | 开源发布 | 正式开源到 GitHub，社区开始贡献
- 2025-04 | 内容指令 | 新增丰富的 Markdown 内容指令系统
:::- 每条时间线以
-开头，用|分隔日期、标题、描述 - 描述为可选
横幅（banner）
在文章中插入大图横幅，适合作为章节分隔或视觉焦点。
:::banner{title="山川湖海" subtitle="记录每一次出发与抵达" bg="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80"}
:::title（必填）：主标题subtitle：副标题bg：背景图片地址avatar：头像图片地址link：点击跳转链接
标题装饰（title）
美化标题，支持多种装饰样式。
读万卷书，行万里路
这是一个带下划线的标题
荧光笔标记风格的标题
:::title{type="quote"}
读万卷书，行万里路
:::
:::title{type="underline"}
这是一个带下划线的标题
:::
:::title{type="marker"}
荧光笔标记风格的标题
:::type可选值：quote（引号装饰）、underline（下划线）、marker（荧光笔）等
诗词排版（poetry）
传统中文诗词的居中排版，支持标题、作者、朝代等信息。
静夜思
床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。
登鹳雀楼
白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。
:::poetry{title="静夜思" author="李白" date="唐"}
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
:::
:::poetry{title="登鹳雀楼" author="王之涣" date="唐" footer="五言绝句"}
白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。
:::title诗歌标题author作者date日期/朝代footer底部注释
信纸（paper）
信纸样式的内容区域，适合展示书信、古文等正式文本。
与朱元思书
风烟俱净，天山共色。从流飘荡，任意东西。
自富阳至桐庐一百许里，奇山异水，天下独绝。
山之奇
夹岸高山，皆生寒树，负势竞上，互相轩邈，争高直指，千百成峰。
鸢飞戾天者，望峰息心；经纶世务者，窥谷忘反。
:::paper{title="与朱元思书" author="吴均" date="南朝梁" footer="节选"}
风烟俱净，天山共色。从流飘荡，任意东西。
<!-- paragraph -->
自富阳至桐庐一百许里，奇山异水，天下独绝。
<!-- section 山之奇 -->
夹岸高山，皆生寒树，负势竞上，互相轩邈，争高直指，千百成峰。
<!-- line right -->
鸢飞戾天者，望峰息心；经纶世务者，窥谷忘反。
:::title：纸张标题（居中）author/date/footer：作者、日期、底部文字- 内容分区：
<!-- paragraph -->：普通段落（首行缩进）<!-- section 标题 -->：带居中标题的章节<!-- line right -->：右对齐行
卷轴（reel）
竖排文字布局，模拟传统卷轴的阅读体验。
兰亭集序
永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。
群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右。
引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。
东晋
:::reel{title="兰亭集序" author="王羲之" date="东晋" footer="天下第一行书"}
永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。
群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右。
引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。
:::title：卷轴标题author：作者信息date：日期/朝代footer：底部文字- 文字从右向左竖排显示