# Astro Blog Theme Curve

本倉庫是基於 [Astro](https://astro.build/) 構建的部落格主題。名為主題，實際是一個完整的、開箱即用的部落格模板。美學基礎來自 `imsyy` 大神釋出的基於 VitePress 的部落格主題 [Curve](https://github.com/imsyy/vitepress-theme-curve)。

## Preivew
- Image:

![Preview](./public/snipaste.png)

- 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