Logo
说说 友链 图库
4 mins 阅读

文章配置指南

RefactX主题中文章配置的完整指南

#基本教程 #笔记
文章配置指南

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

创建新文章h2

新建Markdown文件的步骤：

  1. 进入src/content/posts目录
  2. 创建以.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文件的显示样式。

支持三种图片显示样式：

  1. 无封面图：
    无图片

(class) :::

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

(class) :::

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

(class) :::

NOTE

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

图片处理工具h2

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

图片优化脚本h3

Terminal window
pnpm run optimize -- [选项]

常用选项h4

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

示例h4

  1. 基本优化：

    Terminal window
    pnpm run optimize -- -i public/images

  2. 转换为WebP格式：

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

推荐工具h3

代码片段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

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