附astro部落格範(fàn)本安裝畫面

npm create astro@latest -- --範(fàn)本部落格

我們啟動(dòng)應(yīng)用程式

npm run dev

從 Astro 5 開始，引入了內(nèi)容層 API，該工具允許您在網(wǎng)站構(gòu)建期間從任何來源加載數(shù)據(jù)，並通過簡(jiǎn)單、安全類型的 API 訪問它。

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

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

Astro 的內(nèi)容層 API 將 dev.to 貼文整合到您的網(wǎng)站中

您可以使用 Astro 的內(nèi)容層 API 將 dev.to 貼文整合到您的網(wǎng)站中。雖然 dev.to 沒有特定的載入器，但您可以建立一個(gè)自訂載入器來使用其 API 並將貼文儲(chǔ)存在 Astro 的內(nèi)容集合中。

要實(shí)現(xiàn)此目的，請(qǐng)按照以下步驟操作：

1.配置對(duì)dev.to API的訪問

DEV_TO_API_URL=https://dev.to/api/
DEV_API_KEY=tu_clave_de_api

2. 建立一個(gè)函數(shù)來取得帖子

在專案的 src/lib/ 資料夾中，建立一個(gè) getArticles.js 文件，其中包含以下函數(shù)來取得貼文：

const { DEV_API_KEY, DEV_TO_API_URL } = import.meta.env;

export async function fetchArticles() {
  const res = await fetch(`${DEV_TO_API_URL}articles/me/published`, {
    headers: {
      "api-key": DEV_API_KEY,
    },
  });
  const data = await res.json();
  return data;
}

3.在Astro中定義集合

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

import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';
import { fetchArticles } from "../lib/getArticles";

const blog = defineCollection({
    // Load Markdown and MDX files in the `src/content/blog/` directory.
    loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
    // Type-check frontmatter using a schema
    schema: z.object({
        title: z.string(),
        description: z.string(),
        // Transform string to Date object
        pubDate: z.coerce.date(),
        updatedDate: z.coerce.date().optional(),
        heroImage: z.string().optional(),
    }),
});

const devTo = defineCollection({
  loader: async () => {
    const articles = await fetchArticles();
    return articles.map((article) => ({
      id: article.id.toString(),
      slug: article.slug,
      body: article.body_markdown,
      data: {
        title: article.title,
        date: new Date(article.published_at),
        tags: article.tag_list,
        summary: article.description,
        image: article.social_image,
      },
    }));
  },
});

export const collections = { blog, devto };

以上是測(cè)試開發(fā)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！