Šis „Astro“ turinio kolekcijų įvadas yra išimtis Astro galios išlaisvinimasdabar pasiekiama „SitePoint Premium“.
Norėdami naudotis turinio kolekcijomis, Astro paskiria specialų aplanką: src/content
. Vėliau šioje vietoje galime sukurti poaplankius, kurių kiekvienas generuoja atskiras turinio kolekcijas. Pavyzdžiui, galėtume sukurti tokias kolekcijas kaip src/content/dev-blog
ir src/content/corporate-blog
.
Kiekvieną turinio rinkinį galima konfigūruoti konfigūracijos faile –/src/content/config.js
(arba .ts
) – kur turime galimybę naudoti rinkimo schemas naudojant Zod.
„Zod“ yra „TypeScript pirmasis schemos patvirtinimas su statiniu tipo išvadomis“, kuris yra integruotas į Astro. Štai pavyzdys, kaip tai įgautų formą:
// 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,
};
Aukščiau pateiktame kode apibrėžiame dvi turinio kolekcijas – vieną „kūrėjo tinklaraščiui“ ir kitą „įmonės tinklaraščiui“. The defineCollection
metodas leidžia sukurti a schema
bet kuriai kolekcijai. „Kūrėjų tinklaraščiui“ kuriame schemą, pagal kurią šios tinklaraščio kategorijos straipsniai turi turėti pavadinimą (eilelę), autorių (eilutė pagal nutylėjimą „Kūrėjų komanda“), žymas (eilučių masyvą), datą (datą). tipas), juodraštis (numatytasis Būlio reikšmė true
) ir aprašymą (eilelę).
„Įmonės tinklaraščio“ schema šiek tiek skiriasi: turime eilutę ir pavadinimui, ir autoriui. Datos (duomenų tipo) taip pat reikės turiniui, taip pat siūlomos (Bulio) vėliavėlės ir kalbos (enum), kurią galima nustatyti kaip en
arba es
.
Galiausiai, mes eksportuojame a collections
objektas, turintis dvi savybes, devblog
ir corporateblog
. Jie bus naudojami vėliau.
Markdown failai ir Frontmatter
Šios mokymo programos apie turinio rinkimą pavyzdžiuose daroma prielaida, kad .md
failai taip pat apima frontmatter
atitinkanti anksčiau konfigūracijos faile nurodytą schemą. Pavyzdžiui, taip atrodytų pavyzdinis „įmonės tinklaraščio“ įrašas:
---
title: 'Buy!!'
author: 'Jack from Marketing'
date: 2023-07-19
featured: true
language: 'en'
---
# Some Marketing Promo
This is the best product!
Šliužų kūrimas
Astro automatiškai generuos šliužus įrašams pagal failo pavadinimą. Pavyzdžiui, šliužas first-post.md
bus first-post
. Tačiau jei pateiksime a slug
įėjimas į mūsų frontmatter
Astro tai gerbs ir naudos mūsų pritaikytą šliužą.
Turėkite omenyje, kad savybės, nurodytos export const collections
objektas turi atitikti aplankų pavadinimus, kuriuose bus pateiktas turinys. (Taip pat atminkite, kad skiriamos didžiosios ir mažosios raidės!)
Duomenų užklausa
Kai turėsime visus Markdown failus (mūsų atveju tai būtų žemiau src/content/devblog
ir src/content/corporateblog
) ir mūsų config.js
Failas paruoštas, galime pradėti teikti duomenų iš kolekcijų užklausas, o tai yra paprastas procesas:
---
import { getCollection } from 'astro:content';
const allDevPosts = await getCollection('devblog');
const allCorporatePosts = await getCollection('corporateblog');
---
<pre>{JSON.stringify(allDevPosts)}</pre>
<pre>{JSON.stringify(allCorporatePosts)}</pre>
Kaip matyti aukščiau, getCollection
metodas gali būti naudojamas norint gauti visus įrašus iš nurodytos kolekcijos (vėlgi, nurodant eksportuotus kolekcijų pavadinimus iš ankstesnių). Aukščiau pateiktame pavyzdyje gauname visus įrašus iš „kūrėjo tinklaraščio“ (devblog
) ir iš „įmonės tinklaraščio“ (corporateblog
). Šablone tiesiog grąžiname neapdorotus duomenis naudodami JSON.stringify()
.
Taip pat turėtume ištirti duomenis, kurie rodomi per JSON.stringify()
ir turėtume atkreipti dėmesį, kad, išskyrus frontmatter
duomenis, taip pat gauname an id
a slug
ir a body
turtas grąžinamas naudoti, kai pastarajame yra įrašo turinys.
Taip pat galime filtruoti juodraščius ar įrašus, parašytus tam tikra kalba frontmatter
skyrių, kartodami visus straipsnius taip:
import { getCollection } from 'astro:content';
const spanishEntries = await getCollection('corporateblog', ({ data }) => {
return data.language === 'es';
});
getCollection
grąžina visus pranešimus, bet galime ir naudoti getEntry
norėdami grąžinti vieną įrašą iš kolekcijos:
import { getEntry } from 'astro:content';
const singleEntry = await getEntry('corporateblog', 'pr-article-1');
getCollection vs getEntries
Nors yra du būdai grąžinti kelis įrašus iš kolekcijų, tarp jų yra nedidelis skirtumas. getCollection()
nuskaito turinio rinkinio įrašų sąrašą pagal kolekcijos pavadinimą, o getEntries()
nuskaito kelis kolekcijos įrašus iš tos pačios kolekcijos.
Astro dokumentacijoje pateikiamas pavyzdys getEntries()
naudojami turiniui gauti, kai naudojami nuorodos objektai (pavyzdžiui, susijusių įrašų sąrašas).
Susijusių įrašų sąvoka yra ta vieta, kur galime nurodyti kolekcijos įrašų masyvą. Tai galima pasiekti pridėjus toliau pateiktą schemą, kai naudojate defineCollection
metodas:
import { defineCollection, reference, z } from 'astro:content';
const devblog = defineCollection({
schema: z.object({
title: z.string(),
relatedPosts: z.array(reference('blog')),
}),
});
Aukščiau pateiktame kode mes taip pat importuojame reference
ir naudoti tai pridedant relatedPosts
pagal mūsų schemą. (Atkreipkite dėmesį, kad galime tai vadinti kaip norime, pvz recommendedPosts
arba followupPosts
.)
Norėdami naudoti šiuos relatedPosts
reikia pridėti atitinkamas šliužų vertes frontmatter
Markdown dalis:
title: "This is a post"
relatedPosts:
- A related post # `src/content/devblog/a-related-post.md
Nuorodos subjektai yra apibrėžti config.js
failą turinio rinkiniui ir naudokite reference
Zod metodas:
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
relatedPosts: z.array(reference('blog')).optional(),
author: reference('author'),
}),
});
const author = defineCollection({
type: 'data',
schema: z.object({
name: z.string(),
}),
});
Taip pat atkreipkite dėmesį į naudojimą type: 'content'
ir type: 'data'
. Šiuo atveju kolekcija apima abu turinio kūrimo formatus, tokius kaip Markdown (type: 'content'
) ir duomenų formatus, tokius kaip JSON arba YAML (type: 'data'
).
Turinio rodymas
Dabar, kai žinome, kaip pateikti duomenų užklausą, aptarkime, kaip iš tikrųjų pateikti juos suformatuotu būdu. Astro siūlo patogų metodą, vadinamą render()
Norėdami paversti visą Markdown turinį į integruotą Astro komponentą, vadinamą <Content />
. Tai, kaip kuriame ir rodome turinį, taip pat priklausys nuo to, ar turime statinį svetainės generavimą, ar serverio pusės atvaizdavimo režimą.
Išankstiniam atvaizdavimui galime naudoti getStaticPaths()
metodas:
// /src/pages/posts/[...slug].astro
---
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
const blogEntries = await getCollection('blog');
return blogEntries.map(entry => ({
params: { slug: entry.slug }, props: { entry },
}));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<h1>{entry.data.title}</h1>
<Content />
Aukščiau pateiktame kode mes naudojame getStaticPaths()
. (Šį metodą aptarėme antroje šios serijos mokymo programoje kaip būdą, kaip pritaikyti dinamiškus maršrutus.) Tada pasikliaujame Astro.props
užfiksuoti entry
kuris bus objektas, kuriame yra metaduomenys apie įrašą, an id
a slug
ir a render()
metodas. Šis metodas yra atsakingas už Markdown įrašo atvaizdavimą į HTML Astro šablone ir tai daro sukurdamas <Conte
nt />
komponentas. Nuostabu yra tai, kad viskas, ką dabar turime padaryti, tai pridėti <Content />
komponentą į mūsų šabloną ir galėsime matyti Markdown turinį, pateiktą į HTML.
Norite sužinoti daugiau apie „Astro“ – modernią „viskas viename“ sistemą, skirtą greitesnėms, į turinį orientuotoms svetainėms kurti? Patikrinkite Astro galios išlaisvinimasdabar pasiekiama „SitePoint Premium“.