介紹#
這是我開發的 Astro 開源博客主題，名字叫Astro-Yi，喜歡的可以點個 star 啦，感謝關注，歡迎 PR！
配置 Astro-Yi#
必不可少的配置（必須）#
Astro 項目的配置文件在/astro.config.mjs，其中有一些配置是必不可少的：
export default defineConfig({
site: "https://cirry.cn", // 請在這裡修改為自己的網站地址
})
博客信息配置#
在 Astro-Yi 主題的配置文件src/consts.ts，其中有一些配置是很重要的：
// ...
export const site = {
title: "Cirry's Blog", // required
favicon: '/favicon.svg', // required
author: "Cirry", // required
avatar: '/avatar.png', // required
description: '',
motto: '',
url: 'https://cirry.cn', // required
recentBlogSize: 5, // required
archivePageSize: 25, // required
postPageSize: 10, // required
indexPageSize: 10, // required
beian: '',
}
// ...
favicon是網站圖標存放位置。文件位置在/public/favicon.svg，請替換為自己的網站圖標。
avatar是網站頭像存放位置。文件位置在：/public/avatar.png，請替換為自己的網站頭像。
評論系統配置#
/**
* enable 是否開啟評論功能 true啟用，false關閉
* waline 的服務端地址
* pageSize： 每頁顯示的評論數量。
* wordLimit: 評論字數限制。填入單個數字時為最大字數限制。設置為 0/或不設置時無限制
* requiredMeta： 評論必填項，可以是nick，mail，link中的一個或多個
* count: 側邊欄查詢最近評論數
* pageview: 文章瀏覽量統計
* reaction: 文章增加表情互動功能
* whiteList: 文章反應白名單
*/
export const comment = {
enable: true, // 必填，設置為開啟評論系統
serverUrl: "https://xxx.xx.app", // 必填，修改為您的Waline服務端地址
pageSize: 20, //
wordLimit: '',
requiredMeta: ["nick", "mail"], // 必填
count: 5,
pageview: true,
reaction: false,
whiteList: ['/message/', '/friends/', '/donate/'],
}
reaction並不是只能設置true/false，你也可以傳入一個數組裡面是圖片的地址來實現自定義表情，具體詳情可以參考這裡文章反應。
贊助系統配置#
/**
* 贊助系統
* enable: true 開啟, false 關閉
* tip: 贊助提示
* wechatQRCode: 微信二維碼地址，圖片地址應放在public目錄下
* alipayQRCode: 支付寶二維碼地址，圖片地址應放在public目錄下
* paypalUrl: Paypal二維碼地址
* @type {{paypalUrl: string, alipayQRCode: string, enable: boolean, wechatQRCode: string, tip: string}}
*/
export const donate = {
enable: true,
tip: "感謝大佬送來的咖啡☕",
wechatQRCode: "/WeChatQR.png",
alipayQRCode: "/AliPayQR.png",
paypalUrl: "https://paypal.me/cirry0?country.x=C2&locale.x=zh_XC",
}
友情鏈接配置#
/**
* 友情鏈接
* name: 博客名稱
* url: 博客地址
* avatar: 博客頭像
* descript: 博客描述
* @type {[{name: string, description: string, avatar: string, url: string}]}
*/
export const friendlyLinks = [
{
name: "Cirry's Blog",
url: 'https://cirry.cn',
avatar: "https://cirry.cn/avatar.png",
description: '前端開發的日常'
},
]
建議的配置#
Astro-yi 中有很多配置可以豐富我們的頁面功能，我有以下建議：
-
建議啟用 Waline 評論系統。如果不會安裝 Waline 系統，可以參考Waline 官網或者安裝 waline 評論功能。
-
备案號，如果您是中國大陸的使用者，建議添加。
-
個人鏈接，讓更多的人認識您和您的網站。
寫作技巧#
Markdown 文檔規範#
如果使用 Astro 作為博客的話，必不可少的需要使用到 Markdown，基礎的規範可以參考 Github 的寫作規範基本撰寫和格式語法。
在 Vscode 中自動生成 frontmatter#
寫每一篇文章中，如果需要手動去複製信息並填寫日期的話，也是一件很複雜的事情，所以我提供了一個在使用 Vscode 編寫博客時自動生成 frontmatter 的方法，具體內容可以參考這裡Vscode 添加 Markdown-Frontmatter 代碼片段。
編寫博客頁面#
在 Yi 的主題下，你只需要在src/content/blog中新建一個 md 文檔，就可以開始編寫你的博客了。
根據 Astro 的 Markdown 文檔標準，每個文檔都應該有自己的 frontmatter 信息，並在 md 文檔的頭部添加---作為開頭和結尾來標記 frontmatter，這給我們帶來了很多的便利:
-
比如我們想要給文檔添加標籤和分類或者置頂某些文檔，我們可以在 Frontmatter 中給文檔添加一些屬性，比如
tags,sticky等等。 -
比如為避免使用中文作為博客路徑和文件名稱，我們可以給 md 文檔單獨設置
title為中文標題，文件名使用英文並用-作為單詞連接符號。
在 Astro-Yi 中，您只需要最簡單的設置文檔標題title和創作日期date標籤，下面就是一個 Md 文檔最簡單的 frontmatter 的設置：
---
title: 菩薩蠻·花明月暗籠輕霧
date: 2024-03-05
---
如果您覺得這樣的文檔屬性不太夠用，Yi 也提供了更多的屬性供您使用，這是一個完整的屬性配置示例：
---
title: 菩薩蠻·花明月暗籠輕霧 // 文件名稱
description: 此詞當是李煜描寫自己與小周後幽會之情景，創作於北宋乾德二年（公元964年）前後。 // 文檔描述
date: "2023-01-25T10:23:31.210Z" // 發布日期
tags: // 文檔標籤支持數組和字符串
- 詩詞
category: 詩詞 // 文檔分類支持數組和字符串
sticky: 100 // 文檔置頂權重，數字越大，權重越大
slug: poem/ci // 文檔永久鏈接
mathjax: false // 是否開啟公式顯示
draft: false // 是否為草稿
toc: true // 是否需要文章標題目錄
donate: false // 是否需要開啟贊助功能
comment: false // 是否需要開啟評論功能
---
以上的屬性除了title和date，其餘都是可選的或者是有默認值的，您可以在src/content/config.js中修改他們是否可選或者默認值。
編寫動態頁面#
在 Yi 的主題下，你只需要在src/content/feed中新建一個 md 文檔，就可以開始編寫你的動態了。
動態頁面應該是類似朋友圈、微博、推特這樣，作為一個臨時想說或者想吐槽一些什麼的地方。
所以沒有給它添加過多的 frontmatter 限制，您甚至不需要設置title（當然這樣的內容也不需要 title），但是我們知道發布一個消息，最重要的屬性就是發佈時間，所以需要設置date。
所以動態頁面的 Md 文檔的 frontmatter 的基礎設置應該是這樣：
---
date: 2023-01-25 10:23:31
---
加載本地圖片#
將你的圖片文件放在/public/images目錄下，如果沒有images文件夾就創建一下 ，然後在 Markdown 中使用絕對路徑/images/xx.png引用即可。
比如您有一張圖片名為xxx.png， 將其移動到/public/images/2024/文件夾下，那您只需要在 md 文件中，這樣引入就可以正常使用了。
修改圖標#
博客中的所有的圖標都是使用開源圖標庫remixicon，可以自行替換自己喜歡的圖標。