Angeh?ngter Installationsbildschirm für Astro-Blog-Vorlagen

npm create astro@latest -- --template blog

Wir starten die App

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 inhaltsreichen 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

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

2. Erstellen Sie eine Funktion zum Abrufen der Beitr?ge

Erstellen Sie im Ordner src/lib/ Ihres Projekts eine getArticles.js-Datei mit der folgenden Funktion, um die Beitr?ge abzurufen:

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. 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:

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

Das obige ist der detaillierte Inhalt vonTesten Sie Dev.to. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!