Начиная с этого выпуска, вы можете добавить несколько представлений к одному документу в Sanity Studio. Вы можете открыть несколько из них одновременно с помощью Split Panes. Это позволяет вам создавать более богатый и продвинутый опыт разработки. Он позволяет добавлять собственные предварительные просмотры, метаданные и другие способы просмотра документов в контексте. Просто используя компоненты React. Обновите свои студии до последней версии, ознакомьтесь с новой документацией и изучите нашу примерную студию с широким спектром предварительных просмотров.
С выпуском Structure Builder мы нашли хороший шаблон для как вы можете настроить и спроектировать великолепный авторский опыт от простых структур до более сложных. Сегодня мы анонсируем дополнительные функции, которые еще больше расширяют этот шаблон.
Из коробки Sanity Studio перечислит типы документов, сами документы и формы для выбранного документа на панелях . Панели являются мобильными и могут быть свернуты. Но часто вам нужен больший контроль над тем, как документы группируются, и вы хотите приспособить различные рабочие процессы, где вы хотите получить доступ к одному и тому же документу, но по разным маршрутам.
Вот почему мы сделали Structure Builder как способ предоставляя вам полную гибкость в отношении того, как документы перечислены на этих панелях. Это позволяет создавать все, начиная от студии, в которой отображается только форма для одного конкретного документа, до студии, которая отображает пользовательские списки документов из событий в реальном времени. Конструктор структуры также позволяет вам настраивать рабочие процессы редактирования, группируя документы на основе их значений.
Теперь мы добавили больше методов в API Строителя структуры, который позволяет вам определять набор представлений для того, как каждый документ отображается в своей панели. В настоящее время представление может быть либо формой по умолчанию, либо любым указанным вами React-компонентом. Последний получает реквизиты, включая документ в его черновике, опубликованном, историческом и отображенном состоянии. Это позволяет легче создавать настраиваемые процессы разработки с использованием данных в реальном времени, которые уже проходят через Studio.
Если оставить в стороне технические возможности, это хороший повод поговорить о чем-то, о чем мы некоторое время думали: Предварительные просмотры.
Большинство CMS с функцией «живого предварительного просмотра» позволяют разрешать внешние URL-адреса. или нажмите на встроенный шаблонизатор. Некоторые также решают эту проблему путем создания авторского опыта «Что видишь, то и получаешь» (WYSIWYG). Это имеет смысл, когда ваш контент моделируется на основе очень конкретной презентации. Но это также цена: в конечном итоге вы получаете контент, привязанный к определенной презентации. И вместо того, чтобы организовывать контент вокруг того, что он на самом деле означает, вы в конечном итоге привязываете его к страницам, на которых он застрял прямо сейчас.
Структурированный контент повышает ценность вашего текста, изображений и других медиафайлов, разблокируя их из специфика. Он также имеет немного более высокий уровень абстракции и некоторые новые способы работы. Не имеет смысла учитывать встроенные возможности редактирования WYSIWYG, например, поскольку ваш веб-сайт, вероятно, делится контентом между различными презентациями.
Даже если вы используете Sanity.io в основном в качестве бэкэнда веб-сайта, вы, вероятно, повторно используете то же самое содержание на разных страницах и компонентах. Или, возможно, что еще более важно: оставьте свободу переделывать свой контент в новые презентации позже.
Предварительные просмотры дают возможность авторам и редакторам понять не только то, как их работа представлена, но, что более важно, воспринимается , Мы рассматриваем предварительный просмотр как «порталы эмпатии», как инструменты, которые облегчают разработку, позволяя вам иметь отношение к пользовательскому опыту.
Рассмотрение предварительных просмотров таким образом заставляет задуматься: почему предварительные просмотры должны быть ограничены только сетью предварительный просмотр? Если ваш контент окажется в разных местах перед разными людьми, разве это не должно сообщить, как мы размещаем превью в CMS? Контент-стратеги, такие как Карен Макгрейн и Джефф Итон, подняли этот вопрос более полувека назад, но нам все еще кажется, что предварительные просмотры в основном рассматриваются с точки зрения того, как выглядят изменения на веб-сайте . По крайней мере, это то, куда идут текущие инновации и энергия.
Мы хотим расширить и оспорить устоявшиеся идеи о том, какими могут быть предварительные просмотры в CMS. Таким образом, мы сделали множество примеров различных предварительных просмотров, которые, как мы надеемся, могут быть полезными и вдохновляющими.
И, конечно, мы начнем с очевидного примера, просто чтобы убрать это с пути.
Скажем, вы хотите предварительный просмотр веб-страницы, для которой вы редактируете. Вы можете иметь это. Здесь мы используем интерфейс Гэтсби. Сначала подпишитесь на Gatsby Preview (если вы использовали наш исходный плагин, он должен работать из коробки). Включите watchMode и добавьте токен чтения. Теперь у вас будет предварительный просмотр в реальном времени с малой задержкой в облаке. Вы можете проверить, как это делается в нашей примерной студии на GitHub.
Вот минимальный пример использования Structure Builder:
] импорт S из '@ sanity / desk-tool / construction-builder'
const url = 'https://yourDomain.gtsb.io/projects/'
const WebPreview = ( { документ ] 19199019]]) => {
const { отображаемый } = документ
return (
< IFrame
src = { url + отображал . слаг . }
frameBorder = { 0 }
/>
)
}
export const getDefaultDocumentNode = ( [19459019 ) => {
if ( schemaType === "проект" ) {[19459
возвращение S . документ ( ] . просмотров ( [
S . вид . форма ( )
S . вид . Компонент ( WebPreview ) . название ( 'веб' )
] )
}
}
экспорт по умолчанию S . значения по умолчанию (] [19459] [19459] [19459]
Если подумать, первое место, где встречается большинство вашей аудитории ваш контент на самом деле не ваш сайт, он находится в поиске и в социальных сетях. Когда ваш контент представлен в результатах поиска и в виде карточек социальных сетей, в игре появляются другие ограничения, которые может быть сложнее контролировать. Это может быть количество доступных символов или обрезка изображения, связанного с вашим контентом. В студии-примере вы найдете несколько простых компонентов для предварительного просмотра того, как контент выглядит в Google, Twitter и Facebook. Вы можете позаимствовать этот код из примера Studio на GitHub.
Размышления о предварительном просмотре с точки зрения сочувствия и опыта пользователя заставили нас задуматься о доступности. Люди несут с собой разные способности и имеют разные проблемы, и когда дело доходит до восприятия, легко забыть о тех проблемах, которых у вас самих нет. Итак, мы сделали три примера, чтобы подчеркнуть это:
Предварительный просмотр, позволяющий имитировать внешний вид вашего сайта для людей с различными типами дальтонизма.
Предварительный просмотр, который позволяет выбрать текстовое поле из ваш документ и используйте синтез речи в браузере для имитации программ чтения с экрана.
Предварительный просмотр, который дает вам визуальное представление поля Брайля. Это, конечно, не так полезно для людей, которые зависят от Брайля. Однако мы надеемся, что усилия, подобные тем, которые были представлены в этом выступлении Теодором Ворильясом, могут помочь сократить разрыв и сделать предварительный просмотр Брайля на физических интерфейсах более доступным.
Пойдите и изучите код для предварительного просмотра специальных возможностей на GitHub.
У нас уже есть клиенты, которые используют контент из цифровых вывесок, киосков, интерактивов и установок API-интерфейсов Sanity. Почему бы не дать вашим редакторам приблизительное представление о том, как их работа представлена в этих настройках?
С помощью небольшого CSS и матричного исчисления мы создали компонент, который позволяет отображать контент в реальных условиях. Опять же, это подчеркивает, что вы разрабатываете контент для сценариев с различными ограничениями.
Код для предварительного просмотра IRL на GitHub.
Структурированный контент используется не только в цифровых каналах! OMA использует материалы Sanity для печати книг в своих собственных издательствах. Другие использовали его, чтобы сделать книгу рецептов пиццы. И мы знаем о других организациях, которые используют контент из Sanity.io в PDF-генератор, используемый для производства печатных материалов.
Мы также хотели сделать простой пример для этого и создать сервис на Zeit's Now, который позволяет нам запускать Puppeteer (Chrome без головы) в функции без сервера. Затем мы могли бы создать визитную карточку с использованием HTML и CSS и создать не только предварительный просмотр того, как карты будут выглядеть на лету, но и фактический PDF. Его можно загрузить из Studio.
Мы являемся поклонниками всех усилий, которые пытаются улучшить пользовательский опыт, но мы не уверены, что повторное изобретение встроенного редактирования содержимого WYSIWYG, которое привязывает контент к определенной презентации, является путь Вместо этого давайте воспользуемся современными инструментами, чтобы сделать лучший и более универсальный опыт разработки. Это не только стремится дать авторам чувство контроля, но и дает им возможность исследовать, как их контент воспринимается их аудиторией.
Загрузка...
