自定义友情链接界面#

在前面的教程中，我们学习了如何通过配置 config.ts 来增删友链内容，以及如何扩充友链的 Icon 和 Tag 标签。

但是，如果你对现有的界面外观不满意（比如想让卡片变得更宽、想要改变默认的悬浮动效，或者是增加一整块特殊的寄语栏），你就需要直接“下潜”到项目的底层组件代码中进行手术了。

本篇教程将指引你找到控制友情链接界面的那两把“核心钥匙”。

核心结构：双剑合璧#

整个友情链接的视觉界面，是由两个紧密配合的 Astro 文件构成的：

我们来分别看看它们各自负责什么，以及你应该从哪里下手修改。

这个文件是友情链接页面的“骨架”。它负责读取数据、加载主布局（包含侧边栏、背景等），并将一张张“卡片”排列成网格。

文件路径：src/pages/[...lang]/friends.astro

修改网格排版规则：默认情况下，卡片是通过 Tailwind CSS 的 Grid 网格系统排列的。你可以找到包含 <FriendCard /> 的外层 div，修改它的排版逻辑。比如默认可能是 grid-cols-1 md:grid-cols-2（手机端一列，电脑端两列），你可以将其改为 grid-cols-2 md:grid-cols-3 来让卡片变得更紧凑。
添加页首/页尾文字：如果你想在所有的友链卡片上方加一段温馨的“本站寄语”或者是“交换友链须知”，你可以直接在渲染网格的上方添加 HTML 代码或 Markdown 渲染组件。
修改整体页面的标题：文件调用 <MainGridLayout title={...}> 时传入了国际化标题，你也可以强行覆盖它。

这个文件是友情链接界面真正的“灵魂”。你在页面上看到的那一个个圆角卡片、头像框、悬浮动画、颜色过渡，全部都是在这里定义的。

文件路径：src/components/FriendCard.astro

打开这个文件后，你会发现这里充斥着密密麻麻的 Tailwind CSS 工具类。不要怕，我们可以按区域进行修改：

卡片的整体悬浮动效：在最外层的 <a ...> 或 <div> 标签中，你会看到类似 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 的类。你可以把它改为 hover:scale-105（悬浮放大）或者 hover:rotate-2（悬浮时轻微倾斜）来创造独特的交互体验。
头像的设计：找到 <img ... />（通常被包装在一个设定了宽高和 overflow-hidden 的 div 中）。你可以修改默认的 rounded-full（正圆形）为 rounded-xl（圆角矩形）；或者加上 border-4 border-[var(--primary)] 给头像加个与主题色匹配的边框。
链接按钮与图标的修改：在文件的底部，是循环渲染每个链接（如 GitHub, Blog）的部分。如果你觉得现在的按钮不够醒目，可以将默认的纯净底色改为带透明度的主题色背景，例如加上 bg-[var(--primary)]/10 text-[var(--primary)]。

备份先行：在这两个核心文件中修改 UI 时，建议在修改前先用 Git 提交一下你的稳定版本，以防把排版改崩了回不去。
遵守 Tailwind 规范：为了保证深浅模式的一致性，颜色尽量使用内置的 CSS 变量（如 text-[var(--primary)]，bg-[var(--card-bg)] 等），而不是写死纯黑色或纯白色。
保持 i18n 兼容：如果要在 FriendCard.astro 中硬编码添加任何新文字，请尽量通过 i18n() 函数来调用翻译键，以保证外语用户不会看到突兀的中文。