Безголовые системы управления контентом (CMS) позволяют отделить функции управления контентом от логики, которая управляет представлением контента в ваших приложениях.

По сути, интегрировав CMS в свое приложение, вы можете легко управлять всем контентом в рамках единого приложения. платформу, а затем беспрепятственно делиться контентом по различным внешним каналам, включая Интернет и мобильные устройства. Приложения.

Что такое безголовая CMS?

Безголовая система управления контентом облегчает создание и управление контентом и цифровыми активами на одной платформе. В отличие от традиционных CMS, контент доставляется через API, такие как GraphQL API, альтернатива RESTful API.. Это позволяет обмениваться контентом через различные веб-приложения и мобильные приложения.

Этот подход позволяет разделить задачи управления контентом и его представления, гарантируя, что вы сможете адаптировать способ контент отображается в соответствии с различными клиентскими приложениями и устройствами, не затрагивая основной контент и его состав.

Начало работы с контентной CMS

Contentful — это автономная система управления контентом, которая позволяет вам создавать, управлять и делиться цифровым контентом и медиа-ресурсами в ваших приложениях с помощью API-интерфейсов.

Чтобы начать использовать Contentful CMS, вам сначала необходимо создать модель контента.

Создайте модель контента

Выполните следующие шаги, чтобы создать модель контента в Contentful.

1. Посещать Сайт Contentful, создайте учетную запись и войдите в систему, чтобы получить доступ к космос. Contentful организует весь контент, связанный с проектом, и связанные с ним активы в этих пространствах.
2. В левом верхнем углу вашего пространства нажмите на значок Модель контента вкладка, чтобы открыть страницу настроек.
3. Нажмите кнопку Добавить тип контента кнопка на модели контента настройки страница. Тип контента в данном случае представляет собой модель (структуру) данных, которые вы будете добавлять в Contentful.
4. Теперь введите имя и описание для вашего типа контента во всплывающем модальном окне. Contentful автоматически заполнит Идентификатор API поле на основе предоставленного вами имени.
5. Далее определите саму структуру контента. Нажмите кнопку Добавить поле кнопку, чтобы добавить пару полей в вашу модель контента. Вот несколько полей, которые вы можете использовать для модели:

   user_ID = type 
   first_name = type 
   role = type 

6. Чтобы добавить поля, выберите значок тип из всплывающего окна типов.
7. Обеспечить имя поля, а затем нажмите кнопку Добавить и настроить кнопка.
8. Наконец, убедитесь, что свойства поля соответствуют ожиданиям на подтверждение страница. Кроме того, находясь на странице подтверждения, вы можете указать дополнительные свойства для полей, например любые правила проверки.
9. Нажмите Подтверждать чтобы добавить новое поле в модель.
10. После того как вы добавите все необходимые поля в свою модель, они появятся в формате списка, как показано ниже. Для завершения нажмите кнопку Сохранять Кнопка, чтобы применить изменения к модели контента.

Добавьте контент

Создав модель контента, добавьте контент, выполнив следующие шаги:

1. Перейдите к своему космическая приборная панель страницу и нажмите кнопку Содержание вкладка.
2. Выберите Тип содержимого, созданную вами модель контента, из раскрывающегося меню на панели поиска. Затем нажмите кнопку Добавить запись кнопка для добавления контента.
3. Далее добавьте содержимое в редактор контента. Для каждой записи не забудьте нажать Публиковать чтобы сохранить его в своем пространстве.

Генерация ключей API

Наконец, вам нужно получить ключи API, которые вы будете использовать для выполнения запросов на получение данных контента из приложения React.

1. Нажмите кнопку Настройки раскрывающееся меню в правом верхнем углу страницы панели управления. Затем выберите Ключи API вариант.
2. Нажмите кнопку Добавить ключ API Кнопка, чтобы открыть страницу настроек ключей API.
3. Contentful автоматически сгенерирует и заполнит ключи API на странице настроек ключей API. Вам нужно только указать имя, чтобы однозначно идентифицировать набор ключей.

Чтобы использовать Contentful API для получения данных, вам понадобится идентификатор пространства и токен доступа. Обратите внимание, что существует два типа токенов доступа: Ключ API доставки контента и API предварительного просмотра контента. В производственной среде вам понадобится ключ API доставки контента.

Но при разработке вам потребуется только идентификатор пространства и API предварительного просмотра контента ключ. Скопируйте эти два ключа и давайте углубимся в код.

Вы можете найти код этого проекта в его GitHub хранилище.

Создать проект React

Для начала вы можете создать приложение React, используя create-react-app. Альтернативно, настроить проект React с помощью Vite. После создания проекта установите этот пакет.

npm install contentful

Теперь создайте .env файл в корневом каталоге папки вашего проекта и добавьте ключи API следующим образом:

VITE_REACT_APP_CONTENTFUL_SPACE_ID="" 
VITE_REACT_APP_CONTENT_PREVIEW_API_ACCESS_TOKEN=""

Создайте хук useContentful

в источник каталог, создайте новую папку и назовите ее крючки. Внутри этой папки добавьте новый использоватьContentful.jsx файл и включите следующий код.

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

Этот пользовательский код перехватчика будет извлекать данные из пространства Contentful. Это достигается путем, во-первых, установления соединения с определенным контентным пространством с использованием предоставленного токена доступа и идентификатора пространства.

Затем хук использует Контентный клиент в рамках getUsers функция для получения записи определенного типа контента, в этом случае код извлекает записи из пользователи тип контента, в частности, выбирая только их поля. Затем полученные данные очищаются и возвращаются в виде массива пользовательских объектов.

Обновите файл App.jsx.

Открой Приложение.jsx файл, удалите шаблонный код React и обновите его следующим кодом.

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

С использоватьСодержимое крючок, вы можете получать и отображать данные контента из Contentful CMS в браузере. Наконец, запустите сервер разработки, чтобы обновить изменения, внесенные в приложение.

npm run dev

Большой! У вас должна быть возможность извлекать и отображать содержимое, добавленное вами в Contentful, из приложения React. Идите вперед и стилизовать приложение React с помощью Tailwindчтобы придать ему фантастический вид.

Управление контентом стало проще

Включение headless CMS в вашу систему может значительно упростить процесс разработки, позволяя вам сосредоточиться на создании основной логики приложения; вместо того, чтобы тратить значительное количество времени на задачи управления контентом.