hello astro

你好-astro

Hello Astro 是一個功能齊全的 Astro 多功能入門主題，以 Typescript 和 TailwindCSS 編寫。它支援基於 Markdown 和 MDX 的頁面和部落格文章。

Hello Astro 可用於以下任何/所有用途：

• 企業/行銷網站
• 部落格
• 文件站點
• 支持照片庫的作品集網站

使用以下整合：

• @astrojs/mdx
• @astrojs/markdoc
• @astrojs/網站地圖
• @astrojs/rss
• @astrojs/順風
• @astrojs/alpinejs
• 天文圖示
• astro 搜尋引擎優化
• astro-機器人-txt

此外，SVG 和 PNG 插圖源自 Undraw

這個專案最初是作為 hello-gatsby-starter 的簡單的連接埠開始的，但現在包含更多功能（明/暗模式、類別頁面、搜尋、圖表、數學等等！）

特徵

• 帶有 frontmatter 的全功能部落格（標題、描述、作者、日期、圖像、標籤）
• 高效能、低開銷、最少的 Javascript (AlpineJS)
• 透過 lunrjs 基於客戶端的部落格頁面全文搜尋（搜尋索引僅在頁面上第一次呼叫搜尋時載入）
• 作者、類別和標籤的索引頁和單獨頁面，包括分頁
• 支援 RSS feed、網站地圖和 robots.txt
• SVG 設計（unDraw、Hero Patterns、Iconify）
• 支援代碼語法高亮
• 全面的 SEO 支援，包括透過 JSON-LD 的 Open Graph、Twitter Cards 和 Schema.org
• 根據 TailwindCSS 推薦，完全支援淺色和深色 UI 模式以及以下系統首選項
• 自訂404錯誤頁面
• 透過 remark-math/rehype-katex 使用 KaTeX 顯示數學方程式（包含在$ ... $或$$ ... $$中）
• 顯示 Mermaid、Markmap、PlantUML 圖（使用mermaid 、 markmap和plantuml語言寫成程式碼區塊）
• 使用Map元件以地理座標和縮放層級顯示地圖（還需要包含extra: ['map']是載入頁面 CSS/JS 資源的 frontmatter）
• 計算並顯示部落格文章的閱讀時間
• 僅在需要時在每個頁面和每個包的基礎上加載外部庫的 CSS/JS 資源 - 沒有不必要的膨脹
• 使用 PhotoSwipe 的照片庫和燈箱（包括 EXIF 標籤的顯示）
• 使用 Swiper 的輪播組件
• 文件頁面（以 astro 文件 starter 為模型，但使用 Tailwind）

外部封裝

啟動使用以下外部套件：

• 阿斯特羅
• 打字稿
• TailwindCSS 與 TailwindUI
• 圖示化
• 英雄圖案
• 取消繪製插圖
• MDX 和 Markdown
• 用於連結資料的 Schema.org 和 JSON，使用 schema-dts 進行類型檢查
• Facebook 使用的 Open Graph
• 推特卡
• 阿爾派JS
• 使用 Lunr 進行本地全文搜索
• 透過 remark-math 和 rehype-katex 使用 KaTeX 的數學方程
• 使用 Mermaid、Markmap 和 PlantUML 繪製圖表
• 使用傳單打開街道地圖
• 閱讀時間
• 照片滑動
• 埃西弗
• 刷卡器
• 備註表情符號

它遵循 JAMstack 架構，自動從 Git 儲存庫建立靜態版本。該演示部署在 Github Pages 上。

專案結構

在此啟動器中，您將看到以下資料夾和檔案：

 /
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   ├── image.png
│   │   └── gallery/
│   │       └── gallery-name/
│   │           └── image.jpg
│   ├── components/
│   │   └── header.astro
│   ├── content/
│   │   ├── blog/
│   │   |   └── 2022-08-01-post.md
│   │   ├── doc/
│   │   |   └── documentation-page.md
|   │   └── config.ts
│   ├── layouts/
│   │   ├── base.astro
│   │   ├── blog.astro
│   │   └── doc.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── contact.astro
│   └── config.ts
└── package.json

Astro 在src/pages/目錄中尋找.astro 、 .md或.mdx檔案。每個頁面都根據其檔案名稱公開為路徑。

src/components/是我們放置任何 Astro 元件的地方，類似的src/layouts/是放置佈局的地方。

影像可以放置在src/assets/中。

部落格和文件內容在src/content中建立為 Markdown 或 MDX 檔案的集合。

任何靜態資產，例如。圖片，可以放在public/目錄下。

？命令

所有命令都從專案的根目錄的終端運行：

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

發布歷史

• 1.0.0：初始版本
• 1.0.1：將社群影像移至 src，改進 coverImage 處理
• 1.0.2：升級軟體套件到最新
• 1.1.0：更新至 astro v2.x，現在適用於節點 18 和 19
• 2.0.0：新版本支援Astro收藏！也澄清這是一個多用途主題。搜尋現在可以包括 Markdown 和 MDX 頁面！
• 2.0.1：更新了螢幕截圖，並改進了登陸頁面。
• 2.1.0：更新到最新的軟體包，修復了開發鏈接，從個人博客向後移植功能，包括下一個/上一個鏈接，Markdown 中的照片庫支持以及改進的分頁控制。
• 2.2.0：修復了 lint 錯誤，重新實作了地圖、lightbox 和 carousel，以使用 leaflet、photoswipe 和 swiper 包，而不是依賴外部 CDN。
• 2.2.1：更新至 astro 2.0.10，修正了基礎資源載入問題
• 2.3.0：刪除了部落格和文件內容的佈局
• 2.4.0: @astrojs/images現在支援svg ，因此無需特殊處理
• 2.4.1：在部落格和文件貼文中使用渲染的 frontmatter，修復圖表未渲染的問題。
• 2.4.2：更新包
• 3.0.0：主要更新：
  • 使用新的 Astro 優化資產支持
  • 新天文標誌
  • 優化後草稿過濾
  • 清理畫廊
  • 修復了 SEO 錯誤
  • 清除了 lint 錯誤
  • 將作者和類別遷移到集合並使用基於 Astro 2.5.0 的引用完整性
  • 將社交連結轉換為資料集合（需要 Astro >2.5.0）
  • 更新了網站圖示和標題元數據
  • 改進搜尋以包含文檔
• 3.1.0：增強更新：
  • 將套件管理器從yarn遷移到pnpm
  • 頭部連結的參考基礎
  • 新增了 eslint 和 prettier 插件
  • 修復 seo 組件中的影像屬性錯誤
  • 更新了 tsconfig 以匹配 astro strict
  • 更新 Katex CSS 鏈接
  • 修正了作者未出現在部落格卡中的問題
  • 新增了 Markdoc 支持
• 3.1.1：小更新：
  • 延遲載入圖片
  • 透過 remark-emoji 支持 Github 表情符號
• 3.1.2：小修復：
  • 檢查空類別
  • 稍微改進了聯絡頁面
  • 改進了下一個/上一個處理
  • 更新套件
  • 減小搜尋按鈕的大小以適應最小寬度
  • 將頁面的映像選項從 object-contain 變更為 object-cover
  • 固定 site.webmanifest
• 3.1.3：小修復：
  • 升級到@astrojs/markdoc 0.4.x 和最新的 astro
  • 修正了 [slug].astro 中的 Props 聲明
  • 由於此問題禁用了 Markdoc 範例檔案：withastro/astro#7520
• 3.1.4：小幅增強：
  • svg 和點陣圖的統一影像處理
  • 啟用視圖轉換
• 3.1.5：小幅增強：
  • 升級到最新版本的軟體包
  • 修復了較小的 astro 檢查錯誤
• 3.2.0：主要增強：
  • 更新至 Astro 3.x
  • 實施寬鬆的內容安全策略
• 3.2.1：小幅增強：
  • 更新了軟體包，解決了 astro 檢查錯誤
• 3.2.2：小幅增強：
  • 更新套件
  • 修復了搜尋的 json.ts 返回類型
• 3.2.3：維護：
  • 修正了 mermaid v9 不再透過升級到最新版本的 mermaid 工作的問題
  • 升級包
• 3.2.4：小幅增強：
  • 升級到 Astro 4.x
• 3.2.5：小幅增強：
  • 升級包
  • 刪除 mermaid.initialize()
• 3.2.6：維護：
  • 停用 ViewTransition，因為它不適用於美人魚
• 3.3.0：維護：
  • 升級到最新的軟體包和 astro-icon 1.x
• 3.3.1：維護：
  • 升級到最新的軟體包並修復了 astro 檢查錯誤
• 3.3.2：維護：
  • 升級到最新的軟體包
  • 修復了由於更嚴格的高山檢查而導致搜索不起作用的問題
  • 遷移到標準 astro tsconfig.json
  • 修復了 astro 檢查錯誤
• 3.4.0：小改動：
  • 更新套件
  • 將英雄圖示替換為 v2
  • 改進了 RSS 和搜尋索引，包括作者姓名和電子郵件
  • 讓 BlogHero 接受帖子作為 props 而不是 frontmatter
  • 將 Markdown 頁面移至內容集合
  • 消除 Frontmatter 類型
• 4.0.0：主要變化：
  • 更新套件
  • 刪除了 @types/photoswipe 和 photoswipe tsconfig
  • 已移至 RSS 架構
  • getPosts() 函數
  • 模式標籤
  • 自動產生側邊欄鏈接
  • 改進的 RSS 和搜尋元數據