Создаем красиво оформленные блоки текста в OutWiker с помощью Snippets

Создаем красиво оформленные блоки текста в OutWiker с помощью Snippets

Когда я рассказывал о новом плагине Snippets, то писал, что плагин может работать в режиме викикоманды, т.е. вы можете создать шаблон, а потом его вызвать в тексте викистраницы с помощью команды (:snip:), например, так:

(:snip file=»Имя шаблона»:)Какой-то текст(:snipend:)

На первый взгляд может показаться непонятным, зачем это надо, а ведь по задумке благодаря такой возможности вы можете создавать свои элементы оформления, не создавая отдельного плагина. Достаточно, чтобы вы знали HTML, CSS (и для особо продвинутых возможностей — JavaScript). Один из таких примеров я хочу показать в этом посте.

Я давно хочу сделать возможность вставлять на страницу блоки текста особого назначения, такие как «Предупреждение», «Обратите внимание» и т.п. (в виде плагина или в виде базовой викикоманды). Чтобы было понятнее, сразу покажу картинку:

Теперь вы это легко можете сделать самостоятельно с помощью плагина Snippets.

В качестве основы оформления блоков я использовал статью Janko Jovanovic CSS Message Boxes for different message types о том, как создавать подобные блоки с помощью CSS. По сути мы создаем обычный блок <div>…</div> с неким набором свойств CSS. Только в нашем случае, чтобы не нужно было дополнительно копировать картинки, они внедрены в код CSS с помощью кодирования base64, и еще я немного скруглил углы блоков.

Например, код шаблона для предупреждения получился таким:

<div class=»warning-box» style=»-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid;margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; color: #9F6000; background-color: #FEEFB3; background-image: url(‘data:image/png;base64,iVBORw…ErkJggg==’);»>{{__text}}</div>

Здесь я урезал для наглядности код картинки, а полностью коды шаблонов вы можете увидеть, пройдя по ссылкам:

В качестве изображений были взяты те же картинки, что и в исходной статье про создание блоков, а именно, картинки из серии Knob Buttons Toolbar icons, которые были переведены в формат base64.

Чтобы создать нужный шаблон, выбираем пункт меню «Шаблоны — Управление шаблонами» и добавляем текст шаблонов, которые можно скопировать, пройдя по ссылкам выше, в нужную папку. Например, у меня они расположены в папке «Блоки»:

Обратите внимание на использование переменной подстановки {{__text}}:

Вместо этой переменной будет подставлен текст, заключенный между (:snip:) и (:snipend:). И теперь на викистраницах можно использовать команды для оформления текста как особые блоки:

Разумеется, путь до шаблона у вас может быть свой. Более, того, руками это все вводить не обязательно, достаточно выбрать шаблон из меню «Шаблоны», но при этом не забыть в открывшемся диалоге установить флажок «Вставить как викикоманду»:

В тексте, заключенном между (:snip:) и (:snipend:) тоже может использоваться оформление с помощью викинотации.

Подобным образом с помощью плагина Snippets можно заменить плагин Spoiler, предназначенный для создания сворачиваемого / разворачиваемого текста.

Если вы придумаете еще интересные элементы оформления, которые можно реализовать подобным образом, то оставляйте ссылки на ваши шаблоны в комментариях.

PS. Вы можете подписаться на новости сайта через RSS, Группу Вконтакте или Канал в Telegram.

Пожалуйста, оцените запись

УжасноПлохоТак себеХорошоОтлично (Количество голосов: 5, средняя оценка: 4,20)
Загрузка...

Leave a comment

Subscribe without commenting