這裡有一些在 AstroPaper 部落格主題中創建新文章的規則/建議、提示和技巧。
目錄
前言
前言是存儲有關博客文章（文章）的一些重要信息的主要位置。前言位於文章的頂部，並以 YAML 格式編寫。閱讀更多有關前言及其用法的 astro 文檔。
以下是每篇文章的前言屬性列表。
| 屬性 | 描述 | 備註 |
|---|---|---|
| title | 文章的標題。(h1) | 必填* |
| description | 文章的描述。用於文章摘要和文章的網站描述。 | 必填* |
| pubDatetime | 以 ISO 8601 格式發布的日期時間。 | 必填* |
| modDatetime | 以 ISO 8601 格式修改的日期時間。（僅在修改博客文章時添加此屬性） | 可選 |
| author | 文章的作者。 | 默認 = SITE.author |
| slug | 文章的短網址。此字段是可選的，但不能為空字符串。(slug: ""❌) | 默認 = 文件名的短網址 |
| featured | 是否在首頁的特色部分顯示此文章 | 默認 = false |
| draft | 將此文章標記為“未發佈”。 | 默認 = false |
| tags | 這篇文章的相關關鍵詞。以數組 yaml 格式編寫。 | 默認 = others |
| ogImage | 文章的 OG 圖片。對於社交媒體分享和 SEO 很有用。 | 默認 = SITE.ogImage 或生成的 OG 圖片 |
| canonicalURL | 文章已存在於其他來源時的規範 URL（絕對）。 | 默認 = Astro.site + Astro.url.pathname |
提示！您可以通過在控制台中運行
new Date().toISOString()獲取 ISO 8601 日期時間。請確保刪除引號。
前言中必須指定 title、description 和 pubDatetime 字段。
標題和描述（摘要）對於搜索引擎優化（SEO）很重要，因此 AstroPaper 鼓勵在博客文章中包含這些內容。
slug 是 URL 的唯一標識符。因此，slug 必須是唯一的，並且與其他文章不同。slug 的空格應該用 - 或 _ 分隔，但推薦使用 -。slug 是使用博客文章文件名自動生成的。但是，您可以在博客文章的前言中定義您的 slug。
例如，如果博客文件名是 adding-new-post.md 並且您沒有在前言中指定 slug，Astro 將使用文件名自動為博客文章創建 slug。因此，slug 將是 adding-new-post。但如果您在前言中指定了 slug，這將覆蓋默認的 slug。您可以在 Astro Docs 中閱讀更多相關內容。
如果您在博客文章中省略 tags（換句話說，如果未指定標籤），則默認標籤 others 將用作該文章的標籤。您可以在 /src/content/config.ts 文件中設置默認標籤。
// src/content/config.ts
export const blogSchema = z.object({
// ---
draft: z.boolean().optional(),
tags: z.array(z.string()).default(["others"]), // 將 "others" 替換為您想要的任何內容
// ---
});
範例前言
以下是文章的範例前言。
# src/content/blog/sample-post.md
---
title: 文章的標題
author: 您的名字
pubDatetime: 2022-09-21T05:17:19Z
slug: 文章的標題
featured: true
draft: false
tags:
- 一些
- 範例
- 標籤
ogImage: ""
description: 這是範例文章的範例描述。
canonicalURL: https://example.org/my-article-was-already-posted-here
---
添加目錄
默認情況下，文章（文章）不包含任何目錄（toc）。要包含目錄，您必須以特定方式指定它。
以 h2 格式（markdown 中的 ##）編寫 Table of contents，並將其放置在您希望它出現在文章中的位置。
例如，如果您希望將目錄放置在介紹段落下方（就像我通常做的那樣），您可以按以下方式進行。
---
# 一些前言
---
這裡有一些在 AstroPaper 部落格主題中創建新文章的建議、提示和技巧。
## 目錄
<!-- 文章的其餘部分 -->
標題
關於標題有一點需要注意。AstroPaper 博客文章使用標題（前言中的標題）作為文章的主要標題。因此，文章中的其餘標題應使用 h2 ~ h6。
這條規則不是強制性的，但強烈建議出於視覺、可訪問性和 SEO 目的。
存儲博客內容的圖片
這裡有兩種方法可以存儲圖片並將其顯示在 markdown 文件中。
注意！如果需要在 markdown 中樣式化優化圖片，您應該 使用 MDX。
在 src/assets/ 目錄中（推薦）
您可以將圖片存儲在 src/assets/ 目錄中。這些圖片將通過 Image Service API 自動由 Astro 優化。
您可以使用相對路徑或別名路徑（@assets/）來提供這些圖片。
示例：假設您想顯示 example.jpg，其路徑為 /src/assets/images/example.jpg。
<!-- 或者 -->
<!-- 使用 img 標籤或 Image 組件不起作用 ❌ -->
<img src="@assets/images/example.jpg" alt="something">
<!-- ^^ 這是錯誤的 -->
從技術上講，您可以將圖片存儲在
src下的任何目錄中。這裡的src/assets只是建議。
在 public 目錄中
您可以將圖片存儲在 public 目錄中。請記住，存儲在 public 目錄中的圖片不會被 Astro 觸及，這意味著它們將未經優化，您需要自己處理圖片優化。
對於這些圖片，您應該使用絕對路徑；這些圖片可以使用 markdown 註釋 或 HTML img 標籤 顯示。
示例：假設 example.jpg 位於 /public/assets/images/example.jpg。
<!-- 或者 -->
<img src="/assets/images/example.jpg" alt="something">
Bonus 追加資訊
圖片壓縮
當您在博客文章中放置圖片時（特別是對於 public 目錄下的圖片），建議壓縮圖片。這將影響網站的整體性能。
我推薦的圖片壓縮網站。
OG 圖片
如果文章未指定 OG 圖片，將放置默認的 OG 圖片。雖然不是必需的，但應在前言中指定與文章相關的 OG 圖片。推薦的 OG 圖片大小為 1200 X 640 像素。
自 AstroPaper v1.4.0 起，如果未指定，OG 圖片將自動生成。查看 公告。