AstroJS: Dev.をコンテンツに簡単に統合

ブログ テンプレートを使用して新しいプロジェクトを開始する

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

アプリを起動します

cd [project_name] && npm run dev

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

この API は、ローカル Markdown ファイル、リモート API、コンテンツ管理システム (CMS) など、さまざまなソースからのコンテンツを処理する柔軟性を提供します。特定のスキーマを使用してコンテンツの「コレクション」を定義すると、データを効率的に構造化して検証できます。さらに、Content Layer 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

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

2. Astro でコレクションを定義する

src/content.config.ts で、Content Layer API を使用して dev.to 投稿のコレクションを定義します。

Astro テンプレートを使用してプロジェクトを作成すると、ブログ用のコレクションが自動的に生成されます

srccontent.config.ts

import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';

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(),
    }),
});

export const collections = { blog };

ここで、Dev.to 記事のコレクションを作成します

const devTo = defineCollection({
    loader: async () => {
        const headers = new Headers({
            "api-key": DEV_API_KEY,
        });
        const posts = await fetch(`${DEV_TO_API_URL}articles?username=jmr85`, {
            headers: headers
        }).then(res => res.json());

        return posts.map((post: any) => ({
        id: post.slug,
            title: post.title,
            description: post.description,
            pubDate: new Date(post.published_at),
            updatedDate: post.edited_at ? new Date(post.edited_at) : null,
            heroImage: post.cover_image || post.social_image,
        url: post.url,
        }));
    },
    schema: z.object({
        title: z.string(),
        description: z.string(),
        pubDate: z.coerce.date(),
        updatedDate: z.coerce.date().optional(),
        heroImage: z.string().nullable(),
    url: z.string(),
    }),
  });

export const collections = { blog, devTo };

これは
の完全なコードです srccontent.config.ts

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

スキーマ内のフィールドの定義の詳細を確認してください。フィールドは Astro テンプレートのブログ コレクションと一致する必要があり、その後、Dev.to 投稿のコレクションに特有のものを追加する必要があります。これらはデータ型と同じ名前を持つ必要があります。これは、Astro テンプレートからのマークダウン投稿を、ブログ セクションの Dev.to からのマークダウン投稿と「マージ」できるようにするためです。

3. ページ上の投稿を使用します。

getCollection:

を使用して、Astro コンポーネントまたはページの dev.to 投稿にアクセスできるようになりました。

原文:

srcpagesblogindex.astro

import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';

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(),
    }),
});

export const collections = { blog };

ここで、インライン条件を使用して投稿を繰り返します。devto の場合は、サイト https://dev.to/{username}/{slug-article の記事の URL にリダイレクトします。 }

 {
                        Posts.map((post) => (
                            

;

リポジトリ: https://github.com/jmr85/astro-devto

以上がAstroJS: Dev.をコンテンツに簡単に統合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。