Peata sisuhaldussüsteemid (CMS) võimaldavad teil lahti siduda sisuhaldusfunktsioonid loogikast, mis käsitleb seda, kuidas sisu teie rakendustes esitatakse.

Sisuliselt saate oma rakendusse CMS-i integreerimisega hõlpsalt hallata kogu sisu ühest küljest platvormil ja seejärel sujuvalt jagada sisu erinevate kasutajaliidese kanalite vahel, sealhulgas veebis ja mobiilis rakendusi.

Mis on peata CMS?

Peata sisuhaldussüsteem hõlbustab sisu ja digitaalsete varade loomist ja haldamist ühel platvormil. Erinevalt traditsioonilisest CMS-ist edastatakse sisu API-de kaudu, näiteks GraphQL API, alternatiiv RESTful API-dele. See võimaldab jagada sisu erinevate veebi- ja mobiilirakenduste vahel.

See lähenemisviis võimaldab eraldada sisuhalduse ja selle esituse probleemid, tagades, et saate kohandada, kuidas sisu kuvatakse nii, et see sobiks erinevatele kliendirakendustele ja seadmetele, mõjutamata selle aluseks olevat sisu ja selle sisu struktuur.

Sisulise CMS-iga alustamine

Contentful on peata sisuhaldussüsteem, mis võimaldab teil luua, hallata ja jagada oma digitaalset sisu ja meediaressursse rakendustes, kasutades selle API-sid.

Sisulise CMS-i kasutamise alustamiseks peate esmalt looma sisumudeli.

Looge sisumudel

Sisumudeli loomiseks rakenduses Contentful järgige neid samme.

1. Külastage Sisulise veebisait, looge konto ja logige sisse, et pääseda juurde oma ruumi. Contentful korraldab nendes ruumides kogu projektiga seotud sisu ja seotud varad.
2. Klõpsake oma ruumi vasakus ülanurgas ikooni Sisu mudel vahekaarti, et avada seadete leht.
3. Klõpsake nuppu Lisage sisutüüp nuppu sisumudelil seaded lehel. Sisutüüp esindab sel juhul nende andmete mudelit (struktuuri), mille lisate jaotisesse Sisuline.
4. Nüüd sisestage a nimi ja kirjeldus teie sisutüübi jaoks hüpikmodaalis. Sisuline täidab automaatselt Api identifikaator välja antud nime alusel.
5. Järgmisena määratlege sisu struktuur ise. Klõpsake nuppu Lisa väli nuppu, et lisada oma sisumudelisse paar välja. Siin on mõned väljad, mida saate mudeli jaoks kasutada.

   user_ID = type 
   first_name = type 
   role = type 

6. Väljade lisamiseks valige tüüp tüüpide hüpikaknast.
7. Pakkuda a välja nimija seejärel klõpsake nuppu Lisa ja konfigureeri nuppu.
8. Lõpuks veenduge, et välja omadused on ootuspärased kinnitamine lehel. Lisaks saate kinnituslehel olles määrata väljadele täiendavaid atribuute, näiteks mis tahes valideerimisreegleid.
9. Klõpsake Kinnita mudelile uue välja lisamiseks.
10. Kui olete kõik vajalikud väljad oma mudelile lisanud, kuvatakse need loendivormingus, nagu allpool näidatud. Lõpetamiseks klõpsake nuppu Salvesta nuppu, et rakendada muudatused sisumudelile.

Lisage sisu

Kui sisumudel on paigas, jätkake ja lisage sisu, järgides neid samme.

1. Navigeerige oma ruumi armatuurlaud lehele ja klõpsake nuppu Sisu sakk.
2. Valige Sisu tüüp, teie loodud sisumudel, otsinguriba rippmenüüst. Seejärel klõpsake nuppu Lisa kirje nuppu sisu lisamiseks.
3. Järgmisena lisage sisu sisuredaktor. Iga kirje puhul ärge unustage klõpsata Avalda et see oma ruumi salvestada.

Looge API võtmed

Lõpuks peate haarama oma API võtmed, mida kasutate Reacti rakendusest sisuandmete toomise taotluste esitamiseks.

1. Klõpsake nuppu Seaded rippmenüüst armatuurlaua lehe paremas ülanurgas. Seejärel valige API võtmed valik.
2. Klõpsake nuppu Lisage API võti nuppu, et avada API võtmete seadete leht.
3. Contentful genereerib ja sisestab API võtmed automaatselt API võtmete seadete lehel. Võtmete komplekti unikaalseks tuvastamiseks peate sisestama ainult nime.

Andmete toomiseks sisuliste API-de kasutamiseks vajate ruumi ID ja juurdepääsuluba. Pange tähele, et juurdepääsulubasid on kahte tüüpi: Sisu edastamise API võti ja Sisu eelvaate API. Tootmiskeskkonnas vajate sisu edastamise API võtit.

Kuid arenduses vajate ainult ruumi ID-d ja Sisu eelvaate API võti. Kopeerige need kaks võtit ja sukeldume koodi.

Selle projekti koodi leiate sellest GitHub hoidla.

Looge reageerimisprojekt

Alustamiseks saate React-rakenduse karkassi loomine-reageerimine-rakenduse abil. Teise võimalusena seadistage Vite abil Reacti projekt. Pärast projekti loomist jätkake ja installige see pakett.

npm install contentful

Nüüd looge a .env faili oma projekti kausta juurkataloogi ja lisage API võtmed järgmiselt:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Loo useContentful Hook

Aastal src kataloogi, looge uus kaust ja andke sellele nimi konksud. Lisage sellesse kausta uus useContentful.jsx faili ja lisage järgmine kood.

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

See kohandatud konksukood toob andmed sisuruumist. See saavutatakse, luues esiteks ühenduse konkreetse sisulise ruumiga, kasutades kaasasolevat juurdepääsuluba ja ruumi ID-d.

Seejärel kasutab konks Rahulik klient sees getUsers allalaadimise funktsioon sissekandeid konkreetse sisutüübi jaoks, sel juhul tõmbab kood sisse kirjed kasutajad sisutüüp, valides konkreetselt ainult nende väljad. Seejärel puhastatakse toodud andmed ja tagastatakse kasutajaobjektide massiivina.

Värskendage faili App.jsx

Ava App.jsx faili, kustutage reageerimiskood ja värskendage seda järgmise koodiga.

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

Koos useContentful konks, saate sisuandmeid sisupõhisest CMS-ist tõmmata ja brauseris kuvada. Lõpuks käivitage arendusserver, et värskendada rakenduses tehtud muudatusi.

npm run dev

Suurepärane! Peaksite saama rakendusest React saidile Contentful lisatud sisu tuua ja renderdada. Mine edasi ja Stiilige rakendus React, kasutades Tailwindiet anda sellele fantastiline välimus.

Lihtne sisuhaldus

Peatu CMS-i lisamine oma süsteemi võib arendusprotsessi oluliselt sujuvamaks muuta, võimaldades teil keskenduda põhirakenduse loogika loomisele; selle asemel, et kulutada palju aega sisuhaldusülesannetele.