Общий подход к разработке веб-сайта состоит в том, чтобы построить компоненты, которые можно использовать повторно на разных веб-страницах. Пособие по этому подходу состоит в том, что вы в конечном итоге делаете менее дублирующиеся работу, управляя компонентами, а не управлять дублирующим содержанием на разных страницах. Популярные JavaScript Frameworks, такие как React, Vue и Angular, используют эту концепцию на уровне кода приложения к большому успеху. Как мы можем извлечь выгоду из этого подхода на уровне управления контентом?
В этом руководстве я собираюсь показать вам, как построить компонентный веб-сайт, использующий React и Cosmic JS CMS Отказ Цель состоит в том, чтобы сохранить разработчики и контроль контента и обеспечить масштабируемую модель контента.
Создайте модель содержимого
- PREREQS: Эта статья предполагает, что у вас есть понимание концепций Cosmic JS: типы объектов, объектов и метафайлов. Если вам нужно освежить эти концепции, перейдите к руководству по началую страну.
Использование космических типов объектов JS и Metafields, мы можем создавать компонентные компоненты, которые можно использовать на страницах веб-сайта. Для нашего примера мы создадим три типа объектов:
- Страницы
- Разделы (компоненты, используемые на страницах)
- Участники команды (используемые в разделе команды)
Давайте посмотрим на каждый тип объекта:
Страницы
Все страницы будут включать следующее:
- Название (текст)
- Содержание (HTML Textarea)
- Разделы (Metafield Metafield с несколькими объектами)
Metafield соотношения на несколько объектов будет использоваться для управления разделами страницы.
Члены команды
Metafields:
- Имя (текст Metafield)
- Изображение (файл metafield)
- Цитата (Метафилда для простого текстарии)
Разделы
Тип объекта разделов будет более динамичным и разрешать различные метафайлы.
Секция команды
Metafields:
- Заголовок
- Metafield Metafield соотношения объекта (команда)
- Имя
- Изображение
- Цитировать
Добавьте членов вашей команды:
Раздел регистрации
Metafields:
- Заголовок (текст метафайл)
- Изображение (файл metafield)
- Содержание (HTML Metafield)
- 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 Отказ