Лекция Синтаксис
d15e193bcebb67cb.png?width=475&height=475

Здравствуйте, студенты! С вами Виктория. Приглашаю вас на особую межпространственную лекцию по синтаксису от AthenaEducation.

Сегодня мы изучим элементы синтаксиса для оформления работ в проекте ВИК "Сыны Афины".

Форматирование текста

Пишем Получаем
//Курсив// Курсив
**Полужирный** Полужирный
//**Полужирный курсив**// Полужирный курсив
__Подчеркнутый__ Подчёркнутый
--Перечеркнутый-- Перечёркнутый
##yellow|желтый## или ##8B008B|ваш-цвет## желтый или ваш-цвет
[[span style="color:blue"]]ваш //span//-элемент[[/span]] ваш span-элемент
меняем [[span style="background-color:blue"]]цвет фона[[/span]] у текста меняем цвет фона у текста
e01ed02cf766dfab.png

Форматирование текста прекрасно, но вСё Хорошо в мЕрУ.

Играем с размером шрифта

e475f87566a25485.png
Пишем Получаем
[[size 74%]]Процентное уменьшение текста[[/size]] Процентное уменьшение текста
[[size smaller]]Меньше обычного[[/size]] Меньше обычного
обычный текст Обычный текст
[[size larger]]Больше обычного[[/size]] Больше обычного
[[size xx-small]]Крохотный шрифт (XXS)[[/size]] Крохотный шрифт (XXS)
[[size x-small]]Очень маленький шрифт (XS)[[/size]] Очень маленький шрифт (XS)
Необычайно обычный шрифт Необычайно обычный текст
[[size large]]Большой шрифт (L)[[/size]] Большой шрифт (L)
[[size x-large]]Очень большой шрифт (XL)[[/size]] Очень большой шрифт (XL)
[[size xx-large]]Огромный шрифт (XXL)[[/size]] Огромный шрифт (XXL)
^^Уменьшунька^^ Уменьшунька

Модуль оценки

Вы можете добавить модуль оценки в свою работу с помощью следующей конструкции:

[[module Rate]]

Заголовки

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

+ Заголовок 1го уровня
++ Заголовок 2го уровня
+++ Заголовок 3го уровня
++++ Заголовок 4го уровня
+++++ Заголовок 5го уровня
++++++ Заголовок 6го уровня

Редактирование по частям

Полезная функция Wikidot. Позволяет удобно использовать оглавление редактирования статьи.

Вы можете использовать заголовки для того чтобы помечать места, которые требуют исправления в промежуточном этапе написания работы и затем редактировать их помощью функции "редактирование по частям".

Важная функция заголовков — их вложенность друг в друга. Нажав кнопку Редактировать по частям (внизу страницы) в списке + Опции и выбрав Edit на нужном заголовке, вы будете редактировать не весь документ, как при обычном Редактировании, но его отдельные части, от одного заголовка до другого такого же уровня.

Например:

+ Заголовок 1
++ Заголовок 2
++ Заголовок 3
+ Заголовок 4

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

Единственное ограничение для этой функции: заголовки в [[div]], [[tabview]], [[collapsible]] и любой иной блочной конструкции перестанут работать и разрушат иерархию, отчего Редактирование по частям станет недоступно, хотя [[toc]] сохранит свой функционал.

Для подобных случаев, если требуются заголовки, не отображающиеся в [[toc]] и не портящие иерархию, воспользуйтесь функцией "size".

Содержание

Можно создать список всех заголовков, связанный гиперссылками с самими заголовками. Для этого, поместите команду для генерации содержание на подходящее место.

[[toc]] содержание
[[f>toc]] содержание, выровненное вправо
[[f<toc]] содержание, выровненное влево

Выравнивание текста

Для выравнивания по горизонтали используйте:

[[<]] ... [[/<]] выравнивание по левой стороне
[[>]] ... [[/>]] выравнивание по правой стороне
[[=]] ... [[/=]] выравнивание по центру
[[==]] ... [[/==]] выравнивание по ширине

[[<]]
Левая сторона
[[/<]]

[[>]]
Правая сторона
[[/>]]

[[=]]
Центр
[[/=]]

Для выравнивания одной строки по центру используйте =

= Этазель

Этазель

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

При написании четырёх дефисов ---- вы получите горизонтальную линию


Цитирование

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

> "Сущности не следует умножать без необходимости" — Уильям Оккам.
>> "Самое простое объяснение обычно правильное" — Уильям Оккам.

"Сущности не следует умножать без необходимости" — Уильям Оккам.

"Самое простое объяснение обычно правильное" — Уильям Оккам.

Блоки цветные и не очень

Если вам нужно выделить что-то рамочкой, вы можете воспользоваться схемой: [[note]] … [[/note]]. Каждый из тэгов должен располагаться на отдельной строке. Текст в рамочке отображается в центральном положении.

[[note]]
"Изображение убийства вовсе не вызывает убийства. Сцена прелюбодеяния вовсе не толкает на разврат; отношения искусства и жизни очень сложны…" — Лев Выготский.
[[/note]]

"Изображение убийства вовсе не вызывает убийства. Сцена прелюбодеяния вовсе не толкает на разврат; отношения искусства и жизни очень сложны…" — Лев Выготский.

Создание цветного блога возможно с помощью приведённой ниже конструкции. Оранжевым отмечен шестнадцатеричный код цвета, задающий оттенок рамки. Голубым отмечен шестнадцатеричный код цвета, задающий оттенок фона блока.

[[div style="display: inline-block; border-radius: 10px; border:solid 2px #FFA500; background:#00FFFF; float:top; width:90%; padding:10px"]]
Пример работы цветом
[[/div]]

Получаем

Пример работы с цветом

Для создания блока с пунктирной рамкой возможно использование следующей конструкции:

[[div style="display: inline-block; border-radius: 10px; border:dashed 1px #1b0453; background:#F0FFFF; float:top; width:95%; padding:10px"]]
Блок с пунктирной рамкой
[[/div]]

Получаем

Блок c пунктирной рамкой

Для уменьшения ширины рамки меняем процентное значение отмеченной цветом части.

[[div style="display: inline-block; border-radius: 10px; border:dashed 1px #1b0453; background:#F0FFFF; float:top; width:25%; padding:10px"]]
Блок с уменьшенным размером.
[[/div]]

Получаем

Блок с уменьшенным размером.

Спойлеры

Тэг [[collapsible]] даёт возможность поместить на странице текстовый блок, который читатель может развернуть / свернуть одним щелчком мыши. Для небольшой порции текста можно воспользоваться таким шаблоном:

[[collapsible show="+ Показать" hide="- Скрыть"]]
Любой текст который вы хотите показывать / скрывать.
[[/collapsible]]

Для более длинных блоков добавьте к тэгу параметр hideLocation="both", чтобы ссылки для сворачивания / раскрывания размещались как в начале так и в конце блока. Другими возможными значениями параметра hideLocation могут быть ="top" (по умолчанию, вверху блока) и ="bottom" (внизу блока).

Можно использовать параметр folded="no" чтобы содержимое сворачиваемого блока было развернутым при просмотре, позволяя читателю скрыть его по желанию.

Примечания

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

Айзек Азимов[[footnote]]американский писатель-фантаст[[/footnote]]

Айзек Азимов1

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

[[footnoteblock title="Новое название для модуля сносок"]]

Работаем с изображениями

Одиночные картинки

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

a8d78938a14d5f2c.png

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

а. Загрузить файл через меню «Файлы» внизу страницы, на которую вы хотите добавить файл. Затем необходимо добавить изображение в саму работу.

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

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

[[image источник-картинки атрибут1="значение1" атрибут2="значение2" ...]]

Список атрибутов:

Название атрибута Допустимые значения Пример Описание
link имя вики-страницы либо URL "database:vika-owl" "http://www.example.com" делает картинку ссылкой на вики-страницу или произвольный web-адрес; этот параметр игнорируется, если в качестве источника картинки указан Flickr; * перед ссылкой открывает ссылку в новом окне
alt любой текст "Сова Виктория" подстановка текста, если картинка не доступна
width количество точек "200px" устанавливает ширину картинки во время просмотра
height количество точек "200px" устанавливает высоту картинки во время просмотра
style CSS-определение "border: 1px solid red; padding: 2em;" изменяет CSS стили картинки
class CSS-класс "mystyle" устанавливает CSS-класс для картинки — используется с пользовательскими темами
size "square" - 75x75 пикселей
"thumbnail" - 100 по большему краю
"small" - 240 по большему краю
"medium" - 500 по большему краю
"large" - 1024 по большему краю (только для больших рисунков с Flickr-а)
"original" - оригинальный размер (только для Flickr-а)
любое из списка слева показывает отмасштабированное изображение;
здорово для иконок - миниатюрок (thumbnail);
при работе с Flickr-ом изображение нужного размера выдает сервер Flickr;
эта опция действует только с изображениями, хранящимися локально или на Flickr-е

Источник-картинки может быть одним из:

Тип источника Формат Пример Описание
адрес URL любой корректный URL-адрес http://www.example.com/image.jpg отображает картинку, располагающуюся по адресу
прикрепленный файл (к текущей странице) имя-файла exampleimage.jpg отображает картинку, прикрепленную к текущей странице
прикрепленный файл (к другой странице) /имя-другой-страницы/имя-файла /another-page/exampleimage.jpg показывает изображение, прикрепленное к другой странице
:first :first :first показывает первое из прикреплённых к текущей странице изображений (либо ничего)
изображение с Flickr-а flickr:код-фото flickr:83001279 показывает изображение с Flickr-а и содержит ссылку на оригинальную Flickr-страницу
приватное изображение с Flickr-а flickr:код-фото_пароль flickr:149666562_debab08866 показывает изображение с Flickr-а и содержит ссылку на оригинальную Flickr-страницу; если задан пароль, изображение доступно, даже если оно помечено как приватное

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

Примеры: link="*http://www.example.com", *flickr:149666562_debab08866, *image.jpg.

Можно выбрать горизонтальное выравнивание для картинки:

[[=image… по центру
[[<image… по левому краю
[[>image… по правому краю
[[f<image… по левому краю, окруженная текстом
[[f>image… по правому краю, окруженная текстом

Изображение с подписью

Выравнивание по правой стороне.

[[div class="rimg"]]
[[image https://media.discordapp.net/attachments/668029990062915595/770971278945288242/1d22eb16d4d27fa5.png width="128"]]
[[span]] Виктории
пришла идея [[/span]]
[[/div]]

1d22eb16d4d27fa5.png
Виктории
пришла идея
e01ed02cf766dfab.png

Можно настроить размер изображения в рамке с помощью атрибута width="ваше значение".

Галерея картинок

Чтобы встроить в страничку ряд (галерею) изображений используйте тэги [[gallery]] и [[/gallery]]:

[[gallery size="размер-рисунка-в-галерее"]]

или

[[gallery size="размер-рисунка-в-галерее"]]
: адрес-изображения1 атрибут1="значение1" атрибут2="значение2" ...
: адрес-изображения2 атрибут1="значение1" атрибут2="значение2" ...

[[/gallery]]

Эмблемы отделов ВИК "Сыны Афины":

Атрибуты тэга [[gallery]]:

Атрибут Допустимые значения По умолчанию Описание
size "square", "thumbnail", "small", "medium" "thumbnail" Устанавливает размер иконок изображений в галерее. Действует только для локальных (загруженных) фалов либо картинок с Flickr-a
order "name", "name desc", "created_at", "created_at desc" "name" Устанавливает вид сортировки

Если тэг [[gallery]] употреблен без списка изображений, автоматически отображаются изображения (миниатюры), а также другие графические файлы, прикреплённые к текущей странице.

Если тэг [[gallery]] употребляется со списком изображений, то отобразятся только эти изображения. Адрес-изображения в этом случае не должен являться URL.

Ссылки

Внутренние ссылки

Пишем Получаем Пояснения
[[[science]]] science Используется само имя
[[[Мироздание]]] Мироздание Страницы на русском не годятся
[[[world-2|Пограничье]]] Пограничье Использование альтернативных названий страниц
e01ed02cf766dfab.png

Хочешь узнать обо мне больше? Загляни на страничку Сова Виктория

Внешние ссылки

Пишем Получаем Пояснения
http://patagona-lab.obscurative.ru http://patagona-lab.obscurative.ru Просто ссылка
[[[http://patagona-lab.obscurative.ru|Лаборатория Патагона]]] Лаборатория Патагона Именованная ссылка
*http://patagona-lab.obscurative.ru
[*http://patagona-lab.obscurative.ru Лаборатория Патагона]
http://patagona-lab.obscurative.ru
Лаборатория Патагона
Ссылки открываются в новом окне

Таблицы

Простые таблицы создаются с помощью сдвоенных вертикальных линий.

||Строка таблицы должна || начинаться и заканчиваться || двойными вертикальками.||
|| Двойные вертикальки || также разделяют ячейки.||= - - - ||
|||| Можно объединять ячейки в строке, || ставя перед каждой||
|| увеличенной ячейкой|||| добавочные разделители.||
||Чтобы выделить заголовок, ||ставьте в начале ячейки ||~ тильду <<~>> и пробел.||
|| Для выравнивания ||текста внутри ячейки|| начинайте ячейку знаками:||
||< меньше ``<'' и пробел _
(выровняли влево);||= равно ``='' и пробел _
(выровняли по центру);||> больше ``>'' и пробел _
(выровняли вправо).||
|||||| И, пожалуй, лучший способ понять - _
это просто посмотреть наглядный пример.||

Строка таблицы должна начинаться и заканчиваться двойными вертикальками.
Двойные вертикальки также разделяют ячейки. - - -
Можно объединять ячейки в строке, ставя перед каждой
увеличенной ячейкой добавочные разделители.
Чтобы выделить заголовок, ставьте в начале ячейки тильду «~» и пробел.
Для выравнивания текста внутри ячейки начинайте ячейку знаками:
меньше “<” и пробел
(выровняли влево);
равно “=” и пробел
(выровняли по центру);
больше “>” и пробел
(выровняли вправо).
И, пожалуй, лучший способ понять -
это просто посмотреть наглядный пример.

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

[[module ListPages category="_default database" created_by="Введите ник пользователя" separate="false" prependLine="||~ Название ||~ Рейтинг ||~ Теги ||~ Создана ||~ Обновлена ||"order="name"]]
||%%title_linked%% || %%rating%% (%%rating_votes%%) || %%tags_linked%% || %%created_at%% || %%updated_at%%||
[[/module]]

Пример

Работы ObsidianFox

Создаём вкладки

2.png

Важно: Наличие вкладок разрушает стройность таблицы оглавления, меток и действия клавиши "вернуться"

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

Чтобы разместить на странице информацию в виде набора вкладок (tabview), можно воспользоваться следующим синтаксисом:

[[tabview]]
[[tab Заголовок вкладки №1]]
Содержимое вкладки №1.
[[/tab]]
[[tab Заголовок вкладки №2]]
Содержимое вкладки №2.
[[/tab]]
[[tab Заголовок вкладки №3]]
Содержимое вкладки №3.
[[/tab]]
[[/tabview]]

Содержимое вкладки №1.

Отключаем форматирование

Чтобы отключить трансляцию и получить на выходе "сырой текст", заключите его в двойные @@.

Этот текст транслируется.

Этот //текст// остается **неизменным**.

Аудио и Видео

Поместить аудио возможно следующим образом:

[[html]]
<audio controls>
<source src="Прямая ссылка на аудио файл">
</audio>
[[/html]]

Поместить код вставки видео с "YouTube" можно таким образом:

[[html]]
<iframe width="560" height="315"
src="Ссылка на ролик" frameborder="0" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
[[/html]]

21fd56d06ee7e3ad.png

Спасибо за внимание!

Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License