167 lines
5.8 KiB
Markdown
167 lines
5.8 KiB
Markdown
# Astro Blog Theme Curve
|
||
|
||
本倉庫是基於 [Astro](https://astro.build/) 構建的部落格主題。名為主題，實際是一個完整的、開箱即用的部落格模板。美學基礎來自 `imsyy` 大神釋出的基於 VitePress 的部落格主題 [Curve](https://github.com/imsyy/vitepress-theme-curve)。
|
||
|
||
## Preivew
|
||
- Image:
|
||
|
||
|
||
|
||
- Live: [陳叔叔的部落格（Vercel）](https://kynix-blog.vercel.app/)。
|
||
|
||
## 為什麼要做這個主題？
|
||
大神的主題似乎有出現小 bug，即在生產模式下，當某個 category 或 tag 有超過一頁的列表項時，切換分頁會導致頁面無法正常渲染。由於原主題在開發模式下運行良好，因此我無法確定問題的根源（才疏學淺）。因此一不做二不休，我決定僅基於原主題的美學基礎，自行在 Astro 上復現一個部落格主題。然而，由於大神的水平遠超於我，因此有一些功能復現及其失敗，有一些甚至無法復現，敬請諒解。
|
||
|
||
## 技術群
|
||
- Astro
|
||
- React
|
||
- TypeScript
|
||
- Tailwind CSS
|
||
- SCSS
|
||
- Vercel Serverless Function
|
||
|
||
## 已經實現的功能和提上日程的功能
|
||
### 已經實現的功能
|
||
- [x] 文章列表
|
||
- [x] 文章分類
|
||
- [x] 文章標籤
|
||
- [x] 基本動畫和過渡效果
|
||
- [x] 文章目錄
|
||
- [x] 集成 [Dewvine](https://merak.axiomatrix.org/Axiomatrix_Org/Dewvine)
|
||
- [x] 集成 Vercel Serverless Function 部署
|
||
|
||
### 尚未實現的功能
|
||
- [ ] 文章搜索
|
||
- [ ] 基於 Twikoo 的文章評論系統
|
||
- [ ] 文章分享功能
|
||
- [ ] 檔案鎖
|
||
- [ ] 其他尚未想到的點子
|
||
|
||
## 如何使用
|
||
1. Clone 本倉庫
|
||
|
||
```bash
|
||
git clone https://merak.axiomatrix.org/Axiomatrix_Org/astro-blog-theme-curve.git
|
||
```
|
||
|
||
2. 安裝依賴（推薦使用 pnpm）
|
||
|
||
```bash
|
||
cd astro-blog-theme-curve
|
||
pnpm install
|
||
```
|
||
|
||
3. 配置檔：整個部落格的配置檔位於 `src/config/blog.config.ts` 檔案中，具體的配置條列將在下方列出。
|
||
4. 開始寫作：本專案已集成對 `markdown` 和 `mdx` 的支援，以及現代化的公式 `katex` 支援。所有文章必須放置在 `src/content/articles` 目錄下，並且以 `.md` 或 `.mdx` 為副檔名。Front Matter 部分也有具體的要求，詳情請參見下方的 Front Matter 規範。
|
||
5. 預覽：在開發模式下，執行 `pnpm dev` 即可在本地啟動一個開發伺服器，並且在 `http://localhost:4321` 上預覽部落格。
|
||
6. 部署到 Vercel：目前，部落格僅支援 Vercel Serverless Function 部署。或者你也可以參見 [Astro 官方文檔](https://docs.astro.build/en/guides/deploy/) 進行部署到其他靜態網站伺服站。要將部落格部署到 Vercel，只需要將本倉庫 push 至 GitHub 或其他支援 Vercel 的 Git 服務器，然後在 Vercel 上選擇部署即可。注意，以 Vercel Serverless Function 方式 build 後，**輸出目錄將不再是預設的 `dist`，而是 `.vercel/output`**，請在 Vercel 上設置正確的部署路徑。
|
||
|
||
## 配置檔中的配置條列
|
||
```typescript
|
||
type BlogConfigType = {
|
||
// 部落格標題
|
||
title: string,
|
||
// 作者名稱，將顯示在部落格底部的版權聲明中，除非你在文章的 Front Matter 中指定了其他作者
|
||
author: string,
|
||
// 部落格描述
|
||
description: string,
|
||
// 部落格首次部署的日期，格式為 YYYY-MM-DD
|
||
birth: string,
|
||
// 部落格部署後的基座 url
|
||
base: string,
|
||
// 部落格頂部的導航選單
|
||
nav: {
|
||
// 一級導航選單項的名字
|
||
title: string,
|
||
// 一級導航選單項的 icon，使用 [tabler Icons](https://tabler.io/icons) 的 icon 名稱
|
||
icon?: string,
|
||
// 一級導航選單項的連結
|
||
link?: string,
|
||
// 二級導航選單項
|
||
children?: {
|
||
title: string,
|
||
icon?: string,
|
||
link: string
|
||
}[]
|
||
}[],
|
||
// Dewvine 配置，詳情參考 Dewvine 官方文檔
|
||
dewvine: {
|
||
url: string,
|
||
type: string,
|
||
lang: string,
|
||
length: number,
|
||
number: number
|
||
},
|
||
// 部落格首頁側欄的個人資料
|
||
profile: {
|
||
// 你的名字
|
||
name: string,
|
||
// 你的大頭貼 url
|
||
avatar: string,
|
||
// 你的座右銘
|
||
motto: string,
|
||
// 你的社交連結，建議最多兩個
|
||
social: {
|
||
icon: string,
|
||
link: string
|
||
}[]
|
||
},
|
||
// 部落格首頁的重大節日計時器
|
||
timer: {
|
||
// 重大節日的名稱
|
||
name: string,
|
||
// 重大節日的日期，格式為 YYYY-MM-DD
|
||
time: string
|
||
},
|
||
// about 中的聯絡方式
|
||
social: {
|
||
icon: string,
|
||
link: string
|
||
}[],
|
||
// 致謝列表
|
||
thanks: {
|
||
// 致謝人員或網站的大頭貼 url
|
||
iconSrc: string,
|
||
// 致謝人員或網站的名字
|
||
name: string,
|
||
// 致謝人員或網站的描述
|
||
description: string,
|
||
// 致謝人員或網站的連結
|
||
url: string
|
||
}[],
|
||
// 友情鏈接
|
||
links: {
|
||
// 友鏈分組名稱
|
||
title: string,
|
||
// 友鏈分組描述
|
||
description: string,
|
||
// 分組的友鏈列表
|
||
links: {
|
||
// 友鏈的大頭貼 url
|
||
iconSrc: string,
|
||
// 友鏈的名字
|
||
name: string,
|
||
// 友鏈的描述
|
||
description: string,
|
||
// 友鏈的連結
|
||
url: string
|
||
}[]
|
||
}[]
|
||
}
|
||
```
|
||
|
||
## Front Matter 規範
|
||
```yaml
|
||
title: 文章標題，string，必填
|
||
description: 文章描述，string，可選
|
||
date: 文章發布日期，格式為 YYYY-MM-DD，string，必填
|
||
tags: 文章標籤，string[]，可選
|
||
categories: 文章分類，string[]，可選
|
||
cover: 文章封面圖片 url，string，可選（暫未實現）
|
||
author: 文章作者，string，可選
|
||
pin: 是否釘住文章，boolean，可選
|
||
gpt: FakeGPT 的生成內容，string，可選
|
||
```
|
||
|
||
## LICENSE
|
||
- MIT |