astro theme cactus
v5.0.0
Astro Cactus 是一個使用 Astro 框架建立的簡單的固執的啟動器。用它來創建易於使用的部落格或網站。
查看 Netlify 上託管的演示
從此模板建立一個新的儲存庫。
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactus將 pnpm 替換為您選擇的 npm/yarn
| 命令 | 行動 |
|---|---|
pnpm install | 安裝依賴項 |
pnpm dev | 在localhost:3000啟動本機開發伺服器 |
pnpm build | 將您的生產網站建置到./dist/ |
pnpm postbuild | Pagefind 腳本用於建立部落格文章的靜態搜尋 |
pnpm preview | 在部署之前在本地預覽您的構建 |
pnpm sync | 根據src/content/config.ts中的配置產生類型 |
src/site.config.ts以取得基本站點元數據astro.config.ts/public資料夾中的檔案：src/styles/global.css 。src/site.config.ts中找到。您可以在此處找到更多主題和選項。src/components/SocialList.astro中的社交連結以新增/替換您的媒體設定檔。可以根據 Astro Icon 的說明在 @ icones.js.org 找到圖示。src/content/post/和src/content/note/中為您的部落格建立/編輯貼文和註解。請參閱下文以了解更多詳情。src/pages/og-image/[slug].png.ts到標記函數，您可以根據需要編輯 html/tailwind-classes 。您可以使用這個遊樂場來幫助您的設計。src/content/post/social-image.md中找到範例。有關 frontmatter 的更多資訊可以在這裡找到font-mono ，位於全域 css 檔案src/styles/global.css中。您可以透過刪除變體font-mono來更改字體，之後 TailwindCSS 將預設為font-sans字體系列堆疊。 如果您已分叉模板，則可以將分叉與您自己的項目同步，請記住不要單擊“放棄更改”，因為您將丟失自己的更改。
如果您有模板儲存庫，則可以將此範本新增為遠端模板，如此處所述。
該主題利用 Content Collections 組織本地 Markdown 和 MDX 文件，並使用 schema -> src/content/config.ts對 frontmatter 進行類型檢查。
新增貼文/註解就像將 .md(x) 檔案新增至src/content/post和/或src/content/note資料夾一樣簡單，其檔案名稱將用作 slug/url。此模板中包含的帖子是如何建立 frontmatter 的範例。此外，Astro 文件有關於 Markdown 頁面的詳細部分。
| 財產（* 必填） | 描述 |
|---|---|
| 標題 * | 不言自明。用作帖子的文字連結、帖子頁面上的 h1 以及頁面標題屬性。最大長度為 60 個字符，在src/content/config.ts中設置 |
| 描述 * | 與上方類似，用作 seo 描述屬性。最小長度為 50 個字符，最大長度為 160 個字符，在帖子架構中設定。 |
| 發布日期 * | 又很簡單。若要變更日期格式/區域設定（目前為en-GB ） ，請更新src/site.config.ts中的日期選項。請注意，如果需要，您也可以將其他選項傳遞給元件<FormattedDate> 。 |
| 更新日期 | 這是一個可選日期，表示帖子的更新時間，格式與發布日期相同。 |
| 標籤 | 任何已建立的帖子的標籤都是可選的。任何新標籤都會顯示在yourdomain.com/posts和yourdomain.com/tags中，並產生頁面yourdomain.com/tags/[yourTag] |
| 封面圖片 | 這是一個可選對象，它將在帖子頂部添加封面圖像。包含src ：「影像路徑」和alt ：「影像 alt 」。您可以在src/content/post/cover-image.md中查看範例。 |
| 影像 | 這是一個可選屬性。如果未提供此屬性，將為每個帖子自動生成 OG 圖像。如果您想為特定帖子創建自己的主題，請包含此屬性和圖像鏈接，主題將跳過自動生成主題。 |
| 草稿 | 這是一個可選屬性，因為它在架構中預設為 false。透過添加 true，該帖子將在許多地方從生產版本中過濾掉，包括。 getAllPosts() 呼叫、og-images、RSS feed 和產生的頁面。您可以在src/content/post/draft-post.md中查看範例 |
| 財產（* 必填） | 描述 |
|---|---|
| 標題 * | 字串，最大長度 60 個字元。 |
| 描述 | 用於頭部元描述屬性。 |
| 發布日期 * | ISO 8601 格式，允許偏移。 |
Astro Cactus 包含一個有用的 VSCode 片段，它為帖子和註釋創建一個 frontmatter“存根”，可在此處找到 -> .vscode/post.code-snippets 。開始在新建立的 .md(x) 檔案中輸入單字frontmatter以觸發它。 Visual Studio 程式碼片段在 Mac 上透過 (⌃Space)、在 Windows 上透過 (Ctrl+Space) 顯示在 IntelliSense 中。
這種整合帶來了用於搜尋部落格文章和筆記的靜態搜尋功能。在目前的形式中，pagefind 僅在網站建立後才起作用。該主題添加了一個建置後腳本，該腳本應在 Astro 建置網站後運行。您可以透過運行建置和建置後進行本機預覽。
搜尋結果僅包括貼文和註釋的頁面。如果您想要包含其他/所有頁面，請將屬性data-pagefind-body刪除/重新定位到src/layouts/BlogPost.astro和src/components/note/Note.astro中找到的文章標籤。
它還允許您透過在部落格文章的 frontmatter 中添加的標籤來過濾文章。如果您想刪除它，請從src/components/blog/Masthead.astro的連結中刪除資料屬性data-pagefind-filter="tag" 。
如果您不想包含此集成，只需刪除元件src/components/Search.astro ，然後從 package.json 卸載@pagefind/default-ui和pagefind即可。您還需要從此處刪除建置後腳本。
您可以透過延遲載入 Web 元件樣式來減少 css 的初始 css 負載，如此處所示。
您可能想要追蹤部落格/網站的訪客數量，以便了解趨勢和您創建的熱門貼文/頁面。人們可以使用許多供應商，包括 vercel、netlify 和 cloudflare 等 Web 主機。
該主題/模板不包含特定的解決方案，因為存在一些人可能會或可能不會使用的許多用例和/或選項。
設定時，您可能會被要求在網站的HEAD標籤內包含一個片段，該片段可以在src/layouts/Base.astro中找到。或者，您可以在src/components/BaseHead.astro中加入程式碼片段。
Astro 文件有一個很棒的部分，詳細介紹如何在各種平台上部署您自己的 Astro 網站及其特性。
預設情況下，網站將建置到/dist目錄（請參閱上面的命令部分）。
這個主題的靈感來自 Hexo 主題 Cactus
麻省理工學院
