文章配置

本文档为 Litos 主题的文章配置提供了全面的指南，包括 front matter 设置和图片显示选项。

创建新文章h2

要创建新的 Markdown 文件，请按照以下步骤操作：

1. 导航到 src/content/posts 目录。
2. 创建一个扩展名为 .md 的新 Markdown 文件。

Front Matter 配置h2

Markdown 文件中的 front matter 通过 Astro 内容集合进行管理，从而在所有文章中强制执行一致的结构。以下是可用的 front matter 属性的详细规范：

---
title: '你的文章标题'
description: '你的文章的简要描述'
pubDate: 2025-05-01
updatedDate: 2025-05-01
author: 'Dnzzk2'
recommend: false
heroImage: 'image-filename.png'
ogImage: 'og-image-filename.png'
heroImageLayout: 'left'
heroImageAspectRatio: '16/9'
tags: ['标签1', '标签2']
---

属性规范h3

图片显示配置h2

当文章列表类型设置为 image 时，主题提供了灵活的图片处理方式：

• 如果未指定 heroImage，系统将使用 config.ts 中 POSTS_CONFIG 的 defaultHeroImage。
• 如果省略 ogImage，则应用网站的默认 ogimage。

显示变体h3

主题根据 heroImage 配置支持三种不同的图片显示样式：

1. 无特色图片：

   

2. 有特色图片（默认 16/9 比例）：

   

3. 有特色图片（3/4 比例）：

   

图片处理工具h2

Litos 包含内置的图片优化工具，以帮助减少网站加载时间并提高性能。该项目提供了两个用于图片处理的主要脚本：

优化图片脚本h3

optimize 脚本是用于批量处理图片的强大工具，提供各种优化选项：

pnpm run optimize -- [options]

可用选项h4

示例h4

1. 使用默认设置进行基本优化：

   pnpm run optimize -- -i public/images

2. 将图片转换为 WebP 格式，质量为 85%：

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

3. 将图片大小调整为最大宽度 1200px：

   pnpm run optimize -- -i public/images -w 1200

4. 将优化后的图片保存到不同目录：

   pnpm run optimize -- -i public/images -o public/optimized

替代工具h3

虽然建议使用内置工具以实现无缝集成，但您也可以使用外部服务进行图片优化：

• TinyPNG - 对 PNG 和 JPEG 文件进行出色的压缩
• Squoosh - 基于浏览器的图片优化工具，支持多种格式
• ImageOptim - 用于无损图片优化的桌面应用程序

特色图片和 OG 图片h3

特色图片和 OG 图片在增强内容的视觉吸引力和社交媒体影响力方面起着至关重要的作用。以下是创建有效图片的一些推荐工具和指南：

推荐工具h4

1. OG 图片生成器：

   • Free OG Image Generator - 简单快速地创建 OG 图片

2. OG 预览工具：

   • Social Share Preview - 在各平台上测试 OG 图片
   • Metatags.io - 预览和调试社交媒体卡片

尺寸建议h4

• 特色图片：

  • 横向 (16/9): 1200×675px 或 1920×1080px
  • 纵向 (3/4): 800×1067px 或 1200×1600px

• OG 图片：

  • 最佳尺寸: 1200×630px (Facebook, Twitter, LinkedIn)
  • 最小尺寸: 600×315px
  • 宽高比: 1.91<1>

代码片段h2

.vscode/litos.code-snippets 文件提供了三个代码片段，用于快速生成 Markdown frontmatter。这些片段可帮助您高效地创建不同类型的博客文章模板。

基本模板（无图片）h3

• 触发器: postfm 或 postnoimg
• 目的: 创建一个不带图片的基本博客文章模板
• 占位符:
  • ${1:Your Post Title}: 文章标题
  • ${2:A brief description}: 文章描述
  • ${3-4:YYYY-MM-DD}: 发布和更新日期（自动填充当前日期）
  • ${5:Author}: 作者姓名（默认为文件名）
  • ${6|false,true|}: 特色文章切换
  • ${7-8:tag}: 文章标签

示例输出:

---
title: 'Getting Started with TypeScript'
description: 'A comprehensive guide to TypeScript fundamentals'
pubDate: 2024-01-15
updatedDate: 2024-01-15
author: 'John Doe'
recommend: false
tags: ['TypeScript', 'Programming']
---

16/9 图片模板h3

• 触发器: postfm16 或 post169
• 目的: 创建一个支持 16/9 横向图片的模板
• 附加字段:
  • heroImage: 封面图片文件名
  • ogImage: 社交媒体预览图片
  • heroImageAspectRatio: 固定为 ‘16/9’

示例输出:

---
title: 'Modern Web Design Trends'
description: 'Exploring the latest trends in web design for 2024'
pubDate: 2024-01-15
updatedDate: 2024-01-15
author: 'Jane Smith'
recommend: true
heroImage: 'web-design-trends.png'
ogImage: 'web-design-trends.png'
heroImageAspectRatio: '16/9'
tags: ['Design', 'Web Development']
---

3/4 图片模板h3

• 触发器: postfm34 或 post34
• 目的: 创建一个支持 3/4 纵向图片的模板
• 附加字段:
  • 与 16/9 模板相同，但 heroImageAspectRatio 固定为 ‘3/4’

示例输出:

---
title: 'Portrait Photography Tips'
description: 'Essential tips for capturing stunning portrait photos'
pubDate: 2024-01-15
updatedDate: 2024-01-15
author: 'Alex Johnson'
recommend: false
heroImage: 'portrait-tips.png'
ogImage: 'portrait-tips.png'
heroImageAspectRatio: '3/4'
tags: ['Photography', 'Tutorial']
---

使用说明h3

1. 在 VS Code 中创建一个新的 .md 文件
2. 输入触发器前缀（例如 postfm）并按 Tab
3. 使用 Tab 在占位符之间导航并填写内容
4. 完成所有占位符后，光标将定位在文章正文处