Вики разметка это: Вики-разметка в профессиональном вики-редакторе | Центр Интернет

Содержание

Вики-разметка в профессиональном вики-редакторе | Центр Интернет

Профессиональный вики-редактор использует движок MediaWiki (используется Википедией) для обработки вики-разметки. Поэтому, все стандартные правила MediaWiki поддерживаются и в Кампусе. Дополнительно движок MediaWiki расширен нестандартным форматированием, не совместимым с Википедией.

Содержание

  • 1 Стандартное форматирование
  • 2 Разметка форматирования текста
  • 3 Абзацы
  • 4 HTML теги
  • 5 HTML символы
  • 6 Ссылки
  • 7 Таблицы
  • 8 Математические формулы
  • 9 Цитирование
    • 9.1 Example
    • 9.2 Многократное использование цитаты
  • 10 Нестандартное форматирование
  • 11 Рисунки
  • 12 Исходный код
  • 13 Вставка файлов
    • 13.1 Пример вставки видео
    • 13.2 Пример вставки рисунка с заданными размерами
  • 14 Вставка контента с веб-сервисов
    • 14.1 Поддерживаются следующие веб-сервисы

Стандартное форматирование[править]

Разметка форматирования текста[править]

Описание Формат Результат
форматирование символов — работает везде
Наклонный текст »Курсив» курсив
Полужирный текст »’Полужирный»’ полужирный
Полужирный и наклонный текст »»’Полужирный и курсив»»’ Полужирный и курсив
Отмена форматирования wiki <nowiki>нет »курсива»</nowiki> нет »курсива»
оформление заголовков — работает только с новой строки
Текст с отступом

:Текст с отступом
::Двойной отступ
:::::Многократный отступ

Текст с отступом

Двойной отступ

Многократный отступ
Заголовки

разных уровней

==Уровень 1==
===Уровень 2===
====Уровень 3====
=====Уровень 4=====
=======Уровень 5=======

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

Уровень 1

Уровень 2

Уровень 3

Уровень 4

Уровень 5

Горизонтальная линия

—-


Список с маркерами
* первый
* второй
* третий
** первый в третьем
** второй в третьем

Оставляйте пустую строку между окончанием первого списка и началом следующего.

  • первый
  • второй
  • третий
    • первый в третьем
    • второй в третьем
Список с числами
# первый
# второй<br />несколько строк<br />не нарушая нумерацию
# третий
## первый в третьем
## второй в третьем
  1. первый
  2. второй
    несколько строк
    не нарушая нумерацию
  3. третий
    1. первый в третьем
    2. второй в третьем
Список определений
;элемент 1
:определение 1
;элемент  2
:определение 2-1
:определение 2-2
элемент 1
определение 1
элемент 2
определение 2-1
определение 2-2
Применение возможностей оформления списка определений для отступов текста
:Первый отступ
::Второй отступ
:::::Ещё несколько отступов

Это применение может быть спорным с точки зрения удобства.

Первый отступ

Второй отступ

Ещё несколько отступов</pre>
Смесь списка с маркерами
и списка с числами
# первый 
# второй
#* первый во втором
#* второй во втором
# третий
#; элемент определения в третьем
#: определение элемента в третьем
# четвёртый
#: four item one
#: это скорее похоже на продолжение # четыре
#: и таким образом часто используемый вместо <br />
;элемент 1
:* определение 1-1
:* определение 1-2
:
;элемент  2
:# определение 2-1
:# определение 2-2

Использование тегов #: и *: для разрыва строк в определениях может оказаться спорным.

  1. первый
  2. второй
    • первый во втором
    • второй во втором
  3. третий
    элемент определения в третьем
    определение элемента в третьем
  4. четвёртый
    four item one
    это скорее похоже на продолжение # четыре
    и таким образом часто используемый вместо
элемент 1
  • определение 1-1
  • определение 1-2
элемент 2
  1. определение 2-1
  2. определение 2-2
Предварительно отформатированный текст
 частично неформатированный текст
 оформляется с помощью '''пробела'''
 в ''начале'' строки 

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

частично неформатированный тест
оформляется с помощью пробела
в начале строки 

Вики игнорирует обычные переносы строк. Для начала нового абзаца оставьте пустую строку. Новую строку также можно начать с HTML-тега <br />.

В вики по умолчанию включена поддержка только некоторых HTML-тэгов, как например <code>, <div>, <span> и <font>.

Описание Формат Результат
Фиксированная ширина символов

<tt>Фиксированная ширина символов</tt>

Фиксированная ширина символов

Цитаты
текст текст текст текст текст текст текст текст текст текст 
текст текст текст текст текст текст текст текст текст текст 
<blockquote>  цитата цитата цитата цитата цитата цитата </blockquote>
текст текст текст текст текст текст текст текст текст текст 

текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст

цитата цитата цитата цитата цитата цитата

текст текст текст текст текст текст текст текст текст текст

Комментарии
<!--Это комментарий-->
Полностью неформатированный текст
<pre>с помощью этого тега вся разметка '''игнорируется'''</pre>
с помощью этого тега вся разметка '''игнорируется'''

HTML символы это набор символов, который обозначает один конкретный символ. Например, &rarr; обозначает стрелку вправо → и &mdash; обозначает тире —. HTML символы используются в основном в двух случаях: для добавления символов не доступных на клавиатуре:

&copy; → ©
&delta; → δ

и обхода работы парсера при отображение HTML тегов и символов:

&amp;euro; → &euro;
&euro; →
&lt;span>Green&lt;/span> → <span>Green</span>
<span>Green</span> → Green

Ниже приведен список символов, которые могут быть получены с использованием HTML символов. Символы не доступные в текущем шрифте будут отображаться пустыми квадратиками.

Таблица HTML Символов
Á á Â â ´ Æ æ À à Α α & Å å Ã ã Ä ä Β β ¦ Ç ç ¸ ¢
Χ χ ˆ © ¤ ° Δ δ ÷ É é Ê ê È è Ε ε Η η
Ð ð Ë ë ƒ ½ ¼ ¾ Γ γ > Í í Î î ¡ Ì ì Ι ι
¿ Ï ï Κ κ Λ λ « < ¯ µ · Μ μ  
¬ Ñ ñ Ν ν Ó ó Ô ô Œ œ Ò ò Ω ω Ο ο ª º Ø ø Õ õ Ö
ö Φ φ Π π ϖ ± £ Ψ ψ » » ® Ρ ρ
Š š § ­ Σ σ ς ¹ ² ³ ß Τ τ Θ θ ϑ Þ þ ˜
× Ú ú Û û Ù ù ¨ ϒ Υ υ Ü ü Ξ ξ Ý ý ¥ ÿ Ÿ Ζ ζ
Описание Формат Результат
Внешняя ссылка http://mediawiki. 2</math>

Вы можете заключать цитаты в тег <ref> по ходу статьи и вставить список цитат (обычно, в конце статьи) при помощи тега <references />

Example[править]

According to scientists, the Sun is pretty big.<ref>E. Miller, The Sun, (New York: Academic Press, 2005), 23-5.</ref>
The Moon, however, is not so big.<ref>R. Smith, «Size of the Moon», Scientific American, 46 (April 1978): 44-6.</ref>

==Notes==

<references />

Многократное использование цитаты[править]

Если на одну цитату надо сослаться несколько раз, то цитату надо проименовать при помощи атрибута name <ref name=»name»> и, при повторном цитировании, вставлять именованную цитату по имени: <ref name=»name» />.

Пример многократного использования цитаты:

This is an example of multiple references to the same footnote. <ref name=»multiple»>Remember that when you refer to the same footnote multiple times, the text from the first reference is used.</ref>

Such references are particularly useful when citing sources, if different statements come from
the same source.<ref name=»multiple»>This text is superfluous, and won’t show up anywhere. We may as well just use an empty tag.</ref>

A concise way to make multiple references is to use empty ref tags, which have a slash at the
end. Although this may reduce redundant work, please be aware that if a future editor removes the first reference, this will result in the loss of all references using the empty ref tags.<ref name=»multiple» />

==Notes==

<references />

Нестандартное форматирование[править]

Стандартная поставка MediaWiki не включает некоторого необходимого функционала или включает в неудобном для использования виде. Описанный ниже функционал является нестандартным и непереносимым из Кампуса на другие инсталляции MediaWiki.

Вставка рисунка осуществляется простой ссылкой на него:

https://user.files.psu.ru//ars/img/node/wifi-k2.png

Ширина рисунка не будет превышать заданных в системе размеров и будет уменьшаться при уменьшении окна браузера.

При необходимости задать точные размеры рисунка, следует использовать синтаксис вставки файла:

{{файл:https://user.files.psu.ru//ars/img/node/wifi-k2.png | ширина=300 | описание=Покрытие Wi-Fi в ПГНИУ }}

‘.<div>Покрытие Wi-Fi в ПГНИУ</div>.’

Вставка исходного кода осуществляется нестандартным для MediaWiki способом путем заключения исходного кода в теги <code></code>. Язык кода определится автоматически. Если язык определился неправильно, его можно указать в виде дополнительного атрибута без значения. Список языков можно найти здесь.

<code php>echo "hello world";</code>
 echo "hello world";

Вставка файлов[править]

Для вставки некоторых типов файлов можно использовать разметку

{{файл:URL | тип=Тип файла | ширина=640 | выравнивание=справа | описание=Описание файла | высота=480 }}

Результат работы зависит от расширения в URL. Таким образом можно вставлять файлы по протоколу http и https с расширениями mp4, webm, ogv, ogg, mp3, wav, jpeg, jpg, png, svg, bmp. Возможно, в дальнейшем, будут добавлены другие расширения. Обязательным является указание URL, все остальные параметры являются не обязательными.

Пример вставки видео[править]

{{файл:http://212.192.64.195/sintel.2010.1080p-j98w1280h720.mp4| | ширина=640 | | описание=Sintel }}

‘.<div>Sintel</div>.’

Пример вставки рисунка с заданными размерами[править]

{{файл:https://user.files.psu.ru//ars/img/node/wifi-k2.png | ширина=300 | описание=Покрытие Wi-Fi в ПГНИУ }}

‘.<div>Покрытие Wi-Fi в ПГНИУ</div>.’

Вставка контента с веб-сервисов[править]

Поддерживается вставка контента с большого числа веб-сервисов путем простой публикации ссылки на материал. Из ссылки автоматически достается идентификатор ресурса и вставляется его Embed-код.

Поддерживаются следующие веб-сервисы[править]

Сервис Пример ссылки на сервис
Кампус: авторское видео
http://k. psu.ru/myvideo/node/54
Кампуc: презентации
http://k.psu.ru/docs/node/10
Кампус: опросы
http://k.psu.ru/poll/node/3
Кампус: ELiS
http://k.psu.ru/library/node/19446
YouTube
http://www.youtube.com/watch?v=m5ebtBfK4cI
Google презентации
https://docs.google.com/presentation/d/1MWxoNVQxMyYSJhcHcDLY_ysHNqQWdvkjYXGGbDj1Lv0/pub?start=false&loop=false&delayms=3000
Goole документ
https://docs.google.com/document/d/1wM5eokSfup_UXAjvLxM7rRiaOdX33Z3BMhhLau8TDZw/edit
Видео Vimeo
http://vimeo.com/27779342
Видео вКонтакте
http://vk.com/video25427005_165598829
Видео ruTube
http://rutube.ru/video/f79fac229a0fa77a3aa50b4003933147/?bmstart=7
Записи Ustream. Tv
http://www.ustream.tv/recorded/36071787
Презентации SlideShare
http://www.slideshare.net/borovinskiy/ss-9951031

Примеры можно посмотреть на странице демонстрации

Вики-разметка во Вконтакте для начинающих | Академия Лидогенерации | Официальный сайт

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

Как работает вики-разметка

Вики-разметка — это язык, который используется для верстки страниц. Условно его можно назвать младшим братом HTML. На вики-страницах удобно писать и форматировать текст, вставлять иллюстрации, видео, ссылки, таблицы. Можно сверстать простую статью или составить целый интерактивный гайд с главами и подзаголовками.

Ширина любой вики-страницы — 607px. Высота ограничивается только количеством знаков, всего их может быть около 16 000.

Вся вики-разметка держится на тегах, как и HTML. Есть одиночные теги (например, <br/> — перенос строки) и парные (например, <b>жирный текст</b>).

Как работают теги для текста в вики-разметке

В некоторых случаях вики-разметка использует упрощенный синтаксис (теги заменены на типографские знаки). Например, для создания маркированного списка используются звездочки «*», а для нумерованного — решетки «#».

Как работают типографские знаки в вики-разметке

Все существующие теги и методы их использования собраны в официальном сообществе вики-разметки ВКонтакте. Используйте материалы этого сообщества как надежную шпаргалку. А в этой статье мы пройдемся по основным принципам работы с вики-разметкой и пошагово покажем, как с ее помощью создавать страницы и меню группы.

В стандартном редакторе вики-страниц есть два режима: визуальный и режим вики-разметки (кнопка переключения выглядит так: <>).

Так выглядит активный режим вики-разметки

Примитивный текст с парой картинок можно сверстать в визуальном режиме. Это обычный редактор текста и не требует никаких знаний вики-разметки. Но если вам нужна аккуратная вики-страница с таблицами, ссылками и встроенными видео, это можно сделать только в режиме разметки — при помощи кода.

Сами создатели ВКонтакте рекомендуют не переключать режимы редактирования туда-сюда во время работы. Говорят, это чревато ошибками на странице и съехавшей версткой.

Как создать вики-страницу

Кнопки «Создать новую страницу» в интерфейсе самого ВКонтакте не существует. Поэтому рассказываем о двух способах, стандартном и продвинутом (при помощи приложения).

Стандартный

Для группы. Зайдите в «Управление сообществом» → «Разделы»  → «Материалы» и выберите пункт «Открытые» или «Ограниченные».

Как включить «Материалы» в группе

Теперь на главной странице группы появится раздел «Свежие новости». Это место для предполагаемого меню группы. Чтобы создать новую страницу, можно написать ее название прямо в режиме редактирования страницы «Свежие новости», заключить его в квадратные скобки, нажать на «Предпросмотр» и получить готовую ссылку на новую страницу.

Как создать новую страницу через «Свежие новости»

Для паблика. Чтобы создать новую страницу, нужно узнать id вашего паблика. Для этого зайдите в раздел «Статистика сообщества». В адресной строке браузера вы увидите примерно такой код:  

https://vk.com/stats?gid=123456789

Искомое id группы — это все цифры после «gid=».

Теперь нужно ввести в адресную строку браузера такой код:

https://vk.com/pages?oid=-ХХХ&p=Нaзвание_страницы

Вместо ХХХ подставляем id паблика, вместо «Нaзвание_страницы» — то название, которое вы придумали. В названии можно использовать кириллицу, латиницу и цифры. Специальные символы использовать не запрещено, но лучше не рисковать: из-за них у вас может пропасть возможность редактирования страницы. Вставляем все данные на нужные места, нажимаем Enter, и браузер откроет созданную страницу.

С помощью приложения

Разработчики ВКонтакте рекомендуют к использованию три приложения для работы с вики-разметкой: «Мобивик», «Исходный код» и «Вики Постер».

В этом руководстве мы возьмем для примера приложение «Мобивик». В ноябре 2017 года оно получило второй приз в программе ВКонтакте по поддержке стартапов (Start Fellows). Работает без установки и дополнительной регистрации в десктопной, мобильной версии ВКонтакте и в приложении для телефона (разработчик рекомендует использовать версии не ранее Android 5.1, iOS 9 и Windows Phone 8.1).

Чтобы создать новую страницу, на главном экране приложения выберите нужную группу и введите название новой страницы, а затем нажмите «Получить ссылку».

Как создать новую страницу с помощью приложения «Мобивик»

После этого вы получите 3 ссылки. Действуйте в зависимости от предпочтений: можно начать редактировать страницу в стандартном интерфейсе вики-разметки или в приложении «Мобивик».

Ссылки на новую вики-страницу в приложении «Мобивик»

А вот лайфхак для тех случаев, когда вы сделали сложную страницу с большим количеством элементов, и боитесь, что верстка поедет на маленьком экране. Скопируйте адрес из пункта «Код для вики-страницы». Зайдите в режим редактирования своей страницы и вставьте его в самое начало кода. Вы получите такое изображение:

Когда пользователь нажмет на него, он попадет в приложение «Мобивик», которое покажет аккуратную мобильную версию вашей страницы.

Слева —  страница меню сообщества LIVE, открытая на мобильном,
справа — она же, но открытая через «Мобивик»

Как получить ссылку на вики-страницу

Как найти страницу, созданную ранее? Самый простой и надежный метод — заранее скопировать все адреса вики-страниц в отдельный файл, например, в Google Таблицах. Другой способ — через любое приложение для работы с вики-страницами. Например, зайдите в «Мобивик», выберите название сообщества и нужную страницу, кликните «Получить ссылку» и скопируйте адрес из пункта «Ссылка на вики-страницу».

Как получить ссылку на ранее созданную вики-страницу

Как сделать пост со ссылкой на вики-страницу

Скопируйте ссылку на вики-страницу и вставьте в новую запись на своей стене или на стене сообщества. Если все сделано правильно, сайт сгенерирует ссылочный блок под текстовым полем записи. Теперь удалите сам текст ссылки, прикрепите баннер и нажмите «Отправить». В десктопной версии баннер тоже станет ссылкой на вики-страницу, а в мобильной — будет открываться как обычная картинка.

Прикрепленная к посту картинка станет частью ссылки на вики-страницу в десктопной версии

Текст

Возможности оформления текста в вики-разметке в целом не отличаются от возможностей рядового текстового редактора. При редактировании непосредственно текста (сделать жирным, выровнять по правому краю и т. д.) используем теги вики-разметки, не забываем их закрывать: <center>Текст по центру</center>.

Для структурирования текста в вики-разметке предусмотрены сочетания типографских знаков. Например, такой код «—-» поставит в тексте горизонтальную разделяющую полосу, а такой «::»  — двойной отступ перед абзацем.

На одну страничку можно поместить около 16 тысяч знаков.

Ссылки

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

Внешние. Если мы ставим ссылку на внешний сайт, то пишем адрес целиком и заключаем его в одинарные квадратные скобки:

[http://lead-academy.ru/]

Чтобы вместо адреса был виден текст, добавляем название ссылки:

[http://lead-academy.ru/|Академия Лидогенерации]

Если мы хотим сделать гиперссылкой картинку, используем такой код:

[[photo12345_12345|http://lead-academy.ru]]

Внутренние (ссылки на какую-либо страницу сайта vk.com). Здесь используем не целый адрес страницы, а только id объекта.

Например, вот ссылка на официальную группу Академии Лидогенерации ВКонтакте, оформленная в виде текста. После club — id сообщества, после вертикальной черты — текст, в который зашита ссылка.

[[club63459623|Академия Лидогенерации]]

А вот пример кода картинки со ссылкой на внутренние страницы (ХХХ заменить на соответствующее id).

[[photo12345_12345|idXXX]] — на профиль пользователя

[[photo12345_12345|clubXXX]] — на главную страницу сообщества

[[photo12345_12345|page-XXX]] — на другую вики-страницу

[[photo12345_12345|eventXXX]] — на встречу ВКонтакте

Картинки

Предельная ширина изображения, которое можно использовать в вики-разметке, — 607px, это и есть ширина самой вики-страницы. Высота практически не ограничена (помним, что высота самой страницы — 16 000 знаков). Изображения можно загрузить двумя способами.

С помощью загрузчика в верхнем меню редактора.

С помощью кода. Загружаем картинку в отдельный альбом группы, открываем ее, в адресной строке видим длинный код наподобие этого

https://vk.com/club12345678?z=photo-12345_12345%2Falbum-12345678_12345678

Копируем из него id картинки (выделено жирным). Дальше обрамляем это двойными квадратными скобками и вставляем в нужные места на странице. Получается примерно так:

[­[photo-12345_12345]]

Что дальше? Отредактируйте выравнивание, обтекание текстом, размер, привяжите ссылку. Для этого напишите нужные параметры после вертикальной черты и через точку с запятой. Например, в таком коде мы задали для картинки размер 300x100px и обтекание текстом справа:

[[photo-12345_12345|300x100px;right]]

Видео

Для начала нужно загрузить видео в видеозаписи сообщества. После загрузки открыть видео и скопировать из адресной строки его id (выделено жирным).

https://vk.com/videos-12345678?z=video-12345_12345%2Fclub12345678%2Fpl_-12345678_-2.

Обрамляем это квадратными скобками и получаем такой код:

[[video12345_12345]]

Получаем небольшую картинку со значком ▶play, при нажатии на который разворачивается полноценный видеоплеер. Чтобы видео воспроизводилось на самой странице, разработчики ВК предлагают воспользоваться тегом player.

[[video12345_12345|player|]]

Но здесь мы получаем непропорциональную черную рамку вокруг видео:

Чтобы ее убрать, нужно подогнать размер плеера под размер самого видео. Например, в нашем случае подошли такие параметры:

[[video12345_12345|1000x340px;player| ]]

Мы получили видео без черных рамок, оно будет воспроизводиться прямо на странице

Таблицы

Если вы хотите красиво структурировать содержимое вики-страницы и обеспечить ей аккуратное отображение на мобильных устройствах, без таблицы не обойтись. Здесь вам понадобятся такие простые знаки:

При работе с таблицами можно использовать 4 тега: noborder (делает рамки таблицы невидимыми), nomargin (делает таблицу во всю ширину вики-страницы), nopadding (убирает отступы в ячейках) и fixed (позволяет создать таблицу фиксированных размеров). Сколько ячеек вы укажете в строке, столько столбцов будет в таблице.

Вот пример таблицы 2×2 без отступов сверху и снизу текста внутри ячеек:

Ширина первого столбца — 200px, ширина второго — 300px.

Вот что из этого получилось:

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

Как сделать вики-меню

Меню группы ВК — это не какой-то отдельный функционал, а попросту вики-страница с несколькими картинками, в каждую из которых зашита ссылка на определенную страницу. На самом деле здесь все просто.

  1. Готовим обложку для меню. Можно взять любую подходящую картинку и нанести на нее текст. А можно нанять дизайнера, который отрисует вам красивые блоки и кнопки. У нас будет меню на 6 кнопок. Для этого нам нужна картинка, где будут обозначены эти кнопки. Определимся с ее размером.

При подготовке картинки для меню помните, что ширина вики-страницы — 607 px, Ширина картинки не должна быть больше, иначе изображение ужмется и потеряет в качестве. Для примера мы взяли изображение размером 510х300 px.

  1. Режем эту картинку на 6 частей (по части на каждую кнопку). Это удобно делать в Adobe Photoshop инструментом «Раскройка». Если не хотите заморачиваться, воспользуйтесь, например, онлайн-сервисом IMGonline (режет картинки на равные части). Мы же сделали все в Photoshop.

При активном инструменте «Раскройка» кликаем правой кнопкой мыши по картинке и выбираем «Разделить фрагмент», указываем нужное количество фрагментов и нажимаем «ОК».

Как разрезать картинку в Photoshop

Чтобы сохранить все отдельные фрагменты, нажимаем «Файл» → «Экспортировать» → «Сохранить для Web». Полученные части картинки загружаем в отдельный альбом сообщества.

Наше меню будет оформлено в виде таблицы из 6 ячеек: в три строки и два столбца. Для этого мы нарезали картинку для меню на 6 равных частей размером 255×100 px. Такой же размер нужно будет проставить для каждой ячейки.

  1. Создаем каркас для таблицы. Заходим в режим редактирования новой страницы и делаем таблицу. Открываем ее тегом {| и сразу задаем три важных параметра:
  • nopadding — разрешит картинкам соприкасаться
  • noborder — скроет видимые границы таблицы
  • fixed — позволит задать точные размеры ячеек.

Указываем фиксированную ширину ячеек — 255px 255px (два раза, потому что столбцов тоже два). Дальше устанавливаем места для начала новых строк тегом |- и новых ячеек (столбцов) тегом |. Закрываем таблицу тегом |} и получаем такой каркас:

  1. Помещаем картинки в ячейки и задаем для них ссылки. Поочередно открываем в альбоме сообщества нужные части картинки, копируем из строки браузера их id (photo-12345_12345), заключаем в двойные квадратные скобки, прописываем размеры 255x100px и тег nopadding для склеивания картинок. После вертикальной черты назначаем ссылку для каждой кнопки. Получаем такой код.

{|noborder nopadding fixed
|~255px 255px
|-
| [[photo-12345_12345|255x100px;nopadding|ссылка]]
| [[photo-12345_12345|255x100px;nopadding|ссылка]]
|-
| [[photo-12345_12345|255x100px;nopadding|ссылка]]
| [[photo-12345_12345|255x100px;nopadding|ссылка]]
|-
| [[photo-12345_12345|255x100px;nopadding|ссылка]]
| [[photo-12345_12345|255x100px;nopadding|ссылка]]
|}

  1. Готово! Нажимаем «Сохранить страницу» — и получаем удобное меню для сообщества.

Готовое меню группы в десктопной версии

Готовое меню группы в мобильной версии

Как закрепить меню сообщества

Если вы делали меню для группы, то оно будет легко доступно по клику на «Свежие новости» (кстати, эту страничку можно переименовать на «Меню» в режиме редактирования).

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

Чтобы закрепить меню в группе, опубликуйте запись с баннером и ссылкой на вики-страницу от имени сообщества (если опубликовать от своего имени, закрепить страницу будет невозможно). В паблике проблем с закреплением не будет: там можно закрепить запись любого автора.

Как сделать пост со ссылкой на меню в паблике

Как закрепить меню сообщества

Новый редактор статей ВКонтакте и вики-разметка

Администрация ВКонтакте объявила о запуске редактора статей 22 декабря 2017 года и позиционирует его как инструмент для публикации лонгридов.

Некоторые пользователи решили, что он создан взамен вики-разметки. Но пока такие выводы делать рано, ведь функционал редактора еще достаточно скудный. В нем нельзя редактировать медиафайлы (размер и выравнивание) и делать таблицы, а гиперссылки можно присвоить только тексту. Здесь нет тегов и кода, есть только визуальный режим, как в обычном текстовом редакторе.

Из этого видно, что сделать удобное меню для сообщества или вики-лендинг по-прежнему можно только с помощью вики-разметки. Что будет дальше — время покажет.

Так выглядит интерфейс нового редактора статей ВКонтакте

Что запомнить о вики-разметке

  • Стандартный метод создания вики-страниц кропотливый и не очень удобный. Проще всего создать страницу через приложение «Мобивик», «Исходный код» или «Вики Постер».
  • Меню сообщества нужно сделать таблицей, чтобы оно аккуратно смотрелось на мобильных устройствах.
  • При редактировании вики-страницы в стандартном интерфейсе не стоит переключаться между визуальным режимом редактирования и режимом вики-разметки. Из-за этого может поехать верстка.

Запоминать все теги необязательно, достаточно держать под рукой ссылку на шпаргалку в официальном сообществе вики-разметки ВКонтакте.

Confluence Wiki Разметка | Центр обработки данных и сервер Confluence 7.20

Да. Вы можете вводить вики-разметку прямо в редакторе, и Confluence будет преобразовывать ее по мере ввода. (Вы не можете редактировать вики-разметку после преобразования. Посмотрите это в действии в этом видео :

Могу ли я вставить уценку?

Confluence поддерживает вставку контента в уценке. Это часто используется в файлах ReadMe. Некоторые примеры синтаксиса уценки см. в руководстве по синтаксису Markdown.

Чтобы вставить уценку в редакторе:

  1. Выберите  Вставить  >  Разметка
  2. Выберите  Уценка
  3. Выберите 70 или вставьте 70 текст на странице, как он будет отображаться на странице. Вставка .

Как и в случае вики-разметки, Confluence преобразует вашу разметку в формат расширенного текстового редактора. Вы не сможете редактировать свой контент, используя уценку.

Заголовки

Чтобы отформатировать строку как заголовок, введите «hn». В начале вашей линии, где n может быть числом от 1 до 6.

Что вам нужно для введите

. Самый большой заголовок

 h4. Заголовок большой 

Заголовок большой

 h5. Малый заголовок 
Небольшой заголовок

Списки

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

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

Простые списки

Используйте дефис (-) для создания простых списков с квадратными маркерами. Убедитесь, что между дефисом и вашим текстом есть пробел.

Что вам нужно напечатать

Что вы получите

 - некоторые
- пуля
- точки 
  • некоторые
  • маркер
  • точки
Маркированные списки

Используйте звездочку (*) для создания маркеров. Для каждого последующего уровня добавляйте дополнительную звездочку.
Убедитесь, что между звездочкой и вашим текстом есть пробел.

Что нужно ввести

Что вы получите

 * некоторые
* пуля
** с отступом
** пули
* точки 
Нумерованные списки

Используйте решетку (#) для создания нумерованных списков.
Убедитесь, что между решеткой и вашим текстом есть пробел.

Что нужно ввести

Что вы получите

 # а
# пронумеровано
# list 
  1. a
  2. с номерами
  3. list

Второй уровень хэшей создаст подсписок, такой как подсписок

4 в алфавитном порядке.

Что вам нужно напечатать

Что вы получите

 # Вот предложение.
## Это точка подсписка.
## И второй пункт подсписка.
# Вот еще одно предложение. 
  1. Вот предложение.
    1. Это точка подсписка.
    2. И второй пункт подсписка.
  2. Вот еще одно предложение.

Вы можете использовать третий уровень хэшей для создания под-под-списка.

Что вам нужно напечатать

Что вы получите

 # Вот предложение.
## Это точка подсписка.
### Третий уровень списка.
### Еще одна точка на третьем уровне.
## И второй пункт подсписка.
# Вот еще одно предложение. 
  1. Вот предложение.
    1. Это точка подсписка.
      1. Третий уровень списка.
      2. Еще одна точка на третьем уровне.
    2. И второй пункт подсписка.
  2. Вот еще одно предложение.

Примечание: В нумерованных списках, как описано выше, формат «числа», отображаемого на каждом уровне списка, может отличаться в зависимости от вашего браузера и таблиц стилей, установленных в вашем экземпляре Confluence. Таким образом, в некоторых случаях вы можете увидеть буквы (A, B, C и т. д.; или a, b, c и т. д.) или римские цифры (i, ii, iii и т. д.) на разных уровнях списка.

Смешанные списки
5 Здесь #* является #* # пример #* из #* а # смешанный # список

Что вам нужно ввести

Что вы получите

6 # 
  1. Here
    • is
    • an
  2. example
    • of
    • a
  3. mixed
  4. list

Tables

Вы можете создать два типа таблиц.

Тип таблицы 1

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

Используйте двойные полосы для строки заголовка таблицы.

Что нужно ввести:

 ||заголовок 1||заголовок 2||заголовок 3||
|ячейка A1|ячейка A2|ячейка A3|
|ячейка B1|ячейка B2|ячейка B3|
 

What you’ll get:

3 Вы также можете использовать вертикальный заголовок.

Что нужно ввести:

 ||заголовок 1|столбец A1|столбец A2|столбец A3|
||заголовок 2|столбец B1|столбец B2|столбец B3|
 

What you’ll get:

heading 1

heading 2

heading 3

cell A1

cell A2

ячейка A3

ячейка B1

ячейка B2

ячейка B3

heading 1

col A1

col A2

col A3

heading 2

col B1

цвет B2

цвет B3

Тип таблицы 2

Этот метод использует макросы разделов и столбцов для создания таблицы и позволяет указать ширину столбцов в разметке.

Что нужно ввести

 {section:border=true}
{столбец: ширина = 30%}
Текст для этого столбца находится здесь. Это меньший столбец шириной всего 30%.
{столбец}
{столбец: ширина = 70%}
Текст для этого столбца находится здесь. Это больший столбец с шириной 70%.
{столбец}
{раздел}
 

Что вы получите

Здесь находится текст для этого столбца. Это меньший столбец шириной всего 30%.

Здесь находится текст для этого столбца. Это больший столбец с шириной 70%.

Для получения более подробной информации см. макрос столбца и макрос раздела.

Расширенное форматирование
Цветное и другое форматирование

Чтобы добавить цвет и другое форматирование к вашим таблицам, вы можете использовать макрос панели внутри столбцов.
Дополнительные параметры форматирования таблицы могут быть доступны, если ваш администратор Confluence установил дополнительные макросы.

Списки

Вот пример того, как вставлять списки в таблицу:

Что нужно напечатать

 ||Заголовок 1||Заголовок 2||
|* Пункт 1
* Пункт 2
* Пункт 3|# Пункт 1
# Пункт 2
# Пункт 3|
 

Что вы получите

Заголовок 1

. 0022

  • Элемент 2
  • Элемент 3
  • Текстовые эффекты

    Для форматирования текста используйте разметку, показанную в примерах ниже.

    What you need to type

    What you’ll get

    *strong*

    strong

    *bold text*

    полужирный текст

    _emphasis_

    emphasis

    _italics_

    italics
    Hint: To italicize parts of a word, add braces (curly brackets) around the underscore . Например,

     Вещь{_}x_ 

    дает следующее: Вещь x

    ??цитирование??

    ссылка

    9}

    gives you this: kg/m 3

    Text with~subscript~

    Text with subscript
     {{monospaced}} 

    monospaced

    бк. Вот как сделать так, чтобы абзац отображался как блочная цитата.

    Вот как сделать так, чтобы абзац отображался в виде цитаты.

    {цвет:красный}смотрите, мама, красный текст!{цвет}

    смотрите, мама, красный текст!

    Разрывы текста

    Разрыв абзаца

    В вики-разметке абзац представляет собой непрерывную строку текста, заканчивающуюся двумя символами возврата каретки. Это эквивалентно непрерывной строке текста, за которой следует пустая строка.

    При отображении в формате HTML результатом является строка текста, заключенная в набор

    теги.

    Разрыв строки

    Confluence предоставляет два варианта принудительного разрыва строки внутри абзаца текста:

    • Неявно, путем ввода одиночного возврата каретки в конце.
    • В явном виде, путем ввода двух последовательных символов обратной косой черты:  \\

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

    В большинстве случаев явные разрывы строк не требуются, так как достаточно одного возврата каретки.

    В приведенных ниже примерах показано, как использовать явные разрывы строк.

    Что вам нужно для введите

    Что вы получите

    Вот немного текста

     \\ 
     Dived \\ 
    . \\ 

    вот какой-то текст
    разделенный
    с использованием линии

    разрывы

    Это краткий список:
    * Пункт 1
    Текст к пункту 1
    * Пункт 2

     \\ \\ 

    Текст к пункту 2 с разрывом

    Это краткий список:

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

    \\
    \\

    Горизонтальное правило

    Чтобы создать горизонтальную линию по ширине страницы или блока контента, введите четыре дефиса (например, —-) в начале строки, затем нажмите клавишу ВВОД или пробел.

    Убедитесь, что тире находятся на отдельной строке от остального текста.

    Что вам нужно для введите

    Что вы получите

    Вот некоторые текст

    , разделенный на горизонтальное правило

    Вот некоторые текстовые. горизонтальная линейка

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

    9attachment.ext]

    Ссылка на файл, прикрепленный к странице в другом месте.

    [/2004/01/12/blogposttitle]

    Ссылка на сообщение в блоге.
    Примечание: blogposttitle — это заголовок блога, отображаемый на странице.

    [spacekey:/2004/01/12/blogposttitle]

    Ссылка на сообщение в блоге в другом месте.
    Примечание: blogposttitle — это заголовок блога, отображаемый на странице.

    [/2004/01/12]

    Ссылка на посты в блоге за целый день.

    [spacekey:/2004/01/12]

    Ссылка на сообщения блога за весь день в другом месте.

    [SpaceKey:]

    Ссылка на домашнюю страницу пространства (или Страница пространства. страница конкретного пользователя

    [[email protected]]

    Ссылка на указанный ярлык. Ярлыки настраиваются администратором сайта.

    [http://confluence.atlassian.com]

    Ссылка на внешний ресурс.

    [mailto:[email protected]]

    Ссылка на адрес электронной почты.

    [файл://z:/file/on/network/share.txt]

    Ссылка на файл на вашем компьютере или в сетевой папке, которую вы сопоставили с диском. Это работает только в Internet Explorer .

    [!http://external/image.png!|http://external/link.html] Отображает внешнее изображение и ссылки на внешний URL.

    Обратите внимание, что Confluence рассматривает заголовки как якоря, поэтому вы можете ссылаться на заголовки, используя этот шаблон: [spacekey:pagename#headingname], где заголовок чувствителен к регистру и должен быть введен без пробелов.

    Для каждой из этих форм ссылок:

    • Вы можете добавить псевдоним ссылки, чтобы альтернативный текст отображался на странице. Пример: [псевдоним ссылки|название страницы#якорь]
    • Вы можете добавить подсказку ссылки, которая появится в виде всплывающей подсказки. Пример: [pagetitle#anchor|подсказка для ссылки]

    Изображения

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

    Что нужно ввести

    Что вы получите

    9изображение.gif!

    Отображается файл изображения, прикрепленный к сообщению в блоге.

    !image.jpg|миниатюра!

    Изображение отображается в виде эскиза на странице (работает только с изображениями, прикрепленными к странице). Пользователи могут нажать на миниатюру, чтобы увидеть полноразмерное изображение. Чтобы это работало, миниатюры должны быть включены администратором сайта.

    !image.gif|align=right, vspace=4!

    Для любого изображения можно указать атрибуты HTML-тега изображения в виде списка пар имя=значение, разделенных запятыми.

    Доступные метки изображения HTML включают в себя:

    Image Tag

    Детали

    Align

    Align

    7 

    Align

    7

    . , «центр», «верх».

    граница

    Задает ширину границы (в пикселях).

    bordercolor

    Используйте с тегом border. Укажите цвета по имени или шестнадцатеричному значению.

    hspace

    Указывает количество пробелов, которые должны быть вставлены слева и справа от изображения (в пикселях).

    vspace

    Указывает количество пробелов, которые должны быть вставлены над и под изображением (в пикселях).

    ширина

    Задает ширину изображения (в пикселях). Это переопределит естественную ширину изображения.

    высота

    Задает высоту изображения (в пикселях). Это переопределит естественную высоту изображения.

    title

    Указывает альтернативный текст для изображения, который отображается при наведении указателя на изображение.

    alt

    Указывает альтернативный текст для изображения. Этот текст можно найти с помощью поиска, и он способствует доступности страницы для просмотра только текста.

    Макеты страниц

    Нет представления вики-разметки для макетов страниц.

    Макросы

    Формат хранения и примеры вики-разметки включены в документацию для каждого макроса.

    Вики-разметка: из окна редактирования на экран

    Ранее в этой главе вы узнали, как создать раздел
    заголовки, а также выделять текст полужирным шрифтом или курсивом (см. рис. 1–4). Такое форматирование называется вики-разметкой . Пока вы продолжаете
    Благодаря этой книге вы узнаете обо всех типах разметки, с которыми вы работаете.
    скорее всего столкнутся. Тем не менее, как новому редактору, вам нужно выучить три
    вещи сразу: распознавать типы разметки, как шаблоны
    используется, и как создавать ссылки между статьями.

    Типы разметки

    Помимо заголовков, полужирного и курсивного текста, вы встретите
    следующие типы разметки при редактировании статей:

    • {{pagename}} или {{pagename | информация1 |
      info2 }} или {{имя страницы | это = информация 1 | это =
      info2}}
      . Двойные фигурные скобки обозначают
      шаблон. Пример шаблона показан на рис. 1-3 и обсуждался
      сразу после этого (см. стр. 7). Шаблоны обсуждаются в
      более подробно далее в этой главе (Понимание и использование шаблонов).

    • [[Название статьи]] или [[Название статьи|
      другое имя]]
      . Двойные квадратные скобки создают внутренние ссылки (вики-ссылки), которые представляют собой гиперссылки между страницами Википедии. Они описаны в
      следующий раздел.

    • [http:url] или [http:url некоторые
      текст]
      . Одиночные квадратные скобки вокруг URL создают внешние ссылки. Этот
      форматирование обсуждается в Главе 2, "Документирование вашего
      Источники» (глава 2–стр. 43).

    • текст, возможно, с URL
      и <ссылки /> . Это теги сносок — текст между тегами является сноской.
      себя — плюс инструкция для Википедии, где отображать
      сноски. Сноски также подробно описаны в главе 2 (Два стиля сносок).

    • <цитата> текст

      и

      числа и
      символов

      . В статьях вы найдете несколько
      другие типы парных тегов, кроме тегов
      для сносок; теги blockquote и math являются одними из наиболее распространенных. Теги обычно идут парами, и
      конечный тег должен иметь косую черту
      символ ("/") в качестве второго символа, если он должен работать
      правильно.

      Наконечник

      Единственным исключением из правила пар является

      тег, который вставляет новую строку (например, в шаблон).
      Это всего лишь один тег
      без закрывающего тега. Если
      вы вводите
      или

      , который делает то же самое, что и

      . («Бр» означает «перерыв»,
      как в «разрыве строки».)

    • . Эта разметка превращает текст внутри в невидимый комментарий; пример показан на рис. 1–3. «Невидимый» означает
      что текст не отображается при обычном просмотре
      Режим; вы можете увидеть это только в режиме редактирования.

    • {| куча вещей с большим количеством
      вертикальные линии |}
      . Это форматирование создает таблицу. Глава 14 переходит в
      Детали.

    • Одна или несколько строк, начинающихся с
      «*» или «#»
      . Эти символы создают списки внутри статьи («#» нумерует список, а «*» просто ставит маркер в начале строки). Глава 14 переходит в
      Детали.

    • [[Категория:Имя]] .
      Эта разметка выглядит как вики-ссылка, и в
      способом, но он помещает ссылку на категорию внизу страницы. Глава 19
      уходит в подробности.

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

    Связать одну статью с другой очень просто — и на то есть веская причина.
    Ссылки на другие статьи могут повысить ценность статьи, потому что
    читатели могут переходить по ссылкам всякий раз, когда они встречают слово, которое они
    многого не знаю. Хорошие места для добавления внутренних ссылок включают
    в первых разделах статей и в начале новых разделов
    внутри статей. Читатель всегда должен иметь возможность добраться до важного,
    похожие статьи по ссылке.

    В поле редактирования просто поместите парные квадратные скобки вокруг названия статьи
    вы хотите сослаться, например: [[Winston
    Черчилль]]
    . На рис. 1–10 снова показана песочница.
    в режиме предварительного просмотра с некоторыми внутренними ссылками.

    Рисунок 1-10. Сравните то, что было введено в поле редактирования (внизу), с
    что находится в части предварительного просмотра страницы (вверху).

    Другой тип внутренней ссылки — канальная ссылка — чрезвычайно полезен в ситуациях, когда
    название зависит от страны. Например, вы набрали следующее
    предложение в вашей статье: «Сан-Франциско имеет обширную общественную
    транспортная система», и вы хотите связать слова «общественное
    перевозки» к соответствующей статье. Беда в том, что нет
    статья в Википедии под названием «общественный транспорт». Есть,
    однако статья под названием «общественный транспорт», которая, вероятно,
    написано кем-то, кто говорит на британском английском. Тебе все равно, что
    это называется, вы просто хотите, чтобы ваши читатели могли перейти к этому
    статья. Вот как создать ссылку во время чтения статьи
    «общественный транспорт»: Сан-Франциско имеет обширную
    [[общественный транспорт|общественный транспорт]] система
    .

    Понимание и использование шаблонов

    Как указано в пункте 3, если вы войдете в режим редактирования и
    увидеть некоторый текст, заключенный в две фигурные скобки, например:
    {{pagename}} , вы просматриваете шаблон. А
    шаблон сообщает программе получить текст и инструкции по форматированию
    из другого места и вставить этот отформатированный текст в статью
    при показе статьи.

    Вот типичный пример: если вы видите
    {{fact}} шаблон в поле редактирования, когда вы
    редактируя статью, он говорит программе перейти на страницу
    [[Template:Fact]] , получить текст там
    (включая форматирование) и вставить этот текст в статью, когда
    статья отображается для читателей.
    {{fact}} , отображает следующий текст:
    [нужна ссылка ] .

    Шаблоны широко распространены по ряду причин:

    • Согласованность .
      Каждый шаблон очистки выглядит одинаково, каждый тип информационного окна
      (???) выглядит одинаково и так далее. Редакторы
      не нужно постоянно придумывать, как преподнести ту или иную
      Тип информации в статье.

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

    • Автоматическое обновление . Если
      сообщество Википедии решает изменить шаблон, изменив
      только одна страница — сама страница шаблона — автоматически изменяется
      что отображается на любой другой странице, использующей этот шаблон.
      (Часто используемые шаблоны защищены от изменения обычными
      редакторы, чтобы предотвратить широко распространенный вандализм.)

    • Категоризация . Шаблоны
      может включать текст, который помещает страницу в категорию (см. главу 18). Затем вы
      и другие редакторы могут перейти на страницу категории, чтобы найти, например,
      все статьи, которые были отнесены к категории нуждающихся
      копирайтинг.

    Шаблоны повсюду в Википедии. В этой книге вы
    найти обсуждение шаблонов в ряде глав, для
    пример:

    • Форматирование сносок (меньший размер шрифта, несколько столбцов)
      (Глава 2, Создание простой сноски)

    • Размещение информации о себе с помощью
      пользовательские ящики на вашей странице пользователя (глава 3, Создание страницы пользователя)

    • Пометка новой статьи как требующей категорий (глава 4, Учебное пособие: создание новой статьи)

    • Публикация предупреждений пользователей о вандализме и спаме, а также
      сообщения о вандализме (глава 7, Выбор уровня предупреждения и предупреждения и 3)

    • Использование ящика архива для аккуратной организации ссылок на
      страницы обсуждения (глава 8, 2)

    • Указание на то, что статья относится к разрабатываемой теме
      группой редакторов ( WikiProject )
      (Глава 9, ???)

    • Пометка текста как требующего источника и уведомление редактора
      кто разместил информацию о своей ошибке без источника (глава 10, ??? и когда источник не указан)

    • Публикация предупреждений о личных нападках (глава 11, страница 198)

    Это множество применений шаблонов, и это только в
    первые 11 глав. На данный момент вам просто нужно знать эти два
    основные принципы шаблонов:

    • Шаблоны добавляют текст и форматирование, которые хранятся на другой странице. К
      добавить шаблон в статью, вы вводите его имя между двойным
      фигурные скобки в том месте викитекста, где вы хотите
      появится шаблон.

    • Если шаблон содержит параметры, вы можете редактировать текст, который был
      добавляются к этим параметрам точно так же, как вы можете редактировать другой текст в
      статью, не понимая ни одной из сложностей
      шаблоны. Например, взгляните на Рисунок 1-11, на котором показан шаблон
      с большим количеством параметров:

      Рисунок 1-11. Обычное использование шаблонов
      инфобоксы . Вот шаблон инфобокса
      для статьи
      Winnowill , просмотрено в
      режим редактирования вверху, и как это на самом деле выглядит в
      статья внизу.

      This entry was posted in Популярное