MDX 卡片组件测试

这篇文章用于测试 MDX 高级卡片组件的不同模式。它不会验证业务内容，只验证组件在文章排版中的显示、降级和交互表现。

LinkCard

自动获取网站信息

只传 url，组件会在构建时尝试获取标题、描述和 favicon。请求失败时会降级到域名和 /favicon.ico。

Astro Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between. astro.build MDN Web Docs MDN Web Docs 网站提供有关开放 Web 技术的信息，包括 HTML、CSS 以及适用于网站和渐进式 Web 应用的 API。 developer.mozilla.org

覆盖标题、描述和图标

自动获取仍然开启，但传入的字段会覆盖抓取结果。

Astro 官方网站 用于构建内容驱动网站的 Web 框架。 astro.build

禁用自动获取

auto={false} 时不会抓取远程页面。没有提供 icon 时，卡片会使用无图标布局。

手动配置的链接 这个卡片不会自动获取 favicon、标题或描述。 example.com

显式隐藏图标

即使自动获取到了 favicon，也可以用 icon={false} 强制隐藏图标。

GitHub 无图标链接 测试 icon=false 时的布局。 github.com

LinkCardLive

Live 版本会先渲染静态兜底内容，再在浏览器中请求站内 API 刷新数据。

astro.build astro.build MDN Web 文档 developer.mozilla.org 禁用实时抓取 这个 Live 卡片也可以完全手动配置。 example.com

GitHubRepoCard

自动获取仓库信息

只传 repo，组件会在构建时通过 GitHub API 获取描述、语言、stars、forks、topics 和头像。构建环境可选配置 GITHUB_TOKEN 来提高 API 限额。

withastro/astro The web framework for content-driven websites. ⭐️ Star to support our work! TypeScript 60.4K 3.6K Updated 2026/6/22 astroblogbrowsercomponentshybrid vitejs/vite Next generation frontend tooling. It's fast! TypeScript 81.6K 8.3K Updated 2026/6/22 build-tooldev-serverfrontendhmrvite

覆盖展示内容

仓库数据仍然会获取，但标题、描述和图标可以被手动覆盖。

TypeScript JavaScript with syntax for types.XX TypeScript 109.4K 13.4K Updated 2026/6/23 javascriptlanguagetypecheckertypescript

禁用自动获取

auto={false} 时不会请求 GitHub API，适合只想展示一个稳定链接的场景。

React 仓库 手动展示仓库卡片，不读取 GitHub 实时数据。

GitHubRepoCardLive

Live 版本适合希望访问时刷新仓库数据的场景。它会调用站内 /api/github-repo.json，服务端再访问 GitHub API。

withastro/astro Vite 实时仓库卡片 禁用实时刷新的仓库卡片 这个卡片只保留手动配置的展示内容。

混排检查

普通段落、列表和卡片混排时，间距应该保持稳定。

• 卡片上方和下方应有一致的文章节奏。
• 无图标卡片不应留下空白占位。
• 长标题、长描述和多个 topics 不应撑破文章容器。

Astro Content Collections 文档 这是一段较长的描述，用来测试卡片摘要两行截断效果，以及在移动端窄屏布局下是否仍然保持稳定。但是宽度不太够，所以我要写一些测试文本： 继续添加一些文本来确保描述足够长，以触发截断效果。最后，这段描述应该在两行内结束，并显示省略号。 docs.astro.build

测试完成后，可以从文章列表进入这篇文章，检查桌面端 TOC、移动端目录抽屉、卡片 hover 状态和 Live 卡片刷新结果。