【博客指南】如何创建一个独立页面

496 字

2 分钟

【博客指南】如何创建一个独立页面

2025-11-24

Blog Guides

Fuwari

/

Static Pages

/

Tutorial

写在前面：本文将介绍如何在 Fuwari 模板中添加一个自定义的独立页面（例如 “成就” 、“友链” 等）。

编写页面内容#

首先，我们需要准备该独立页面所要展示的主体内容。

请在 src/content/spec 目录下创建一个 Markdown 文件（例如 achievements.md ）。这个文件不需要包含复杂的 Frontmatter，直接编写你想要展示的 Markdown 内容即可。

创建页面组件#

接下来，我们需要创建一个 Astro 页面文件来渲染上述内容。在 src/pages 目录下新建一个 .astro 文件（推荐与你的 Markdown 文件名一致，例如 achievements.astro）。

你可以直接复制 about.astro 的样例代码并稍作修改，或者使用下面的自定义模板代码。该代码会自动获取 src/content/spec 中的内容并渲染到主布局中。

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

6
// 获取步骤 1 中创建的 'achievements' 内容
7
// 如果你的文件名是 other.md，请将下方的 "achievements" 改为 "other"
8
const achievementsPost = await getEntry("spec", "achievements");
9

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

14
const { Content } = await render(achievementsPost);
15
---
16
<!-- title 和 description 将显示在浏览器标签页和 SEO 信息中 -->
17
<MainGridLayout title="成就" description="我的个人成就清单">
18
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
19
        <div class="card-base z-10 px-9 py-6 relative w-full ">
20
            <Markdown class="mt-2">
21
                <Content />
22
            </Markdown>
23
        </div>
24
    </div>
25
</MainGridLayout>

配置页面导航#

页面文件准备好后，最后一步是将其添加至博客顶部导航栏，使访客能够正常访问。

打开 src/config.ts 文件，找到常量 navBarConfig ，并在 links 数组中添加一项新的导航链接：

1
export const navBarConfig: NavBarConfig = {
2
    links: [
3
        LinkPreset.Home,
4
        LinkPreset.Archive,
5
        LinkPreset.About,
6
        // 添加新的页面入口
7
        // name: 导航栏显示的文字
8
        // url: 对应的路由地址（即 src/pages/ 下的文件名）
9
        { name: "成就", url: "/achievements/" },
10
    ],
11
};