Введение в DatoCMS Visual Editing

Что такое DatoCMS Visual Editing?

DatoCMS Visual Editing — это революционная функция, разработанная для устранения разрыва между созданием контента и его представлением, присущего традиционным рабочим процессам headless CMS. Вместо того чтобы заставлять редакторов контента просматривать сложные формы в бэкенде и угадывать, какое поле соответствует какому элементу на странице, Визуальное Редактирование позволяет им взаимодействовать непосредственно с предварительным просмотром работающего веб-сайта. Эта функция переносит интуитивно понятный опыт «что видишь, то и получаешь» (WYSIWYG) непосредственно в среду headless, гарантируя, что изменения контента будут быстрыми, точными и контекстно-зависимыми. Она коренным образом меняет мышление редактора с управления моделями данных на управление страницами и публикациями.

Эта мощная возможность поддерживается двумя различными, но взаимодополняющими рабочими процессами: Клик для редактирования (Content Link) и Редактирование бок о бок (Visual Mode). Важно отметить, что эта функциональность доступна во всех планах DatoCMS, включая бесплатный уровень, и поддерживается специальными SDK для современных фронтенд-фреймворков, таких как Next.js, Astro, Svelte и Vue, что обеспечивает бесшовную интеграцию как для существующих, так и для новых проектов.

Ключевые особенности

• Клик для редактирования (Content Link): Редакторы посещают живой сайт в режиме черновика, наводят курсор на редактируемый контент и нажимают, чтобы мгновенно открыть соответствующее поле в DatoCMS в новой вкладке. Это работает полностью на фронтенде, независимо от хостинга (Vercel, Netlify, Cloudflare).
• Режим «Вид бок о бок» (Side-by-Side Visual Mode): Улучшенная версия плагина Web Previews, которая отображает предварительный просмотр веб-сайта с одной стороны и панель редактирования непосредственно рядом с ним. Нажатие на контент мгновенно открывает соответствующую панель редактора без переключения контекста.
• Стеганографический бэкенд (Steganography Backend): Система использует невидимые символы Unicode, добавляемые к ответам GraphQL API, для кодирования метаданных источника (ID записи, путь к полю, локаль) каждого фрагмента контента, что позволяет фронтенду автоматически сопоставлять клики с правильным источником данных без необходимости ручной настройки разработчиком.
• Двусторонняя синхронизация контекста: В режиме «Вид бок о бок» прокрутка в панели предварительного просмотра синхронизирует панель редактирования, и наоборот, поддерживая идеальный контекст во время сложных правок.
• Универсальная совместимость: Работает «из коробки» со сложными структурами контента, включая ссылки на записи, модульные блоки, структурированный текст (Structured Text) и локализованные поля.
• Поддержка SDK для фреймворков: Специализированные SDK для основных фреймворков (React/Next.js, Astro, Svelte/SvelteKit, Vue/Nuxt) упрощают реализацию, основываясь на фреймворк-независимой библиотеке @datocms/content-link.

Как использовать DatoCMS Visual Editing

Начать работу с Визуальным Редактированием спроектировано так, чтобы быть минимальным, требуя всего три основных шага от разработчиков для активации этого опыта для их контентных команд:

1. Включите кодирование Stega: При получении черновика контента через GraphQL добавьте два специальных заголовка к вашим запросам: X-Visual-Editing: v1 и X-Base-Editing-Url: https://<YOUR-PROJECT-NAME>.admin.datocms.com.
2. Интегрируйте компонент ContentLink: Добавьте фреймворк-специфичный компонент <ContentLink /> в ваш основной файл макета. Этот компонент автоматически сканирует отрисованный DOM на наличие встроенных стеганографических метаданных и отображает необходимые наложения для редактирования.
3. Разблокируйте редактирование бок о бок (Необязательно, но рекомендуется): Установите и настройте плагин Web Previews в настройках вашего проекта DatoCMS, чтобы активировать высокоэффективный интерфейс редактирования бок о бок непосредственно на боковой панели CMS.

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

Сценарии использования

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

FAQ

В: Доступно ли Визуальное Редактирование только в платных планах? О: Нет. DatoCMS сделал Визуальное Редактирование доступным на каждом плане, включая бесплатный план, гарантируя, что все пользователи могут извлечь выгоду из этого расширенного опыта редактирования без необходимости обновления.

В: Что произойдет, если я использую фреймворк, явно не указанный (например, Remix)? О: Все официальные SDK построены на основе фреймворк-независимой библиотеки @datocms/content-link. Вы можете интегрировать эту основную библиотеку непосредственно в любую фронтенд-установку для достижения той же функциональности.

В: Нужно ли мне вручную сопоставлять каждый фрагмент контента с его полем? О: Абсолютно нет. Основное новшество — это стеганографическая техника, которая автоматически добавляет метаданные источника к вашим ответам GraphQL. Компонент <ContentLink /> сканирует эти метаданные и автоматически настраивает наложения для редактирования, устраняя утомительную ручную конфигурацию.

В: Могу ли я использовать Визуальное Редактирование с моей существующей настройкой Web Previews? О: Да. Режим «Вид бок о бок» является обновлением существующего плагина Web Previews. Если вы уже используете Web Previews, включение новой функциональности требует минимальных изменений в конфигурации.

В: Какие типы структур контента это поддерживает? О: Он поддерживает весь спектр моделирования контента DatoCMS, включая стандартные поля, ссылки на другие записи, сложные блоки структурированного текста (Structured Text) и глубоко вложенные структуры модульного контента.