У вас есть существующее приложение, в котором есть контент, которым вы хотите управлять, но не хотите полностью перестраивать в CMS? Этот вариант использования встречается чаще, чем вы можете себе представить. Разработчики начинают создавать приложение намного позже и обнаруживают, что оно выиграет от таких возможностей создания CMS, как контекстное редактирование и предварительный просмотр. Какое решение? Пересобрать приложение? Нет. Crafter CMS - это автономная CMS, которая не зависит от внешнего интерфейса. Его можно подключить к любому приложению.
Давайте посмотрим на очень простой пример. Совсем недавно я опубликовал блог, в котором использовалось внешнее приложение Node JS, которое называло Crafter CMS с возможностями Headless CMS для контента через API.
На скриншоте выше контент «Привет, я являюсь редактором HTML5 UP» передается в приложение NodeJS через API.
Авторы контента привыкли работать с контекстным редактированием и предварительным просмотром, как показано ниже:
В этом блоге я расширю приведенный выше пример, чтобы показать, как включить эти функции для авторов вашего контента. Методы, показанные в этом блоге, применимы к любой интерфейсной веб-технологии. Crafter CMS предоставляет дополнительную помощь для определенных фреймворков, таких как React JS. Об этом / будут рассказаны в других блогах.
Начиная
Следуйте инструкциям в этом блоге, чтобы получить внешнее приложение, которое извлекает редактируемый контент из Crafter CMS через API. Если вы предпочитаете работать в браузере, а не в Node JS, вот еще один пример простого приложения, которое полностью запускается в браузере. В этом блоге я буду использовать пример Node JS.
Выполнив этот шаг, вы сможете:
- Внесите изменения в текст героя на сайте редакции через Crafter Studio.
- Посмотрите, как изменилось ваше внешнее приложение, работающее на Node JS.
Включение предварительного просмотра
Следующим шагом является включение предварительного просмотра для авторов контента, чтобы они могли видеть, как контент будет выглядеть во внешнем приложении. Для простоты в нашем примере я изменю сайт редакции для предварительного просмотра внешнего приложения. В некоторых случаях вы можете оставить редакторский сайт / возможности авторинга как есть и создать новый проект для внешнего приложения. Приступим к основам.
Шаг 1. Настройте предварительный просмотр сайта
- На редакционном сайте нажмите на боковую панель, чтобы открыть меню Боковая панель.
- Нажмите Конфигурация сайта, чтобы перейти к администрированию сайта.
- В консоли Конфигурация сайта нажмите Конфигурация, затем выберите Конфигурация сайта из падать.
- Добавьте следующую строку в XML в указанном месте и нажмите Сохранить.
- ‹PreviewServer› http: // localhost: 3000 ‹/previewServer›
- Нажмите на логотип Crafter, чтобы вернуться к созданию контента для сайта.
- Перейдите к предварительному просмотру для домашней страницы, и вы увидите свое приложение Node JS в режиме предварительного просмотра.
После выполненной конфигурации Crafter Studio теперь обращается к внешнему приложению для предварительного просмотра. Пока внешнее приложение указывает на API-интерфейсы, на которых работает Crafter Engine, поддерживающий предварительный просмотр, вы сможете вносить изменения и видеть их в предварительном просмотре.
Включение редактирования в контексте
Crafter Studio упрощает доступ к контенту, который вы хотите отредактировать. Боковая панель, панель инструментов и другие элементы пользовательского интерфейса позволяют быстро и легко переходить к содержимому. Редактирование в контексте - это возможность щелкать элементы в предварительном просмотре, редактировать их и видеть изменения. Это гораздо более наглядный способ поиска и редактирования контента, поскольку его расположение в информационной архитектуре не имеет значения.
В Crafter Studio вы включаете контекстное редактирование, щелкая карандашом на панели инструментов в верхней части экрана. Это позволяет использовать карандаши на протяжении всего предварительного просмотра, что позволяет редактировать связанные элементы напрямую, как показано на рисунке выше.
Контекстное редактирование - это интеграция с Crafter Studio, это своего рода сотрудничество между приложением Studio и просматриваемым сайтом / приложением, что позволяет использовать функции контекстного редактирования, такие как карандаши и перетаскивание. В этом блоге мы покажем простой, независимый от фреймворка способ поддержки этой интеграции. Crafter CMS имеет дополнительные библиотеки для определенных фреймворков, таких как React JS, Angular, Freemarker и т. Д., Которые инкапсулируют многие из этих деталей.
Шаг 1. Включите связь
Чтобы обеспечить связь между предварительным просмотром вашего приложения и Crafter Studio, вы должны включить крошечный фрагмент Javascript, который мы называем «гостевой» библиотекой.
Для этого добавьте в нижнюю часть страницы следующее включение.
‹script src =” http: /studio/static-assets/libs/requirejs/require.js ”data-main =” http: / studio / overlayhook? page = x & site = id & cs.js ”› ‹/script›
В нашем примере с Node JS мы собираемся редактировать прямо через приложение. Чтобы включить это, добавьте в свой package.json следующее:
«прокси»: {
«/ api»: {«target»: «http: // localhost: 8080»},
«/ studio»: {«target»: «http: // localhost: 8080 »},
« / static-assets »: {« target »:« http: // localhost: 8080 »}
},
Шаг 2. Укажите, где находятся «карандаши» областей редактирования в контексте
Чтобы включить редактирование содержимого с помощью мыши и щелчка, необходимо указать, где находятся регионы и к какому содержимому они относятся. Для этого в приложениях HTML5 Crafter Studio (и гостевая библиотека) использует атрибуты HTML5.
Используются следующие атрибуты:
- data-studio-ice: это свойство помечает элемент как контейнер для редактирования в контексте. Никакого значения не требуется.
- data-studio-component-path: Это путь объекта содержимого. Пример: «/site/products/a-component.xml»
- data-studio-ice-path: Это путь объекта содержимого. Пример: «/site/products/a-component.xml»
- data-studio-component: Это название типа контента. Пример: «/ component / product»
Пример элемента контейнера:
‹div data-studio-component-path =” / site / products / a-component.xml ”
data-studio-component =” / component / product ”
data-studio-ice = ””
data-studio-ice-path = ”/ site / products / a-component.xml” ›
ВНУТРЕННИЙ HTML
‹/div›
Шаг 3: Попробуйте!
После того, как вы отметили элементы в приложении соответствующими метаданными, вы готовы приступить к редактированию.
- Войдите в Crafter Studio (в нашем примере: http: // localhost: 3000 / studio)
- Перейдите в предварительный просмотр приложения.
- Включите контекстное редактирование, нажав на значок карандаша в главном меню навигации.
- Нажмите на карандаши и приступайте к редактированию 🙂 Это очень просто.
Вывод
Часто разработчики хотят включить контент для приложения, которое является внешним по отношению к их CMS. Либо приложение было создано до того, как ему потребовались функции CMS, либо разработчики создали вне CMS, чтобы не быть ограниченными традиционными структурами CMS. Платформы Headless CMS - это архитектуры CMS, ориентированные на контент / API, которые слабо связывают ваше приложение с CMS. Эта новая архитектура позволила создать множество новых каналов управления контентом, включая собственные мобильные приложения и новые удобные для пользователя среды приложений, такие как ReactJS и AngularJS. Проблема в том, что почти ни одна CMS не поддерживает предварительный просмотр и редактирование приложений и каналов, которые извлекают из них контент. Здесь Crafter CMS отличается. Crafter CMS всегда была независимой, и ее архитектура всегда была независимой от внешнего интерфейса. Crafter CMS - это автономная CMS, которая поддерживает опыт разработки, к которому привыкли ваши авторы контента.
