perf(theme): optimize `<LinkCard /> ui

docs/notes/theme/guide/组件/卡片.md

@@ -55,3 +55,8 @@ permalink: /guide/components/cark/
   </template>
   这里是卡片内容。
 </Card>
+
+:::info
+在插槽内也可以使用 markdown 语法，但需要注意的是，markdown 语法需要与 标签之间间隔一行。
+否则将被识别为普通文本。
+:::

docs/notes/theme/guide/组件/链接卡片.md

@@ -39,3 +39,48 @@ permalink: /guide/components/link-card/
 
 <LinkCard title="卡片标题" href="/" description="这里是卡片内容" />
 <LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />
+
+使用组件插槽，可以实现更丰富的表现。
+
+**输入：**
+
+```md :no-line-numbers
+<LinkCard title="卡片标题" href="/">
+
+  - 这里是卡片内容
+  - 这里是卡片内容
+
+</LinkCard>
+
+<LinkCard href="/">
+  <template #title>
+    <span style="color: red" >卡片标题</span>
+  </template>
+
+  - 这里是卡片内容
+  - 这里是卡片内容
+
+</LinkCard>
+```
+
+**输出：**
+<LinkCard title="卡片标题" href="/">
+
+- 这里是卡片内容
+- 这里是卡片内容
+
+</LinkCard>
+
+<LinkCard href="/">
+  <template #title>
+    <span style="color: red" >卡片标题</span>
+  </template>
+
+- 这里是卡片内容
+- 这里是卡片内容
+</LinkCard>
+
+:::info
+在插槽内也可以使用 markdown 语法，但需要注意的是，markdown 语法需要与 标签之间间隔一行。
+否则将被识别为普通文本。
+:::

theme/src/client/components/global/VPLinkCard.vue

@@ -52,11 +52,12 @@ defineProps<{
   display: flex;
   flex: 1;
   flex-direction: column;
+  gap: 16px;
   align-items: flex-start;
 }
 
-.vp-link-card .body > :last-child {
-  margin-bottom: 0;
+.vp-link-card .body > * {
+  margin: 0;
 }
 
 .vp-link-card .link {