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

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

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

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

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

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

2. ЦВЕТА

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

3. ЗАГОЛОВКИ

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

Уровень 2

Уровень 3

Уровень 4

4. ССЫЛКИ

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

5. СПИСКИ

Маркированный
- Вложенный
  - Третий уровень

Нумерованный
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. МАКЕТЫ СТРАНИЦ

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

Контент

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

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

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

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

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. СКРЫТЫЕ РАЗДЕЛЫ

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

[+]

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

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

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

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

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

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

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

Строка 1

Строка 2

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

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

47. 3D-КНОПКИ

Нажми меня

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

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

Погода на планете

+88°C

☀️ Горим

@@ Строка 1: / Строка 1: @@
+<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);">
+    <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>
 = ГАЙД ПО ОФОРМЛЕНИЮ WIKI =
@@ Строка 113: / Строка 123: @@
 == 16. ИКОНКИ CSS ==
-<span style="display:inline-block; width:16px; height:16px; background:#f00; border-radius:50%"></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"></span> Треугольник
+<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> Вправо
+<!-- Социальные -->
+<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
+<!-- Статусы -->
+<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> Занят
+<!-- Дополнительные -->
+<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> Загрузка
+</div>
+== ИНСТРУКЦИЯ ==
+. Скопируйте весь блок кода
+. Вставьте на нужную страницу вики
+. Для использования отдельных иконок - копируйте только нужные элементы
+. Чтобы изменить цвет - поменяйте значение background/border-color
+. Размер регулируется width/height
+<div style="background:#f8f9fa; padding:10px; border-left:3px solid #36c; margin-top:15px">
+<strong>Примечание:</strong> Все иконки работают без JavaScript и дополнительных стилей. Для сложных иконок рекомендуем использовать стандартные изображения.
+</div>
 == 17. ГРАФИКИ ==
@@ Строка 291: / Строка 353: @@
 <div style="background:#795548; color:white; padding:8px; text-align:center; font-weight:bold">Имя Персонажа</div>
 <div style="padding:10px">
-[[Файл:Avatar.jpg|left|100px]]
+[[Файл: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">
@@ Строка 304: / Строка 367: @@
 </div>
 </div>
 ↙↙ Уведомление об обновлении ↙↙
@@ Строка 374: / Строка 439: @@
 . <span style="display:inline-block; width:14px; height:14px; border:2px solid #555; background:#fff; margin-right:5px; vertical-align:middle"></span> Нет битых изображений
 . <span style="display:inline-block; width:14px; height:14px; border:2px solid #555; background:#555; margin-right:5px; vertical-align:middle"></span> Добавлены шаблоны
+== 41. СКРЫТЫЕ РАЗДЕЛЫ ==
+↙↙ Сворачивание ↙↙
+<div style="border:1px solid #ddd; background:#f8f8f8; padding:8px; cursor:pointer"
+     onclick="var c=this.nextElementSibling.style; c.display=c.display=='none'?'block':'none'">
+<div style="float:right">[+]</div>
+Заголовок раздела
+</div>
+<div style="display:none; padding:10px; border:1px solid #ddd; border-top:none">
+[[Файл:Example.jpg|left|100px]]
+Текст или изображения, которые будут скрыты...
+</div>
+== 42. ДИНАМИЧЕСКИЕ ЦВЕТА ==
+* [[Главная|<span style="border-bottom:1px solid #1a3a6e">Главная</span>]]
+* [[О нас|<span style="border-bottom:1px solid #1a3a6e">О нас</span>]]
+* [[Контакты|<span style="border-bottom:1px solid #1a3a6e">Контакты</span>]]
+== 43. КАСТОМНЫЕ СКРОЛЛБАРЫ ==
+<div style="height:100px; overflow-y:scroll; scrollbar-width:thin; scrollbar-color:#888 #f0f0f0">
+Длинный текст...<br>...с кастомным скроллбаром
+</div>
+== 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>
+<table style="width:100%; margin-top:10px">
+<tr id="row1"><td>Строка 1</td></tr>
+<tr id="row2"><td>Строка 2</td></tr>
+</table>
+</div>
+== 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>
+== 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>
+== 48. ВСТРАИВАЕМЫЕ ВИДЖЕТЫ ==
+↙↙ Погодный информер ↙↙
+<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>

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