Uji Dev.to

Skrin pemasangan template blog astro dilampirkan

npm buat astro@terkini -- --template blog

Kami melancarkan aplikasi

npm run dev

Bermula dengan Astro 5, API Lapisan Kandungan telah diperkenalkan, alat yang membolehkan anda memuatkan data daripada mana-mana sumber semasa pembinaan tapak anda dan mengaksesnya melalui API yang mudah ditaip dengan selamat.

API ini menawarkan fleksibiliti untuk mengendalikan kandungan daripada pelbagai sumber, seperti fail Markdown tempatan, API jauh atau sistem pengurusan kandungan (CMS). Dengan mentakrifkan "koleksi" kandungan dengan skema tertentu, anda boleh menstruktur dan mengesahkan data anda dengan cekap. Selain itu, API Lapisan Kandungan meningkatkan prestasi pada tapak yang berat kandungan, mempercepatkan masa binaan dan mengurangkan penggunaan memori.

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

API Lapisan Kandungan Astro untuk menyepadukan siaran dev.to ke dalam tapak anda

Anda boleh menggunakan API Lapisan Kandungan Astro untuk menyepadukan siaran dev.to ke dalam tapak anda. Walaupun tiada pemuat khusus untuk dev.to, anda boleh membuat pemuat tersuai yang menggunakan APInya dan menyimpan siaran dalam koleksi kandungan di Astro.

Untuk mencapai matlamat ini, ikuti langkah berikut:

1. Konfigurasikan akses kepada dev.to API

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

2. Buat fungsi untuk mendapatkan jawatan

Dalam folder src/lib/ projek anda, cipta fail getArticles.js dengan fungsi berikut untuk mendapatkan siaran:

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. Tentukan koleksi dalam Astro

Dalam src/content.config.ts, tentukan koleksi untuk siaran dev.to menggunakan API Lapisan Kandungan:

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

Atas ialah kandungan terperinci Uji Dev.to. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!