Turinio valdymo sistemos be galvos (TVS) leidžia atsieti turinio valdymo funkcijas nuo logikos, kuri valdo, kaip turinys pateikiamas jūsų programose.

Iš esmės, integravę TVS į savo programą, galite lengvai valdyti turinį vienoje vietoje platformą, tada sklandžiai bendrinkite turinį įvairiuose priekiniuose kanaluose, įskaitant žiniatinklį ir mobilųjį programos.

Kas yra TVS be galvos?

Turinio valdymo sistema be galvos palengvina turinio ir skaitmeninio turto kūrimą ir valdymą vienoje platformoje. Skirtingai nuo tradicinių TVS, turinys pristatomas per API, pvz GraphQL API, alternatyva RESTful API. Tai leidžia bendrinti turinį įvairiose žiniatinklio ir mobiliosiose programose.

Šis metodas leidžia atskirti turinio valdymo ir jo pateikimo problemas – tai užtikrina, kad galėsite pritaikyti, kaip tai padaryti turinys rodomas taip, kad tiktų skirtingoms klientų programoms ir įrenginiams, nepažeidžiant pagrindinio turinio ir jo struktūra.

Darbo su turinio turinio valdymo sistema pradžia

„Contentful“ yra be galvos turinio valdymo sistema, leidžianti kurti, valdyti ir bendrinti skaitmeninį turinį ir medijos išteklius visose programose naudojant API.

Norėdami pradėti naudoti turinio turinio valdymo sistemą, pirmiausia turite sukurti turinio modelį.

Sukurkite turinio modelį

Atlikite šiuos veiksmus, kad sukurtumėte turinio modelį „Contentful“.

1. Apsilankykite „Contenful“ svetainė, susikurkite paskyrą ir prisijunkite, kad pasiektumėte savo erdvė. „Contentful“ tvarko visą su projektu susijusį turinį ir susijusį turtą šiose erdvėse.
2. Viršutiniame kairiajame erdvės kampe spustelėkite Turinio modelis skirtuką, kad atidarytumėte nustatymų puslapį.
3. Spustelėkite Pridėti turinio tipą turinio modelio mygtuką nustatymus puslapį. Šiuo atveju turinio tipas reiškia duomenų, kuriuos pridėsite prie turinio, modelį (struktūrą).
4. Dabar įveskite a vardas ir apibūdinimas jūsų turinio tipui iššokančiame režime. Turinys automatiškai užpildys Api identifikatorius pagal jūsų pateiktą pavadinimą.
5. Tada apibrėžkite pačią turinio struktūrą. Spustelėkite Pridėti lauką mygtuką, kad pridėtumėte keletą laukų prie turinio modelio. Štai keli laukai, kuriuos galite naudoti modeliui:

   user_ID = type 
   first_name = type 
   role = type 

6. Norėdami pridėti laukų, pasirinkite tipo iš iškylančio tipo lango.
7. Pateikite a lauko pavadinimas, tada spustelėkite Pridėti ir konfigūruoti mygtuką.
8. Galiausiai patikrinkite, ar lauko ypatybės yra tokios, kokios tikimasi patvirtinimas puslapį. Be to, būdami patvirtinimo puslapyje, galite nurodyti papildomų laukų ypatybių, pvz., patvirtinimo taisykles.
9. Spustelėkite Patvirtinti norėdami pridėti naują lauką prie modelio.
10. Kai prie modelio pridėsite visus reikiamus laukus, jie bus rodomi sąrašo formatu, kaip parodyta toliau. Norėdami užbaigti, spustelėkite Sutaupyti mygtuką, kad pritaikytumėte turinio modelio pakeitimus.

Pridėti turinį

Sukūrę turinio modelį, pridėkite turinį atlikdami šiuos veiksmus:

1. Eikite į savo erdvės prietaisų skydelis puslapį ir spustelėkite Turinys skirtuką.
2. Pasirinkite Turinio tipas, jūsų sukurtas turinio modelis, paieškos juostoje esančiame išskleidžiamajame meniu. Tada spustelėkite Pridėti įrašą mygtuką, kad pridėtumėte turinį.
3. Tada pridėkite turinį prie turinio redaktorius. Prie kiekvieno įrašo nepamirškite spustelėti Paskelbti išsaugoti jį savo erdvėje.

Sukurkite API raktus

Galiausiai turite paimti API raktus, kuriuos naudosite prašydami gauti turinio duomenis iš programos „React“.

1. Spustelėkite Nustatymai išskleidžiamajame meniu viršutiniame dešiniajame prietaisų skydelio kampe. Tada pasirinkite API raktai variantas.
2. Spustelėkite Pridėti API raktą mygtuką, kad atidarytumėte API raktų nustatymų puslapį.
3. „Contentful“ automatiškai sugeneruos ir užpildys API raktus API raktų nustatymų puslapyje. Jums tereikia pateikti pavadinimą, kad galėtumėte vienareikšmiškai identifikuoti raktų rinkinį.

Kad galėtumėte naudoti turinio API duomenims gauti, jums reikia erdvės ID ir prieigos raktas. Atkreipkite dėmesį, kad yra dviejų tipų prieigos prieigos raktai: Turinio pristatymo API raktas ir Turinio peržiūros API. Gamybos aplinkoje jums reikės turinio pristatymo API rakto.

Tačiau kuriant jums reikia tik erdvės ID ir Turinio peržiūros API Raktas. Nukopijuokite šiuos du raktus ir pasinerkime į kodą.

Šio projekto kodą galite rasti jame GitHub saugykla.

Sukurkite Reagavimo projektą

Norėdami pradėti, galite sukurti „React“ programą naudodami „create-react-app“.. Arba nustatykite React projektą naudodami Vite. Sukūrę projektą eikite į priekį ir įdiekite šį paketą.

npm install contentful

Dabar sukurkite a .env failą projekto aplanko šakniniame kataloge ir pridėkite API raktus taip:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Sukurkite „useContentful Hook“.

Viduje src kataloge, sukurkite naują aplanką ir pavadinkite jį kabliukai. Šiame aplanke pridėkite naują useContentful.jsx failą ir įtraukite šį 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 };
};

Šis tinkintas kablio kodas paims duomenis iš turinio erdvės. Tai pasiekiama pirmiausia užmezgant ryšį su konkrečia turinio erdve, naudojant pateiktą prieigos raktą ir erdvės ID.

Tada kabliukas naudoja Patenkintas klientas viduje getUsers funkcija atkurti įrašų konkretaus turinio tipo, šiuo atveju kodas gauna įrašus vartotojų turinio tipą, konkrečiai pasirenkant tik jų laukus. Tada gauti duomenys išvalomi ir grąžinami kaip vartotojo objektų masyvas.

Atnaujinkite App.jsx failą

Atidaryk App.jsx failą, ištrinkite „React“ kodą ir atnaujinkite jį tokiu kodu.

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

Su naudotiTurinys kabliuką, galite gauti ir naršyklėje rodyti turinio duomenis iš „Contentful CMS“. Galiausiai paleiskite kūrimo serverį, kad atnaujintumėte programos pakeitimus.

npm run dev

Puiku! Turėtumėte galėti gauti ir pateikti turinį, kurį įtraukėte į „Contentful“ iš programos „React“. Pirmyn ir stiliaus React programa naudojant Tailwindkad suteiktų fantastišką išvaizdą.

Paprastas turinio valdymas

Į savo sistemą įtraukus begalvę TVS, kūrimo procesas gali būti žymiai supaprastintas, todėl galėsite sutelkti dėmesį į pagrindinės programos logikos kūrimą; o ne praleisti daug laiko turinio valdymo užduotims.