使用指南 — 如何修改博客所有内容

本文会手把手教你如何自定义这个博客的每一个部分。请按顺序阅读。

一、文件结构速览#

1
fuwari/
2
├── src/
3
│   ├── assets/images/    ← 头像、横幅等图片放这里
4
│   ├── config.ts         ← 🔧 站点主配置文件（最重要）
5
│   ├── content/
6
│   │   ├── posts/        ← 📝 所有博客文章
7
│   │   └── spec/about.md ← 📄 "关于"页面内容
8
│   └── components/widget/Announcement.astro ← 📢 公告组件
9
├── public/favicon/       ← 网站图标
10
├── astro.config.mjs      ← Astro 构建配置
11
└── package.json          ← 项目依赖

二、替换头像#

准备一张正方形头像图片（建议 256×256 或更大）
放入 src/assets/images/ 目录，例如命名为 my-avatar.png
打开 src/config.ts，找到 profileConfig：

1
export const profileConfig: ProfileConfig = {
2
  avatar: "assets/images/my-avatar.png",  // ← 改成你的文件名
3
  name: "你的名字",                        // ← 改成你的名字
4
  bio: "你的个人简介",                      // ← 改成一句话介绍
5
};

保存后浏览器自动刷新，头像即可更新。

三、修改站点基本信息#

编辑 src/config.ts 中的 siteConfig：

1
export const siteConfig: SiteConfig = {
2
  title: "我的博客",        // ← 网站标题
3
  subtitle: "记录与分享",    // ← 副标题
4
  lang: "zh_CN",           // 中文
5

6
  themeColor: {
7
    hue: 250,              // 主题色（0-360），红0 青200 紫250 粉345
8
    fixed: false,          // true = 禁止访客切换主题色
9
  },
10
};

修改导航栏链接#

1
export const navBarConfig: NavBarConfig = {
2
  links: [
3
    LinkPreset.Home,
4
    LinkPreset.Archive,
5
    LinkPreset.About,
6
    {
7
      name: "GitHub",
8
      url: "https://github.com/Nickoboe/MY_Fuwari",  // ← 改成你的
9
      external: true,
10
    },
11
  ],
12
};

修改社交链接#

1
export const profileConfig: ProfileConfig = {
2
  links: [
3
    { name: "GitHub", icon: "fa6-brands:github", url: "https://github.com/你的用户名" },
4
    // 不需要的链接直接删除即可
5
  ],
6
};

四、撰写与编辑文章#

创建新文章#

在终端执行：

1
pnpm new-post 文章文件名

这会自动在 src/content/posts/ 下生成一个 .md 文件。

文章 Frontmatter（头部配置）#

1
---
2
title: 文章标题
3
published: 2025-05-05          # 发布日期
4
description: 文章摘要描述
5
image: ./cover.jpg             # 封面图（可选）
6
tags: [标签1, 标签2]           # 标签
7
category: 分类名               # 分类
8
pinned: true                   # 设为 true 则置顶
9
draft: false                   # true = 草稿（生产环境不显示）
10
---

置顶与取消置顶#

置顶：在 frontmatter 中添加 pinned: true
取消置顶：删除 pinned: true 或改为 pinned: false

置顶文章会排在最前面，标题旁显示 📌 图标。

Markdown 扩展语法#

提示块：
```
1
:::note
2
这是一个提示。
3
:::
```
支持 note tip important warning caution 五种样式
GitHub 仓库卡片：
```
1
::github{repo="Nickoboe/MY_Fuwari"}
```

五、修改公告#

编辑 src/components/widget/Announcement.astro：

1
<WidgetLayout name="公告" id="announcement" class={className} style={style}>
2
    <div class="transition text-75 text-sm leading-relaxed">
3
        这里写你的公告内容。
4
    </div>
5
</WidgetLayout>

六、修改”关于”页面#

编辑 src/content/spec/about.md，直接修改 Markdown 内容即可。

七、推送到 GitHub#

修改完内容后，执行以下命令：

1
# 1. 查看修改了哪些文件
2
git status
3

4
# 2. 添加所有修改
5
git add .
6

7
# 3. 提交
8
git commit -m "更新网站内容"
9

10
# 4. 推送到 GitHub
11
git push origin main

八、更新 Vercel 部署#

你的项目已部署在 Vercel 上，推送到 GitHub 后 Vercel 会自动重新构建和部署，无需手动操作。

通常 1-2 分钟即可在线上看到更新。

如果自动部署没有触发#

打开 Vercel Dashboard
找到你的项目
点击 Deployments → 查看最新部署状态
如有报错，点击查看构建日志排查

九、本地预览#

1
# 安装依赖
2
pnpm install
3

4
# 启动开发服务器（自动热更新）
5
pnpm dev
6
# 访问 http://localhost:4321
7

8
# 构建生产版本并预览
9
pnpm build
10
pnpm preview

十、常用命令速查#

命令	说明
`pnpm dev`	启动开发服务器
`pnpm build`	构建生产版本到 `./dist/`
`pnpm preview`	本地预览构建结果
`pnpm new-post <名称>`	创建新文章
`git push origin main`	推送到 GitHub（触发 Vercel 部署）

有任何问题欢迎提交 Issue 到 GitHub 仓库。