AstroJS: Dev.to-Inhalte einfach integrieren

Starten Sie ein neues Projekt mit der Blog-Vorlage

npm create astro@latest -- --template blog

Wir starten die App

cd [Projektname] && npm run dev

Ab Astro 5 wurde die Content Layer API eingeführt, ein Tool, mit dem Sie während der Erstellung Ihrer Website Daten aus beliebigen Quellen laden und über eine einfache, sicher typisierte API darauf zugreifen können.

Diese API bietet Flexibilität bei der Verarbeitung von Inhalten aus verschiedenen Quellen, wie z. B. lokalen Markdown-Dateien, Remote-APIs oder Content-Management-Systemen (CMS). Durch die Definition von „Inhaltssammlungen“ mit spezifischen Schemata können Sie Ihre Daten effizient strukturieren und validieren. Darüber hinaus verbessert die Content Layer API die Leistung auf inhaltsintensiven Websites, beschleunigt die Erstellungszeiten und reduziert die Speichernutzung.

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

Astros Content Layer API zur Integration von dev.to-Beiträgen in Ihre Website

Sie können die Content Layer API von Astro verwenden, um dev.to-Beiträge in Ihre Website zu integrieren. Obwohl es keinen speziellen Loader für dev.to gibt, können Sie einen benutzerdefinierten Loader erstellen, der seine API nutzt und Beiträge in einer Inhaltssammlung in Astro speichert.

Um dies zu erreichen, befolgen Sie diese Schritte:

1. Konfigurieren Sie den Zugriff auf die dev.to-API

Erstellen Sie die .env-Datei im Stammverzeichnis des Projekts
.env

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

2. Definieren Sie eine Sammlung in Astro

Definieren Sie in src/content.config.ts eine Sammlung für dev.to-Beiträge mithilfe der Content Layer API:

Beim Erstellen des Projekts mit der Astro-Vorlage wird automatisch die Sammlung für den Blog generiert

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

Jetzt erstellen wir die Sammlung für die Dev.to-Artikel

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

Dies ist der vollständige Code für
srccontent.config.ts

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

Sehen Sie sich die Details in der Definition der Felder im Schema an. Die Felder müssen mit der Blog-Sammlung der Astro-Vorlage übereinstimmen und fügen Sie dann diejenigen hinzu, die speziell zur Sammlung von Dev.to-Beiträgen gehören. Sie müssen denselben Namen wie der Datentyp haben, damit wir die Markdown-Beiträge aus der Astro-Vorlage mit denen von Dev.to im Blog-Bereich „zusammenführen“ können.

3. Verwenden Sie Beiträge auf Ihren Seiten:

Sie können jetzt mit getCollection: auf dev.to-Beiträge in Ihren Astro-Komponenten oder -Seiten zugreifen:

Ursprünglich:

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

Jetzt führen wir die Iteration der Beiträge mit einer Inline-Bedingung durch, die, wenn sie devto ist, zur URL des Artikels auf der Website https://dev.to/{username}/{slug-article weiterleitet }

 {
                        posts.map((post) => (
                            <li>
                                <a href={post.collection === "devTo" ? post.data.url: `/blog/${post.id}/`}>
                                    <img width={720} height={360} src={post.data.heroImage} alt="" />
                                    <h4>



<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173540174627117.jpg" class="lazy" alt="AstroJS : Integra contenido de Dev.to de manera sencilla"></p>

<p>Repository: https://github.com/jmr85/astro-devto</p>


          

            
        

Das obige ist der detaillierte Inhalt vonAstroJS: Dev.to-Inhalte einfach integrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!