一個基於 Astro 與 TailwindCSS 所打造的個人技術部落格主題
這是 SamHacker 的個人技術部落格，使用 Astro 與 TailwindCSS 所打造，搭配 React，結合了 MDX 作為文章內容的撰寫方式。
Important
This is the Chinese (Traditional) version of the documentation. For the English version, please refer to README_EN.md.
將專案原始碼下載後，可以透過以下指令在本地端啟動開發伺服器：
pnpm install
pnpm dev若要進行生產環境的建置，可以使用以下指令：
pnpm build
pnpm preview詳細部署資訊請參考 DEPLOYMENT.md。
- 基於 Astro v6 打造
- 支援 Markdown 與 MDX 內容撰寫
- 完全面向深色主題設計
- 響應式圖片處理
- 整合 shadcn/ui 元件庫
- 支援 RSS 與 Sitemap 生成
- 內建留言版功能（Giscus）
- 支援全文搜尋功能（Pagefind）
- 文章目錄
- 基於 KaTeX 的數學公式渲染
- 使用 Expressive Code Block 強化程式碼區塊顯示
- 基於 Pagefind 的即時搜尋建議
- 預設支援 Google Tag Manager
- 特色 404 頁面
- 內建對
Pangu.js的支援以自動處理中文排版 - 提供如 GitHub 卡片、資料夾結構、步驟指示器等多種內建組件以豐富內容呈現
- 支援多國語系
Note
Pangu是一個自動調整中英文、數字與符號間距的工具，在文章中出現中英文交雜的情況下，會在中英文間加入適當的空格以提升閱讀體驗。
如需關閉此項功能請前往 src/astro.config.mjs 中的 rehypePlugins 處移除或註解 rehypePangu 即可。
例如：歡迎來到這個基於SHBlog Next的網站，這個網站由Astro.js、Tailwind CSS和React等技術棧打造。 會自動轉換為 歡迎來到這個基於 SHBlog Next 的網站，這個網站由 Astro.js、Tailwind CSS 和 React 等技術棧打造。
有關 Pangu.js 的更多資訊，請參考其 GitHub 頁面。
歡迎有興趣的開發者一同參與此專案，若有任何建議或問題，請隨時提出 Issue 或 Pull Request。
- Node.js v22 以上
- pnpm v10 以上
若您有興趣協助開發此專案，請參考 CONTRIBUTING.md。
特別感謝以下專案與資源的支持：
- Astro.js
- TailwindCSS
- React
- MDX
- Vercel 提供的雲端部署服務（用於部署Demo站）
- Pagefind 提供的全文搜尋解決方案
- Medium Zoom 提供的燈箱功能
- Giscus 與 Utterances 提供的留言板解決方案
- Pangu.js 協助提升中文排版品質
- Stable Diffusion A1111 WebUI 提供的圖片生成技術與 wainsfwillustrious模型（用於生成部落格關鍵視覺圖）
此外，也要感謝以下網站提供的設計啟發與靈感：
- 毛哥EM資訊密技
- SamHacker
- Fuwari主題
- Zhenyuan Dev 與開放原始碼界的各位
另外感謝所有開源社群的貢獻，讓這個專案得以順利完成！
由 SamHacker 製作 ｜ 透過 ❤️ 建立