新增功能?#

Fuwari 主題的導覽列一開始只有 Home, Archive, About 這幾個功能，我想加入 Friends 功能，原本以為在 config.ts 中新增幾行程式碼就可以解決，但事情沒有我想的那麼簡單。

新增 Head 導航連結#

在 src/config.ts 中，由 navBarConfig 參數控制導航，所以我們可以在此加入想新增的導航

首先編輯 src/types/config.ts，找到 LinkPreset 加入我們要的類別

export enum LinkPreset {
  Home = 0,
  Archive = 1,
  About = 2,
  Friends = 3,      // 等號前面的是導行列的名稱，後面則是順序
}

接著進入 src/config.ts，找到 navBarConfig，並加入我們剛才新增的類別

export const navBarConfig: NavBarConfig = {
  links: [
    LinkPreset.Home,
    LinkPreset.Archive,
    LinkPreset.About,
    LinkPreset.Friends,     // 引用 LinkPreset 中的 Friends 類別
  ],
}

修改 src/constants/link-presets.ts，並加入 Friends

export const LinkPresets: { [key in LinkPreset]: NavBarLink } = {
  [LinkPreset.Home]: {
    name: i18n(I18nKey.home),
    url: '/',
  },
  [LinkPreset.About]: {
    name: i18n(I18nKey.about),
    url: '/about/',
  },
  [LinkPreset.Archive]: {
    name: i18n(I18nKey.archive),
    url: '/archive/',
  },
  [LinkPreset.Friends]: {           // 增加 Friends 導航對應的路由
    name: i18n(I18nKey.friends),
    url: '/friends/',
  },
}

接下來要修改 i18n 相關參數以對應我們做的修改，修改 src/i18n/i18nKey.ts，新增 friends

enum I18nKey {
  home = 'home',
  about = 'about',
  archive = 'archive',
  search = 'search',
  friends = 'frineds',
  ...
}

修改 src/i18n/languages/en.ts

export const en: Translation = {
  [Key.home]: 'Home',
  [Key.about]: 'About',
  [Key.archive]: 'Archive',
  [Key.search]: 'Search',
  [Key.friends]: 'Friends',
  ...
}

修改 src/i18n/languages/zh_TW.ts

export const zh_TW: Translation = {
  [Key.home]: '首頁',
  [Key.about]: '關於',
  [Key.archive]: '彙整',
  [Key.search]: '搜尋',
  [Key.friends]: '朋友們',
}

複製 src/pages/about.astro 至 src/pages/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')       // 指定頁面進入點為 src/content/spec/，前面的參數名稱記得要改成 friendsPost

const { Content } = await friendsPost.render()              // 記得將 aboutPost 改成 friendsPost

// 下面的 i18nKey 也需要改成 friends
---
<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 ">
            <Markdown class="mt-2">
                <Content />
            </Markdown>
        </div>
    </div>
</MainGridLayout>

最後一步#

在 src/content/spec 中新增 friends.md，內容就不打了。

這樣就大功告成了!

有用的東西#

• 新增 Friends 頁面功能至導航列