Level-two heading【免费下载链接】astroThe web framework for content-driven websites. ⭐️ Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/as/astro正文从 ## 开始不写 #因为页面级 h1 已由 Hero 组件根据 title 字段生成正文标题从 h2 起步可以避免语义上的一级标题重复。 ### 3.2 引用块Blockquote markdown Tell me and I forget. Teach me and I remember. Involve me and I learn.在 详情页的 scoped 样式 中blockquote被定制为品牌化呈现更大的字号--text-lg、品牌字体--font-brand、600 字重、左侧 0.25rem 的强调色竖线border-inline-start在 ≥50em 的宽屏下进一步放大到--text-2xl。这是 Astro 组件内style标签 :global()选择器作用于 Markdown 生成 HTML 的典型例子。3.3 正文段落与内联 HTML 链接正文段落中直接混入了一个内联 HTML 锚点Lorem ipsum dolor sit amet, a href…Astro/a makes people happy. …这演示了 Markdown 允许内嵌原始 HTML 的能力。Astro 的 Markdown 管线会把该锚点原样保留进输出 HTML因此它会自动继承详情页中.content :global(a)的样式——半透明下划线text-decoration: 1px solid underline transparenthover/focus 时text-decoration-color过渡为currentColor。3.4 三级与四级标题### Level-three heading 两个三级标题分别引导两段不同长度的 Lorem ipsum 正文 #### Level-four heading详情页样式对h1–h5统一设置了margin: 1.5rem 0并对内容区做了max-width: 65ch的正文宽度约束.content { max-width: 65ch; margin-inline: auto; }保证长段落的可读性。3.5 无序列表文件以两个列表项收尾- We noted this - And also this other point这对应本案例“介绍 Markdown 格式”的定位——像侦探游戏一样引导读者识别各个语法元素。此外还有一个值得注意的整体排版细节详情页样式里.content :global(* *) { margin-top: 1rem; }为正文中相邻兄弟元素统一了 1rem 的垂直间距因此正文中各元素无需手动空行调距层级结构完全交给 CSS。4. 集合加载glob 加载器如何“捡到”这个文件content.config.ts 定义了work集合的加载方式import { defineCollection } from astro:content; import { glob } from astro/loaders; import { z } from astro/zod; export const collections { work: defineCollection({ // Load Markdown files in the src/content/work directory. loader: glob({ base: ./src/content/work, pattern: **/*.md }), schema: z.object({ title: z.string(), description: z.string(), publishDate: z.coerce.date(), tags: z.array(z.string()), img: z.string(), img_alt: z.string().optional(), }), }), };三个关键点都能从markdown-mystery-tour.md的实际情况得到印证base: ./src/content/work以该目录为基准扫描markdown-mystery-tour.md的直接文件名即其idmarkdown-mystery-tourpattern: **/*.md递归匹配所有子目录。这解释了为什么 nested/duvet-genius.md 也能被加载——从 glob 模式推断子目录中的文件会以带目录的id如nested/duvet-genius进入集合Zod Schema 校验第 2 节表格中的六个字段在构建时逐一校验publishDate经z.coerce.date()转为真正的Date供后续排序使用。5. 路由与渲染从 Markdown 文件到详情页work/[...slug].astro 是该文件的最终消费者核心逻辑只有三步export async function getStaticPaths() { const work await getCollection(work); return work.map((entry) ({ params: { slug: entry.id }, props: { entry }, })); } const { entry } Astro.props; const { Content } await render(entry);getStaticPaths遍历work集合每个条目的id直接作为[...slug]参数。由于是 rest 路由[...slug]嵌套id如nested/duvet-genius可以推断地映射为/work/nested/duvet-genius这样的多级路径render(entry)把该 Markdown 条目编译为可渲染的Content组件正文 HTML 在模板中以Content /注入.content容器内外层套.stack gap-10布局Frontmatter 字段的消费点entry.data.title传给Hero与BaseLayout的title/descriptionentry.data.tags渲染为 Pill 标签组entry.data.description渲染为说明段落entry.data.img与img_alt渲染为头图img并带圆角、阴影与渐变背景.content :global(img)样式。也就是说markdown-mystery-tour.md一个文件同时提供了“页面元数据Frontmatter 页面主体正文 Markdown”而页面外壳导航、布局、CTA全部由 Astro 组件承担——这正是内容驱动站点的标准分工。6. 列表页如何消费同一份数据work.astro 展示同一集合的另一面用法const projects (await getCollection(work)).sort( (a, b) b.data.publishDate.valueOf() - a.data.publishDate.valueOf(), );【免费下载链接】astroThe web framework for content-driven websites. ⭐️ Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/as/astro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考