Fuwari：添加友情链接页面

前言#

Fuwari 是一款极其纯粹、极简的 Astro 博客主题，但是并没有内置专用的友情链接页面。本文将记录我添加一个功能完备的友链页的过程。

参考来源

AULyPc大佬的教程↗

雾创岛-友情链接样式↗

创建友链页面#

在 src/types/config.ts 文件内添加以下内容：

1
export enum LinkPreset {
2
  Home = 0,
3
  Archive = 1,
4
  About = 2,
5
  Friends = 3,
6
}

在 src/i18n/i18nKey.ts 文件内添加以下内容：

1
  home = "home",
2
  about = "about",
3
  archive = "archive",
4
  friends = "friends",
5
  search = "search",

在 src/i18n/languages 目录中编辑博客使用的语言文件，添加一个Key。这里以 zh_CN.ts 为例：

1
  [Key.author]: "作者",
2
  [Key.publishedAt]: "发布于",
3
  [Key.license]: "许可协议",
4
  [Key.friends]: "友链",

在 src/constants/link-presets.ts 文件内添加以下内容：

1
  [LinkPreset.Archive]: {
2
    name: i18n(I18nKey.archive),
3
    url: "/archive/",
4
  },
5
  [LinkPreset.Friends]: {
6
    name: i18n(I18nKey.friends),
7
    url: "/friends/",
8
  },

在 src/pages 目录下新建 friends.astro 文件，填入以下内容：

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

10
const friendsPost = await getEntry("spec", "friends");
11

12
if (!friendsPost) {
13
  throw new Error("Friends page content not found");
14
}
15

16
const { Content } = await render(friendsPost);
17
---
18
<MainGridLayout title={i18n(I18nKey.friends)} description={i18n(I18nKey.friends)}>
19
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
20
    <div class="card-base z-10 pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative w-full">
21
        <h1 class="transition w-full block font-bold mb-3 text-3xl text-90
22
            before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
23
            before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
24
        ">
25
            友情链接
26
        </h1>
27
        <Markdown class="-mt-2">
28
            <Content />
29
        </Markdown>
30
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-5">
31
            {friends.map((item) => (
32
                <div class="friend-card overflow-hidden btn-plain scale-animation active:scale-95 h-[92px]">
33
                    <a href={item.url} target="_blank" rel="noopener nofollow" class="flex items-center gap-3 p-4 w-full h-full">
34
                        <div class="w-[60px] h-[60px] rounded-lg overflow-hidden bg-[#fff]">
35
                            <ImageWrapper src={item.avatar} class="w-full h-full"></ImageWrapper>
36
                        </div>
37
                        <div class="max-w-[calc(100%-5rem)]">
38
                            <div class="font-bold text-black dark:text-white">{item.name}</div>
39
                            <div class="text-sm text-black/50 dark:text-white/50 line-clamp-2">{item.description}</div>
40
                        </div>
41
                    </a>
42
                </div>
43
            ))}
44
        </div>
45
    </div>
46
</MainGridLayout>
47

48
<style>
49
.friend-card {
50
    @apply flex flex-initial rounded-[var(--radius-large)] bg-[var(--card-bg)]
51
           hover:bg-[var(--btn-plain-bg-hover)] transition-all duration-200;
52
}
53
</style>

NOTE
样式参考自雾创岛-友情链接↗ ，本人进行了一定修改。

在 src/content/spec 目录下新建 friends.md 文件，在里面写上友链的介绍，例如：

1
**欢迎各位！如需添加友链，请邮件联系我！**

在 src/config.ts 文件内添加以下内容：

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
    LinkPreset.About,
6
    LinkPreset.Friends,
7
    //...
8
  ],
9
};

在 src/config.ts 文件的最后添加友链配置：

1
export const friends = [
2
  {
3
    name: "Smaritron",
4
    url: "https://www.smaritron.top",
5
    avatar:
6
      "https://www.smaritron.top/images/avatar.webp",
7
    description: "找你找了一个世界",
8
  },
9
];

后续要新增友链只需要修改此配置即可。

至此，友情链接页面的配置已经完成。点击查看效果