Сниппеты

Что такое сниппет?

Сниппет (snippet) — это микрошаблон. Сниппетом может быть любое сочетание элементов в редакторе: текстов, заголовков, подзаголовков, изображений, подписей, разделителей, иконок, emoji. Сниппет обычно используют для часто повторяющихся регулярных форматов: "фото дня", “цифра недели”, “место недели”, цитата, блок с представлением автора (юзерпик, имя и небольшое описание), карточка, выносы.

Сохранить в качестве регулярно повторяющегося элемента можно и весь пост.

 

Как добавить сниппет?

В посте есть набор предустановленных сниппетов. Чтобы добавить один из них в пост, нажмите Add snippet на панели инструментов справа.

 

editor_snippets.png

 

Группировка сниппетов

При работе в Setka Editor вы можете группировать однородные по смыслу сниппеты. Это особенно удобно, когда сниппетов много. При сохранении сниппета выберите в какую группу вы хотите его сохранить или создайте для него новую. Группы могут быть различны: «Quotes», «Photo blocks», «Author portrait» и т.д., в зависимости от стиля вашего поста и особенностей оформления.

Перейти к редактированию HTML-кода сниппета в Style Manager можно во вкладке Snippets вашей учетной записи на editor.setka.io.

 

groupsnippets.png

 

Почему некоторые сниппеты неактивны?

Можно добавить сниппет только в пост с такой же системой сеток и количеством колонок.

Поскольку сниппеты создаются и закрепляются за стилями постов, они наследуют их структуру – верстку и систему сеток (grid system). Если при попытке вставить сниппет вы видите, что он не активен – это значит, что система сеток или количество колонок текущего поста и сниппета не совпадают, и Setka Editor заранее предотвращает конфликт стилей.

 

Создать свой сниппет

Собственный кастомный сниппет можно создать во время верстки поста в Setka Editor. В таком случае сниппет закрепляется за стилем, в котором был создан пост.

Определитесь с задачей сниппета, добавьте необходимые элементы (например, в "цифра дня" - это сама цифра и описание к ней), задайте им стиль. Затем выделите все элементы сниппета, зажав CMD (CTRL), появится Multiple Selection Mode. В боковом меню справа нажмите Add snippet, придумайте укажите имя сниппета, после чего, нажмите Save.

В Style Manager можно затем кастомизировать созданный вами сниппет в CSS редакторе (вкладка Snippets), применив к нему нужные стили оформления.

Подробнее о создании сниппетов в Style Manager можно узнать в этой статье.

 

Каким может быть сниппет?

Таким, каким вы сами захотите. Его можно собрать как из присутствующих по-умолчанию графических элементов в библиотеке редактора, так и из ранее нарисованных вами и добавленных в хранилище изображений, а также кастомизированных с помощью CSS.

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

 

 

А так — выноса с цифрой, другого регулярно повторяющегося блока статьи:

 

 

Полезные советы о том как сэкономить время при верстке сложных материалов с примерами создания сниппетов редакторами интернет-издания The Village доступны в статье нашего блога.