Руководство по форматированию

Форматирование может сыграть большую роль в повышении интереса читателей к вашим статьям. Хорошее форматирование - это большое преимущество, и в этом руководстве будет рассказано обо всем, от основ и основ до вводного стиля CSS.

Посетите Центр виджетов для получения коллекции модулей, форматов и тем

Форматы статей

Основные шаблоны статей

[[include component:rate]]

КОД БЛОКА ИЗОБРАЖЕНИЯ (если применимо)

СИМВОЛ КЛАССА ОБЪЕКТА

**Закреплённый индекс аномалии:** XXX

**Класс объекта:** Альфа/Бета/Гамма (сложность сдерживания) - Желтый/Оранжевый/Красный (рейтинг летальности)

**Типы опасностей:**

**Протоколы сдерживания:** [Пункты, разъясняющие процедуры]

**Описание:** [Пункты, поясняющие описание]

**Дополнение:** и/или **Открытие:** [Опциональные дополнительные пункты]

[[блок примечаний]]

[[=]]
<< [[[RPC-XXX]]] | RPC-XXX | [[[RPC-XXX]]] >>
[[/=]]

Разместите ссылки на предыдущую и следующую статьи здесь ^

Example of what the navigation at the end should look like:

« RPC-001 | RPC-002 | RPC-003 »

Альтернативные форматы Статей

Шаблон интервью

> **Опрашиваемый:** [The person, persons, or RPC being interviewed]
>
> **Опрашивающий:** [Interviewer, can be blocked out using █]
>
> **Предисловие:** [Small passage describing the interview]
>
> **<Начало записи, [опциональная информация о времени]>**
>
> **Опрашивающий:** [речь]
>
> **Человек:** [речь]
>
> [Повторите по мере необходимости]
>
> **<Конец протокола, [опциональная информация о времени]>**
>
> **Заключительное заявление:** [Небольшое резюме и отрывок о том, что произошло потом]

Символы Классификации объектов

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

Альфа

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-white.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-yellow.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-orange.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-red.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-purple.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-black.png]]

Бета

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-white.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-yellow.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-orange.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-red.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-purple.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-black.png]]

Гамма

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-white.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-yellow.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-orange.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-red.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-purple.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-black.png]]

Омега

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-white.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-yellow.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-orange.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-red.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-purple.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-black.png]]

+ Другие Классы

Эти коды находятся в модуле оценки.

Вы можете опубликовать RPC, нажав на ссылку Серия I и выбрав любую пустую статью RPC. Обязательно включите тег "rpc" (без кавычек) на своей странице.

Синтаксис Wikidot

По большей части, вы можете обойтись только знанием самых основ синтаксиса Wikidot.

  • Выделение жирным шрифтом: **ваш текст** ⟶ ваш текст
  • Выделение курсивом: //ваш текст// ⟶ ваш текст
  • Подчеркивание: __ваш текст__ ⟶ ваш текст
  • Зачеркнуто: --ваш текст-- ⟶ ваш текст

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

Картинки

Добавление изображений - отличный способ улучшить вашу статью.

[[include component:image-block name=Image_URL_Location|caption=Image_Caption]]

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

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

[[include component:image-block name=Image_URL_Location|caption=Image_Caption|width=###]]

Это позволит установить размер изображения. Значение по умолчанию равно 300 пикселям. Обязательно установите устройство, чтобы оно работало. "width=450px" сделает его шириной 450 пикселей. "width=50%" заставит его занимать половину ширины содержимого страницы.

[[include component:image-block name=Image_URL_Location|caption=Image_Caption|align=ALIGNMENT]]

Это изменит способ выравнивания изображения. По умолчанию изображение будет выровнено по правой стороне экрана. "align=left" заставит его отображаться с левой стороны. "align=center" заставит его отображаться в центре экрана..

[[include component:image-block name=Image_URL_Location|caption=Image_Caption|enlarge=false]]

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

If you want to add normal images (without the image block formatting), simply use:

[[image LINK]] ⟶ Создает обычное изображение.
[[<image LINK]] ⟶ Создает изображение, выровненное по левому краю.
[[>image LINK]] ⟶ Создает изображение, выровненное по правому краю.
[[=image LINK]] ⟶ Создает центрированное изображение.
[[f<image LINK]] ⟶ Создает изображение, плавающее слева. (Позволяет перенос текста.)
[[f>image LINK]] ⟶ Создает изображение, плавающее справа. (Позволяет перенос текста.)

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

Collapsibles

Collapsibles work well to hide large blocks of text.

[[collapsible show="SHOW TEXT" hide="HIDE TEXT"]]
TEXT
[[/collapsible]]

SHOW TEXT

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

[[collapsible show="SHOW LONG BLOCK OF TEXT" hide="HIDE LONG BLOCK OF TEXT" hideLocation="both"]]
ДЛИННЫЙ БЛОК ТЕКСТА
[[/collapsible]]

SHOW LONG BLOCK OF TEXT

Гиперссылки

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

[PAGE-URL LINK-TEXT]

Это сделает:

LINK-TEXT

Если страница, на которую вы ссылаетесь, находится на том же сайте Wikidot, вы можете просто использовать /pagename. Например:

[/formatting-guide LINK-TEXT]

Это сделает:

LINK-TEXT

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

[[[formatting-guide]]]

Это сделает:

formatting-guide

Сноски и Блоки сносок

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

Example text.[[footnote]]Explanation.[[/footnote]]

Example text.1

Кроме того, вы можете изменить расположение сносок на вашей странице, используя [[footnoteblock]]. Обратите внимание, что на странице может быть только один блок сносок.

Сноски

Заголовки

Вы можете подчеркнуть текст с помощью заголовков. Следующий код:

+ Самый большой Заголовок
++ Размер 2
+++ Размер 3
++++ Размер 4
+++++ Размер 5
++++++ Наименьший заголовок

Будет создавать заголовки различных размеров:

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

Размер 2

Размер 3

Размер 4

Размер 5
Наименьший заголовок

Списки

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

# Элемент Упорядоченного списка 1
# Элемент Упорядоченного списка 2
# Вложенный элемент 1
# Элемент Упорядоченного списка 3

* Неупорядоченный Элемент списка 1
* Неупорядоченный Элемент списка 2
* Вложенный элемент 1
* Неупорядоченный Элемент списка 3

Будет создавать:

  1. Пункт Упорядоченного списка 1
  2. Пункт Упорядоченного списка 2
    1. Вложенный элемент 1
  3. Пункт Упорядоченного списка 3
  • Пункт Неупорядоченного списка 1
  • Пункт Неупорядоченного списка 2
    • Вложенный элемент 1
  • Пункт Неупорядоченного списка 3

Таблицы

Таблицы можно использовать для упорядочивания информации в вашей статье:

||~ Заголовок 1 ||~ Заголовок 2 ||~ Заголовок 3 ||
|| Пример 1. || Пример 2. || Пример 3. ||

Это сделает:

Заголовок 1 Заголовок 2 Заголовок 3
Пример 1. Пример 2. пример 3.

Вы можете расширить эту модель на столько строк и столбцов, сколько вам нужно. Не забудьте добавить тильду (~) в каждое поле в строке заголовка.

Блоки цитат

Блоки цитат отлично подходят для протоколов тестирования, исследований и так далее. Добавить блок цитат так же просто, как добавить "> " перед каждой строкой вашего текста. Так:

> Line 1
>
> Line 2

Будет создавать:

Line 1

Line 2

Обратите внимание, что для пустых строк также требуется "> " - в противном случае ваш блок цитат будет разделен! Кроме того, пробел после ">" имеет важное значение; в противном случае код не будет работать.

Якоря

Якоря могут значительно упростить навигацию по вашей странице:

[названиеякоря]

[[# anchorname]] Чтобы создать якорь.

[#anchorname Текст ссылки.] Чтобы вернуться к якорю.

Это создаст:

Link text.

Горизонтальные Разделители

Горизонтальные разделители используются для разделения содержимого страницы:

Текст
-----
Ещё текст

Будет создавать:

Текст

Ещё текст

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

Вы можете выровнять текст по левому краю, центру и правому краю страницы, а также выровнять его по ширине:

[[<]]
Текст, выровненный по левому краю

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/<]]

[[=]]
Текст по центру

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/=]]

[[>]]
Текст, выровненный по правому краю

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/>]]

[[==]]
Выровненный текст

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/==]]

Будет создавать:

Текст, выровненный по левому краю

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Текст по центру

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Текст, выровненный по правому краю

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Выравнивание текста делает так, чтобы все строки располагались равномерно, поэтому он виден только в больших абзацах.

Цветной Текст

Цветной текст сделать очень просто:

##blue|Blue text.##

Создаст: Blue text.

Он также работает с шестнадцатеричными значениями:

##71e02c|Green text.##

Создаст: Green text.

Вкладки

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

[[tabview]]
[[tab Tab One]]
Пример текста.
[[/tab]]
[[tab Tab Two]]
Ещё пример текста.
[[/tab]]
[[/tabview]]

Создаст:

Пример текста.

Вы можете добавить столько [[tab]], сколько вам нужно.

Создание нескольких [[tabview]] … [[/tabview]] элементов создадут несколько блоков вкладок. Например:

[[tabview]]
[[tab One]]
[[/tab]]
[[/tabview]]

[[tabview]]
[[tab Two]]
[[/tab]]
[[/tabview]]

Будет создавать:

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

Из-за того, как Wikidot форматирует текст, наличие пустых строк обычно невозможно. Однако вы можете обойти это, используя теги noparse. Обычно создание пустых строк будет отображаться следующим образом:

Text



More text

Text

More text

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

Text
@@@@
@@@@
@@@@
More text

Text



More text

Эти теги также можно использовать для отображения кода без его анализа. Например:

@@ [[div class="example"]] @@

@@ [[/div]] @@

[[div class="example"]]

[[/div]]

Базовый CSS

CSS - это язык, используемый для применения стиля к определенным элементам веб-страницы. Его можно использовать для значительного улучшения внешнего вида ваших статей. Сначала мы рассмотрим некоторые основы того, как синтаксис Wikidot работает вместе с CSS.

Элементы Div

В HTML элементы div используются для обозначения определенных разделов страницы.

Хотя синтаксис Wikidot немного отличается от HTML, вы все равно можете создавать элементы div следующим образом:

[[div]] Контент. [[/div]]

Конечно, само по себе это ничего не даст.

Классы и идентификаторы

Вы можете назначить класс или идентификатор своему элементу div, добавив следующее:

[[div class="firstDiv"]] Контент. [[/div]]

[[div id="secondDiv"]] Контент. [[/div]]

По сути, это дает браузеру возможность идентифицировать div. Позже мы сможем использовать эти классы/идентификаторы для применения к ним стиля.

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

Синтаксис CSS

Прежде чем мы продолжим, давайте рассмотрим базовый синтаксис CSS. Стиль применяется с помощью наборов правил, которые состоят из ** селектора** и ** блока объявления**. Вот пример набора правил:

.firstDiv {
background-color: black;
border: 1px solid white;
border-radius: 4px;
}

Здесь ".firstDiv" - это селектор, а раздел посередине - блок объявления. Блоки объявления должны быть заключены в фигурные скобки ({}), и каждое объявление должно заканчиваться точкой с запятой. В интервалах и отступах нет необходимости, хотя это делает таблицу стилей намного более читаемой. Если вы хотите, у вас может быть набор правил в одной строке:

.firstDiv {background-color: black; border: 1px solid white; border-radius: 4px;}

Селекторы

Существует три основных типа селекторов:

  • Селекторы элементов
  • Селекторы классов
  • Селекторы идентификаторов

Вот несколько примеров различных типов:

h1 {…}
.classDiv {…}
#idDiv {…}

Первый набор правил будет применяться ко всем элементам h1 (заголовок 1) на странице. Второй будет применяться ко всем элементам с классом "classDiv". Третий будет применяться ко всем элементам с идентификатором "idDiv". Помните: селекторы классов начинаются с точек, селекторы идентификаторов начинаются с хэшей.

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

* {…}

Свойства

Есть еще одна вещь, которую нам нужно обсудить: Свойства. В CSS есть сотни свойств, но не волнуйтесь - вам не придется использовать большинство из них. Вот краткий список наиболее распространенных свойств, которые вы будете использовать:

  • Цвет: Изменяет цвет текста в выбранном элементе.
    • Values: hex code (#000000), rgb (rgb(0, 0, 0)), etc.
  • цвет фона: Изменяет цвет фона элемента.
    • Values: hex code, rgb, etc.
  • фоновое изображение: Применяет фоновое изображение к выбранному элементу.
    • Values: url('IMAGEURL'), linear-gradient(…)
  • граница: Изменяет границу элемента.
    • Values: (size [1px, etc.]), (style [solid, dashed, dotted, etc.]), (color [hex, rgb, etc.])
  • радиус-границы: Округляет углы границы элемента.
    • Значения: пиксели, процент и т.Д.
  • margin: Изменяет пространство между элементом и его контейнером (элементом, внутри которого он находится.)
    • Values: пиксели, процент и т.Д.
      • Стороны могут быть оформлены независимо друг от друга с помощью margin-top, margin-bottom и т.Д.
      • При стилизации всех 4 сторон с использованием одного атрибута интервал применяется по часовой стрелке, начиная с верха; таким образом, "1px 2px 3px 4px" будет применять 1px поля сверху, 2px справа, 3px снизу и 4px слева.
  • padding: Изменяет пространство между границей элемента и его содержимым.
    • Values: пиксели, процент и т.Д.
      • Как и в случае с полями, интервал применяется по часовой стрелке сверху. Боковые стороны могут быть оформлены индивидуально с использованием подкладки-сверху, подкладки-снизу и т.Д.
  • font-family: Изменяет шрифт текста в выбранном элементе.
    • Values: названия шрифтов
      • Здесь вы можете добавить несколько шрифтов (семейство шрифтов: Arial, Tahoma, без засечек;) Если по какой-либо причине один шрифт недоступен, браузер попытается использовать следующий.
  • font-size: Изменяет размер текста в выбранном элементе.
    • Значения: [8 пикселей и т.д.], [1em и т.д.], меньше, больше, [проценты]
      • 'em' и процентная шкала, основанная на текущем размере шрифта документа. 1em = 100%.
  • font-weight: Изменяет вес (толщину) текста в выбранном элементе.
    • Values: обычный, жирный, более светлый, смелый, [100, 200, etc.]
      • В зависимости от вашего шрифта могут быть доступны не все значения.

Имейте в виду, что это лишь небольшая горстка свойств - w3schools - отличный справочник, если вы хотите узнать больше!

Элементы стиля

Итак, теперь мы знаем все о синтаксисе CSS. Как мы оформляем наш div? Для этого есть три способа:

  • Встроенный стиль
  • Использование модуля CSS
  • Импорт таблицы стилей

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

Встроенный Стиль

Встроенный стиль - это самый простой, хотя и наименее эффективный метод стилизации элементов. Вы действительно должны использовать его только тогда, когда вам нужно стилизовать один конкретный элемент - в противном случае гораздо эффективнее использовать модуль CSS. Чтобы применить встроенный стиль к элементу, добавьте к нему атрибут style:

[[div style=" "]] Content. [[/div]]

Вы можете вставить блок объявления внутри атрибута style, и он будет применен к div. Например:

[[div style="background-color: rgb(0,0,0); color: white;"]] Content. [[/div]]

Это создаст:

Content.

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

CSS Модуль

Более эффективным способом стилизации элементов является использование модуля CSS. Его аналогом в HTML был бы тег <style>. Чтобы добавить CSS-модуль, поместите его в верхней части вашего документа:

[[module CSS]]

[[/module]]

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

[[module CSS]]
.exampleRuleSet {
background-color: rgb(0,0,0);
color: white;
}
[[/module]]

Примеры

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

Сценарий А

Допустим, вы хотите создать блок div, который выглядит как компьютерный терминал. Фон должен быть черным, с белым текстом. Моноширинный шрифт также был бы хорош. Давайте переведем это в CSS!

[[div style="background-color: black; color: white; font-family: monospace; font-size: 16px; padding: 2%; border-radius: 5px"]]
| TEXT
| MORE TEXT
[[/div]]

Это создает:

| TEXT
| MORE TEXT

Давайте разберемся, что происходит:

  • "background-color: black" устанавливает фон на черный цвет.
  • "color: white" устанавливает цвет текста на белый.
  • "font-family: моноширинный устанавливает шрифт в моноширинный шрифт, аналогичный компьютерному терминалу.
  • "padding: 2%" добавляет немного пространства между текстом и краем блока div.
  • "border-radius: 5px" округляет углы div на 5 пикселей.

Другим способом сделать это было бы:

[[module CSS]]
.terminal {
background-color: black;
color: white;
font-family: monospace;
padding: 2%;
border-radius: 5px;
}
[[/module]]

…

[[div class="terminal"]]
| TEXT
| MORE TEXT
[[/div]]

Это привело бы к тому же результату с дополнительным преимуществом, заключающимся в том, что его можно легко использовать повторно с несколькими разделами. Просто назначьте каждому div класс "terminal", и все готово.

Пользовательские темы

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

Руководство по созданию собственных тем должно быть доступно -в ближайшем будущем.— этого не будет.

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