Руководство по редактированию вики: различия между версиями

Материал из Celadon | Wiki Skyrat
Перейти к навигации Перейти к поиску
← Предыдущая правка
imported>YMakaveli
ВизуальныйВики-текст
imported>Malle Yeno
м →Wikitext (AKA Wikicode): More context for how the visual editor should be used.
imported>YMakaveli
 
(не показаны 24 промежуточные версии 6 участников)
Строка 1: Строка 1:
{{Needsrevision|reason = Broken links need fixing, Check contents to see if they need updating}}
<div style="background-color: #f0f6ff; border-left: 4px solid #1a3a6e; padding: 12px 15px; margin: 10px 0; border-radius: 0 4px 4px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
== Welcome ==
    <div style="color: #1a3a6e; font-weight: 700; font-size: 1.05em; margin-bottom: 8px;">
        <span style="display: inline-block; width: 24px; text-align: center;">⚠️</span> Важно к прочтению:
    </div>
    <div style="padding-left: 30px;">
Всегда просматривайте "Править код" или "Просмотр кода" в зависимости от того кто вы, редактор или гость, так вы увидите всё подробно, а так можете просто видеть как это выглядит и выбрать, что вам требуется.
Со временем гайд будет дополняться.
    </div>
</div>


We're happy you've shown interest in contributing to the wiki. We welcome all editors and assume good faith for all edits made, so there are very few protected pages.
= ГАЙД ПО ОФОРМЛЕНИЮ WIKI =


This is a quick guide to how you can help us make this wiki more helpful for players like you!
== 1. БАЗОВОЕ ФОРМАТИРОВАНИЕ ==
'''Жирный''' ''курсив'' '''''жирный курсив'''''
<u>подчёркнутый</u> <s>зачёркнутый</s>
<code>моноширинный</code>
<sup>верхний</sup> <sub>нижний</sub> индекс


== Editing Access ==
== 2. ЦВЕТА ==
Only users with accounts registered to this mediawiki instance can make changes to pages or add new ones. If you would like to have an account, contact a staff member on the Discord so that you can be directed to site admin, who will create an account for you.
<span style="color:red">красный текст</span>
<span style="color:#00FF00">зелёный HEX</span>
<span style="background:yellow">жёлтый фон</span>
<span style="color:white;background:black">инверсия</span>


The time that you are waiting to gain access is a great time to review what you need to know to edit a wiki.
== 3. ЗАГОЛОВКИ ==
= Уровень 1 (только для названия страницы) =
== Уровень 2 ==
=== Уровень 3 ===
==== Уровень 4 ====


==[[wikipedia:Help:Wikitext|Wikitext (AKA Wikicode)]]==
== 4. ССЫЛКИ ==
[[File:ArticleEditingButtonsScreenshot.png|thumb|A screenshot of the buttons used in articles. The edit button is active because we are in the visual editor.]]
[[Внутренняя ссылка]]
Wikitext is the strange syntax used by all Mediawiki pages including this one. If you don't know it and are prepared to learn, you can read the Wikipedia page [http://en.wikipedia.org/wiki/Help:Wiki_markup here]. (Keep in mind that Wikipedia is actually a mediawiki instance, and that mediawiki is the technology that actually hosts content in wiki form. Wikitext is the language you write wiki content in. Using mediawiki and wikitext as search terms will get you more effective learning resources than using wikipedia as a search term.)
[[Страница|Понятный текст]]
[https://skyrat.ss220.space/index.php?title=Руководство_по_редактированию_вики ссылка]
[[Специальная:Contributions|Служебная страница]]


If you don't want to spend your life learning this markup, then fret not, you can still help. The wiki now has a visual editor for those who do not know how to write in wikitext. The visual editor is the default editing tool once you start creating a page or revising old ones. You can activate the visual editor by using the "edit" button at the top right instead of the "edit source" button. The image here shows you what the button looks like when the visual editor is active.  
== 5. СПИСКИ ==
* Маркированный
** Вложенный
*** Третий уровень


Keep in mind that the visual editor is not always going to be available for use. It may error out and force open the wikitext editor in certain environments. It also is not effective for making [[mediawikiwiki:Help:Templates|templates]]. Use the visual editor if you are writing articles, making changes to articles, or starting out. Once you get more skilled in wiki writing, it will be helpful for your wiki editor journey to start small with wikitext and learn more as you need to use more elements.
# Нумерованный
## Вложенный
### Третий уровень


== What needs doing? ==
; Определение
: Пояснение термина


=== New pages ===
== 6. ТАБЛИЦЫ (базовые) ==
{| class="wikitable"
|+ Подпись таблицы
! Заголовок 1 !! Заголовок 2
|-
| Ячейка 1 || Ячейка 2
|-
| colspan="2" | Объединённые ячейки
|}
 
== 7. ИЗОБРАЖЕНИЯ ==
[[Файл:Example.jpg|thumb|right|300px|Подпись]]
Параметры:
• thumb - рамка
• left/right/center - выравнивание
• 300px - ширина
• none - без рамки
 
== 8. РАЗДЕЛИТЕЛИ ==
----
<div style="border-top:1px dashed #999;margin:10px 0"></div>
<div style="height:2px;background:linear-gradient(to right,transparent,gray,transparent)"></div>
 
== 9. БЛОКИ ==
<div style="border:1px solid #000;padding:10px;margin:10px 0">
Простой блок
</div>
 
<div style="border-left:3px solid red;background:#f9f9f9;padding:5px 10px">
Блок с акцентной полосой
</div>
 
== 10. СПЕЦИАЛЬНЫЕ ЭЛЕМЕНТЫ ==
<nowiki>[[Защита]] от разметки</nowiki>
<pre>Преформатированный текст</pre>
<!-- Это комментарий -->
 
== 11. ТАБЛИЦЫ (продвинутые) ==
{| style="border-collapse:collapse; width:100%; background:#f5f5f5"
|+ style="caption-side:bottom" | Стилизованная таблица
! style="border:1px solid #666; padding:8px; background:#ddd" | №
! style="border:1px solid #666; padding:8px; background:#ddd" | Название
|-
| style="border:1px solid #ccc; padding:6px" | 1
| style="border:1px solid #ccc; padding:6px" | Элемент
|}
 
== 12. КАРТОЧКИ ==
<div style="border:2px solid #1a3a6e; background:#f8f9fa; padding:12px; border-radius:5px; margin:10px 0">
<div style="background:#1a3a6e; color:white; padding:8px 12px; margin:-12px -12px 12px -12px; font-weight:bold">
Заголовок карточки
</div>
Содержимое карточки...
</div>
 
== 13. ЦВЕТНЫЕ ПАНЕЛИ ==
<div style="background:#e8f4ff; border-left:3px solid #4a90e2; padding:5px 10px; margin:5px 0 5px 20px">
Информационная панель
</div>
 
<div style="background:#ffecec; border-left:3px solid #d33; padding:5px 10px; margin:5px 0 5px 20px">
Панель предупреждения
</div>
 
== 14. ВЫРАВНИВАНИЕ ==
<div style="text-align:center">По центру</div>
<div style="text-align:right">По правому краю</div>
<div style="float:right; margin-left:10px">Плавающий блок</div>
<div style="clear:both"></div>
 
== 15. КОЛОНКИ ==
<div style="column-count:2; column-gap:15px">
Текст автоматически распределится по двум колонкам
</div>
 
== 16. ИКОНКИ CSS ==
 
<div style="display:flex; flex-wrap:wrap; gap:15px; padding:10px; border:1px solid #eee; border-radius:5px">
 
<!-- Основные фигуры -->
<div style="flex:0 0 100%"><strong>▸ Основные фигуры:</strong></div>
<span style="display:inline-block; width:16px; height:16px; background:#333; border-radius:50%" title="Круг"></span> Круг
<span style="display:inline-block; width:16px; height:16px; background:#f00; border-radius:2px" title="Квадрат"></span> Квадрат
<span style="display:inline-block; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:16px solid #09f" title="Треугольник"></span> Треугольник
<span style="display:inline-block; width:18px; height:2px; background:#333; margin-top:8px" title="Линия"></span> Линия
 
<!-- Индикаторы -->
<div style="flex:0 0 100%; margin-top:10px"><strong>▸ Индикаторы:</strong></div>
<span style="display:inline-block; width:14px; height:14px; border:2px solid #4CAF50; border-radius:3px" title="Чекбокс"></span> Чекбокс
<span style="display:inline-block; width:14px; height:14px; border:2px solid #f44336; border-radius:50%" title="Радиокнопка"></span> Радиокнопка
<span style="display:inline-block; width:16px; height:16px; background:#FFC107; border-radius:50%; position:relative; top:3px" title="Предупреждение"></span> Предупреждение
<span style="display:inline-block; width:16px; height:16px; background:#2196F3; border-radius:2px; transform:rotate(45deg)" title="Ромб"></span> Ромб
 
<!-- Стрелки -->
<div style="flex:0 0 100%; margin-top:10px"><strong>▸ Стрелки:</strong></div>
<span style="display:inline-block; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:12px solid #333" title="Стрелка вверх"></span> Вверх
<span style="display:inline-block; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:12px solid #333" title="Стрелка вниз"></span> Вниз
<span style="display:inline-block; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:12px solid #333" title="Стрелка влево"></span> Влево
<span style="display:inline-block; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid #333" title="Стрелка вправо"></span> Вправо


New content is constantly being added to ss13 which needs tutorials and such. Before you start to write a page, search for it and if you can't find it, start one yourself. We welcome all contributions to the wiki and trust all edits to be made in good faith. As a recommendation if you wish to work on a page uninterrupted and not worry about other users edits while working, make it in your personal [[Special:MyPage/Sandbox|sandbox]] area or anywhere in your own pages. If you don't know wikicode, you can create a unformatted page and ask someone else to format it for you.
<!-- Социальные -->
<div style="flex:0 0 100%; margin-top:10px"><strong>▸ Социальные:</strong></div>
<span style="display:inline-block; width:16px; height:16px; background:#4267B2; border-radius:2px; position:relative; top:3px" title="Facebook"></span> Facebook
<span style="display:inline-block; width:16px; height:16px; background:#1DA1F2; border-radius:50%" title="Twitter"></span> Twitter
<span style="display:inline-block; width:16px; height:16px; background:#FF0000; border-radius:2px" title="YouTube"></span> YouTube


=== Content revisions ===
<!-- Статусы -->
<div style="flex:0 0 100%; margin-top:10px"><strong>▸ Статусы:</strong></div>
<span style="display:inline-block; width:12px; height:12px; background:#4CAF50; border-radius:50%" title="Online"></span> Online
<span style="display:inline-block; width:12px; height:12px; background:#9E9E9E; border-radius:50%" title="Offline"></span> Offline
<span style="display:inline-block; width:12px; height:12px; background:#FF9800; border-radius:50%" title="Занят"></span> Занят


A list of pages which need revisions can be found [[:Category:Needs revision|here]].
<!-- Дополнительные -->
<div style="flex:0 0 100%; margin-top:10px"><strong>▸ Дополнительные:</strong></div>
<span style="display:inline-block; width:16px; height:16px; border:2px solid #333; border-radius:1px; position:relative" title="Окно"></span> Окно
<span style="display:inline-block; width:16px; height:16px; border:2px solid #333; border-bottom:none" title="Корзина"></span> Корзина
<span style="display:inline-block; width:16px; height:16px; border:2px solid #333; border-radius:50%; border-right-color:transparent; transform:rotate(45deg)" title="Загрузка"></span> Загрузка


Updates are frequent and we need people to update the information on the wiki. To do this simply edit the page with new information. If you don't know wikicode you can write the new, updated content on the discussion page without formatting.
</div>


=== Images ===
== ИНСТРУКЦИЯ ==
====Uploading new images====
1. Скопируйте весь блок кода
If you have new, relevant images then upload them and add them to the page they're intended for. It is appreciated if the pictures of items you add have a blank background and are in the .gif or .png format. The easiest way to add images of items is to download the [https://github.com/Skyrat-SS13/Skyrat-tg source code], open the icons .dmi files and export images as .gif's or .png's from there.
2. Вставьте на нужную страницу вики
3. Для использования отдельных иконок - копируйте только нужные элементы
4. Чтобы изменить цвет - поменяйте значение background/border-color
5. Размер регулируется width/height


Then upload them here: [[Special:Upload]]
<div style="background:#f8f9fa; padding:10px; border-left:3px solid #36c; margin-top:15px">
<strong>Примечание:</strong> Все иконки работают без JavaScript и дополнительных стилей. Для сложных иконок рекомендуем использовать стандартные изображения.
</div>


====Updating existing images====
== 17. ГРАФИКИ ==
It is possible for an image to become depreciated following an update to the source code. To update an existing, obsolete image you can visit the upload page, upload your new image, and then add the file path of the old image you want to substitute. You can also visit its page on the wiki (by either clicking the image itself or searching for its name using the "File:" prefix in the search bar), click on "upload a new version of this file" under "File history", and selecting your new image on the upload page. <br>All depreciated versions of the image will remain in the File's history page for posterity.<br>'''IMPORTANT:''' Images can only be updated with files of the same format: .png images cannot be updated to .gif, and vice versa. This is because files are saved on a page which include their format in its name.
<div style="background:#e0e0e0; height:20px; width:100%">
<div style="background:#4CAF50; height:20px; width:65%"></div>
</div> 65% заполнено


=== Tabs ===
== 18. ВЕРТИКАЛЬНЫЙ ТЕКСТ ==
Any page can have tabs added to it through the <code><nowiki> <tabs> </nowiki></code> function. This function has the known problem of displaying correctly in a page edit preview, but incorrectly once an edit is applied. To fix this, the page's cache has to be flushed; One easy method is adding ?action=purge at the end of a page's URL. If the problem persist, leave a post [https://forum.skyrat13.tk/index.php on the forum].
<div style="writing-mode:vertical-rl; height:100px; border:1px dashed #999">
Текст сверху вниз
</div>


=== Marking for revision and deletion ===
== 19. КНОПКИ ==
<div style="display:inline-block; border:1px solid #555; background:#ddd; padding:2px 8px; margin:2px">Кнопка</div>


If a page is '''up to date''' when you read it, please put the following tag at it's top (with the correct date):
== 20. ЧЕКЛИСТ ==
<div style="border:1px solid #ddd; padding:5px">
<input type="checkbox" disabled> Проверка 1<br>
<input type="checkbox" checked disabled> Проверка 2
В случае, если вики не под обновим используйте гайд с пункта 31.
</div>


<code><nowiki>{{Lastrevision | date = 15. 1. 2012}}</nowiki></code>
== 21. ДЕРЕВО ==
<div style="padding-left:20px">
• Уровень 1
<div style="padding-left:20px">
├─ Уровень 2
<div style="padding-left:20px">
└─ Уровень 3
</div>
</div>
</div>


If a page is '''out of date''' or doesn't have a reason for existing, add one of the following tags to the top of the page:
== 22. ЦИТАТЫ ==
<div style="border-left:3px solid #ccc; padding-left:10px; margin:10px 0; color:#555">
Это важная цитата или примечание
</div>


<code><nowiki>{{Needs revision}}</nowiki><br></code><code><nowiki>{{Needs revision | reason = Out of date.}}</nowiki><br></code>or
== 23. ПОДСКАЗКИ ==
<span title="Это всплывающая подсказка" style="border-bottom:1px dotted #555">Наведите курсор</span>


<code><nowiki>{{delete}}</nowiki></code>
== 24. ШАБЛОНЫ ==
{{Шаблон:Имя|параметр1=значение|параметр2=значение}}


==Talk Pages==
== 25. СОВЕТЫ ==
When writing on a page or user's '''talk page''' (for example [[Talk:Main_Page]]), there are a few things you need to know.
1. Всегда добавляйте подписи к изображениям
2. Используйте заголовки для структуры
3. Комментируйте сложные блоки <!-- как этот -->
4. Тестируйте в режиме предпросмотра
5. Для часто используемых блоков создавайте шаблоны


===Signature===
== 26. ОПТИМИЗАЦИЯ ==
Always end of your message with your signature, so everyone knows who wrote what (without checking the edit history).<br>This can be done easily by using <code><nowiki>~~~~</nowiki></code> after your message. You can customize your signature on your [[Special:Preferences|user preferences page]].
• Вместо <nowiki><span style="color:red"></nowiki> можно <nowiki><font color="red"></nowiki>
• Группируйте стили: <nowiki>style="border:1px solid #ddd; padding:5px"</nowiki>
• Используйте class="wikitable" для стандартных таблиц


{|class="wikitable" style="font-size:90%; border: 2px solid darkgrey" cellpadding="3" cellspacing="0" colspan="2" ||
== 27. СЛОЖНЫЕ ТАБЛИЧНЫЕ СТРУКТУРЫ ==
 
↙↙ Таблица с зеброй-эффектом ↙↙
{| class="wikitable" style="width:100%"
|+ Список персонажей
! style="width:20%" | Имя
! style="width:30%" | Описание
! style="width:10%" | Уровень
|-
|-
!Code:
| style="background:#f9f9f9" | Джон
||
| style="background:#f9f9f9" | Главный герой
<nowiki>Look. ~~~~</nowiki>
| style="background:#f9f9f9; text-align:center" | 45
|-
|-
!Result:
| style="background:#fff" | Сара
||
| style="background:#fff" | Второстепенный персонаж
Look. - [[User:Deantwo|Deantwo]] ([[User_talk:Deantwo|talk]]) 10:35, 30 November 2013 (CET)
| style="background:#fff; text-align:center" | 32
|}
|}


===Indentation===
↙↙ Таблица с фиксированной шапкой (имитация) ↙↙
When replying to another user's message, be sure to ''indent'' your message so it is visibly a reply to the above message.<br>This is done by simply adding <code><nowiki>:</nowiki></code> at the start of the line will cause this effect.
<div style="height:200px; overflow-y:auto">
 
{| class="wikitable" style="width:100%"
{|class="wikitable" style="font-size:90%; border: 2px solid darkgrey" cellpadding="3" cellspacing="0" colspan="2" ||
! style="position:sticky; top:0; background:#ddd" | Заголовок 1
! style="position:sticky; top:0; background:#ddd" | Заголовок 2
|-
|-
!Code:
| Данные || Данные
||
<nowiki>Look. - [[User:Deantwo|Deantwo]] ([[User_talk:Deantwo|talk]]) 10:35, 30 November 2013 (CET)</nowiki><br><nowiki>:At what? ~~~~</nowiki>
|-
|-
!Result:
| Данные || Данные
||
Look. - [[User:Deantwo|Deantwo]] ([[User_talk:Deantwo|talk]]) 10:35, 30 November 2013 (CET)
:At what? - [[User:Deantwo|Deantwo]] ([[User_talk:Deantwo|talk]]) 10:40, 30 November 2013 (CET)
|}
|}
</div>
== 28. ИНФОГРАФИКА ==
↙↙ Прогресс-бар ↙↙
<div style="border:1px solid #ddd; width:100%; height:20px">
<div style="background:#4CAF50; width:75%; height:100%"></div>
</div> 75% выполнено
↙↙ Рейтинг звёздами ↙↙
<span style="color:gold">★</span><span style="color:gold">★</span><span style="color:gold">★</span><span style="color:gold">★</span><span style="color:#ddd">★</span> (4/5)
== 29. СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ ==
↙↙ Текст с границей ↙↙
<span style="text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; color:white">Контурный текст</span>
↙↙ Выпадающая тень ↙↙
<div style="box-shadow:3px 3px 5px rgba(0,0,0,0.3); padding:10px; display:inline-block">
Блок с тенью
</div>
== 30. МАКЕТЫ СТРАНИЦ ==
↙↙ Двухколоночный макет ↙↙
<div style="display:flex">
<div style="width:30%; padding-right:10px">
== Меню ==
* Пункт 1
* Пункт 2
</div>
<div style="width:70%; border-left:1px dashed #999; padding-left:10px">
== Контент ==
Основное содержимое страницы
</div>
</div>
↙↙ Макет с подвалом ↙↙
<div style="min-height:300px">
Основной контент
</div>
<div style="border-top:2px solid #333; margin-top:20px; padding-top:10px">
Подвал страницы
</div>
== 31. ФОРМЫ И ИНТЕРАКТИВ ==
↙↙ Чекбоксы ↙↙
<div style="margin:10px 0">
'''Чеклист:'''<br>
<span style="display:inline-block; width:14px; height:14px; border:2px solid #4CAF50; background:#fff; margin-right:5px; vertical-align:middle"></span> Проверка 1<br>
<span style="display:inline-block; width:14px; height:14px; border:2px solid #4CAF50; background:#4CAF50; margin-right:5px; vertical-align:middle"></span> Проверка 2 (выполнено)
</div>
↙↙ Радио-кнопки ↙↙
{{Rdbutton|checked=no}} Вариант 1<br>
{{Rdbutton|checked=yes|color=#4CAF50}} Вариант 2
Используйте шаблон Rdbutton
== 32. МЕДИА-КОНТЕНТ ==
↙↙ Галерея изображений ↙↙
<div style="display:flex; flex-wrap:wrap; gap:10px">
<div style="border:1px solid #ddd; width:120px; height:120px; background:#f5f5f5; text-align:center">Изобр. 1</div>
<div style="border:1px solid #ddd; width:120px; height:120px; background:#f5f5f5; text-align:center">Изобр. 2</div>
</div>
↙↙ Видео-контейнер ↙↙
<div style="border:2px solid #000; width:400px; height:225px; background:#000; color:white; text-align:center; line-height:225px">
[Видео-плеер]
</div>
== 33. ТЕХНИЧЕСКИЕ БЛОКИ ==
↙↙ Код с подсветкой ↙↙
<pre style="border:1px solid #ccc; background:#f5f5f5; padding:10px; overflow-x:auto">
function test() {
  console.log("Hello World");
}
</pre>
↙↙ Системное сообщение ↙↙
<div style="border:1px solid #d33; background:#ffecec; padding:10px; margin:10px 0">
<strong>Ошибка:</strong> Система не отвечает
</div>
== 34. ГОТОВЫЕ ШАБЛОНЫ ==
↙↙ Карточка персонажа ↙↙
<div style="border:2px solid #795548; width:300px; background:#EFEBE9; float:right; margin-left:15px">
<div style="background:#795548; color:white; padding:8px; text-align:center; font-weight:bold">Имя Персонажа</div>
<div style="padding:10px">
[[Файл:Teshari2.png|left|100px]]
<div style="margin-left:110px">
'''Раса:''' Человек<br>
'''Уровень:''' <span style="color:#4CAF50">35</span>
</div>
<div style="clear:both"></div>
<hr style="border-top:1px dashed #795548">
<div style="text-align:center">
<span style="display:inline-block; width:20px; height:20px; background:#F44336; border-radius:50%"></span>
<span style="display:inline-block; width:20px; height:20px; background:#FFC107; border-radius:50%"></span>
</div>
</div>
</div>
↙↙ Уведомление об обновлении ↙↙
<div style="border:1px solid #1a3a6e; background:#e8f4ff; padding:10px; margin:10px 0">
<div style="font-weight:bold; color:#1a3a6e">Обновление v2.3</div>
<div style="border-top:1px dashed #1a3a6e; margin-top:5px; padding-top:5px">
• Добавлена новая система<br>
• Исправлены ошибки
</div>
</div>
== 35. ХИТРОСТИ ВЕРСТКИ ==
↙↙ Имитация flexbox ↙↙
<div style="font-size:0">
<div style="display:inline-block; width:50%; font-size:16px; vertical-align:top">Колонка 1</div>
<div style="display:inline-block; width:50%; font-size:16px; vertical-align:top">Колонка 2</div>
</div>
↙Фиксированная ширина с прокруткой ↙↙
<div style="width:300px; overflow-x:auto">
Длинный текст который не помещается...
</div>


===Headline===
== 36. ОПТИМИЗАЦИЯ ==
If you are starting a new topic, add a headline with the name of the topic. If a talk page is used a lot, it can become confusing if the topics aren't separated with headlines. It also allows for section editing, which makes editing long talk pages a lot easier.<br>
This is one of the most basic things on a wiki, and are used by typing <code><nowiki>==Topic==</nowiki></code> on the line above your message.


{|class="wikitable" style="font-size:90%; border: 2px solid darkgrey" cellpadding="3" cellspacing="0" colspan="2" ||
↙↙ Сокращение кода ↙↙
|-
Вместо:
!Code:
<div style="color:red; font-size:20px; font-weight:bold">Текст</div>
||
 
<nowiki>==Look at this tutorial==</nowiki><br><nowiki>Look. - [[User:Deantwo|Deantwo]] ([[User_talk:Deantwo|talk]]) 10:35, 30 November 2013 (CET)</nowiki><br><nowiki>:At what? - [[User:Deantwo|Deantwo]] ([[User_talk:Deantwo|talk]]) 10:40, 30 November 2013 (CET)</nowiki><br><nowiki>::This tutorial I made. ~~~~</nowiki>
Используйте:
|-
<font color="red" size="4"><b>Текст</b></font>
!Result:
 
||
== 37. ДИАГНОСТИКА ==
<font size="4">Look at this tutorial</font> <nowiki>[</nowiki><span style="color: blue">edit</span><nowiki>]</nowiki>
----
Look. - [[User:Deantwo|Deantwo]] ([[User_talk:Deantwo|talk]]) 10:35, 30 November 2013 (CET)
:At what? - [[User:Deantwo|Deantwo]] ([[User_talk:Deantwo|talk]]) 10:40, 30 November 2013 (CET)
::This tutorial I made. - [[User:Deantwo|Deantwo]] ([[User_talk:Deantwo|talk]]) 10:45, 30 November 2013 (CET)
|}


== Jokes ==
↙↙ Проверка верстки ↙↙
<div style="outline:1px solid red">
Тестовый блок для проверки размеров
</div>


Some pages are intended to be entertaining but when writing guides, remember that a newbie might not realize something is a joke or sarcasm, even if it's blatantly obvious to the rest of us. Think where jokes fit and where they don't. Also, if you're updating someone else's joke, think whether yours is actually funnier.
↙↙ Отладка таблиц ↙↙
<table style="border:1px solid red; border-collapse:collapse">
<tr><td style="border:1px solid blue">Ячейка</td></tr>
</table>


== Guide to Writing and Revising a Guide ==
== 38. БЕЗОПАСНОСТЬ ==
Always keep in mind what these guides are for; they're so newbies can quickly skim across them so they can have half an idea what they've just been selected for.


'''A good guide needs, by order:'''
↙↙ Защита от вандализма ↙↙
* A brief one-two paragraph description of what the mode is.
<noinclude>[[Категория:Служебные страницы]]</noinclude>
* A bullet point list of short to the point key points of key mechanics, these should be no longer than two sentences each. And remember: key points means the important shit you need to know to atleast bumble fuck your way around at round start, you should be able to read and understand it within 5 minutes.
<includeonly>[[Категория:Основные статьи]]</includeonly>
* A more meaty section detailing the game mechanics in depth (this is where you explain what all runes and talismans do, including the ones that are barely used), it should still be clear and concise.
* A summary of the key points, yes - one at the start and one at the end. Reiteration helps to hammer things home. This one will more or less be simple list to remind the reader of things, it wont explain them.
* Further reading - this is where you link to the pages that detail advanced strategies for fighting for and against the cult. No you don't put them on the main page because that will clutter it.
* Links! Remember to add links to [[Game Mode|game modes]], [[Guides#Antagonist Guides|antagonist roles]], [[jobs]], items and [[guides]] you mention! Simply do it when you re-read your content before submitting.


== 39. МОБИЛЬНАЯ ВЕРСТКА ==


↙↙ Адаптивные блоки ↙↙
<div style="max-width:100%; overflow:hidden">
Большой контент для мобильных...
</div>


A bad guide is one that's a giant wall of text that's overly fluffed up and full of opinionated bullshit.<br>A newbie is going to take one glance at it and shit their pants out of fright, and advanced player is just going to go "Yeah.... I'm not reading someone's sperg page".
↙↙ Простые таблицы для мобильных ↙↙
{| class="wikitable" style="width:100%"
! Поле !! Значение
|-
| Имя || Джон
|}


[At the moment]{{citation needed}} [[Guides#Security guides|Security's guides]] are good. [[Corporate Regulations]] is unfluffed and tells plainly the basics of what a [[security officer]] needs to know to start patrolling and robusting greyshirts. The [[Guide to security]] is more fleshed out and explains things more in depth and lists strategies to counter antags.<br>[[Cult]], [[Malfunctioning AI|Malf]], and [[Traitor]] are bad because they're giant imposing walls of text that reads like a newspaper: squished up text that obscures the facts with needless opinions and blurbs that you don't need to know off the bat.
== 40. ЧЕК-ЛИСТ КАЧЕСТВА ==
1. <span style="display:inline-block; width:14px; height:14px; border:2px solid #555; background:#555; margin-right:5px; vertical-align:middle"></span> Проверены все ссылки
2. <span style="display:inline-block; width:14px; height:14px; border:2px solid #555; background:#555; margin-right:5px; vertical-align:middle"></span> Добавлены категории
3. <span style="display:inline-block; width:14px; height:14px; border:2px solid #555; background:#555; margin-right:5px; vertical-align:middle"></span> Проверено в мобильном виде
4. <span style="display:inline-block; width:14px; height:14px; border:2px solid #555; background:#fff; margin-right:5px; vertical-align:middle"></span> Нет битых изображений
5. <span style="display:inline-block; width:14px; height:14px; border:2px solid #555; background:#555; margin-right:5px; vertical-align:middle"></span> Добавлены шаблоны


'''So remember:'''
== 41. СКРЫТЫЕ РАЗДЕЛЫ ==
* Facts good, opinions bad.
↙↙ Сворачивание ↙↙
* Keep your facts clear of irrelevant fluff and other bullshit.
<div style="border:1px solid #ddd; background:#f8f8f8; padding:8px; cursor:pointer"
* Keep the basic guide basic, keep the advanced stuff on a separate page.
    onclick="var c=this.nextElementSibling.style; c.display=c.display=='none'?'block':'none'">
* Important stuff first, depth and explanation and unimportant things second.
<div style="float:right">[+]</div>
* White space, tables, sections, and formatting are essential for ease of reading. We're not print media, space isn't at a premium so use it freely.
Заголовок раздела
* Links!
</div>
* I just used the above template to write this guide.
<div style="display:none; padding:10px; border:1px solid #ddd; border-top:none">
[[Файл:Example.jpg|left|100px]]
Текст или изображения, которые будут скрыты...
</div>


== Useful pages ==


'''Categories:''' [[Special:Categories|Used]], [[Special:UnusedCategories|unused]] and [[Special:WantedCategories|wanted]]
== 42. ДИНАМИЧЕСКИЕ ЦВЕТА ==


'''Templates:''' [[Special:MostLinkedTemplates|Used]], [[Special:UnusedTemplates|unused]] and [[Special:WantedTemplates|wanted]]
* [[Главная|<span style="border-bottom:1px solid #1a3a6e">Главная</span>]]
* [[О нас|<span style="border-bottom:1px solid #1a3a6e">О нас</span>]]
* [[Контакты|<span style="border-bottom:1px solid #1a3a6e">Контакты</span>]]


'''Files:''' [[Special%3AListFiles|All]], [[Special:UnusedFiles|unused]] and [[Special:WantedFiles|wanted]]
== 43. КАСТОМНЫЕ СКРОЛЛБАРЫ ==
<div style="height:100px; overflow-y:scroll; scrollbar-width:thin; scrollbar-color:#888 #f0f0f0">
Длинный текст...<br>...с кастомным скроллбаром
</div>


'''All pages:''' [[Special:AllPages|All existing pages]] and [[Special:WantedPages|Wanted pages]]
== 44. ТАБЛИЦЫ С ФИЛЬТРАМИ ==
↙↙ Имитация фильтрации через CSS ↙↙
<div style="border:1px solid #ddd; padding:10px">
<span style="display:inline-block; padding:5px 10px; background:#eee; margin-right:5px; cursor:pointer"
      onclick="document.getElementById('row1').style.display='table-row'">Показать все</span>
<span style="display:inline-block; padding:5px 10px; background:#eee; margin-right:5px; cursor:pointer"
      onclick="document.getElementById('row2').style.display='none'">Скрыть выбранное</span>


== Skyrat wiki specific markup ==
<table style="width:100%; margin-top:10px">
<tr id="row1"><td>Строка 1</td></tr>
<tr id="row2"><td>Строка 2</td></tr>
</table>
</div>


To create a BYOND hyperlink, use the <nowiki><byond></nowiki> tags. The specific syntax is <nowiki><byond server=servername.com port=4000>Link text here</byond></nowiki>.


The wiki also supports the features of the [http://www.mediawiki.org/wiki/Help:Extension:ParserFunctions ParserFunctions] extension.
== 45. ИНФОРМЕРЫ ДАННЫХ ==
↙↙ Имитация загрузки ↙↙
<div style="border:1px solid #ddd; width:100%; height:20px">
<div style="background:repeating-linear-gradient(-45deg, #eee, #eee 10px, #ddd 10px, #ddd 20px);
            width:50%; height:100%; animation:load 2s linear infinite"></div>
</div>


{{Contribution guides}}
== 47. 3D-КНОПКИ ==
<div style="display:inline-block; padding:8px 15px; background:#4CAF50; color:white;
            border-bottom:3px solid #2E7D32; text-align:center; cursor:pointer;
            transition:transform 0.2s"
    onmousedown="this.style.transform='translateY(2px)'; this.style.borderBottom='1px solid #2E7D32'"
    onmouseup="this.style.transform='translateY(0)'; this.style.borderBottom='3px solid #2E7D32'">
Нажми меня
</div>


[[:Category:Guides|Category:Guides]]
== 48. ВСТРАИВАЕМЫЕ ВИДЖЕТЫ ==
[[Category:Meta]]
↙↙ Погодный информер ↙↙
<div style="border:2px solid #1a3a6e; border-radius:5px; padding:10px; width:180px">
<div style="font-weight:bold; color:#1a3a6e; text-align:center">Погода на планете</div>
<div style="text-align:center; font-size:24px">+88°C</div>
<div style="text-align:center">☀️ Горим </div>
</div>

Текущая версия от 04:00, 10 мая 2025

       ⚠️ Важно к прочтению:

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

ГАЙД ПО ОФОРМЛЕНИЮ WIKI

1. БАЗОВОЕ ФОРМАТИРОВАНИЕ

Жирный курсив жирный курсив подчёркнутый зачёркнутый моноширинный верхний нижний индекс

2. ЦВЕТА

красный текст зелёный HEX жёлтый фон инверсия

3. ЗАГОЛОВКИ

Уровень 1 (только для названия страницы)

Уровень 2

Уровень 3

Уровень 4

4. ССЫЛКИ

Внутренняя ссылка Понятный текст ссылка Служебная страница

5. СПИСКИ

  • Маркированный
    • Вложенный
      • Третий уровень
  1. Нумерованный
    1. Вложенный
      1. Третий уровень
Определение
Пояснение термина

6. ТАБЛИЦЫ (базовые)

Подпись таблицы
Заголовок 1 Заголовок 2
Ячейка 1 Ячейка 2
Объединённые ячейки

7. ИЗОБРАЖЕНИЯ

Файл:Example.jpg
Подпись

Параметры: • thumb - рамка • left/right/center - выравнивание • 300px - ширина • none - без рамки

8. РАЗДЕЛИТЕЛИ

9. БЛОКИ

Простой блок

Блок с акцентной полосой

10. СПЕЦИАЛЬНЫЕ ЭЛЕМЕНТЫ

[[Защита]] от разметки 

Преформатированный текст

11. ТАБЛИЦЫ (продвинутые)

Стилизованная таблица
№ Название
1 Элемент

12. КАРТОЧКИ

Заголовок карточки

Содержимое карточки...

13. ЦВЕТНЫЕ ПАНЕЛИ

Информационная панель

Панель предупреждения

14. ВЫРАВНИВАНИЕ

По центру
По правому краю
Плавающий блок

15. КОЛОНКИ

Текст автоматически распределится по двум колонкам

16. ИКОНКИ CSS

▸ Основные фигуры:

Круг Квадрат Треугольник Линия

▸ Индикаторы:

Чекбокс Радиокнопка Предупреждение Ромб

▸ Стрелки:

Вверх Вниз Влево Вправо

▸ Социальные:

Facebook Twitter YouTube

▸ Статусы:

Online Offline Занят

▸ Дополнительные:

Окно Корзина Загрузка

ИНСТРУКЦИЯ

1. Скопируйте весь блок кода 2. Вставьте на нужную страницу вики 3. Для использования отдельных иконок - копируйте только нужные элементы 4. Чтобы изменить цвет - поменяйте значение background/border-color 5. Размер регулируется width/height

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

17. ГРАФИКИ

65% заполнено

18. ВЕРТИКАЛЬНЫЙ ТЕКСТ

Текст сверху вниз

19. КНОПКИ

Кнопка

20. ЧЕКЛИСТ

<input type="checkbox" disabled> Проверка 1
<input type="checkbox" checked disabled> Проверка 2 В случае, если вики не под обновим используйте гайд с пункта 31.

21. ДЕРЕВО

• Уровень 1

├─ Уровень 2

└─ Уровень 3

22. ЦИТАТЫ

Это важная цитата или примечание

23. ПОДСКАЗКИ

Наведите курсор

24. ШАБЛОНЫ

Шаблон:Имя

25. СОВЕТЫ

1. Всегда добавляйте подписи к изображениям 2. Используйте заголовки для структуры 3. Комментируйте сложные блоки 4. Тестируйте в режиме предпросмотра 5. Для часто используемых блоков создавайте шаблоны

26. ОПТИМИЗАЦИЯ

• Вместо <span style="color:red"> можно <font color="red"> • Группируйте стили: style="border:1px solid #ddd; padding:5px" • Используйте class="wikitable" для стандартных таблиц

27. СЛОЖНЫЕ ТАБЛИЧНЫЕ СТРУКТУРЫ

↙↙ Таблица с зеброй-эффектом ↙↙

Список персонажей
Имя Описание Уровень
Джон Главный герой 45
Сара Второстепенный персонаж 32

↙↙ Таблица с фиксированной шапкой (имитация) ↙↙

Заголовок 1 Заголовок 2
Данные Данные
Данные Данные

28. ИНФОГРАФИКА

↙↙ Прогресс-бар ↙↙

75% выполнено

↙↙ Рейтинг звёздами ↙↙ ★★★★★ (4/5)

29. СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ

↙↙ Текст с границей ↙↙ Контурный текст

↙↙ Выпадающая тень ↙↙

Блок с тенью

30. МАКЕТЫ СТРАНИЦ

↙↙ Двухколоночный макет ↙↙

Меню

  • Пункт 1
  • Пункт 2

Контент

Основное содержимое страницы

↙↙ Макет с подвалом ↙↙

Основной контент

Подвал страницы

31. ФОРМЫ И ИНТЕРАКТИВ

↙↙ Чекбоксы ↙↙

Чеклист:
Проверка 1
Проверка 2 (выполнено)

↙↙ Радио-кнопки ↙↙

Вариант 1
Вариант 2 Используйте шаблон Rdbutton

32. МЕДИА-КОНТЕНТ

↙↙ Галерея изображений ↙↙

Изобр. 1
Изобр. 2

↙↙ Видео-контейнер ↙↙

[Видео-плеер]

33. ТЕХНИЧЕСКИЕ БЛОКИ

↙↙ Код с подсветкой ↙↙ 

function test() {
  console.log("Hello World");
}

↙↙ Системное сообщение ↙↙

Ошибка: Система не отвечает

34. ГОТОВЫЕ ШАБЛОНЫ

↙↙ Карточка персонажа ↙↙

Имя Персонажа

Раса: Человек
Уровень: 35


↙↙ Уведомление об обновлении ↙↙

Обновление v2.3

• Добавлена новая система
• Исправлены ошибки

35. ХИТРОСТИ ВЕРСТКИ

↙↙ Имитация flexbox ↙↙

Колонка 1
Колонка 2

↙Фиксированная ширина с прокруткой ↙↙

Длинный текст который не помещается...

36. ОПТИМИЗАЦИЯ

↙↙ Сокращение кода ↙↙ Вместо:

Текст

Используйте: Текст

37. ДИАГНОСТИКА

↙↙ Проверка верстки ↙↙

Тестовый блок для проверки размеров

↙↙ Отладка таблиц ↙↙

Ячейка

38. БЕЗОПАСНОСТЬ

↙↙ Защита от вандализма ↙↙


39. МОБИЛЬНАЯ ВЕРСТКА

↙↙ Адаптивные блоки ↙↙

Большой контент для мобильных...

↙↙ Простые таблицы для мобильных ↙↙

Поле Значение
Имя Джон

40. ЧЕК-ЛИСТ КАЧЕСТВА

1. Проверены все ссылки 2. Добавлены категории 3. Проверено в мобильном виде 4. Нет битых изображений 5. Добавлены шаблоны

41. СКРЫТЫЕ РАЗДЕЛЫ

↙↙ Сворачивание ↙↙

[+]

Заголовок раздела

Файл:Example.jpg

Текст или изображения, которые будут скрыты...


42. ДИНАМИЧЕСКИЕ ЦВЕТА

43. КАСТОМНЫЕ СКРОЛЛБАРЫ

Длинный текст...
...с кастомным скроллбаром

44. ТАБЛИЦЫ С ФИЛЬТРАМИ

↙↙ Имитация фильтрации через CSS ↙↙

Показать все Скрыть выбранное

Строка 1
Строка 2


45. ИНФОРМЕРЫ ДАННЫХ

↙↙ Имитация загрузки ↙↙

47. 3D-КНОПКИ

Нажми меня

48. ВСТРАИВАЕМЫЕ ВИДЖЕТЫ

↙↙ Погодный информер ↙↙

Погода на планете
+88°C
☀️ Горим
Источник — https://skyrat.celadon.pro/index.php?title=Руководство_по_редактированию_вики&oldid=4000