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 的文章評論系統
文章分享功能
檔案鎖
其他尚未想到的點子

如何使用

Clone 本倉庫

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

安裝依賴（推薦使用 pnpm）

cd astro-blog-theme-curve
pnpm install

配置檔：整個部落格的配置檔位於 src/config/blog.config.ts 檔案中，具體的配置條列將在下方列出。
開始寫作：本專案已集成對 markdown 和 mdx 的支援，以及現代化的公式 katex 支援。所有文章必須放置在 src/content/articles 目錄下，並且以 .md 或 .mdx 為副檔名。Front Matter 部分也有具體的要求，詳情請參見下方的 Front Matter 規範。
預覽：在開發模式下，執行 pnpm dev 即可在本地啟動一個開發伺服器，並且在 http://localhost:4321 上預覽部落格。
部署到 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，可選

5.8 KiB Raw Permalink Blame History Unescape Escape