Bezhlavé systémy pro správu obsahu (CMS) vám umožňují oddělit funkce správy obsahu od logiky, která řídí, jak je obsah prezentován ve vašich aplikacích.

V podstatě integrací CMS do vaší aplikace můžete snadno spravovat obsah v jednom a poté bezproblémově sdílet obsah napříč různými frontendovými kanály, včetně webu a mobilních zařízení aplikací.

Co je bezhlavý CMS?

Bezhlavý systém správy obsahu usnadňuje vytváření a správu obsahu a digitálních aktiv v rámci jedné platformy. Na rozdíl od tradičního CMS je obsah dodáván prostřednictvím API, jako je např GraphQL API, alternativa k RESTful API. To umožňuje sdílet obsah napříč různými webovými a mobilními aplikacemi.

Tento přístup umožňuje oddělit starosti mezi správou obsahu a jeho prezentací – a zajistit, že si můžete přizpůsobit jak obsah je zobrazen tak, aby vyhovoval různým klientským aplikacím a zařízením, aniž by to ovlivnilo základní obsah a jeho obsah struktura.

Začínáme s spokojeným CMS

Contentful je bezhlavý systém správy obsahu, který vám umožňuje vytvářet, spravovat a sdílet váš digitální obsah a mediální zdroje napříč vašimi aplikacemi pomocí jeho rozhraní API.

Chcete-li začít používat Contentful CMS, musíte nejprve vytvořit model obsahu.

Vytvořte model obsahu

Chcete-li vytvořit model obsahu na Contentful, postupujte podle těchto kroků.

1. Návštěva Web společnosti Contentful, vytvořte si účet a přihlaste se, abyste získali přístup ke svému prostor. Contentful organizuje veškerý obsah související s projektem a související aktiva v těchto prostorech.
2. V levém horním rohu vašeho prostoru klikněte na Obsahový model otevřete stránku nastavení.
3. Klikněte na Přidejte typ obsahu tlačítko na modelu obsahu nastavení strana. Typ obsahu v tomto případě představuje model (strukturu) pro data, která budete přidávat do Contentful.
4. Nyní zadejte a název a popis pro váš typ obsahu v rámci vyskakovacího modu. Contentful automaticky vyplní Identifikátor API pole na základě vámi poskytnutého jména.
5. Dále definujte samotnou strukturu obsahu. Klikněte na Přidat pole tlačítko pro přidání několika polí do vašeho modelu obsahu. Zde je několik polí, která můžete pro model použít:

   user_ID = type 
   first_name = type 
   role = type 

6. Chcete-li přidat pole, vyberte typ z vyskakovacího okna typů.
7. Poskytněte a název polea poté klepněte na Přidat a nakonfigurovat knoflík.
8. Nakonec ověřte, že vlastnosti pole jsou podle očekávání na serveru potvrzení strana. Navíc, když jste stále na potvrzovací stránce, můžete zadat další vlastnosti pro pole, jako jsou jakákoli ověřovací pravidla.
9. Klikněte Potvrdit pro přidání nového pole do modelu.
10. Jakmile do modelu přidáte všechna nezbytná pole, zobrazí se ve formátu seznamu, jak je znázorněno níže. Pro dokončení klikněte na Uložit tlačítko aplikujte změny na model obsahu.

Přidejte obsah

Po zavedení modelu obsahu pokračujte a přidejte obsah podle následujících kroků:

1. Přejděte do svého vesmírná palubní deska stránku a klikněte na Obsah tab.
2. Vybrat Typ obsahu, model obsahu, který jste vytvořili, z rozbalovací nabídky na vyhledávacím panelu. Poté klikněte na Přidat záznam tlačítko pro přidání obsahu.
3. Dále přidejte obsah do editor obsahu. U každého záznamu nezapomeňte kliknout Publikovat uložit do svého prostoru.

Vygenerujte klíče API

Nakonec musíte získat klíče API, které budete používat k vytváření požadavků na načtení dat obsahu z aplikace React.

1. Klikněte na Nastavení rozbalovací nabídka v pravém horním rohu stránky řídicího panelu. Poté vyberte API klíče volba.
2. Klikněte na Přidat klíč API otevřete stránku nastavení klíčů API.
3. Contentful automaticky vygeneruje a vyplní klíče API na stránce nastavení klíčů API. Stačí zadat název, který bude sadu klíčů jednoznačně identifikovat.

Abyste mohli používat Contentful API k načítání dat, potřebujete ID prostoru a přístupový token. Všimněte si, že existují dva typy přístupových tokenů: Klíč rozhraní API pro doručování obsahu a Content Preview API. V produkčním prostředí budete potřebovat klíč Content Delivery API.

Ale ve vývoji potřebujete pouze ID prostoru a Content Preview API klíč. Zkopírujte tyto dva klíče a pojďme se ponořit do kódu.

Kód tohoto projektu najdete v něm GitHub úložiště.

Vytvořte projekt React

Chcete-li začít, můžete lešení aplikace React pomocí create-react-app. Alternativně, nastavit projekt React pomocí Vite. Po vytvoření projektu pokračujte a nainstalujte tento balíček.

npm install contentful

Nyní vytvořte a .env soubor v kořenovém adresáři složky vašeho projektu a přidejte klíče API následovně:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Vytvořte useContentful Hook

V src adresář, vytvořte novou složku a pojmenujte ji háčky. Do této složky přidejte nový useContentful.jsx soubor a zahrňte následující kód.

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

Tento vlastní kód háku načte data z prostoru Contentful. Dosahuje toho nejprve vytvořením připojení ke konkrétnímu Obsahovému prostoru pomocí poskytnutého přístupového tokenu a ID prostoru.

Poté hák použije Spokojený klient v rámci getUsers funkce k načtení záznamy určitého typu obsahu, v tomto případě kód načte položky uživatelů typ obsahu, konkrétně výběr pouze jejich polí. Načtená data jsou poté dezinfikována a vrácena jako pole uživatelských objektů.

Aktualizujte soubor App.jsx

Otevři App.jsx soubor, odstraňte standardní kód React a aktualizujte jej následujícím kódem.

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

s používatObsahově hák, můžete načíst a zobrazit data obsahu z Contentful CMS v prohlížeči. Nakonec spusťte vývojový server a aktualizujte změny provedené v aplikaci.

npm run dev

Skvělý! Měli byste být schopni načíst a vykreslit obsah, který jste přidali do Contentful, z aplikace React. Pokračujte a styl aplikace React pomocí Tailwindaby to vypadalo fantasticky.

Snadná správa obsahu

Začlenění bezhlavého CMS do vašeho systému může výrazně zefektivnit vývojový proces, což vám umožní soustředit se na budování základní aplikační logiky; spíše než trávit značné množství času úkoly správy obsahu.