Headless content management system (CMS) gör att du kan frikoppla innehållshanteringsfunktionerna från logiken som hanterar hur innehållet presenteras i dina applikationer.

Genom att integrera ett CMS i din applikation kan du enkelt hantera innehållet i en enda plattform och sedan sömlöst dela innehållet över olika frontend-kanaler, inklusive webb och mobil applikationer.

Vad är ett huvudlöst CMS?

Ett huvudlöst innehållshanteringssystem underlättar skapandet och hanteringen av innehåll och digitala tillgångar inom en och samma plattform. Till skillnad från traditionellt CMS levereras innehållet genom API: er som t.ex GraphQL API, ett alternativ till RESTful API: er. Detta gör det möjligt att dela innehållet mellan olika webb- och mobilappar.

Detta tillvägagångssätt gör det möjligt att separera problem mellan innehållshantering och dess presentation – vilket säkerställer att du kan skräddarsy hur innehållet visas för att passa olika klientapplikationer och enheter utan att påverka det underliggande innehållet och dess strukturera.

Komma igång med innehållsrikt CMS

Contentful är ett huvudlöst innehållshanteringssystem som låter dig skapa, hantera och dela ditt digitala innehåll och medieresurser över dina applikationer med hjälp av dess API: er.

För att komma igång med Contentful CMS måste du först skapa en innehållsmodell.

Skapa en innehållsmodell

Följ dessa steg för att skapa en innehållsmodell på Contentful.

1. Besök Contentfuls hemsida, skapa ett konto och logga in för att komma åt din Plats. Contentful organiserar allt projektrelaterat innehåll och tillhörande tillgångar inom dessa utrymmen.
2. I det övre vänstra hörnet av ditt utrymme, klicka på Innehållsmodell fliken för att öppna inställningssidan.
3. Klicka på Lägg till innehållstyp knappen på innehållsmodellen inställningar sida. En innehållstyp, i det här fallet, representerar modellen (strukturen) för den data du kommer att lägga till i Contentful.
4. Ange nu a namn och beskrivning för din innehållstyp i popup-modalen. Contentful kommer automatiskt att fylla i API-identifierare fält baserat på namnet du anger.
5. Därefter definierar du själva innehållsstrukturen. Klicka på Lägg till fält knappen för att lägga till ett par fält till din innehållsmodell. Här är några fält som du kan använda för modellen:

   user_ID = type 
   first_name = type 
   role = type 

6. För att lägga till fält, välj typ från popup-fönstret för typer.
7. Tillhandahålla en fält namnoch klicka sedan på Lägg till och konfigurera knapp.
8. Slutligen, verifiera att fältegenskaperna är som förväntade på Bekräftelse sida. Dessutom, medan du fortfarande är på bekräftelsesidan, kan du ange ytterligare egenskaper för fälten, såsom eventuella valideringsregler.
9. Klick Bekräfta för att lägga till det nya fältet i modellen.
10. När du har lagt till alla nödvändiga fält till din modell kommer de att visas i ett listformat, som visas nedan. För att slutföra, klicka på Spara för att tillämpa ändringarna på innehållsmodellen.

Lägg till innehållet

Med innehållsmodellen på plats, fortsätt och lägg till innehållet genom att följa dessa steg:

1. Navigera till din instrumentpanel för rymd sida och klicka på Innehåll flik.
2. Välj Innehållstyp, innehållsmodellen du har skapat, från rullgardinsmenyn i sökfältet. Klicka sedan på Lägg till post knappen för att lägga till innehåll.
3. Lägg sedan till innehållet i innehållsredigerare. För varje inlägg, kom ihåg att klicka Publicera för att spara den till ditt utrymme.

Generera API-nycklar

Slutligen måste du ta tag i dina API-nycklar, som du kommer att använda för att göra förfrågningar om att hämta innehållsdata från React-applikationen.

1. Klicka på inställningar rullgardinsmenyn i det övre högra hörnet på instrumentpanelssidan. Välj sedan API-nycklar alternativ.
2. Klicka på Lägg till API-nyckel knappen för att öppna sidan med inställningar för API-nycklar.
3. Contentful kommer automatiskt att generera och fylla i API-nycklarna på inställningssidan för API-nycklar. Du behöver bara ange ett namn för att unikt identifiera uppsättningen nycklar.

För att kunna använda Contentful API: er för att hämta data behöver du space ID och den åtkomsttoken. Observera att det finns två typer av åtkomsttokens: API-nyckel för innehållsleverans och Content Preview API. I en produktionsmiljö behöver du Content Delivery API-nyckeln.

Men i utvecklingen behöver du bara utrymmes-ID och Content Preview API nyckel. Kopiera dessa två nycklar och låt oss dyka in i koden.

Du kan hitta detta projekts kod i dess GitHub förvaret.

Skapa ett React-projekt

För att komma igång kan du byggnadsställning en React-applikation med create-react-app. Alternativt skapa ett React-projekt med Vite. När du har skapat ditt projekt, fortsätt och installera det här paketet.

npm install contentful

Skapa nu en .env fil i rotkatalogen i din projektmapp och lägg till API-nycklarna enligt följande:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Skapa den användaContentful Hook

I den src katalog, skapa en ny mapp och namnge den krokar. Lägg till en ny i den här mappen useContentful.jsx fil och inkludera följande kod.

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

Denna anpassade hook-kod hämtar data från Contentful-utrymmet. Den uppnår detta genom att först upprätta en anslutning till ett specifikt innehållsfullt utrymme med hjälp av den medföljande åtkomsttoken och utrymmes-ID.

Sedan använder kroken Nöjd kund inom getUsers funktion för att hämta poster av en viss innehållstyp, i det här fallet hämtar koden posterna i användare innehållstyp, specifikt välja deras fält. Den hämtade datan saneras sedan och returneras som en uppsättning användarobjekt.

Uppdatera filen App.jsx

Öppna App.jsx fil, radera pannplattan React-koden och uppdatera den med följande kod.

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 användContentful hook kan du hämta och visa innehållsdata från Contentful CMS i webbläsaren. Starta slutligen utvecklingsservern för att uppdatera ändringarna som gjorts i applikationen.

npm run dev

Bra! Du bör kunna hämta och rendera innehållet du lagt till på Contentful från React-appen. Varsågod och styla React-applikationen med Tailwindför att ge det ett fantastiskt utseende.

Content Management på ett enkelt sätt

Att införliva ett huvudlöst CMS i ditt system kan avsevärt effektivisera utvecklingsprocessen, vilket gör att du kan koncentrera dig på att bygga kärnapplikationslogiken; snarare än att lägga ner mycket tid på innehållshanteringsuppgifter.