网站添加文章之文件夹方案

这是在 Twilight 博客系统中创建文章的推荐方法。
这种方法更适合复杂文章，特别是包含大量图片或其他资源的情况。

创建文章#

在 src/content/posts 目录下创建一个新的文件夹，文件夹名应具有描述性，例如：

1
my-complex-post

在新文件夹中创建一个名为 index.md 的文件。

在 index.md 中添加 frontmatter（前置元数据），必须包含 title 和 description 字段：

1
---
2
title: Markdown Tutorial
3
published: 2025-01-20
4
pinned: true
5
description: A simple example of a Markdown blog post.
6
tags: [Markdown, Blogging]
7
category: Examples
8
licenseName: "Unlicensed"
9
author: emn178
10
sourceLink: "https://github.com/emn178/markdown"
11
draft: false
12
date: 2025-01-20
13
image:
14
  url: './cover.jpg'
15
  alt: '文章封面'
16
pubDate: 2025-01-20
17
---

Frontmatter 字段详解#

frontmatter 支持的字段包括：

必需字段#

title：文章标题
description：文章描述

发布相关#

published：文章发布日期（YYYY-MM-DD）
pubDate：文章发布日期（与 published 类似）
date：文章创建日期
draft：是否为草稿（true 草稿 / false 发布）

内容分类#

tags：文章标签数组
category：文章分类
pinned：是否置顶文章

作者信息#

author：文章作者姓名
licenseName：文章许可证名称（如 MIT、CC BY 4.0）
sourceLink：文章源链接（通常指向 GitHub 仓库或原始来源）

图片设置#

image：文章封面图片
- url：图片 URL 地址（可使用相对路径，如 ./cover.jpg）
- alt：图片替代文本

编写文章内容#

在 frontmatter 下方即可编写正文内容，支持标准 Markdown 语法。

Markdown 学习资源#

如果您还不熟悉 Markdown 语法，建议先学习基础知识：

📚 推荐学习地址：菜鸟教程 - Markdown 教程

教程涵盖：

Markdown 基本语法
标题、段落、换行
字体样式（粗体、斜体等）
列表、链接、图片
代码块、表格
高级功能

掌握这些基础语法后，您就可以轻松编写美观的博客文章。

Frontmatter 最佳实践#

日期格式#

建议使用 ISO 8601 格式：

1
published: 2025-01-20
2
date: 2025-01-20
3
pubDate: 2025-01-20

标签和分类#

标签应具体且相关
分类通常更宽泛

示例：

1
tags: [Vue.js, JavaScript, Frontend, Tutorial]
2
category: Web Development

草稿管理#

1
draft: true   # 草稿，不会在生产环境显示
2
draft: false  # 正常发布

许可证设置#

常见许可证：

MIT
Apache-2.0
CC BY 4.0
CC BY-SA 4.0
Unlicensed

图片路径最佳实践#

在文件夹方案中，推荐使用相对路径引用图片：

1
image:
2
  url: './cover.jpg'  # 相对于当前文件夹
3
  alt: '文章封面图片描述'

完整示例#

1
---
2
title: "React Hooks深度解析"
3
published: 2025-01-20
4
pinned: true
5
description: "全面解析React Hooks的使用方法和最佳实践，包含大量代码示例和图片说明。"
6
tags: [React, JavaScript, Hooks, Frontend]
7
category: "Web Development"
8
licenseName: "MIT"
9
author: "李四"
10
sourceLink: "https://github.com/lisi/react-hooks-guide"
11
draft: false
12
date: 2025-01-20
13
image:
14
  url: './react-hooks-cover.png'
15
  alt: 'React Hooks深度解析封面'
16
pubDate: 2025-01-20
17
---
18

19

20
# React Hooks深度解析
21

22
![React Hooks示例](./example-diagram.png)
23

24
在这篇文章中，我们将深入探讨React Hooks...

预览文章#

保存文件后，可以在浏览器中访问：

1
http://localhost:4321/posts/my-complex-post

如果文章不存在或文件夹名错误，将显示 404。

链接到文章#

1
<a href="/posts/my-complex-post/">我的复杂文章</a>

确保链接的 href 指向正确路径。

管理图片和其他资源#

使用文件夹方案，你可以将文章相关的所有资源放在同一文件夹中，便于管理：

1
src/content/posts/my-complex-post/
2
├── index.md
3
├── image1.png
4
├── image2.jpg
5
└── data.json

在文章中引用图片时，可以直接使用相对路径：

1
![图片描述](image1.png)

注意：像这样直接填写文件名，RSS 才能正常构建图片路径。

创建多篇文章#

你可以在 src/content/posts/ 目录下创建多个文件夹，每个文件夹代表一篇文章：

1
src/content/posts/
2
├── my-first-post/
3
│   ├── index.md
4
│   └── cover.jpg
5
├── my-second-post/
6
│   ├── index.md
7
│   ├── image1.png
8
│   └── image2.png
9
└── my-third-post/
10
    ├── index.md
11
    └── data.json

每篇文章都有独立文件夹，便于管理和维护。

链接多篇文章#

1
<ul>
2
  <li><a href="/posts/my-first-post/">我的第一篇文章</a></li>
3
  <li><a href="/posts/my-second-post/">我的第二篇文章</a></li>
4
  <li><a href="/posts/my-third-post/">我的第三篇文章</a></li>
5
</ul>

优势#

所有文章资源集中管理
图片引用更简单（相对路径）
更好的组织结构，适合大量资源的文章
便于迁移与备份
每篇文章独立文件夹，避免资源混淆

致虚以守静