文章配置指南 | RefactX Project

本文档提供RefactX主题中文章配置的完整指南，包括Front Matter设置和图片显示选项。

创建新文章h2

新建Markdown文件的步骤：

进入src/content/posts目录
创建以.md为后缀的新文件

Front Matter配置h2

通过Astro内容集合管理Front Matter，确保所有文章结构一致：

---
title: '文章标题'
description: '文章简短描述'
pubDate: 1145-05-01
updatedDate: 1145-05-01
author: 'Dnzzk2'
recommend: false
heroImage: '图片文件名.png'
ogImage: 'OG图片文件名.png'
heroImageLayout: 'left'
heroImageAspectRatio: '16/9'
tags: ['标签1', '标签2']
---

属性说明h3

属性	类型	必填	默认值	说明
title	字符串	是	-	文章主标题，显示在文章页和列表页
description	字符串	是	-	文章摘要，用于SEO和社交媒体预览
pubDate	日期	是	-	发布日期，格式YYYY-MM-DD
updatedDate	日期	否	-	最后修改日期
author	字符串	否	-	作者名，未指定时使用站点默认作者
recommend	布尔值	否	false	设为推荐文章，显示特殊标识
heroImage	字符串	否	-	封面图文件名(存放于`public/hero-images/`)或外部URL
ogImage	字符串	否	-	社交媒体预览图(存放于`public/og-images/`)或外部URL
heroImageLayout	字符串	否	-	图片位置(‘left’或’right’)，当文章列表类型为’image’时生效
heroImageAspectRatio	字符串	否	’16/9’	图片比例，支持’16/9’或’3/4’
tags	字符串数组	否	[]	文章分类标签

图片显示配置h2

当文章列表类型设为image时：

未指定heroImage时，使用config.ts中POSTS_CONFIG的defaultHeroImage
未指定ogImage时，使用站点默认OG图片

显示样式h3

2025/07/25

新增Jap样式，可在Front Matter中配置postType使用

本主题不再根据图片存在与否或比例决定元信息显示样式，而是由您自行定义。可在config.ts中配置postType决定默认样式，在MD文档的front matter中可通过postType指定该MD文件的显示样式。

支持三种图片显示样式：

无封面图：

带封面图(默认16/9比例)：

带封面图(3/4比例)：

NOTE

比例’3/4’和’16/9’仅作为方向指示而非严格尺寸要求，但使用接近比例的图片可避免变形

图片处理工具h2

内置图片优化工具帮助提升网站性能：

图片优化脚本h3

pnpm run optimize -- [选项]

常用选项h4

选项	别名	说明	默认值
—input	-i	输入文件/目录路径(必填)	-
—quality	-q	压缩质量(0-100)	80
—width	-w	最大宽度(0=不调整)	0
—format	-f	输出格式(jpg,png,webp等)	原始格式

示例h4

基本优化：

pnpm run optimize -- -i public/images

转换为WebP格式：

pnpm run optimize -- -i public/images -f webp

代码片段h2

.vscode/RefactX.code-snippets提供三种代码片段快速生成Front Matter：

基础模板(无图片)h3

触发词: postfm或postnoimg
用途: 创建无图片的文章模板

16/9图片模板h3

触发词: postfm16或post169
用途: 创建带16<9横版图片的模板>

3/4图片模板h3

触发词: postfm34或post34
用途: 创建带3<4竖版图片的模板>

TIP

根据图片比例选择合适的模板，可大幅提升写作效率

创建新文章h2

Front Matter配置h2

属性说明h3

图片显示配置h2

显示样式h3

图片处理工具h2

图片优化脚本h3

常用选项h4

示例h4

推荐工具h3

代码片段h2

基础模板(无图片)h3

16/9图片模板h3

3/4图片模板h3