AstroJS：輕鬆將 Dev.to 整合到內容中

使用部落格範本啟動一個新項目

npm create astro@latest -- --範本部落格

我們啟動應用程式

cd [專案名稱] && npm run dev

從 Astro 5 開始，引入了內容層 API，該工具允許您在網站構建期間從任何來源加載數據，並通過簡單、安全類型的 API 訪問它。

此 API 可以靈活地處理來自各種來源的內容，例如本機 Markdown 檔案、遠端 API 或內容管理系統 (CMS)。透過使用特定模式定義內容“集合”，您可以有效地建立和驗證資料。此外，內容層 API 還提高了內容較多的網站的效能，加快了建置時間並減少了記憶體使用量。

https://astro.build/blog/astro-5/

Astro 的內容層 API 將 dev.to 貼文整合到您的網站中

您可以使用 Astro 的內容層 API 將 dev.to 貼文整合到您的網站中。儘管 dev.to 沒有特定的載入器，但您可以建立一個自訂載入器來使用其 API 並將貼文儲存在 Astro 的內容集合中。

要實現此目的，請按照以下步驟操作：

1.配置對dev.to API的訪問

在專案根目錄建立 .env 檔案
.env

2.在Astro中定義集合

在 src/content.config.ts 中，使用內容層 API 為 dev.to 貼文定義一個集合：

使用 Astro 範本建立專案時，它會自動產生部落格的集合

srccontent.config.ts

現在我們為 Dev.to 文章建立集合

這是
的完整程式碼 srccontent.config.ts

查看 schema 中字段定義的詳細信息，字段必須與 Astro 模板的博客集合相匹配，然後添加 Dev.to 帖子集合特有的字段。它們必須與資料類型具有相同的名稱，這樣我們就可以將 Astro 範本中的 Markdown 貼文與部落格部分中 Dev.to 中的 Markdown 貼文「合併」。

3. 在您的頁面上使用貼文：

您現在可以使用 getCollection 存取 Astro 元件或頁面中的 dev.to 貼文：

原文：

srcpagesblogindex.astro

現在我們將使用內聯條件對帖子進行迭代，如果是 devto，將重定向到網站上文章的 url https://dev.to/{username}/{slug-article }

 {
                        posts.map((post) => (
                            

儲存庫：https://github.com/jmr85/astro-devto

以上是AstroJS：輕鬆將 Dev.to 整合到內容中的詳細內容。更多資訊請關注PHP中文網其他相關文章！