如何配置 AstroPaper 主題

AstroPaper 是一個高度可定制的 Astro 博客主題。使用 AstroPaper，你可以根據個人喜好自定義一切。本文將解釋如何在配置文件中輕鬆進行一些自定義。

配置 SITE

重要的配置位於 src/config.ts 文件中。在該文件中，你會看到 SITE 對象，你可以在其中指定網站的主要配置。

在開發過程中，可以將 SITE.website 留空。但在生產模式中，你應該在 SITE.website 選項中指定已部署的 URL，因為這將用於規範 URL、社交卡 URL 等，這對 SEO 很重要。

// 文件: src/config.ts
export const SITE = {
  website: "https://astro-paper.pages.dev/",
  author: "Sat Naing",
  desc: "一個簡約、響應迅速且對 SEO 友好的 Astro 博客主題。",
  title: "AstroPaper",
  ogImage: "astropaper-og.jpg",
  lightAndDarkMode: true,
  postPerPage: 3,
  scheduledPostMargin: 15 * 60 * 1000, // 15 分鐘
  showArchives: true,
  editPost: {
    url: "https://github.com/satnaing/astro-paper/edit/main/src/content/blog",
    text: "建議更改",
    appendFilePath: true,
  },
};

以下是 SITE 配置選項

選項	描述
`website`	你已部署的網站 URL
`author`	你的名字
`desc`	你網站的描述。對 SEO 和社交媒體分享很有用。
`title`	你網站的名稱
`ogImage`	你網站的默認 OG 圖片。對社交媒體分享很有用。OG 圖片可以是外部圖片 URL，也可以放在 `/public` 目錄下。
`lightAndDarkMode`	啟用或禁用網站的 `light & dark mode`。如果禁用，將使用主要顏色方案。此選項默認啟用。
`postPerIndex`	在首頁的 `Recent` 部分顯示的帖子數量。
`postPerPage`	你可以指定每個帖子頁面顯示多少帖子。（例如：如果你將 SITE.postPerPage 設置為 3，每頁將僅顯示 3 篇帖子）
`scheduledPostMargin`	在生產模式中，具有未來 `pubDatetime` 的帖子將不可見。但是，如果帖子的 `pubDatetime` 在接下來的 15 分鐘內，它將可見。如果你不喜歡默認的 15 分鐘邊距，可以設置 `scheduledPostMargin`。
`showArchives`	決定是否顯示 `Archives` 菜單（位於 `About` 和 `Search` 菜單之間）及其相應的頁面。此選項默認設置為 `true`。
`editPost`	此選項允許用戶通過在博客文章標題下提供編輯鏈接來建議更改博客文章。可以通過從 `SITE` 配置中刪除它來禁用此功能。你還可以將 `appendFilePath` 設置為 `true`，以自動將帖子的文件路徑附加到 URL，將用戶定向到他們希望編輯的特定帖子。

配置語言環境

你可以配置構建時使用的默認語言環境（例如，帖子頁面的日期格式），以及在瀏覽器中渲染時使用的語言環境（例如，搜索頁面的日期格式）

// 文件: src/config.ts
export const LOCALE = {
  lang: "zh-tw", // html 語言代碼。設置為空，默認將為 "en"
  langTag: ["zh-TW"], // BCP 47 語言標籤。設置為空 [] 以使用環境默認值
} as const;

LOCALE.lang 將用作 <html lang="zh-tw"> 中的 HTML ISO 語言代碼。如果你不指定，默認回退將設置為 en。 LOCALE.langTag 用作日期時間語言環境。為此，你可以指定一個語言環境數組作為回退語言。將 LOCALE.langTag 留空 [] 以在構建和運行時使用環境默認值。

配置標誌或標題

你可以在 src/config.ts 文件中指定網站的標題或標誌圖片。

// 文件: src/config.ts
export const LOGO_IMAGE = {
  enable: false,
  svg: true,
  width: 216,
  height: 46,
};

如果你指定 LOGO_IMAGE.enable => false，AstroPaper 將自動將 SITE.title 轉換為主站點文本標誌。

如果你指定 LOGO_IMAGE.enable => true，AstroPaper 將使用標誌圖片作為網站的主要標誌。

你必須在 /public/assets 目錄下指定 logo.png 或 logo.svg。目前僅支持 svg 和 png 圖片文件格式。（重要！ 標誌名稱必須是 logo.png 或 logo.svg）

如果你的標誌圖片是 png 文件格式，你必須將 LOGO_IMAGE.svg 設置為 false。

建議你指定標誌圖片的寬度和高度。你可以通過設置 LOGO_IMAGE.width 和 LOGO_IMAGE.height 來做到這一點。

配置社交鏈接

你可以配置自己的社交鏈接及其圖標。

指向社交鏈接圖標的箭頭

目前支持 20 個社交圖標。（Github、LinkedIn、Facebook 等）

你可以在英雄部分和頁腳中指定和啟用某些社交鏈接。為此，請轉到 /src/config.ts，然後你會找到 SOCIALS 對象數組。

// 文件: src/config.ts
export const SOCIALS: SocialObjects = [
  {
    name: "Github",
    href: "https://github.com/satnaing/astro-paper",
    linkTitle: ` ${SITE.title} 在 Github 上`,
    active: true,
  },
  {
    name: "Facebook",
    href: "https://github.com/satnaing/astro-paper",
    linkTitle: `${SITE.title} 在 Facebook 上`,
    active: true,
  },
  {
    name: "Instagram",
    href: "https://github.com/satnaing/astro-paper",
    linkTitle: `${SITE.title} 在 Instagram 上`,
    active: true,
  },
  ...
]

你必須將特定的社交鏈接設置為 active: true，以便在英雄和頁腳部分顯示你的社交鏈接。然後，你還必須在 href 屬性中指定你的社交鏈接。

例如，如果我想讓我的 Github 出現，我會這樣做。

export const SOCIALS: SocialObjects = [
  {
    name: "Github",
    href: "https://github.com/satnaing", // 更新帳戶鏈接
    linkTitle: `${SITE.title} 在 Github 上`, // 此文本將在懸停和 VoiceOver 時顯示
    active: true, // 確保設置為 true
  }
  ...
]

另一點需要注意的是，你可以在對象中指定 linkTitle。此文本將在懸停在社交圖標鏈接上時顯示。此外，這將提高可訪問性和 SEO。AstroPaper 提供默認的鏈接標題值；但你可以用自己的文本替換它們。

例如，

linkTitle: `${SITE.title} 在 Twitter 上`,

改為

linkTitle: `關注 ${SITE.title} 在 Twitter 上`;

結論

這是如何自定義此主題的簡要說明。如果你知道一些編碼，你可以自定義更多內容。要自定義樣式，請閱讀這篇文章。感謝閱讀。✌🏻