Test Dev.to

Écran d'installation du modèle de blog astro ci-joint

npm créer astro@latest -- --template blog

Nous lançons l'application

npm run dev

À partir d'Astro 5, l'API Content Layer a été introduite, un outil qui vous permet de charger des données depuis n'importe quelle source lors de la construction de votre site et d'y accéder via une API simple et sécurisée.

Cette API offre la flexibilité nécessaire pour gérer le contenu provenant de diverses sources, telles que des fichiers Markdown locaux, des API distantes ou des systèmes de gestion de contenu (CMS). En définissant des « collections » de contenu avec des schémas spécifiques, vous pouvez structurer et valider efficacement vos données. De plus, l'API Content Layer améliore les performances sur les sites riches en contenu, en accélérant les temps de création et en réduisant l'utilisation de la mémoire.

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

API Content Layer d'Astro pour intégrer les publications dev.to dans votre site

Vous pouvez utiliser l'API Content Layer d'Astro pour intégrer les publications dev.to dans votre site. Bien qu'il n'y ait pas de chargeur spécifique pour dev.to, vous pouvez en créer un personnalisé qui consomme son API et stocke les publications dans une collection de contenu dans Astro.

Pour y parvenir, suivez ces étapes :

1. Configurer l'accès à l'API dev.to

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

2. Créez une fonction pour récupérer les publications

Dans le dossier src/lib/ de votre projet, créez un fichier getArticles.js avec la fonction suivante pour récupérer les posts :

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. Définir une collection dans Astro

Dans src/content.config.ts, définissez une collection pour les publications dev.to à l'aide de l'API Content Layer :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!