goulven clech.dev

我的個人博客，使用 Astro、TypeScript 和 Tailwind CSS 製作。直播於 goulven-clech.dev，由 Vercel 主持。

原始碼是在 0BSD 許可證下提供的，感謝歸屬，但不是必需的。部落格文字內容依據 CC BY 4.0 契約提供，需註明出處。但對於兩者，您都可以出於任何商業或個人目的自由使用、複製、修改和/或分發。

有些條目可能會引用外部來源的文字、圖像或資源：它們的原始許可證適用，我會指出作者（如果已知）。

顯著特點

從本質上講，這個項目看起來就像任何用 Astro 製作的博客，您可以從閱讀我的文章“用 Astro 啟動博客”開始。但是，我逐漸添加了一些您可能感興趣的原創功能，以下是主要功能：

• 搜尋列：僅使用 Astro 和 Web Components 製作，根據使用者的輸入過濾部落格條目。

• 目錄：使用 Astro 和 MDX，根據標題產生目錄。帶有嵌套列表。

• 開放圖書館和 Google 地圖區塊：在部落格條目中很好地顯示 API 結果。

• 深色模式：在淺色、深色和系統配色之間切換。使用本地儲存來保存使用者的選擇。

• 自訂圖像服務：從 Erika 的部落格檢索，提高效能並在圖像載入期間顯示佔位符。

專案結構

 /
├── src/
│   ├── content/ -> Sub repository
│   ├── assets/
│   │   └── base.css
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── env.d.ts
│   └── [...utils].ts
├── public/
│   └── Iosevka-Regular.woff2
├── [... config files]
├── README.md
└── package.json

pages/包含此部落格的每個頁面作為.astro檔案。

layouts/和components/包含每個 Web 元件作為「.astro」檔案。

命令

命令	行動
pnpm install	安裝依賴項
pnpm run dev	在localhost:3000啟動本機開發伺服器
pnpm run build	將您的生產網站建置到./dist/
pnpm run preview	在部署之前在本地預覽您的構建
pnpm run astro ...	執行 CLI 指令，例如astro add 、 astro check
pnpm run astro --help	使用 Astro CLI 取得協助

所有命令都應從專案的根目錄、終端機運行。除了 PNPM，您還可以使用 NPM 或 Yarn。