Вики Сообщества

Голосование за Вики Месяца началось! Успейте проголосовать за любимую вики до 26 марта.

ПОДРОБНЕЕ

Вики Сообщества
Регистрация
Advertisement
Вики Сообщества

Эта справочная статья поможет вам разобраться с рекомендуемыми способами подключения дополнительных страниц 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 будут прогружены в последнюю очередь! Порядок прогрузки:

  1. Common.js
  2. Fandomdesktop.js
  3. Загрузка скриптов, подгружаемых с Common.js
  4. Загрузка скриптов, подгружаемых с Fandomdesktop.js
  5. 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-страниц происходит в следующем порядке:

  1. Основной код страницы
  2. Локальные стили вики
    1. Common.css
    2. Fandomdesktop.css
  3. Персональные стили
    1. Персональный Common.css
    2. Персональный 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 необходимо открывать вручную.

См. также[]

Advertisement