Y
YIBI

文章编写指南

2026-06-09帮助Markdown

文章编写指南

存放位置

所有文章 .md 文件放在 content/articles/ 目录下。

content/articles/
├── 文章1.md
├── 文章2.md
└── ...

保存后刷新页面即可看到,无需重启服务。


Frontmatter 配置

每篇文章顶部必须包含 --- 包裹的 YAML 配置:

yaml
---
title: 文章标题           # 必填
description: 文章简介     # 选填,卡片摘要
date: 2026-06-09         # 必填,YYYY-MM-DD 格式
category: 前端            # 选填,默认"未分类"
tags: [Nuxt, Vue, CSS]   # 选填
cover: https://xxx.jpg   # 选填,自定义封面图
---

字段说明

字段 必填 说明
title 文章标题
date 发布日期
description 文章简介,显示在卡片和 SEO
category 分类,默认"未分类"
tags 标签列表,用于筛选
cover 封面图,不填自动从正文提取

封面图优先级

  1. 手动指定 cover 字段 → 优先使用
  2. 正文第一张 Markdown 图片 <img loading="lazy" decoding="async" src="url" alt=""> → 自动提取
  3. 正文第一张 HTML 标签 <img><image> → 自动提取
  4. 都没有 → 卡片不显示封面

正文 Markdown 语法

标题

md
# 一级标题(同文章标题)

## 二级标题 → 自动加入右侧目录

### 三级标题 → 自动加入右侧目录(缩进显示)

#### 四级标题 → 不加入目录

图片

md
# Markdown 格式(推荐)
![描述文字](https://图片链接.jpg)

# HTML 格式
<img src="https://图片链接.jpg" />

代码

`md

const hello = 'world'

列表

md
- 无序列表项
- 无序列表项

1. 有序列表项
2. 有序列表项

引用

md
> 这是一段引用文字

完整示例

md
---
title: 我的新文章
description: 这篇文章介绍 xxx 的使用方法。
date: 2026-06-10
category: 前端
tags: [Vue, Nuxt, 教程]
cover: https://你的图床/cover.jpg
---

![标题图](https://你的图床/title.jpg)

## 背景介绍

正文内容...

### 具体步骤

1. 第一步
2. 第二步

## 总结

总结内容...

常用图床推荐

图床 特点
SM.MS 免费,API 支持
腾讯云 COS 稳定,国内访问快
GitHub + jsDelivr 免费 CDN
img.remit.ee Telegram 图床