A fej nélküli tartalomkezelő rendszerek (CMS) lehetővé teszik a tartalomkezelési funkciók és a tartalom alkalmazásokban való megjelenítését kezelő logikát.

Lényegében azáltal, hogy egy CMS-t integrál az alkalmazásba, egyszerűen kezelheti a tartalmat egyetlen helyen platformon, majd zökkenőmentesen megoszthatja a tartalmat a különböző frontend csatornákon, beleértve a webet és a mobilt is alkalmazások.

Mi az a fej nélküli CMS?

A fej nélküli tartalomkezelő rendszer megkönnyíti a tartalom és a digitális eszközök létrehozását és kezelését egyetlen platformon belül. A hagyományos CMS-től eltérően a tartalom API-kon keresztül történik, mint pl GraphQL API, a RESTful API-k alternatívája. Ez lehetővé teszi a tartalom megosztását különböző webes és mobilalkalmazások között.

Ez a megközelítés lehetővé teszi a tartalomkezelés és annak megjelenítése közötti aggályok elkülönítését – így biztosítva, hogy személyre szabhassa a módját a tartalom úgy jelenik meg, hogy megfeleljen a különböző kliens alkalmazásoknak és eszközöknek, anélkül, hogy ez befolyásolná a mögöttes tartalmat és annak tartalmát szerkezet.

A Contentful CMS használatának első lépései

A Contentful egy fej nélküli tartalomkezelő rendszer, amely lehetővé teszi digitális tartalmak és médiaforrások létrehozását, kezelését és megosztását az alkalmazások között az API-k segítségével.

A Contentful CMS használatának megkezdéséhez először létre kell hoznia egy tartalommodellt.

Hozzon létre egy tartalommodellt

Kövesse ezeket a lépéseket a Contentful tartalommodell létrehozásához.

1. Látogatás A Contentful weboldala, hozzon létre egy fiókot, és jelentkezzen be, hogy hozzáférjen a hely. A Contentful minden projekthez kapcsolódó tartalmat és kapcsolódó eszközöket ezeken a tereken rendezi.
2. A tér bal felső sarkában kattintson a Tartalmi modell fület a beállítások oldal megnyitásához.
3. Kattints a Tartalomtípus hozzáadása gombot a tartalmi modellen beállítások oldalon. A tartalomtípus ebben az esetben a Contentful-hoz hozzáadandó adatok modelljét (struktúráját) jelenti.
4. Most írja be a név és leírás a tartalomtípushoz a pop-up módban. A Contentful automatikusan feltölti a Api azonosító mezőben az Ön által megadott név alapján.
5. Ezután határozza meg magát a tartalomszerkezetet. Kattints a Mező hozzáadása gombot, hogy hozzáadjon néhány mezőt a tartalommodellhez. Íme néhány mező, amelyet a modellhez használhat:

   user_ID = type 
   first_name = type 
   role = type 

6. Mezők hozzáadásához válassza ki a típus a típusok felugró ablakából.
7. Adja meg a mező neve, majd kattintson a gombra Hozzáadás és konfigurálás gomb.
8. Végül ellenőrizze, hogy a mező tulajdonságai megfelelnek-e a vártnak megerősítés oldalon. Ezenkívül a megerősítő oldalon további tulajdonságokat is megadhat a mezőkhöz, például bármely érvényesítési szabályt.
9. Kattintson megerősít az új mező hozzáadásához a modellhez.
10. Miután az összes szükséges mezőt hozzáadta a modellhez, azok lista formátumban jelennek meg, az alábbiak szerint. A véglegesítéshez kattintson a Megment gombot a módosítások tartalommodellre történő alkalmazásához.

Adja hozzá a tartalmat

Ha a tartalommodell a helyén van, folytassa, és adja hozzá a tartalmat az alábbi lépések végrehajtásával:

1. Navigáljon a sajátjához tér műszerfal oldalra, és kattintson a Tartalom lapon.
2. Válaszd ki a Tartalom típus, az Ön által létrehozott tartalommodell, a keresősávon belüli legördülő menüből. Ezután kattintson a Bejegyzés hozzáadása gombot a tartalom hozzáadásához.
3. Ezután adja hozzá a tartalmat a tartalomszerkesztő. Minden bejegyzésnél ne felejtsen el kattintani Közzététel hogy mentse a helyére.

API-kulcsok létrehozása

Végül meg kell ragadnia az API-kulcsokat, amelyek segítségével kérheti a tartalomadatok lekérését a React alkalmazásból.

1. Kattints a Beállítások legördülő menüt az irányítópult oldalának jobb felső sarkában. Ezután válassza ki a API kulcsok választási lehetőség.
2. Kattints a API-kulcs hozzáadása gombot az API kulcsok beállítási oldalának megnyitásához.
3. A Contentful automatikusan generálja és feltölti az API-kulcsokat az API-kulcsok beállítási oldalán. Csak egy nevet kell megadnia a kulcskészlet egyedi azonosításához.

Ahhoz, hogy a Contentful API-kat használhassa az adatok lekéréséhez, szüksége van a térazonosító és a hozzáférési token. Figyeljük meg, hogy kétféle hozzáférési token létezik: Content Delivery API-kulcs és Content Preview API. Éles környezetben szüksége lesz a Content Delivery API-kulcsra.

De a fejlesztés során csak a térazonosítóra és a Content Preview API kulcs. Másold ki ezt a két kulcsot, és merüljünk el a kódban.

A projekt kódja megtalálható benne GitHub adattár.

Hozzon létre egy React projektet

Az induláshoz megteheti React alkalmazás állványozása a create-react-app használatával. Alternatív megoldásként állítson be egy React projektet a Vite segítségével. A projekt létrehozása után lépjen tovább, és telepítse ezt a csomagot.

npm install contentful

Most hozzon létre a .env fájlt a projektmappa gyökérkönyvtárába, és adja hozzá az API-kulcsokat az alábbiak szerint:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Hozza létre a useContentful Hook-ot

Ban,-ben src könyvtárba, hozzon létre egy új mappát, és nevezze el horgok. Adjon hozzá egy újat ebben a mappában useContentful.jsx fájlt, és tartalmazza a következő kódot.

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

Ez az egyéni hook kód lekéri az adatokat a Contentful térből. Ezt úgy éri el, hogy először kapcsolatot létesít egy adott Contentful térrel a biztosított hozzáférési jogkivonat és területazonosító használatával.

Ezután a horog a Megelégedett ügyfél belül getUsers funkciót lekérni bejegyzés egy adott tartalomtípusról, ebben az esetben a kód lekéri a bejegyzéseket felhasználókat tartalomtípust, kifejezetten csak a mezőit választva. A lekért adatokat ezután megtisztítják, és felhasználói objektumok tömbjeként visszaadják.

Frissítse az App.jsx fájlt

Nyissa meg a App.jsx fájlt, törölje a React kódot, és frissítse a következő kóddal.

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

A... val useContentful hook segítségével lekérheti és megjelenítheti a tartalomadatokat a Contentful CMS-ből a böngészőben. Végül indítsa el a fejlesztői kiszolgálót az alkalmazáson végrehajtott módosítások frissítéséhez.

npm run dev

Nagy! Le kell tudnia kérni és előállítani a Contentful-hoz hozzáadott tartalmat a React alkalmazásból. Menj előre és stílus a React alkalmazás a Tailwind használatávalhogy fantasztikus megjelenést kapjon.

Könnyű tartalomkezelés

A fej nélküli CMS beépítése a rendszerbe jelentősen leegyszerűsítheti a fejlesztési folyamatot, lehetővé téve, hogy az alapvető alkalmazáslogika felépítésére összpontosítson; ahelyett, hogy jelentős mennyiségű időt töltene a tartalomkezelési feladatokkal.