Лайфхаки для wiki: различия между версиями

Материал из wiki Владимир
Перейти к навигации Перейти к поиску
Строка 185: Строка 185:
'''<nowiki>Пример логотипа.jpg|Подпись 3</nowiki>''' <br>
'''<nowiki>Пример логотипа.jpg|Подпись 3</nowiki>''' <br>
'''<nowiki></gallery></nowiki>'''</br>
'''<nowiki></gallery></nowiki>'''</br>
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как разместить 3 блока на странице с использованием "гибкого макета" (flexbox - это круто современно!)</b>
|-style="vertical-align:top;"
|Код для вставки: <br>
первая строка - <br>
'''<nowiki><div style="display: flex;
  flex-direction: row;
  text-align: left;
  background: gray;></nowiki>''' <br>
'''<nowiki><div style="flex:0 33%; background: yellow;; margin: 15px;"></nowiki>''' <br>
'''<nowiki><div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;"></nowiki>''' <br>
'''<nowiki>текст1текст2</nowiki>''' <br>
'''<nowiki></div></nowiki>'''</br>
'''<nowiki>[[Файл:Пример_логотипа.jpg|100px]]</nowiki>'''</br>
'''<nowiki><</div></nowiki>'''</br>
'''<nowiki><div style="flex:0 33%; background: yellow;; margin: 15px;"></nowiki>''' <br>
'''<nowiki><div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;"></nowiki>''' <br>
'''<nowiki>текст1текст2</nowiki>''' <br>
'''<nowiki></div></nowiki>'''</br>
'''<nowiki>[[Файл:Пример_логотипа.jpg|100px]]</nowiki>'''</br>
'''<nowiki><</div></nowiki>'''</br>
'''<nowiki><div style="flex:0 33%; background: yellow;; margin: 15px;"></nowiki>''' <br>
'''<nowiki><div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;"></nowiki>''' <br>
'''<nowiki>текст1текст2</nowiki>''' <br>
'''<nowiki></div></nowiki>'''</br>
'''<nowiki>[[Файл:Пример_логотипа.jpg|100px]]</nowiki>'''</br>
'''<nowiki><</div></nowiki>'''</br>
'''<nowiki></div></div></nowiki>'''</br>
Так можно оформлять любое количество строк с блоками. Подробнее о flex -''' [https://habr.com/ru/post/467049/ ЗДЕСЬ]'''
|}
|}
----
----

Версия 21:55, 28 января 2022

Пример логотипа.jpg

ПОЛЕЗНЫЕ СОВЕТЫ ДЛЯ ТЕХ, КТО СОЗДАЕТ СТРАНИЦУ НА WIKI ВЛАДИМИР

Как создать простую "шапочку" для страницы без логотипа
Код для вставки:

<div style="background-color:#0772A1; color:white; font-size:30px">
<p align="center">АВТОРСКОЕ НАЗВАНИЕ СТРАНИЦЫ</p>
</div>

Как создать простую "шапочку" для страницы с логотипом слева
Код для вставки:

<div style="background-color:#0772A1; color:white; font-size:30px">
[[Файл:Пример логотипа.jpg|слева|140x140px|]]
<p align="center">АВТОРСКОЕ НАЗВАНИЕ СТРАНИЦЫ</p>
</div>

Как создать простой заголовок раздела
Код для вставки:

<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Как создать простой заголовок раздела</b></font></h2>
Не забудьте вставить где-то выше на странице __NOTOC__

Как создать заголовок в прямоугольной рамке
Код для вставки:

{| width="70%" cellpadding="2" cellspacing="5" style="vertical-align:top; background:#FFFFFF;"
!<div style="border: 1px solid #a3b0bf; -moz-border-radius: 10px; padding: 5px; margin: 0px 0px 0px 0px; background: #cedff2; text-align:left; color:#A62A00; text-size:20px; padding:0.2em 0.4em;">Как создать заголовок в прямоугольной рамке
|}
<div align="justify">
----

Как создать текст с боковой прокруткой (скролл для страницы)

Авторский текст заголовка
Например, такой: 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Код для вставки:
<div style="border:1px solid #9999FF;border-left:3px solid #9966CC;padding:5px 5px 0 5px;overflow-y:scroll;height:300px; width:100%;">
<font color="blue"> <b> Авторский текст заголовка</b></font><br>
'''Например, такой''': 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
</div>

Как создать спойлер
Код для вставки:

{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:70%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать спойлеры</b>
|-style="vertical-align:top;"
|Сюда вставляется авторский текст
|}
<div align="justify">
----

Как поместить логотип сверху справа (на примере шаблона и логотипа конкурса Грамотеи.РУ)
Код для вставки:

{| width="70%"
|style="width:100%; text-align:right;" |{{Участник областного конкурса знатоков русского языка Грамотеи.РУ-2022}}
|}
<div align="justify">
Если используется шаблон страницы конкурса или проекта, то этот код вставляется после ссылки на шаблон:
{{Страница конкурса ГРАМОТЕИ}}
{| width="70%"
|style="width:100%; text-align:right;" |{{Участник областного конкурса знатоков русского языка Грамотеи.РУ-2022}}
|}
<div align="justify">

Как разместить текст на странице с использованием сложной таблицы
Код для вставки:

{| width="70%" border="1"
|-
| width="70%" |Ячейка 1
|Ячейка 2
|-
|colspan="2" style="width:100%; text-align:justify;" | Эта ячейка 3 - широкая. Сюда можно записывать текст задания 1 этапа. Расскажите о себе, о своей команде, о своем отношении к теме конкуса-2022
|}

Как разместить текст на странице с использованием нескольких колонок wiki-таблицы
Код для вставки:

{| width="70%" border="1"
|- valign="top"
| style="vertical-align:top; padding-right: 1em; width:50%"|
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 1</b></font></h2>
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
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 2</b></font></h2>
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
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 3</b></font></h2>
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
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 4</b></font></h2>
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
| style="vertical-align:top; padding-right: 1em; width:50%"|
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 5</b></font></h2>
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
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 6</b></font></h2>
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
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 7</b></font></h2>
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
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 8</b></font></h2>
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
|}
<div align="justify">

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

Код для вставки:
{|border="1" width="70%"
|[[Файл:Пример логотипа.jpg|слева|140px|]]
|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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
|}

Как создать текстовый блок с "цитатой" и картинкой слева
Код для вставки:

{|align="justify" cellpadding="0" cellspacing="0" style="margin-left:1em" width="70%"
|-
|[[Файл:Пример логотипа.jpg|слева|100px|]]
|<blockquote><i> 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</i></blockquote>
|}

Как создать галерею изображений
Код для вставки:

<gallery>
Пример логотипа.jpg|[https://edu.gov.ru/ Подпись 1]
Пример логотипа.jpg|[http://obrnadzor.gov.ru/o-rosobrnadzore/ Подпись 2]
Пример логотипа.jpg|[[Сообщество учителей математики | Подпись 3]]
</gallery>

Как создать слайд-шоу у себя на странице - без всяких презентаций
Код для вставки:

<gallery mode="slideshow" type="slideshow" navigation="true">
Пример логотипа.jpg|Подпись 1
Пример логотипа.jpg|Подпись 2
Пример логотипа.jpg|Подпись 3
</gallery>

Как разместить 3 блока на странице с использованием "гибкого макета" (flexbox - это круто современно!)
Код для вставки:

первая строка -
<div style="display: flex; flex-direction: row; text-align: left; background: gray;>
<div style="flex:0 33%; background: yellow;; margin: 15px;">
<div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;">
текст1текст2
</div>
[[Файл:Пример_логотипа.jpg|100px]]
<</div>
<div style="flex:0 33%; background: yellow;; margin: 15px;">
<div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;">
текст1текст2
</div>
[[Файл:Пример_логотипа.jpg|100px]]
<</div>
<div style="flex:0 33%; background: yellow;; margin: 15px;">
<div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;">
текст1текст2
</div>
[[Файл:Пример_логотипа.jpg|100px]]
<</div>
</div></div>
Так можно оформлять любое количество строк с блоками. Подробнее о flex - ЗДЕСЬ

Источник — https://wiki.i-edu.ru/mediawiki/index.php?title=Лайфхаки_для_wiki&oldid=5661