本博客基于 Nuxt 4 + Nuxt Content 构建，采用静态生成（SSG）部署于 GitHub Pages。这篇文章帮助你快速了解各个文件和文件夹的作用，方便后续维护。
TOC
根目录配置文件
blog.config.ts
博客的核心配置文件，启动时加载，修改后需重新构建才生效：
| 字段 | 作用 |
|---|---|
title | 博客标题，显示在浏览器标签页 |
subtitle | 副标题/Slogan |
description | 网站描述，影响 SEO |
author.name | 作者名 |
author.avatar | 头像图片链接 |
author.email | 邮箱 |
favicon | 浏览器标签页小图标 |
url | 博客域名，用于生成 RSS/Atom 链接 |
timeEstablished | 建站日期 |
article.categories | 定义文章分类及对应图标和颜色 |
article.useRandomPremalink | 新建文章时是否自动生成随机 URL |
article.hidePostPrefix | 是否隐藏 URL 中的 /posts 前缀 |
scripts | 向 <head> 注入外部脚本（统计、评论等） |
nuxt.config.ts
Nuxt 框架的构建配置，控制渲染模式、SEO、模块加载等。一般不需要频繁修改，除非要添加新功能模块或修改构建行为。
content.config.ts
Nuxt Content 的内容定义，声明文章的 frontmatter 格式（有哪些字段、什么类型）。新增自定义字段时需要在这里注册。
app.config.ts
前端响应式运行时配置，位于 app/ 目录下。与 blog.config.ts 不同，这里的内容会在客户端访问，适合放页脚导航、社交链接等动态信息。
package.json
项目依赖和脚本定义。pnpm new 新建文章、pnpm dev 启动开发、pnpm generate 构建静态站。
app 目录 —— 前端代码
app/ ├── app.vue # 根布局组件 ├── app.config.ts # 前端运行时配置 ├── feeds.ts # 友链列表 ★ ├── assets/ # 需编译的资源（SCSS、字体等） ├── components/ # Vue 组件 │ ├── blog/ # 博客整体布局（头部、侧栏、页脚） │ ├── content/ # MDC 组件（Markdown 增强渲染） │ ├── partial/ # 微型复用组件（按钮、输入框等） │ ├── post/ # 文章相关组件（卡片、轮播） │ └── widget/ # 侧栏小组件（技术信息、统计、目录） ├── composables/ # Vue 组合式函数（公共逻辑） ├── pages/ # 页面路由 │ ├── index.vue # 首页 │ ├── archive.vue # 归档页 │ ├── link.vue # 友链页 │ ├── preview.vue # 预览文章列表 │ └── [...slug].vue # 文章正文 & 404 页面 ├── plugins/ # Nuxt/Vue 插件 ├── stores/ # Pinia 状态管理 ├── types/ # TypeScript 类型定义 └── utils/ # 工具函数
关键文件说明
feeds.ts：友链列表文件，定义了你博客上展示的友链分组和每个友链的信息。格式如下：
{
author: '友链作者名',
title: '博客标题',
desc: '博客描述',
link: 'https://example.com',
icon: '头像URL',
avatar: '头像URL',
date: '添加日期',
comment: '备注',
}
pages/index.vue：首页逻辑，控制文章排序、分类筛选、分页、精选文章轮播。
pages/[...slug].vue：万能路由，匹配所有文章路径和未定义的页面（404）。
content 目录 —— 文章存储
content/ ├── posts/ # 正式文章（会被收录、展示在首页） ├── previews/ # 草稿/预览文章（仅站内搜索可见，不在首页展示） ├── link.md # 友链页说明文字 └── theme.md # 主题介绍页
文章 Frontmatter 字段
每篇文章顶部的 --- 之间是元数据：
--- title: 文章标题 date: 2026-06-07 12:00:00 categories: [安全] # 对应 blog.config.ts 中定义的分类 tags: [CTF, SQL注入] # 标签 image: "/images/封面.png" # 封面图，推荐 16:9 或 2:1 recommend: 1 # 数值越大越靠前，设置后在首页轮播展示 permalink: /2026/custom # 自定义 URL，不设则用文件路径 draft: false # 设为 true 则不发布 ---
public 目录 —— 静态资源
public/ ├── images/ # 图片资源 ├── fonts/ # 字体文件 └── assets/ # 其他静态文件（RSS XSLT 等）
public 目录下的文件会原样复制到站点根目录。引用时路径为 /images/文件名.png 或直接使用外部图床链接。
server 目录 —— 后端接口
server/
├── api/
│ └── stats.get.ts # /api/stats 博客统计接口
└── routes/
├── atom.xml.get.ts # Atom 订阅源
└── zhilu.opml.get.ts # OPML 友链订阅聚合
.github/workflows —— 自动部署
.github/workflows/ └── pages.yml # GitHub Actions 构建部署脚本
每次 git push 到 main 分支时自动触发：安装依赖 → 构建静态站 → 部署到 GitHub Pages。
常用操作
新建文章
pnpm new
自动在 content/posts/ 下生成模板文件，填写 frontmatter 和内容即可。
本地预览
pnpm dev
浏览器打开 http://localhost:3000，修改文章后自动热更新。
发布上线
git add -A git commit -m "描述你的改动" git push origin main
推送后 GitHub Actions 自动构建部署，约 2 分钟后生效。
修改友链
编辑 app/feeds.ts，在对应分组的 entries 数组中添加或修改友链对象。
更换图片
推荐上传到博客园图床（或任意图床），拿到直链后在文章 frontmatter 的 image 字段或用  引用。
评论区