本站已实现MDX组件

本文作为主题内置 MDX 组件的快速参考，展示每种组件的可用参数组合和实际效果。

Admonition — 提示块

带图标和颜色区间的可折叠提示框。支持 12 种类型，title 可选，open 控制默认展开状态。

源码：

import Admonition from '@fund/astro-theme-fund/components/mdx/Admonition.astro'

<Admonition type="note" title="默认展开（可折叠）" open={true}>
  这是 `type="note"`，是最中性的提示样式。`open={true}` 表示正文默认可见。
</Admonition>

<Admonition type="tip" title="小提示" open={false}>
  这是 `type="tip"`，`open={false}` 表示默认折叠，点击标题展开。
</Admonition>

<Admonition type="warning">
  `title` 省略时会根据 `type` 自动生成。
</Admonition>

支持的 type： note · abstract · info · tip · success · question · warning · failure · danger · bug · example · quote

Badge — 徽标

小尺寸彩色标签，支持 16 种色板（palette）、4 种样式（variant）、3 种尺寸（size），可选 17 种图标。

源码：

import Badge from '@fund/astro-theme-fund/components/mdx/Badge.astro'

<Badge label="默认" />
<Badge label="实心" variant="solid" palette="ocean" />
<Badge label="描边" variant="outline" palette="rose" />
<Badge label="柔和" variant="soft" palette="mint" />
<Badge label="小号" size="sm" palette="amber" icon="star" />
<Badge label="大号" size="lg" palette="cocoa" icon="bolt" />

palette 选项（16种）： mist · cloud · ocean · lagoon · mint · jade · lime · sunbeam · amber · coral · rose · ruby · plum · cocoa · slate · nightfall

variant 选项： frosted (默认) · soft · solid · outline

size 选项： sm · md (默认) · lg

icon 选项（17种）： spark · star · bolt · sun · moon · flame · leaf · wave · drop · shield · check · pen · book · tag · folder · gear

ImageCard — 图片展示卡

带圆角和可选说明文字的图片容器，默认按原图比例展示；也可显式指定宽高比和裁切方式。指定比例时推荐使用默认的 cover 填充，避免原图比例差距较大时出现明显留白；需要完整显示图片时再显式设置 fit="contain"。

源码：

import ImageCard from '@fund/astro-theme-fund/components/mdx/ImageCard.astro'

<ImageCard
  src="https://zanks1996-1256221076.cos.ap-shanghai.myqcloud.com/images/posts/zanks/travel-nz-1-zanks/cover.webp"
  alt="新西兰旅行途中拍摄的海岸线照片"
  caption="NZ 南岛海岸线，宽高比 4:3，cover 裁切"
  ratio="4 / 3"
/>

<ImageCard
  src="https://zanks1996-1256221076.cos.ap-shanghai.myqcloud.com/images/posts/zanks/homelab-jellyfin-tvshow-zanks/%E6%B5%B7%E6%8A%A5%E5%A2%99.webp"
  alt="Jellyfin 电视剧海报墙截图"
  caption="Jellyfin 海报墙，宽高比 16:9，cover 模式，靠上裁切"
  ratio="16 / 9"
  fit="cover"
  position="center top"
  theme="moss"
/>

参数： src（必填） · alt · caption · ratio（不传时按原图比例展示；传入后固定画框比例，如 4 / 3） · fit（cover / contain，默认 cover） · position（默认 center，如 center top 可调整裁切焦点） · theme（8 种卡片主题）

LinkCard — 链接卡片

外部链接预览卡片，自动获取 favicon，支持自定义图标。

Astro 官方文档构建快速、内容驱动的网站

本站 GitHub喂养基金会 · 在 AI 时代坚持手搓的老手艺人工坊

源码：

import LinkCard from '@fund/astro-theme-fund/components/mdx/LinkCard.astro'

<LinkCard
  title="Astro 官方文档"
  description="构建快速、内容驱动的网站"
  href="https://astro.build"
  domain="astro.build"
/>

<LinkCard
  title="本站 GitHub"
  description="喂养基金会 · 在 AI 时代坚持手搓的老手艺人工坊"
  href="https://github.com/ZaNksC"
  domain="github.com"
/>

参数： title（必填） · description（必填） · href（可选，不传则只展示不跳转） · icon（可选图标 URL） · domain（可选，覆写 favicon 域名） · theme

DeviceCard — 设备卡片

展示设备信息，自动计算使用时长，支持 endDate 标注已退役。

服役时间 1 年 3 个月

价格 4000

配置 M4 256G 万兆

MacMini M4

日用、敲代码的主力机

服役时间 5 年 11 个月

价格 5100

配置 11寸 128G

iPad Pro 2020

很难评价，没有的人想拥有，有的人想不起拥有，已经变成小猫电视和铲铲启动器

源码：

import CardGrid from '@fund/astro-theme-fund/components/mdx/CardGrid.astro'
import DeviceCard from '@fund/astro-theme-fund/components/mdx/DeviceCard.astro'

<CardGrid columns={2}>
<DeviceCard
  name="MacMini M4"
  img="https://zanks1996-1256221076.cos.ap-shanghai.myqcloud.com/images/about/zanks/macmini-m4.png"
  beginDate="2025-03-16"
  price="4000"
  spec="M4 256G 万兆"
  review="日用、敲代码的主力机"
  theme="steel-silver"
/>
<DeviceCard
  name="iPad Pro 2020"
  img="https://zanks1996-1256221076.cos.ap-shanghai.myqcloud.com/images/about/zanks/ipadpro-2020.webp"
  beginDate="2020-07-30"
  price="5100"
  spec="11寸 128G"
  review="很难评价，没有的人想拥有，有的人想不起拥有，已经变成小猫电视和铲铲启动器"
  theme="clay"
/>
</CardGrid>

参数： name（必填） · img · beginDate（必填） · endDate（可选，设置后显示退役标记） · price（必填） · spec（必填） · review（必填，最多 3 行） · theme

theme 选项（8种）： paper-ink · mist-sea · steel-silver · champagne · graphite · moss · clay · violet

CatFoodCard — 猫粮/罐头卡片

展示猫食品信息，带评分、价格和评价正文。

来自 美国

规格 80g

评分 13

【黑夜传说】鸡肉鹌鹑蛋

鸡肉鹌鹑蛋

爸爸有点笨，说他找不到鹌鹑蛋，明明就在肉里面。这个罐头是本喵江山中最闪耀的星。

来自 美国

规格 37.5g x 2

评分 7

美式一分二餐盒

鸡肉和鸡肝 135/12盒

从小吃到大的性价比餐盒，自从妈妈给买了其他的之后，就不怎么吃它了。虽然一般，但确实童年回忆了！

源码：

import CardGrid from '@fund/astro-theme-fund/components/mdx/CardGrid.astro'
import CatFoodCard from '@fund/astro-theme-fund/components/mdx/CatFoodCard.astro'

<CardGrid columns={2}>
<CatFoodCard
  title="【黑夜传说】鸡肉鹌鹑蛋"
  img="https://zanks1996-1256221076.cos.ap-shanghai.myqcloud.com/images/about/hjj/midnight-legend-can-chicken-quail.webp"
  from="美国"
  size="80g"
  edition="鸡肉鹌鹑蛋"
  rating="13"
  theme="paper-ink"
>
  爸爸有点笨，说他找不到鹌鹑蛋，明明就在肉里面。这个罐头是本喵江山中最闪耀的星。
</CatFoodCard>
<CatFoodCard
  title="美式一分二餐盒"
  img="https://zanks1996-1256221076.cos.ap-shanghai.myqcloud.com/images/about/hjj/20260514022459-meishi-yifener.webp"
  from="美国"
  size="37.5g x 2"
  edition="鸡肉和鸡肝"
  rating="7"
  price="135/12盒"
  theme="mint"
>
  从小吃到大的性价比餐盒，自从妈妈给买了其他的之后，就不怎么吃它了。虽然一般，但确实童年回忆了！
</CatFoodCard>
</CardGrid>

参数： title（必填） · from（必填，产地） · size（必填，规格） · edition（必填，口味） · rating（必填，评分） · img · series（系列名） · price · theme

CardGrid — 卡片网格容器

包裹上述卡片组件，支持自定义列数和间距。上面的 DeviceCard 和 CatFoodCard 示例已使用 <CardGrid columns={2}>。

源码：

import CardGrid from '@fund/astro-theme-fund/components/mdx/CardGrid.astro'
import LinkCard from '@fund/astro-theme-fund/components/mdx/LinkCard.astro'

<CardGrid columns={2}>
<LinkCard
  title="Astro 官方文档"
  description="构建快速、内容驱动的网站"
  href="https://astro.build"
  domain="astro.build"
/>
<LinkCard
  title="本站 GitHub"
  description="喂养基金会 · 在 AI 时代坚持手搓的老手艺人工坊"
  href="https://github.com/ZaNksC"
  domain="github.com"
/>
</CardGrid>

参数： columns（默认 2） · gap（默认 1.25rem）

组合使用示例

以下是一个综合示例，展示多种组件协同使用：

MacMini M4 开箱我的新一代日用主力机

源码：

import Admonition from '@fund/astro-theme-fund/components/mdx/Admonition.astro'
import CardGrid from '@fund/astro-theme-fund/components/mdx/CardGrid.astro'
import ImageCard from '@fund/astro-theme-fund/components/mdx/ImageCard.astro'
import LinkCard from '@fund/astro-theme-fund/components/mdx/LinkCard.astro'

<Admonition type="success" title="总结">
  所有组件通过 `import ... from '@fund/astro-theme-fund/components/mdx/...'` 引入，在 MDX 文件中直接使用即可。各组件均支持 `theme` 属性来切换 8 种卡片主题色。
</Admonition>

<CardGrid columns={2}>
<LinkCard
  title="MacMini M4 开箱"
  description="我的新一代日用主力机"
  href="https://zanks.link/posts/zanks/unboxing/macmini-m4"
  domain="zanks.link"
/>
<ImageCard
  src="https://zanks1996-1256221076.cos.ap-shanghai.myqcloud.com/images/posts/zanks/unboxing-macmini-m4-zanks/IMG-20250520102320469.webp"
  alt="MacMini M4 开箱照片"
  caption="MacMini M4 · 日用、敲代码的主力机"
  ratio="16 / 9"
/>
</CardGrid>