Inter-Net.PRO

сниппет  Как в визуальном редакторе JCE PRO создавать сниппеты или как это называется в самом редакторе - шаблоны.

  Большинству из нас конечно же знаком плагин Emmet, который интегрирован в множество самых разных редакторов и упрощает написание кода благодаря своим сниппетам.

  Сниппеты - это быстрые команды, разворачивающие код в заданном шаблоне. Не совсем такое, но по смыслу очень похожий инструмент есть в редакторе JCE PRO. Называется он - Менеджер шаблонов.


Менеджер шаблонов в редакторе JCE

  Если я не ошибаюсь, то данная возможность использовать сниппеты есть только в pro версии редактора.

  В панеле редактора JCE PRO есть иконка, при наведении на которую курсора мышки, появляется всплывающая подсказка с текстом - Вставить / редактировать шаблон

jce шаблоны

  Если данной иконки нет, то добавьте её на панель в настройках профиля редактора.

  Добавить кнопку Шаблоны можно в Компоненты - Редактор JCE - Профили. Выбираете нужный профиль редактора, где на вкладке Особенности и Макет из поля Доступные кнопки и панели инструментов обычным перетаскиванием мышкой находите иконку и перетаскиваете её в панель редактора (поле с названием Текущий макет редактора).


менеджер шаблонов jce

Настройка менеджера шаблонов в JCE

  Прежде чем начать работу со сниппетами, нужно сделать небольшие настройки.

  Попасть в настройки можно из меню в админ-панеле по пути:

Компоненты - Редактор JCE - Профили

где выбрать из списка нужный вам профиль.


  Зайдя в профиль, переходим на вкладку с названием Параметры плагина, где опускаемся вниз до пункта Менеджер шаблонов (скриншот справа).

  Включив вкладку менеджера шаблонов, мы увидим настройки данного плагина (после активации вкладки нужно подняться вверх).

 Настройки

 По умолчанию шаблоны хранятся в папке images. Для меня это очень неудобно и поэтому я в настройке Путь к каталогу файлов указываю:

media/jce/snippets

jce шаблоны

  Путь который указываю я не обязательный - можете указать любое место в структуре вашего сайта.

  При первом вызове менеджера шаблонов, плагин сам создаст папку (если её нет по указанному пути) и в ней файл заглушку index.html но можете и сами создать папку по указанному пути.

  В остальном я незаморачиваюсь и оставляю всё как есть.


Как делать сниппеты в визуальном редакторе JCE

 Теперь что касается самих шаблонов.

 Если создавать сниппеты прям в редакторе, то они сохраняются с полной  структурой кода для HTML страниц:

<!DOCTYPE html>
<html>
<head>
<title>test-snip.html</title>
<meta charset="utf-8">
</head>
<body>
	<div>Код/содержимое сниппета</div>
</body>
</html>

 

  Разумеется мне такие сниппеты и даром не нужны.

  Я в ручную создаю файлы с кодом и заливаю их в папку с шаблонами. Или из редактора JCE создаю шаблон и редактирую его уже через FTP в редакторе на компьютере.


  Сам шаблон сниппета может быть по своей структуре и архитектуре от самого простого до довольно сложного и содержать не только HTML, но и JavaScript и PHP (если они включены в настройках редактора).


Пример

  Для демонстрации покажу пример - простейший html-код кнопки скачивания zip архива, которой я частенько пользуюсь. Чтобы постоянно не генерировать кнопку через генератор кнопок, я создал сниппет btn-download.html внутри которого код следующего содержания:

<a class="btn btn-primary" href="papka/#.zip" role="button" download=""><i class="fa fa-cloud-download"></i> Скачать</a>

 

  Теперь чтобы вставить в статьях сайта кнопку для скачивания, я нажимаю в редакторе кнопку Вставить шаблон, выбираю файл и жму кнопку Вставить.

 В результате я получаю кнопку для скачивания zip архива, где мне остаётся только подправить ссылку на файл.

Скачать


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

  В шаблоны сниппетов можно делать блоки продвигаемых статей, карточки товаров, всякие кнопочки,  большие свёрстанные блоки.

  Тут всё зависит только от вашей нужды и фантазии.

 

Авторизация

Войти через соцсети: