content collections herunterladen - content collections Quellcode herunterladen

content collections

AI-Quellcode

@content-collections

Herunterladen

Inhaltskollektionen

Verwandeln Sie Ihren Inhalt in Typ-Safe-Datensammlungen. Beseitigen Sie die Notwendigkeit von manuellen Daten, die abrufen und analysieren. Importieren Sie einfach Ihren Inhalt und beginnen Sie. Die integrierte Validierung gewährleistet die Genauigkeit Ihrer Daten. Vorbereitet Ihre Daten vor dem Eintritt in Ihre App.

Merkmale

Wunderschönes DX : Content Collections bietet eine angenehme Benutzererfahrung. Es bietet ein nahtloses Entwicklererlebnis, ohne den Server neu zu starten oder den Browser zu aktualisieren. Inhaltskollektionen werden automatisch aktualisiert, wenn Sie Änderungen an Ihren Inhalten vornehmen.
Typ-Safe : Ihr Inhalt wird während des Erstellungsprozesses analysiert und validiert, wodurch Genauigkeit und Währung garantiert werden. Content Collections bietet eine Typ-Safe-API, um auf Ihre Inhalte zuzugreifen.
Einfach zu bedienen : Sie müssen Ihre Inhalte nicht mehr manuell abrufen und analysieren. Importieren Sie es einfach und verwenden Sie Inhaltskollektionen. Es bietet eine einfache API, mit der Sie sich auf das Erstellen Ihrer App konzentrieren können.
Transformation : Inhaltskollektionen ermöglichen es Ihnen, Ihre Inhalte zu verwandeln, bevor sie in Ihre App eintritt. Sie können es verwenden, um Ihre Inhalte zu ändern, zwei Sammlungen beizutreten oder sogar Daten von einem Server abzurufen.

Installation

Content Collections bietet eine Vielzahl von Adaptern, die sich nahtlos in beliebte Web -Frameworks integrieren. Der Installationsprozess hängt vom ausgewählten Adapter ab:

Weiter.js
Qwik
Remix (vite)
Solider Start
Sveltekit
Vite

Wenn Ihr Framework nicht aufgeführt ist, können Sie immer noch Inhaltskollektionen mit der CLI verwenden. Bitte öffnen Sie ein Ticket, wenn Sie Ihr Framework anzeigen möchten.

Verwendung

Erstellen Sie eine Datei in Content-Collections.TS am Stamm Ihres Projekts:

 import { defineCollection , defineConfig } from "@content-collections/core" ;

const posts = defineCollection ( {
  name : "posts" ,
  directory : "src/posts" ,
  include : "**/*.md" ,
  schema : ( z ) => ( {
    title : z . string ( ) ,
    summary : z . string ( ) ,
  } ) ,
} ) ;

export default defineConfig ( {
  collections : [ posts ] ,
} ) ;

Schreiben Sie Inhalte in src/posts :

 ---
title : Hello World
summary : This is my first post
---

# Hello World

This is my first post.

Verwenden Sie Ihren Inhalt in Ihrer App:

 import { allPosts } from "content-collections" ;

export function Posts ( ) {
  return (
    < ul >
      { allPosts . map ( ( post ) => (
        < li key = { post . _meta . path } >
          < a href = { `/posts/ ${ post . _meta . path } ` } >
            < h3 > { post . title } </ h3 >
            < p > { post . summary } </ p >
          </ a >
        </ li >
      ) ) }
    </ ul >
  ) ;
}

Bitte beachten Sie, dass das obige Beispiel nur die Grundlagen von Inhaltskollektionen zeigt und die Inhaltstransformation nicht abdeckt. Inhaltskollektionen transformieren standardmäßig Inhalte wie Markdown oder MDX. Aber es hat Pakete, die das für Sie tun können: