Рубрики
Без рубрики

Разработка сайта на основе компонентов с реагированием и космическими JS CMS

В этом уроке я собираюсь показать вам, как создать компонентный веб-сайт, использующий Cosmic JS.

Автор оригинала: Tony Spiro.

Общий подход к разработке веб-сайта состоит в том, чтобы построить компоненты, которые можно использовать повторно на разных веб-страницах. Пособие по этому подходу состоит в том, что вы в конечном итоге делаете менее дублирующиеся работу, управляя компонентами, а не управлять дублирующим содержанием на разных страницах. Популярные JavaScript Frameworks, такие как React, Vue и Angular, используют эту концепцию на уровне кода приложения к большому успеху. Как мы можем извлечь выгоду из этого подхода на уровне управления контентом?

В этом руководстве я собираюсь показать вам, как построить компонентный веб-сайт, использующий React и Cosmic JS CMS Отказ Цель состоит в том, чтобы сохранить разработчики и контроль контента и обеспечить масштабируемую модель контента.

Создайте модель содержимого

  • PREREQS: Эта статья предполагает, что у вас есть понимание концепций Cosmic JS: типы объектов, объектов и метафайлов. Если вам нужно освежить эти концепции, перейдите к руководству по началую страну.

Использование космических типов объектов JS и Metafields, мы можем создавать компонентные компоненты, которые можно использовать на страницах веб-сайта. Для нашего примера мы создадим три типа объектов:

  1. Страницы
  2. Разделы (компоненты, используемые на страницах)
  3. Участники команды (используемые в разделе команды)

Давайте посмотрим на каждый тип объекта:

Страницы

Все страницы будут включать следующее:

  1. Название (текст)
  2. Содержание (HTML Textarea)
  3. Разделы (Metafield Metafield с несколькими объектами)

Metafield соотношения на несколько объектов будет использоваться для управления разделами страницы.

Метафолды

Члены команды

Metafields:

  1. Имя (текст Metafield)
  2. Изображение (файл metafield)
  3. Цитата (Метафилда для простого текстарии)

Разделы

Тип объекта разделов будет более динамичным и разрешать различные метафайлы.

Секция команды

Metafields:

  1. Заголовок
  2. Metafield Metafield соотношения объекта (команда)
  • Имя
  • Изображение
  • Цитировать

Добавьте членов вашей команды:

Члены команды

Раздел регистрации

Metafields:

  1. Заголовок (текст метафайл)
  2. Изображение (файл metafield)
  3. Содержание (HTML Metafield)
  4. CTA (текстовый метафайл)

Добавьте разделы на страницы Теперь, когда у нас есть наши разделия, мы можем добавить их на наши страницы:

Разделы

Кодируйте это

Теперь, когда у нас сохранено наш контент, давайте сделаем некоторое кодирование. Скачать React Starter:

git clone https://github.com/cosmicjs/react-starter

Теперь входите в компонент страницы и отредактируйте его, чтобы выглядеть так:

// page.js
import SectionList from './section-list'
export default ({ page }) => (
  

{page.title}

)

Как вы можете видеть, мы добавили список раздела на нашей странице объект. Наш список раздела и компоненты раздела выглядят следующим образом:

// section-list.js
import TeamSection from './sections/team'
import SignupSection from './sections/signup'
export default ({ sections }) => (
  
{ sections.map(section => { if (section.metadata.team) return if (section.metadata.cta) return }) }
)
// signup.js
export default ({ section }) => (
  

{section.metadata.headline}

)
// team.js
export default ({ section }) => (
  

{section.metadata.headline}

{ section.metadata.team.map(person => { return (
{person.metadata.name}
{person.metadata.quote}
) }) }
)

Выход компонента раздела определяется данными, переданными через Раздел пропры

В заключении

COSMIC JS CMS – это отличное решение для строительных компонентов веб-сайтов. В нашем примере мы создали объект страницы с несколькими метафайлами объекта, подключенными к типам объекта разделов, чтобы добавить компоненты раздела. Пособие по этому подходу состоит в том, что теперь мы можем управлять контентом раздела в одном месте и повторно использовать его через страницы, без необходимости переходить на каждую страницу для редактирования дубликатов данных.

Я надеюсь, что вы нашли это полезно. Если у вас есть дополнительные вопросы, Присоединяйтесь к нашему сообществу на Slack и Обратитесь к нам в Twitter Отказ

Фото Ланс Андерсон на Unsplash