前端工程師的技術筆記與生活紀錄

這是一個基於 VitePress 構建的個人技術部落格，主要記錄前端開發學習筆記、技術文章，以及偶爾的生活雜談、電影分享。

線上網站：hsiu.soy

• 🎨 自定義主題設計 - 基於 VitePress 的完全客製化主題
• 📄 自動分頁系統 - 智能分頁，每頁展示 10 篇文章
• 🏷️ 標籤與分類 - 完整的文章分類和標籤系統
• 📅 時間線歸檔 - 按年份組織的文章歸檔
• 📊 閱讀進度 - 實時閱讀進度指示器
• 💬 留言系統 - 整合 Giscus 評論功能
• 🔍 本地搜索 - 快速的站內搜索引擎
• 📡 RSS 訂閱 - 支援 RSS feed 訂閱
• 🌙 深色模式 - 完整支援深色主題切換
• 📈 數據分析 - Google Analytics + Cloudflare Analytics
• 🎯 SEO 優化 - Open Graph + JSON-LD 結構化數據
• ⚡ 響應式設計 - 完美適配各種螢幕尺寸

• VitePress 1.6.3 - 靜態站點生成器
• Vue 3 3.5.13 - 漸進式 JavaScript 框架
• Vite - 下一代前端構建工具

• UnoCSS 66.1.0-beta.8 - 原子化 CSS 引擎（Tailwind v4 預設）
• Noto Serif TC - 中文字型

• @vueuse/core 13.0.0 - Vue 組合式 API 工具集
• date-fns 4.1.0 - 現代化日期處理函式庫
• gray-matter 4.0.3 - Markdown Frontmatter 解析器
• globby 14.1.0 - 檔案路徑匹配工具

• vitepress-plugin-rss 0.3.1 - RSS feed 生成
• Giscus - GitHub Issues 驅動的留言系統

the-blog/
├── .vitepress/              # VitePress 配置
│   ├── config.mts           # 主配置檔案
│   ├── global-config.ts     # 全域設定
│   └── theme/               # 自定義主題
│       ├── components/      # Vue 組件（20+ 個）
│       ├── composable/      # 組合式函數
│       ├── utils/           # 工具函數
│       └── custom.css       # 自定義樣式
│
├── articles/                # 內容目錄
│   ├── posts/               # 部落格文章
│   ├── pages/               # 特殊頁面（關於、標籤、分類、歸檔）
│   ├── public/              # 靜態資源
│   └── index.md             # 首頁
│
├── template/                # 文章模板
├── package.json             # 專案依賴
├── tsconfig.json            # TypeScript 配置
├── uno.config.ts            # UnoCSS 配置
└── README.md                # 專案說明

• Node.js 21.5.0 或更高版本
• npm 或 yarn 或 pnpm

npm install

npm run dev

啟動本地開發伺服器，預設在 http://localhost:5173 開啟

npm run build

構建產物會輸出到 .vitepress/dist 目錄

npm run preview

在本地預覽生產構建的結果

在 articles/posts/ 目錄下建立 Markdown 檔案，建議使用日期命名：

articles/posts/YYYY-MM-DD-article-title.md

每篇文章需要包含 YAML Frontmatter：

---
title: 文章標題 # 必填
date: 2024-11-05 # 必填，格式 YYYY-MM-DD
description: 文章簡短描述 # 建議填寫，用於 SEO
category: JavaScript # 分類（只能有一個）
tags: # 標籤（可多個）
    - Vue
    - TypeScript
    - 前端開發
pin: 1 # 可選，置頂文章（數字越大越前面）
publish: true # 可選，是否發布（影響 RSS）
---
文章內容從這裡開始...

本部落格支援在 Markdown 中直接使用 Vue 組件：

## 這是標題

<BaseTag>標籤範例</BaseTag>

<BaseGithubGistIframe gist-id="your-gist-id" />

修改 .vitepress/config.mts：

export default defineConfig({
    title: '持續！修鍊之路', // 站點標題
    description: '...', // 站點描述
    lang: 'zh-TW', // 語言
    // ... 其他配置
});

在 .vitepress/config.mts 中修改 postsPerPage：

themeConfig: {
    postsPerPage: 10,  // 每頁顯示的文章數量
}

在 .vitepress/config.mts 的 themeConfig.socialLinks 中設定：

socialLinks: [
    { icon: 'github', link: 'https://github.com/yourusername' },
    // 新增更多社群連結...
];

編輯 .vitepress/theme/custom.css：

:root {
    --vp-c-brand-1: #2563eb; /* 主要品牌色 */
    --vp-c-brand-2: #3b82f6; /* 次要品牌色 */
    /* ... 更多自定義變數 */
}

1. 在 .vitepress/theme/components/ 建立組件
2. 在 .vitepress/theme/index.ts 中註冊：

import MyComponent from './components/MyComponent.vue';

export default {
    extends: DefaultTheme,
    enhanceApp({ app }) {
        app.component('MyComponent', MyComponent);
    },
};

修改 uno.config.ts 以自定義工具類別：

export default defineConfig({
    presets: [
        presetWind4(),
        // 新增更多 presets...
    ],
});

• Vercel - 零配置部署（推薦）
• Netlify - 自動化部署
• GitHub Pages - 免費靜態託管
• Cloudflare Pages - 全球 CDN

{
    "buildCommand": "npm run build",
    "outputDirectory": ".vitepress/dist",
    "installCommand": "npm install"
}

如需使用分析工具，設定以下環境變數：

• VITE_GA_ID - Google Analytics 追蹤 ID
• 其他自定義環境變數...

本主題包含 20+ 個自定義 Vue 組件：

• NewLayout.vue - 自定義頁面佈局

• BaseTag - 標籤按鈕
• BaseIcon - 圖標組件
• BaseButton - 按鈕組件
• BaseFlipCard - 翻轉卡片（作者頭像）
• BaseSidebar - 側邊欄容器
• BaseTreeview - 樹形結構展示

• PostMeta - 文章元資料（日期、標籤、閱讀時間）
• PostSupports - 點讚/收藏按鈕
• PostComment - Giscus 留言系統
• PostNextPrevLinks - 上下篇文章導航
• PostSuggestions - 相關文章推薦
• PostReadingProgressIndicator - 閱讀進度條

• Page - 主文章列表頁
• Tags - 標籤頁面
• Category - 分類頁面
• Archives - 歸檔頁面
• NotFoundPage - 404 頁面

許文修 (Wen-Hsiu Hsu)

• 🎯 職位：前端工程師 / 攝影 / 生活紀錄
• 💡 座右銘：「程式碼之外，還有生活的藝術」
• 🔗 個人網站：resume.hsiu.soy

• GitHub
• LinkedIn
• Threads
• Photography Gallery
• Email

本專案採用 MIT License 授權 - 詳見 LICENSE 文件

• VitePress - 強大的靜態站點生成器
• Vue.js - 漸進式 JavaScript 框架
• UnoCSS - 即時原子化 CSS 引擎

如果這個專案對你有幫助，歡迎給個 ⭐ Star！

最後更新：2024-11-05