Testen Sie Dev.to

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!