Эта справочная статья поможет вам разобраться с рекомендуемыми способами подключения дополнительных страниц JS и CSS.
Метод importArticles()[]
Глобальный метод JavaScript importArticles() предоставляет общий интерфейс для включения статей, которые содержат скрипты или стили на вики. Функциональность аналогична существующим методам importScriptPage и importStylesheetPage. Тем не менее в importArticles() можно импортировать статьи из внешних вики, связывать несколько статей в одну, уменьшать их и вызывать одним запросом. Это уменьшает и размеры файлов и веб-трафика, увеличивая скорость загрузки страниц на вики с большим количеством дополнительных файлов.
Подробнее о методе смотрите на странице «Включение дополнительных JS и CSS/Техническая часть».
ImportJS[]
Такой метод добавляет новую страницу MediaWiki:ImportJS вместе с интерфейсом, позволяющим подключать как локальные страницы со скриптами, так и страницы с Dev Wiki.
Функционал этого метода схож с методом importArticles, который загружает страницы с других сообществ, связывая их в одну, уменьшая данные и укладывая всё в один запрос. Такой способ позволяет снизить размер файлов и сократить расход трафика, увеличивая эффективность и скорость загрузки скриптов на вики.
Плюс данного метода в том, что любое изменение страницы MediaWiki:ImportJS не требует прохождения проверки JS.
Применение[]
MediaWiki:ImportJS работает с простым текстом, в котором перечисляются названия страниц со скриптами. Локальные страницы должны находиться в пространстве имён MediaWiki. Это также касается и страниц с Dev Wiki. Во время заполнения MediaWiki:ImportJS, у названия страниц обязательно нужно отбросить приставку 'MediaWiki'. Пример:
Cat.js
dev:AjaxRC.js
- первая ссылка — на локальную js-страницу по адресу
MediaWiki:Cat.js - вторая — на скрипт с dev вики со страницы w:c:dev:MediaWiki:AjaxRC.js
Примечание: следует избегать использования комментариев через двойную черту //, так как они учитываются как обычный текст на странице.
Порядок загрузки[]
При использовании данного метода стоит учесть, что все страницы с ImportJS будут прогружены в последнюю очередь! Порядок прогрузки:
- Common.js
- Fandomdesktop.js
- Загрузка скриптов, подгружаемых с Common.js
- Загрузка скриптов, подгружаемых с Fandomdesktop.js
- ImportJS
Импорт CSS[]
importArticles[]
В данном разделе способ importArticles будет рассматриваться только для загрузки страниц CSS. Ознакомиться с принципами его действия для JS можно здесь.
Несмотря на то, что с помощью этого метода всё ещё можно импортировать страницы со стилями, любое его изменение будет тормозиться процессом проверки JS, так как метод основан на использовании JavaScript.
- Пример
Загрузка локального CSS файла через importArticles:
importArticles({
type: "style",
article: "MediaWiki:Local.css"
});
Метод @import[]
Используя данный метод, вы легко сможете импортировать CSS файлы. Синтаксис метода выглядит следующим образом:
@import "путь_до_статьи_со_стилями.css"
Чтобы загрузить дополнительную страницу стилей, названную, к примеру, MediaWiki:Local.css, нужно разместить следующий код в самом начале страницы стилей вашей вики (Fandomdesktop.css — по умолчанию или Common.css — только в том случае, если на вашей вики эта страница уже используется):
@import "/ru/load.php?articles=MediaWiki:Local.css&only=styles&mode=articles";
- Обратите внимание, что на вики на единой платформе обязательно надо указывать языковой префикс /ru/ в начале ссылки импорта, если таковой есть в адресе вашей вики!
Порядок свойств для вызова страницы стилей можно менять, оставляя неизменным то, что перед первым параметром стоит знак вопроса «?», а между остальными — амперсанд «&»:
@import "/ru/load.php?mode=articles&only=styles&articles=MediaWiki:Local.css";
Для загрузки нескольких страниц стилей можно прописывать несколько строк импорта:
@import "/ru/load.php?mode=articles&only=styles&articles=MediaWiki:Font.css";
@import "/ru/load.php?mode=articles&only=styles&articles=MediaWiki:Infobox.css";
@import "/ru/load.php?mode=articles&only=styles&articles=MediaWiki:Navbox.css";
А можно объединить загрузку нескольких страниц css в одном импорте, благодаря которому будет минимизирован код и улучшена производительность:
@import "/ru/load.php?only=styles&mode=articles&articles=
MediaWiki:Font.css|MediaWiki:Infobox.css|MediaWiki:Navbox.css";
Чтобы загрузить стили с внешних вики, можно использовать такой же формат ссылки на страницу со стилем, как в интервики-ссылках. Например, синтаксис загрузки стиля с w:c:dev вики будет такой:
@import "/ru/load.php?only=styles&mode=articles&articles=w:c:dev:MediaWiki:NotLocal.css";
Также интервики-ссылки можно использовать для множественной загрузки стилей одной командой.
@import "/ru/load.php?only=styles&mode=articles&articles=
MediaWiki:Infobox.css|MediaWiki:Navbox.css|u:dev:MediaWiki:NotLocal.css";
Альтернативный способ загрузки стилей — это загрузка целевой страницы css напрямую:
@import "/ru/wiki/MediaWiki:Local.css?ctype=text/css&action=raw";
Этот метод также можно использовать для загрузки стилей с внешних вики, например:
@import "//dev.fandom.com/wiki/MediaWiki:NotLocal.css?ctype=text/css&action=raw";
Более подробно с данным методом прогрузки можно ознакомиться здесь.
Порядок загрузки[]
Порядок загрузки для CSS-страниц происходит в следующем порядке:
- Основной код страницы
- Локальные стили вики
- Common.css
- Fandomdesktop.css
- Персональные стили
- Персональный Common.css
- Персональный Fandomdesktop.css
На каждом из уровней первыми будут загружаться страницы Common, а затем — Fandomdesktop. Это значит, что если один и тот же стиль для одного класса, то применяться будет последний заданный стиль. Например, если прописан .class { color: red } в Common.css, и .class { color: green} в Fandomdesktop.css, то элемент с классом .class будет окрашен в зелёный.
Также из-за того, что страницы Common.css и Fandomdesktop.css объединяются при загрузке, это может нарушить работу импортов стилей и шрифтов. Импорты всегда должны находиться в начале CSS-страницы и если @import прописан в Fandomdesktop.css, а на страницу Common.css были добавлены какие-то иные стили, то импорты не загрузятся.
Для избежания этого есть два варианта действий:
- Записать все стили после импортов на странице Fandomdesktop.css.
- Записать импорты в начале страницы Common.css. Имейте в виду, что по умолчанию рекомендуется использовать первый вариант — Fandomdesktop.css доступна из кабинета администратора, в то время как Common.css необходимо открывать вручную.