Hovedløse indholdsstyringssystemer (CMS) giver dig mulighed for at afkoble indholdsstyringsfunktionerne fra logikken, der håndterer, hvordan indholdet præsenteres i dine applikationer.

Grundlæggende kan du ved at integrere et CMS i din applikation nemt administrere indholdet i en enkelt platform, og derefter problemfrit dele indholdet på tværs af forskellige frontend-kanaler, herunder web og mobil applikationer.

Hvad er et hovedløst CMS?

Et hovedløst indholdsstyringssystem letter oprettelsen og styringen af ​​indhold og digitale aktiver inden for én platform. I modsætning til traditionelt CMS leveres indholdet gennem API'er som f.eks GraphQL API, et alternativ til RESTful API'erne. Dette gør det muligt at dele indholdet på tværs af forskellige web- og mobilapps.

Denne tilgang giver mulighed for adskillelse af bekymringer mellem indholdsstyring og dens præsentation – hvilket sikrer, at du kan skræddersy hvordan indholdet vises, så det passer til forskellige klientapplikationer og -enheder uden at påvirke det underliggende indhold og dets struktur.

Kom godt i gang med Contentful CMS

Contentful er et hovedløst indholdsstyringssystem, der giver dig mulighed for at oprette, administrere og dele dit digitale indhold og medieressourcer på tværs af dine applikationer ved hjælp af dets API'er.

For at komme i gang med at bruge Contentful CMS skal du først oprette en indholdsmodel.

Opret en indholdsmodel

Følg disse trin for at oprette en indholdsmodel på Contentful.

1. Besøg Contentfuls hjemmeside, opret en konto, og log ind for at få adgang til din plads. Contentful organiserer alt projektrelateret indhold og tilhørende aktiver inden for disse rum.
2. I øverste venstre hjørne af dit space skal du klikke på Indholdsmodel fanen for at åbne indstillingssiden.
3. Klik på Tilføj indholdstype knappen på indholdsmodellen indstillinger side. En indholdstype, i dette tilfælde, repræsenterer modellen (strukturen) for de data, du vil tilføje til Contentful.
4. Indtast nu a navn og beskrivelse for din indholdstype i pop-up modal. Contentful vil automatisk udfylde API-identifikator felt baseret på det navn, du angiver.
5. Dernæst skal du definere selve indholdsstrukturen. Klik på Tilføj felt knappen for at tilføje et par felter til din indholdsmodel. Her er et par felter, du kan bruge til modellen:

   user_ID = type 
   first_name = type 
   role = type 

6. For at tilføje felter skal du vælge type fra pop op-vinduet for typer.
7. Giv en feltnavn, og klik derefter på Tilføj og konfigurer knap.
8. Til sidst skal du kontrollere, at feltegenskaberne er som forventet på bekræftelse side. Derudover kan du, mens du stadig er på bekræftelsessiden, angive yderligere egenskaber for felterne, såsom eventuelle valideringsregler.
9. Klik Bekræfte for at tilføje det nye felt til modellen.
10. Når du har tilføjet alle de nødvendige felter til din model, vises de i et listeformat, som vist nedenfor. For at afslutte, klik på Gemme knappen for at anvende ændringerne på indholdsmodellen.

Tilføj indholdet

Med indholdsmodellen på plads, gå videre og tilføje indholdet ved at følge disse trin:

1. Naviger til din rum dashboard side og klik på Indhold fanen.
2. Vælg Indholdstype, den indholdsmodel, du har oprettet, fra rullemenuen i søgefeltet. Klik derefter på Tilføj post knappen for at tilføje indhold.
3. Tilføj derefter indholdet til indholdsredaktør. Husk at klikke for hver post Offentliggøre for at gemme det til dit rum.

Generer API-nøgler

Til sidst skal du have fat i dine API-nøgler, som du skal bruge til at lave anmodninger om at hente indholdsdataene fra React-applikationen.

1. Klik på Indstillinger rullemenuen i øverste højre hjørne af dashboard-siden. Vælg derefter API nøgler mulighed.
2. Klik på Tilføj API-nøgle knappen for at åbne siden med indstillinger for API-nøgler.
3. Contentful genererer og udfylder automatisk API-nøglerne på siden med indstillinger for API-nøgler. Du behøver kun at angive et navn for entydigt at identificere nøglesættet.

For at bruge Contentful API'er til at hente data, skal du bruge space ID og adgangstoken. Bemærk, at der er to typer adgangstokens: Content Delivery API-nøgle og Content Preview API. I et produktionsmiljø skal du bruge Content Delivery API-nøglen.

Men i udviklingen kræver du kun space ID og Content Preview API nøgle. Kopier disse to nøgler, og lad os dykke ned i koden.

Du kan finde dette projekts kode i dens GitHub depot.

Opret et React-projekt

For at komme i gang kan du stillads en React-applikation ved hjælp af create-react-app. Alternativt opsæt et React-projekt ved hjælp af Vite. Når du har oprettet dit projekt, skal du gå videre og installere denne pakke.

npm install contentful

Opret nu en .env fil i rodmappen i din projektmappe, og tilføj API-nøglerne som følger:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Opret den useContentful Hook

I src mappe, opret en ny mappe og navngiv den kroge. Tilføj en ny i denne mappe useContentful.jsx fil, og inkludere følgende kode.

import { createClient } from"contentful";
exportdefault useContentful = () => {
const accessToken = import.meta.env.VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN;
const spaceID = import.meta.env.VITE_REACT_APP_CONTENTFUL_SPACE_ID;
const client = createClient({
 space: spaceID,
 accessToken: accessToken,
 host: "preview.contentful.com",
 environment: 'master',
 });
const getUsers = async () => {
try {
const data = await client.getEntries({
 content_type: "users",
 select: "fields"
 });
const sanitizedData = data.items.map((item) => {
return {
 ...item.fields 
 };
 }); 
return sanitizedData;
 } catch (error) {
console.log(`Error fetching users ${error}`);
 }
 };
return { getUsers };
};

Denne tilpassede hook-kode henter dataene fra Contentful-rummet. Den opnår dette ved for det første at etablere en forbindelse til et specifikt Contentful space ved hjælp af det medfølgende adgangstoken og space ID.

Derefter bruger krogen Tilfreds klient indenfor getUsers funktion til at hente poster af en bestemt indholdstype, i dette tilfælde henter koden indtastningerne af brugere indholdstype, specifikt kun at vælge deres felter. De hentede data renses derefter og returneres som en række brugerobjekter.

Opdater App.jsx-filen

Åbn App.jsx fil, slet boilerplate React-koden, og opdater den med følgende kode.

import { useEffect, useState } from"react";
import useContentful from"./hooks/useContentful";
const App = () => {
const [users, setUsers] = useState([]);
const { getUsers} = useContentful();
 useEffect(() => {
 getUsers().then((response) => response && setUsers(response));
 });
return (
 <>

Contentful CMS With React Tutorial</h1>
 {users.map((user, index) => (


 {user.userId} </p> 

 {user.firstName} </p>

 {user.role} </p>

 </div> 
 ))} 
 </>
 );
};
exportdefault App

Med brug indholdsrig hook, kan du hente og vise indholdsdataene fra Contentful CMS på browseren. Til sidst skal du starte udviklingsserveren for at opdatere ændringerne i applikationen.

npm run dev

Store! Du bør være i stand til at hente og gengive det indhold, du tilføjede på Contentful, fra React-appen. Gå videre og style React-applikationen med Tailwindfor at give det et fantastisk udseende.

Content Management gjort nemt

Inkorporering af et hovedløst CMS i dit system kan strømline udviklingsprocessen betydeligt, så du kan koncentrere dig om at opbygge kerneapplikationslogikken; i stedet for at bruge en betydelig mængde tid på indholdsstyringsopgaver.