为 Fuwari 添加友情链接

931 字

5 分钟

为 Fuwari 添加友情链接

2026-01-10

博客

友情链接

WARNING
基于翊羽 - Fuwari 博客添加友链页面详细教程的 AI 二次修改,非常感谢他的经验分享
具体升级可以去查看我的友情链接

一.创建友情链接配置文件#

在 src/config/ 目录下创建 friends.ts 文件:

1
import friendsData from "./friends.json";
2

3
export interface FriendLink {
4
  name: string;
5
  url: string;
6
  description: string;
7
  avatar?: string;
8
  // avatar 支持三种格式：
9
  // 1. 外部链接：以 http:// 或 https:// 开头
10
  // 2. public 目录：以 / 开头，如 /images/avatar.jpg
11
  // 3. 本地路径：相对于 src 目录，如 assets/images/avatar.jpg
12
}
13

14
export interface FriendCategory {
15
  title: string;
16
  links: FriendLink[];
17
}
18

19
// 从 JSON 文件导入友链数据
20
export const friendCategories: FriendCategory[] = friendsData;
21

22
// 保持向后兼容：导出所有友链的扁平数组
23
export const friendLinks: FriendLink[] = friendCategories.flatMap(
24
  (category) => category.links,
25
);

二.创建友情链接卡片组件#

在 src/components/misc/ 目录下创建 FriendLinkCard.astro 文件:

1
---
2
import path from "node:path";
3
import { Image } from "astro:assets";
4
import { url } from "../../utils/url-utils";
5

6
interface Props {
7
  name: string;
8
  url: string;
9
  description: string;
10
  avatar?: string;
11
}
12

13
const { name, url: linkUrl, description, avatar } = Astro.props;
14

15
// 判断头像路径类型
16
const isExternal = avatar?.startsWith("http://") || avatar?.startsWith("https://");
17
const isPublic = avatar?.startsWith("/");
18
const isLocal = avatar && !isExternal && !isPublic;
19

20
// 处理本地图片
21
let localImage;
22
if (isLocal && avatar) {
23
  const files = import.meta.glob<ImageMetadata>("../../**", {
24
    import: "default",
25
  });
26
  const normalizedPath = path
27
    .normalize(path.join("../../", avatar))
28
    .replace(/\\/g, "/");
29

30
  const file = files[normalizedPath];
31
  if (file) {
32
    localImage = await file();
33
  } else {
34
    console.error(
35
      `\n[ERROR] Friend link avatar not found: ${normalizedPath.replace("../../", "src/")}`,
36
    );
37
  }
38
}
39

40
// 获取头像 URL
41
let avatarSrc = "";
42
if (isExternal) {
43
  avatarSrc = avatar || "";
44
} else if (isPublic) {
45
  avatarSrc = url(avatar || "");
46
}
47
---
48

49
<a
50
  href={linkUrl}
51
  target="_blank"
52
  rel="noopener noreferrer"
53
  class="group flex items-center gap-4 p-6 min-h-[110px] rounded-lg bg-[var(--btn-plain-bg-hover)] hover:bg-[var(--btn-card-bg-hover)] active:bg-[var(--btn-card-bg-active)] transition-all duration-200"
54
>
55
  <div class="w-12 h-12 rounded-full bg-[var(--primary)]/20 flex items-center justify-center flex-shrink-0 relative">
56
    {avatar && isLocal && localImage ? (
57
      <Image
58
        src={localImage}
59
        alt={name}
60
        class="w-12 h-12 rounded-full object-cover absolute inset-0"
61
        loading="lazy"
62
      />
63
    ) : avatar && avatarSrc ? (
64
      <img
65
        src={avatarSrc}
66
        alt={name}
67
        class="w-12 h-12 rounded-full object-cover absolute inset-0"
68
        loading="lazy"
69
        onerror="this.style.display='none';"
70
      />
71
    ) : null}
72
    <svg
73
      xmlns="http://www.w3.org/2000/svg"
74
      class:list={[
75
        "w-6 h-6 text-[var(--primary)]",
76
        avatar && ((isLocal && localImage) || (avatarSrc && !isLocal)) ? "hidden" : "",
77
      ]}
78
      fill="none"
79
      viewBox="0 0 24 24"
80
      stroke="currentColor"
81
    >
82
      <path
83
        stroke-linecap="round"
84
        stroke-linejoin="round"
85
        stroke-width="2"
86
        d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
87
      />
88
    </svg>
89
  </div>
90
  <div class="flex-1 min-w-0">
91
    <div class="font-bold text-base text-90 group-hover:text-[var(--primary)] transition-colors mb-1 truncate">
92
      {name}
93
    </div>
94
    <div class="text-sm text-neutral-600 dark:text-neutral-400">
95
      {description}
96
    </div>
97
  </div>
98
  <svg
99
    xmlns="http://www.w3.org/2000/svg"
100
    class="w-4 h-4 text-neutral-400 group-hover:text-[var(--primary)] transition-colors flex-shrink-0"
101
    fill="none"
102
    viewBox="0 0 24 24"
103
    stroke="currentColor"
104
  >
105
    <path
106
      stroke-linecap="round"
107
      stroke-linejoin="round"
108
      stroke-width="2"
109
      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
110
    />
111
  </svg>
112
</a>

三.创建友情链接 Markdown 内容文件#

在 src/content/spec/ 目录下创建 friends.md 文件:

1
# 🌟 友链申请
2

3

4

5
## 申请方式
6
请在您的网站添加本站链接后，**Fork** 以下仓库对 `/src/friends.json` 进行修改，然后提交 Pull Requests
7

8
正常来讲，你应该修改名为 `❤️Murasame's Friends` 的 **title**
9

10
::github{repo="LeiSureLyYrsc/Lsrl-Blog-Fuwari"}
11

12
## 本站信息
13

14
{
15
    "name": "名字",
16
    "url": "链接",
17
    "description": "描述",
18
    "avatar": "头像"
19
}

四.创建友情链接页面#

在 src/pages/ 目录下创建 links.astro 文件:

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

8
const friendsPost = await getEntry("spec", "friends");
9

10
if (!friendsPost) {
11
  throw new Error("Links page content not found");
12
}
13

14
const { Content } = await render(friendsPost);
15
---
16
<MainGridLayout title="❤️友链" description="友情链接">
17
    <!-- 友链卡片区域 - 按栏目分组显示 -->
18
    {friendCategories.map((category) => (
19
        category.links.length > 0 && (
20
            <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32 mb-6">
21
                <div class="card-base z-10 px-9 py-6 relative w-full">
22
                    <div class="flex items-center gap-3 mb-6">
23
                        <h2 class="text-2xl font-bold text-[var(--primary)]">{category.title}</h2>
24
                    </div>
25
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
26
                        {category.links.map((link) => (
27
                            <FriendLinkCard
28
                                name={link.name}
29
                                url={link.url}
30
                                description={link.description}
31
                                avatar={link.avatar}
32
                            />
33
                        ))}
34
                    </div>
35
                </div>
36
            </div>
37
        )
38
    ))}
39

40
    <!-- 说明文字区域 - 放在后面 -->
41
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
42
        <div class="card-base z-10 px-9 py-6 relative w-full">
43
            <Markdown class="mt-2">
44
                <Content />
45
            </Markdown>
46
        </div>
47
    </div>
48
</MainGridLayout>

五.添加导航栏链接#

编辑 src/config.ts 文件，在 navBarConfig 中添加友链链接:

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
    LinkPreset.About,
6
    {
7
      name: "友链",
8
      url: "/friends/", // 友链页面路径
9
      external: false,
10
    },
11
    {
12
      name: "GitHub",
13
      url: "https://github.com/saicaca/fuwari",
14
      external: true,
15
    },
16
  ],
17
};

六.添加友情链接数据#

创建 src/config/friends.json 文件，添加您的友链:

1
[
2
  {
3
    "title": "❤️Friends",
4
    "links": [
5
        {
6
            "name": "名字",
7
            "url": "链接",
8
            "description": "描述",
9
            "avatar": "头像"
10
        }
11
    ]
12
  },
13
  {
14
    "title": "🤝Workmates",
15
    "links": [
16
        {
17
            "name": "名字",
18
            "url": "链接",
19
            "description": "描述",
20
            "avatar": "头像"
21
        }
22
    ]
23
  }
24
]