Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ====== Примеры для плагина Wrap ======
- ===== Базовый синтаксис =====
- Набранный в верхнем регистре тег **%%<WRAP>%%** (или же **%%<block>%%** или **%%<div>%%**) трансформируется в **''div''** и используется для оформления **"объёмных"** контейнеров, **отбивки** абзацев, списков, таблиц и других подобных элементов.
- <code>
- <WRAP классы ширина :язык>
- «объёмный» контент
- </WRAP>
- или
- <block классы ширина :язык>
- «объёмный» контент
- </block>
- или
- <div классы ширина :язык>
- «объёмный» контент
- </div>
- </code>
- Набранный в нижнем регистре тег **%%<wrap>%%** (или же **%%<inline>%%** или **%%<span>%%**) трансформируется в **''span''** и используется для оформления **"небольших"** контейнеров, текста **внутри** абзацев, списков, таблиц и других подобных элементов.
- <code>
- <wrap классы ширина :язык>"небольшой" контент</wrap>
- или
- <inline классы ширина :язык>"небольшой" контент</inline>
- или
- <span классы ширина :язык>"небольшой" контент</span>
- </code>
- :!: Пожалуйста, имейте в виду, что некоторые эффекты **невозможно получить, если спаны набраны в нижнем регистре:**
- * **выравнивание** (включая варианты выравнивания, созданные с помощью изменения направления текста)
- * **мультиколонки**
- * и **ширина**
- и соответствующий обрамляющий блок тоже не является float’ом.
- ===== Классы и стили =====
- ==== Колонки и float’ы ====
- Колонки легко добавляются с введением класса ''column'' и указанием ширины. Например:
- <code><WRAP column 30%>...контент...</WRAP></code>
- <WRAP column 30%>
- //**__Эмуляция заголовка 1-го уровня__**//
- Вы можете эмулировать заголовок 1-го уровня с помощью курсива, выделения жирным или подчёркивания, например, так:
- <code>//**__Эмуляция заголовка 1-го уровня__**//</code>
- //**Эмуляция заголовка 2-го уровня**//
- Заголовок 2-го уровня без подчёркивания выглядит, например, так:
- <code>//**Эмуляция заголовка 2-го уровня**//</code>
- Если вам нужен текст, выделенный и курсивом, и жирным, просто используйте теги наоборот:
- <code>**//Нет заголовка//**</code>
- </WRAP>
- <WRAP column 30%>
- //**__Разные варианты float’ов__**//
- Обычно используется только класс ''column'', однако в случае более сложной вёрстки (когда речь идёт не только о колонках, но и о других классах, например о [[#Блоки и примечания|блоках и примечаниях]]), вы можете использовать несколько видов float'ов:
- * **''column''** --- даёт тот же эффект, что и ''left'' для языков, использующих письмо слева направо, а также ''right'' для языков, использующих письмо справа налево;
- * **''left''** позволяет сдвинуть ваш обрамляющий блок влево;
- * **''right''** позволяет обрамляющему блоку сдвинуться вправо;
- * **''center''** помещает обрамляющий блок в центр страницы по горизонтали.
- </WRAP>
- <WRAP column 30%>
- //**__Ширина__**//
- Ширина может быть указана (однако, только в div'ах) в: ''%, px, em, ex, pt, pc, cm, mm, in'', но в большинстве случаев вы будете использовать следующие варианты:
- ^тип^ пример^примечание^
- ^''%''|''30%''|имеет смысл использовать в «резиновой» вёрстке|
- ^''px''|''420px''| имеет смысл использовать при фиксированной ширине дизайна, а также если используемый контейнер содержит изображения определённой ширины|
- ^''em''|''20em''|имеет смысл использовать, если вы хотите, чтобы ваш обрамляющий блок мог масштабироваться в зависимости от размера шрифта в адаптивных дизайнах|
- **Таблица** внутри колонки или блока будет всегда иметь **100% ширину**. Таким образом возможно масштабировать таблицы и менять их месторасположение.
- </WRAP>
- <wrap em>При использовании любого из этих классов для создания «плавающих» элементов может возникнуть ситуация, когда следующий текст выдаётся в пространство, где должны располагаться только «плавающие» контейнеры...</wrap>
- <WRAP clear></WRAP>
- Чтобы этого избежать, нужно просто добавить ''%%<WRAP clear></WRAP>%%'' после последней колонки.
- Те же варианты **можно** использовать и со спанами (так как каждый «плавающий» элемент автоматически является блочным элементом), однако большого смысла в этом не будет. :!: Обычно указание значения ширины для спана не даёт никакого видимого эффекта, но может иметь значение при использовании float'ов.
- :!: Внимание: Установка ширины элемента зачастую приводит к тому, что элемент выглядит по-разному и разрывает дизайн в некоторых браузерах. Если вы не являетесь специалистом в разработке сайтов, проблемы использования разных [[wp>Internet_Explorer_box_model_bug|блочных моделей]] могут быть вам непонятны. Просто попробуйте тестировать ваши колонки во всех основных браузерах и несколько уменьшите первоначальную ширину элементов.
- Все эти варианты также применимы и с обрамляющими блоками типа [[#Блоки и примечания|блоков и примечаний]] (см. ниже).
- === Мультиколонки ===
- <WRAP col3>
- В современных браузерах (Firefox, Chrome и Safari) вы можете использовать мультиколонки. Просто используйте **''%%col2%%''** для 2 колонок, **''%%col3%%''** для 3 колонок, **''%%col4%%''** для 4 колонок, а **''%%col5%%''** для 5 колонок.
- :!: Примечание: создать мультиколонку внутри спана не получится.
- </WRAP>
- ==== Выравнивание ====
- Можно использовать следующие типы выравнивания:
- * ''leftalign''
- * ''rightalign''
- * ''centeralign''
- * ''justify''
- <WRAP centeralign>
- Текст, выравненный по левому краю...
- </WRAP>
- <WRAP rightalign>
- ...и по правому краю.
- </WRAP>
- <code>
- <WRAP centeralign>
- Текст, выравненный по центру...
- </WRAP>
- <WRAP rightalign>
- ...и по правому краю.
- </WRAP>
- </code>
- :!: Нельзя добавить выравнивание к span'ам.
- ==== Блоки и примечания ====
- <WRAP round box 570px center>
- //**__round box 570px center__**//
- * ''box'' создаёт блок вокруг контейнера, по умолчанию используя цвета из файла шаблона ''style.ini'' (''%%__background_alt__%%'' и ''%%__text__%%'');
- * любой из классов ''info'', ''tip'', ''important'', ''alert'', ''help'', ''download'', ''todo'' создаёт специальный контейнер с предупреждением, помеченным соответствующей иконкой;
- * для классов ''danger'', ''warning'', ''caution'', ''notice'', ''safety'' используются цвета сигнальной маркировки (без иконок);
- * ''round'' может добавляться к чему-угодно, имеющему цветную подложку или границу, однако работать такой код будет только в современных браузерах (не в Internet Explorer).
- </WRAP>
- <WRAP info 220px left>
- //**Информация**//
- <code><WRAP info></WRAP></code>
- </WRAP>
- <WRAP tip 220px left>
- //**Подсказка**//
- <code><WRAP tip></WRAP></code>
- </WRAP>
- <WRAP important 220px left>
- //**Важно!**//
- <code><WRAP important></WRAP></code>
- </WRAP>
- <WRAP alert 220px left>
- //**Предупреждение!**//
- <code><WRAP alert></WRAP></code>
- </WRAP>
- <WRAP round help 220px left>
- //**Помощь**//
- <code><WRAP round help></WRAP></code>
- </WRAP>
- <WRAP download 220px left>
- //**Скачать**//
- <code><WRAP download></WRAP></code>
- </WRAP>
- <WRAP todo 220px left>
- //**Список дел**//
- <code><WRAP todo></WRAP></code>
- </WRAP>
- <WRAP clear></WRAP>
- **Оповещения об опасности:**
- <WRAP danger 27% left>
- //**Опасность**//
- <code><WRAP danger></WRAP></code>
- </WRAP>
- <WRAP warning 27% left>
- //**Предупреждение**//
- <code><WRAP warning></WRAP></code>
- </WRAP>
- <WRAP caution 27% left>
- //**Осторожно!**//
- <code><WRAP caution></WRAP></code>
- </WRAP>
- <WRAP round notice 27% left>
- //**Внимание!**//
- <code><WRAP round notice></WRAP></code>
- </WRAP>
- <WRAP round safety 27% left>
- //**Безопасно**//
- <code><WRAP round safety></WRAP></code>
- </WRAP>
- <WRAP clear></WRAP>
- Также блоки и примечания можно использовать внутри текстов со спанами, подобных этим: <wrap info>info</wrap>, <wrap help>help</wrap>, <wrap alert>alert</wrap>, <wrap important>important</wrap>, <wrap tip>tip</wrap>, <wrap download>download</wrap>, <wrap todo>todo</wrap> и<wrap round box>round box</wrap>, а также <wrap danger>danger</wrap>, <wrap warning>warning</wrap>, <wrap caution>caution</wrap>, <wrap notice>notice</wrap>, <wrap safety>safety</wrap>.
- <code><wrap info>info</wrap>, <wrap help>help</wrap>, ...</code>
- ==== Маркирование ====
- Вы можете выделить текст <wrap hi>ярким цветом</wrap>, <wrap lo>сделать более бледным</wrap> или <wrap em>специально выделить</wrap>.
- <code>Вы можете выделить текст <wrap hi>ярким цветом</wrap>, <wrap lo>сделать более бледным</wrap> или <wrap em>специально выделить</wrap>.</code>
- :!: В некоторых шаблонах такое выделение выглядит неаккуратным, поэтому рекомендуется действовать по ситуации.
- ==== Разное ====
- === indent — отступ вправо ===
- <wrap indent>Данный текст будет смещён вправо.</wrap>
- <code><wrap indent>Данный текст будет смещён вправо.</wrap></code>
- === outdent — отступ влево ===
- <wrap outdent>Данный текст будет смещён влево.</wrap>
- <code><wrap outdent>Данный текст будет смещён влево.</wrap></code>
- === prewrap ===
- <WRAP prewrap 250px>
- <code>
- Внутри этого блока слова будут переноситься на новую строку, несмотря на то, что все они написаны в одной строке.
- </code>
- </WRAP>
- <code>
- <WRAP prewrap 250px>
- <code>
- Внутри этого блока слова будут переноситься на новую строку, несмотря на то, что все они написаны в одной строке.
- </code>
- </WRAP>
- </code>
- === spoiler ===
- Так выглядит спойлер: <wrap spoiler>Дарт Вейдер --- отец Люка.</wrap>
- <code>Так выглядит спойлер: <wrap spoiler>Дарт Вейдер –-- отец Люка.</wrap></code>
- Чтобы прочесть текст внутри блока спойлера, его достаточно просто выделить.
- === hide — скрытие текста ===
- Следующий текст скрыт: <wrap hide>Иван, пожалуйста, проверьте это предложение.</wrap>
- <code>Следующий текст скрыт: <wrap hide>Иван, пожалуйста, проверьте это предложение.</wrap></code>
- :!: Внимание: скрываемый текст всё равно будет присутствовать в исходном коде, будет отображаться в старых браузерах и будет индексироваться поисковиками. Не используйте спойлеры для того, чтобы спрятать важные данные с его помощью!
- === pagebreak — разрыв страницы ===
- Таким образом оформляется разрыв страницы: <WRAP pagebreak></WRAP>
- <code>Таким образом оформляется разрыв страницы: <WRAP pagebreak></WRAP></code>
- В браузере данный код не производит никакого визуального эффекта. Однако при печати, благодаря [[http://reference.sitepoint.com/css/page-break-after|разрыву страницы]] выводится новая страница.
- === nopagebreak ===
- С помощью такого кода можно избежать разрыва страницы: <WRAP nopagebreak>много связанного текста (например, длинная таблица)</WRAP>
- <code>С помощью такого кода можно избежать разрыва страницы: <WRAP nopagebreak>много связанного текста (например, длинная таблица)</WRAP></code>
- В браузере данный код также не производит никакого визуального эффекта. Попробуем [[http://reference.sitepoint.com/css/page-break-inside|убрать разрыв страницы]] при выводе на печать.
- === noprint ===
- <wrap noprint>Данный текст видно на экране, но он не выводится на печать.</wrap>
- <code><wrap noprint>Данный текст видно на экране, но он не выводится на печать.</wrap></code>
- === onlyprint ===
- <wrap onlyprint>Данный текст не видно на экране, но он выводится на печать.</wrap>
- <code><wrap onlyprint>Данный текст не видно на экране, но он выводится на печать.</wrap></code>
- ==== Комбинирование и вложение ====
- Вы можете комбинировать и вкладывать друг в друга все классы и все типы блоков. Например:
- <WRAP box 350px right :en>
- //**__Внешний блок отодвигается вправо__**//
- <WRAP 165px left>
- Внутренний вложенный блок отодвигается влево, он частично <wrap em hi>__вы__делен и __под__чёркнут, а также содержит <wrap notice>__примечание__</wrap>внутри себя</wrap>.
- </WRAP>
- Текст, располагающийся внутри внешнего правого блока под внутренним левым блоком.
- <WRAP clear></WRAP>
- <WRAP round tip>
- Блок со скруглённой рамкой внизу, после ''clear''.
- </WRAP>
- </WRAP>
- <code>
- <WRAP box 350px right :en>
- //**__Внешний блок отодвигается вправо__**//
- <WRAP 165px left>
- Внутренний вложенный блок отодвигается влево, он частично <wrap em hi>__вы__делен и __под__чёркнут, а также содержит <wrap notice>__примечание__</wrap>внутри себя</wrap>.
- </WRAP>
- Текст, располагающийся внутри внешнего правого блока под внутренним левым блоком.
- <WRAP clear></WRAP>
- <WRAP round tip>
- Блок со скруглённой рамкой внизу, после ''clear''.
- </WRAP>
- </WRAP>
- </code>
- ===== Язык и направление текста =====
- Изменить язык и направление текста в обрамляющем блоке можно просто добавив двоеточие и код необходимого языка. Например:
- <code>
- <WRAP :he>
- זה עברית. ((Перевод: «Это --- иврит», так, по крайней мере, утверждает <wrap :en>[[http://translate.google.com/|Google Translate]]</wrap>.))
- </WRAP>
- </code>
- <WRAP :he>
- זה עברית. ((Перевод: «Это --- иврит», так, по крайней мере, утверждает <wrap :en>[[http://translate.google.com/|Google Translate]]</wrap>.))
- </WRAP>
- Направление текста (''rtl'' --- справа налево или ''ltr'' --- слева направо) подставится автоматически и будет зависеть только от выбранного языка. Этот список поддерживаемых в настоящий момент языков взят со страницы: <wrap :en>[[wpmeta>Template:List_of_language_names_ordered_by_code?setlang=ru|Template:List of language names ordered by code]]</wrap>. (Если вы укажете язык не входящий в список, тег просто не сработает).
- ===== О переводе =====
- - Перевод осуществлён [[http://www.proz.com/translator/822770|Анной Мартыновой]] и опубликован под лицензией [[http://creativecommons.org/licenses/by-sa/3.0/|CC-BY-SA]].
- - Описание актуально для версии [[https://github.com/selfthinker/dokuwiki_plugin_wrap/releases|v2011-05-15]].
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement