Bermula dengan Koleksi Kandungan di Astro

pemula koleksi kandungan astro: Membina model kandungan yang kuat

Artikel ini dikutip dari buku yang dikeluarkan sekarang "Membuka Kekuatan Astro" di SitePoint Premium. Kami akan belajar bagaimana untuk membina model kandungan yang fleksibel dan berskala menggunakan keupayaan pengumpulan kandungan Astro.

Astro menggunakan folder khas

untuk menguruskan koleksi kandungan. Anda boleh membuat subfolder untuk mengatur koleksi kandungan yang berbeza, seperti src/content dan src/content/dev-blog. src/content/corporate-blog

Setiap pengumpulan kandungan boleh dikonfigurasi dalam fail konfigurasi (contohnya,

atau

) dan menggunakan ZOD untuk menentukan corak pengumpulan. ZOD adalah "alat pengesahan skema berasaskan TypeScript dengan kesimpulan jenis statik" yang telah diintegrasikan ke dalam Astro. /src/content/config.js .ts Berikut adalah contoh konfigurasi:

Kod ini mentakrifkan dua koleksi kandungan: "Blog Pemaju" dan "Blog Enterprise". Kaedah

<code class="language-javascript">// src/content/config.js
import { z, defineCollection } from 'astro:content';

const devBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string().default('The Dev Team'),
    tags: z.array(z.string()),
    date: z.date(),
    draft: z.boolean().default(true),
    description: z.string(),
  }),
});

const corporateBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string(),
    date: z.date(),
    featured: z.boolean(),
    language: z.enum(['en', 'es']),
  }),
});

export const collections = {
  devblog: devBlogCollection,
  corporateblog: corporateBlogCollection,
};</code>

membolehkan anda membuat corak untuk setiap koleksi.

defineCollection fail markdown dan kandungan depan

Contoh Pengumpulan Kandungan Dalam tutorial ini mengandaikan bahawa fail

mengandungi kandungan front-end yang sepadan dengan corak yang ditentukan dalam fail konfigurasi. Sebagai contoh, artikel "Blog Syarikat" mungkin kelihatan seperti ini:

.md

generasi slug

<code class="language-markdown">---
title: 'Buy!!'
author: 'Jack from Marketing'
date: 2023-07-19
featured: true
language: 'en'
---

# Some Marketing Promo

This is the best product!</code>

Astro secara automatik akan menjana slug untuk artikel berdasarkan nama fail. Sebagai contoh, slug

adalah

. Jika medan first-post.md disediakan dalam kandungan front-end, Astro akan menggunakan slug tersuai. first-post slug Perhatikan bahawa sifat -sifat yang ditentukan dalam objek

mesti sepadan (dan menjadi sensitif kes) Nama folder di mana kandungannya terletak.

export const collections pertanyaan data

Apabila anda menyediakan fail markdown (terletak di

dan

) dan src/content/devblog fail, anda boleh mula menanyakan data dalam koleksi: src/content/corporateblog config.js Kaedah

<code class="language-javascript">---
import { getCollection } from 'astro:content';
const allDevPosts = await getCollection('devblog');
const allCorporatePosts = await getCollection('corporateblog');
---
{JSON.stringify(allDevPosts)}
{JSON.stringify(allCorporatePosts)}</code>

boleh digunakan untuk mengambil semua entri dalam set tertentu. Semua artikel dalam "Blog Pembangun" (

) dan "Blog Syarikat" (getCollection) diambil dalam contoh. Gunakan devblog dalam templat untuk mengembalikan data asal. corporateblog JSON.stringify() Sebagai tambahan kepada data kandungan depan, data yang dikembalikan juga termasuk

,

dan id atribut (atribut slug mengandungi kandungan artikel). body body anda juga boleh menapis draf atau artikel khusus bahasa dengan melelehkan semua artikel:

<code class="language-javascript">import { getCollection } from 'astro:content';

const spanishEntries = await getCollection('corporateblog', ({ data }) => {
  return data.language === 'es';
});</code>

Mengembalikan semua jawatan, tetapi anda juga boleh menggunakan

untuk mengembalikan entri tunggal dalam koleksi: getCollection getEntry

<code class="language-javascript">import { getEntry } from 'astro:content';

const singleEntry = await getEntry('corporateblog', 'pr-article-1');</code>

vs

getCollection

Walaupun terdapat dua cara untuk mengembalikan pelbagai artikel dari koleksi, terdapat sedikit perbezaan antara kedua -duanya. getCollection() mengambil senarai penyertaan koleksi kandungan berdasarkan nama pengumpulan, manakala getEntries() mengambil pelbagai entri koleksi dari koleksi yang sama.

Contoh getEntries() untuk mendapatkan semula kandungan diberikan dalam

di mana entiti rujukan digunakan (contohnya, senarai artikel yang berkaitan).

paparan kandungan

render() Sekarang kita tahu bagaimana untuk menanyakan data, mari kita bincangkan cara memaparkan data dengan cara yang diformat. Astro menyediakan kaedah yang mudah dipanggil <content></content> untuk memberikan keseluruhan kandungan markdown ke dalam komponen Astro terbina dalam

. Cara anda membina dan memaparkan kandungan juga bergantung kepada sama ada anda menggunakan generasi tapak statik atau mod rendering sisi pelayan.

getStaticPaths() untuk pra-rendering, anda boleh menggunakan

kaedah:

<code class="language-javascript">// src/content/config.js
import { z, defineCollection } from 'astro:content';

const devBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string().default('The Dev Team'),
    tags: z.array(z.string()),
    date: z.date(),
    draft: z.boolean().default(true),
    description: z.string(),
  }),
});

const corporateBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string(),
    date: z.date(),
    featured: z.boolean(),
    language: z.enum(['en', 'es']),
  }),
});

export const collections = {
  devblog: devBlogCollection,
  corporateblog: corporateBlogCollection,
};</code>

getStaticPaths() digunakan dalam kod Astro.props. Kemudian bergantung pada id untuk menangkap entri, yang akan menjadi objek yang mengandungi metadata, slug, render(), dan <content></content> kaedah mengenai entri. Kaedah ini bertanggungjawab untuk memberikan entri markdown ke HTML dalam templat Astro, yang dilaksanakan dengan membuat komponen <content></content>. Hebatnya, sekarang anda hanya perlu menambah komponen

ke templat untuk melihat kandungan markdown yang diberikan kepada HTML.

Atas ialah kandungan terperinci Bermula dengan Koleksi Kandungan di Astro. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!