Astro博客添加友链：从0到1全流程#

1
---
2
import { getEntry, render } from "astro:content";
3
import Markdown from "@components/misc/Markdown.astro";
4
import I18nKey from "../i18n/i18nKey";
5
import { i18n } from "../i18n/translation";
6
import MainGridLayout from "../layouts/MainGridLayout.astro";
7

8
// 从 content/spec/friends.md 读取友链数据
9
const friendEntry = await getEntry("spec", "friends");
10

11
// 错误处理
12
if (!friendEntry) {
13
  throw new Error("Friends content not found");
14
}
15

16
// 解析 MD 内容与数据
17
const { Content } = await render(friendEntry);
18
const { friends = [], myInfo } = friendEntry.data;
19
---
20

21
<MainGridLayout title={i18n(I18nKey.friends)}>
22
  <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
23
    <div class="card-base z-10 px-9 py-6 relative w-full">
24

25
      <div class="mb-6 text-90">
26
        <Markdown>
27
          <Content />
28
        </Markdown>
29
      </div>
30

31
      {myInfo && (
32
        <div class="bg-[var(--btn-plain-bg-hover)] p-5 rounded-xl border-l-4 border-[var(--primary)] mb-10">
33
          <p class="font-bold mb-2 text-90 flex items-center">
34
            <span class="w-2 h-2 rounded-full bg-[var(--primary)] mr-2"></span>
35
            本站信息
36
          </p>
37
          <ul class="space-y-1 text-75 text-sm ">
38
            <li>名称：{myInfo.name}</li>
39
            <li>介绍：{myInfo.introduction}</li>
40
            <li>链接：<code class="bg-black/5 dark:bg-white/10 px-1 rounded">{myInfo.link}</code></li>
41
            <li>头像：<code class="bg-black/5 dark:bg-white/10 px-1 rounded text-xs">{myInfo.avatar}</code></li>
42
          </ul>
43
        </div>
44
      )}
45

46
      <div class="h-[1px] w-full bg-black/5 dark:bg-white/10 my-8"></div>
47

48
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
49
        {friends.map((friend) => (
50
          <a
51
            href={friend.link}
52
            target="_blank"
53
            rel="noopener noreferrer"
54
            class="flex items-center p-4 rounded-xl hover:bg-[var(--btn-plain-bg-hover)] transition-all group active:scale-95 border border-transparent hover:border-[var(--primary)]/20 shadow-sm"
55
          >
56
            <img
57
              src={friend.avatar}
58
              alt={friend.name}
59
              class="w-16 h-16 rounded-full border-2 border-[var(--primary)] shadow-sm mr-4 shrink-0 transition-transform group-hover:rotate-12 object-cover"
60
            />
61
            <div class="overflow-hidden">
62
              <div class="font-bold text-lg text-90 transition-all group-hover:text-[var(--primary)] truncate">
63
                {friend.name}
64
              </div>
65
              <div class="text-sm text-50 line-clamp-1 italic">
66
                {friend.introduction}
67
              </div>
68
            </div>
69
          </a>
70
        ))}
71
      </div>
72

73
    </div>
74
  </div>
75
</MainGridLayout>