给你的Fuwari添加一个友链页面

封面来源
しぐれうい-まだ足りない

创建友链页面#

注意
Fuwari主题作者saicaca表示友链页面未来会进行设计和添加#35
本文章仅临时参考使用
此部分参考~~SakuAikoi大佬的教程~~
上述作者站点转移，SakuAikoi的名字也被弃用，新站点为https://blog.atri.pw/
在魔改前推荐各位提前做好备份工作

在src\content\spec目录下新建文件friends.md这个就是友链页面的文件
在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
  author = 'author',
2
  publishedAt = 'publishedAt',
3
  license = 'license',
4
  friends = 'friends',

按照自己的语言，在 src\i18n\languages 目录中编辑相应语言文件
这里拿 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
   },
9
 }

在 src\pages 目录下，copy一份 about.astro 文件的副本
改名为 friends.astro ，在此文件中更改下述内容

1
  const aboutPost = await getEntry('spec', 'about')
2
  const friendsPost = await getEntry('spec', 'friends')
3

4
  const { Content } = await aboutPost.render()
5
  const { Content } = await friendsPost.render()
6

7
  <MainGridLayout title={i18n(I18nKey.about)} description={i18n(I18nKey.about)}>
8
  <MainGridLayout title={i18n(I18nKey.friends)} description={i18n(I18nKey.friends)}>

最后一步，在 src\config.ts 文件内添加内容，注意要在 LinkPreset.About 末尾添加,

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
    LinkPreset.About,
6
    LinkPreset.Friends,
7
    {

至此，友链页面完成创建
但只能在 friends.md 内用markdown写一些简单的内容

创建友链卡片效果#

创建卡片效果友链
此部分代码参考La02^大佬的页面
在之前创建的 friends.astro 文件中编辑
编辑时请提前做好备份工作，注意缩进

注意
2025.8.27更新
感谢AkatsukiMio对本文章的勘误
之前可能添加随机排列功能时，文章更新不到位😥
由于遇到渲染后的静态网页，在刷新后随机排列不生效，用Copilot生成了新的负责随机排列的js代码

1
const friendsPost = await getEntry("spec", "friends");
2

3
if (!friendsPost) {
4
  throw new Error("About page content not found");
5
}
6

7
const { Content } = await render(friendsPost);
8
const items = [
9
  {
10
    title: 'Astro',
11
    imgurl: 'https://avatars.githubusercontent.com/u/44914786?s=48&v=4',
12
    desc: 'The web framework for content-driven websites. ⭐️ Star to support our work!',
13
    siteurl: 'https://github.com/withastro/astro',
14
    tags: ['框架'],
15
  },
16
]
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 px-9 py-6 relative w-full ">
21
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-8 my-4" id="friends-list">
22
        {items.map((item) => (
23
          <div class="friend-card flex flex-nowrap items-stretch h-28 gap-4 rounded-[var(--radius-large)]">
24
            <div class="w-28 h-28 flex-shrink-0 rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-900">
25
              <img src={item.imgurl} alt="站点头像" class="w-full h-full object-cover" />
26
            </div>
27
            <div class="grow w-full">
28
              <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 mb-1">{item.title}</div>
29
              <div class="text-50 text-sm font-medium">{item.desc}</div>
30
            </div>
31
            <a href={item.siteurl} target="_blank" rel="noopener noreferrer" class="flex btn-regular w-[3.25rem] rounded-lg bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95">
32
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="transition text-[var(--primary)] text-4xl mx-auto iconify iconify--material-symbols" width="1em" height="1em" viewBox="0 0 24 24">
33
                <path fill="currentColor" d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"></path>
34
              </svg>
35
            </a>
36
          </div>
37
        ))}
38
      </div>
39
      <Markdown class="mt-2">
40
        <Content />
41
      </Markdown>
42
    </div>
43
  </div>
44

45
<!--在此处👇插入随机排列JS脚本 -->
46
<script>
47
window.addEventListener('DOMContentLoaded', () => {
48
    const container = document.getElementById('friends-list');
49
    if (!container) return;
50
    const cards = Array.from(container.children);
51
    // 洗牌算法
52
    for (let i = cards.length - 1; i > 0; i--) {
53
        const j = Math.floor(Math.random() * (i + 1));
54
        [cards[i], cards[j]] = [cards[j], cards[i]];
55
    }
56
    // 重新插入
57
    cards.forEach(card => container.appendChild(card));
58
});
59
</script>
60
<!--在此处👆插入随机排列JS脚本 -->
61

62
</MainGridLayout>

const items 部分就是添加的友链部分
可以往下面继续添加
以上，have yourself