Astro Blog Theme Curve

本倉庫是基於 Astro 構建的部落格主題。名為主題，實際是一個完整的、開箱即用的部落格模板。美學基礎來自 imsyy 大神釋出的基於 VitePress 的部落格主題 Curve。

Preivew

• Image:

• Live: 陳叔叔的部落格（Vercel）。

為什麼要做這個主題？

大神的主題似乎有出現小 bug，即在生產模式下，當某個 category 或 tag 有超過一頁的列表項時，切換分頁會導致頁面無法正常渲染。由於原主題在開發模式下運行良好，因此我無法確定問題的根源（才疏學淺）。因此一不做二不休，我決定僅基於原主題的美學基礎，自行在 Astro 上復現一個部落格主題。然而，由於大神的水平遠超於我，因此有一些功能復現及其失敗，有一些甚至無法復現，敬請諒解。

技術群

• Astro
• React
• TypeScript
• Tailwind CSS
• SCSS
• Vercel Serverless Function

已經實現的功能和提上日程的功能

已經實現的功能

• 文章列表
• 文章分類
• 文章標籤
• 基本動畫和過渡效果
• 文章目錄
• 集成 Dewvine
• 集成 Vercel Serverless Function 部署

尚未實現的功能

• 文章搜索
• 基於 Twikoo 的文章評論系統
• 文章分享功能
• 檔案鎖
• 其他尚未想到的點子

如何使用

1. Clone 本倉庫

git clone https://merak.axiomatrix.org/Axiomatrix_Org/astro-blog-theme-curve.git

2. 安裝依賴（推薦使用 pnpm）

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 官方文檔 進行部署到其他靜態網站伺服站。要將部落格部署到 Vercel，只需要將本倉庫 push 至 GitHub 或其他支援 Vercel 的 Git 服務器，然後在 Vercel 上選擇部署即可。注意，以 Vercel Serverless Function 方式 build 後，輸出目錄將不再是預設的 dist，而是 .vercel/output，請在 Vercel 上設置正確的部署路徑。

配置檔中的配置條列

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 規範

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