アストロブログテンプレートインストール畫面を添付

npm create astro@latest -- --template ブログ

アプリを起動します

npm run dev

Astro 5 以降、Content Layer API が導(dǎo)入されました。このツールを使用すると、サイトの構(gòu)築中に任意のソースからデータをロードし、シンプルで安全に型付けされた API を通じてアクセスできるようになります。

この API は、ローカル Markdown ファイル、リモート API、コンテンツ管理システム (CMS) など、さまざまなソースからのコンテンツを処理する柔軟性を提供します。特定のスキーマを使用してコンテンツの「コレクション」を定義すると、データを効率的に構(gòu)造化して検証できます。さらに、Content Layer API により、コンテンツの多いサイトのパフォーマンスが向上し、ビルド時間が短縮され、メモリ使用量が削減されます。

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

Astro のコンテンツ レイヤー API を使用して、dev.to の投稿をサイトに統(tǒng)合します

Astro のコンテンツ レイヤー API を使用して、dev.to の投稿をサイトに統(tǒng)合できます。 dev.to 用の特定のローダーはありませんが、その API を使用して投稿を Astro のコンテンツ コレクションに保存するカスタム ローダーを作成できます。

これを?qū)g現(xiàn)するには、次の手順に従います:

1. dev.to API へのアクセスを構(gòu)成する

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

2.投稿を取得する関數(shù)を作成する

プロジェクトの src/lib/ フォルダーに、投稿を取得する次の関數(shù)を含む getArticles.js ファイルを作成します。

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 で、Content Layer API を使用して dev.to 投稿のコレクションを定義します。

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 };

以上がテスト開発者への詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。