Fuwari博客很好用，但是感觉少了一些页面，不能够跟好朋友愉快的分享，于是加了个友链，在我看自己博客的同时，可以时刻视奸我的好朋友们的博客页面。😂

添加友链#

添加友链页面文件#

在src\content\spec目录下新建文件friends.md 在src\types\config.ts文件约41行位置添加以下内容

export enum LinkPreset {
  Home = 0,
  Archive = 1,
  About = 2,
+ Friends = 3,
}

国际化i18n翻译#

在src\i18n\i18nKey.ts文件约35行位置添加以下内容

    author = 'author',
    publishedAt = 'publishedAt',
    license = 'license',
+   friends = 'friends',

按照自己的语言，在 src\i18n\languages 目录中编辑相应语言文件,以 zh_CN.ts 为例，在约 38 行位置添加内容

    [Key.author]: '作者',
    [Key.publishedAt]: '发布于',
    [Key.license]: '许可协议',
+   [Key.friends]: '友链',

在 src\constants\link-presets.ts 文件约 18 行位置添加内容

  [LinkPreset.Archive]: {
    name: i18n(I18nKey.archive),
    url: '/archive/',
  },
+  [LinkPreset.Friends]: {
+    name: i18n(I18nKey.friends),
+    url: '/friends/',
+  },
}

创建和配置页面的Astro文件#

在src\pages目录下复制原本的about.astro文件，重命名为friends.astro，在此文件中更改第 11 行、第 17 行和第19行的内容

- const aboutPost = await getEntry('spec', 'about')
+ const friendsPost = await getEntry('spec', 'friends')

- const { Content } = await render(aboutPost);
+ const { Content } = await render(friendsPost);

- <MainGridLayout title={i18n(I18nKey.about)} description={i18n(I18nKey.about)}>
+ <MainGridLayout title={i18n(I18nKey.friends)} description={i18n(I18nKey.friends)}>

在导航栏中添加友链页面#

在 src\config.ts 文件约 48 行位置添加内容，注意要在 LinkPreset.About 末尾添加,

export const navBarConfig: NavBarConfig = {
  links: [
      LinkPreset.Home,
      LinkPreset.Archive,
      LinkPreset.About,
+     LinkPreset.Friends,
    {

创建卡片效果友链#

在之前创建的 friends.astro 文件中编辑

---

import MainGridLayout from '../layouts/MainGridLayout.astro'

import { getEntry } from 'astro:content'
import Markdown from '@components/misc/Markdown.astro'
import I18nKey from '../i18n/i18nKey'
import { i18n } from '../i18n/translation'

const friendsPost = await getEntry('spec', 'friends')
if (!friendsPost) {
  throw new Error('Friend page content not found')
}
const { Content } = await friendsPost.render()

const items = [
  {
    title: 'Astro',
    imgurl: 'https://avatars.githubusercontent.com/u/44914786?s=48&v=4',
    desc: 'The web framework for content-driven websites. ⭐️ Star to support our work!',
    siteurl: 'https://github.com/withastro/astro',
    tags: ['框架'],
  },
]
---
<MainGridLayout title={i18n(I18nKey.friends)} description={i18n(I18nKey.friends)}>
  <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
    <div class="card-base z-10 px-9 py-6 relative w-full ">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-10 my-4">
        {items.map((item) => (
          <a href={item.siteurl} target="_blank" rel="noopener noreferrer"
            class="group rounded-3xl bg-white/80 dark:bg-zinc-900/80 shadow-xl hover:shadow-2xl transition-all duration-300 p-6 flex items-center gap-6 border border-zinc-100 dark:border-zinc-800 hover:-translate-y-1"
          >
            <div class="flex-shrink-0">
              <img src={item.imgurl} alt="站点头像" class="w-20 h-20 rounded-full object-cover shadow-md border-4 border-white dark:border-zinc-800 group-hover:scale-105 transition-transform duration-300" />
            </div>
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-2 mb-1">
                <span class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 group-hover:text-[var(--primary)] transition-colors duration-300 leading-tight">{item.title}</span>
                {item.tags && item.tags.length > 0 && (
                  <span class="inline-flex items-center gap-1 text-base px-3 py-1 rounded-full bg-[var(--primary)]/10 text-[var(--primary)] font-semibold tracking-wide">
                    {item.tags.join(' ')}
                  </span>
                )}
              </div>
              <div class="text-zinc-600 dark:text-zinc-300 text-base mb-2 line-clamp-2 leading-relaxed font-medium">{item.desc}</div>
            </div>
            <div class="ml-auto flex-shrink-0">
              <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[var(--primary)]/90 text-white shadow-lg group-hover:scale-110 transition-transform duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </span>
            </div>
          </a>
        ))}
      </div>
      <Markdown class="mt-2">
        <Content />
      </Markdown>
    </div>
  </div>
  <style>
    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  </style>

  <!-- giscus评论 -->
<div style="margin-top: 20px;"></div>
<script src="https://giscus.app/client.js"
        data-repo="kimbleex/fuwari_comments"
        data-repo-id="R_kgDOPVt71Q"
        data-category="General"
        data-category-id="DIC_kwDOPVt71c4Ctm_O"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>
</MainGridLayout>

其中items内容即为友链的内容，可以自行diy。

最终效果#