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

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

ПОДРОБНЕЕ

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

Здесь перечислены все страницы JavaScript и CSS, которые вы можете изменить для улучшения вашей вики. Обратите внимание, что изменения в этих статьях не вступают в силу немедленно. Вам может потребоваться подождать пару минут и очистить кэш браузера. Кроме того, имейте в виду, что все изменения JavaScript теперь проходят проверку и не будут видны сразу (подробнее здесь: Справка:Проверка JavaScript).

Стили[]

Ниже приведён список стандартных страниц CSS, необходимых для изменения оформления. Зелёным цветом выделены наиболее распространённые. Значение «эта вики» означает, что стиль будет применён к той вики, на которой создана соответствующая страница стилей.

Стиль Расположение Затрагивание вики Затрагивание участников Затрагивание оформления
MediaWiki:Common.css эта вики эта вики все участники всё
MediaWiki:Fandomdesktop.css эта вики эта вики все участники по умолчанию
MediaWiki:FandomMobile.css эта вики эта вики все участники по умолчанию
Special:MyPage/fandomdesktop.css эта вики эта вики только вы по умолчанию
Special:MyPage/common.css эта вики эта вики только вы всё
Special:MyPage/global.css Community Central все вики только вы всё

JavaScript[]

Ниже приведён список стандартных страниц JavaScript, необходимых для изменения оформления. Зелёным цветом выделены наиболее распространённые. Значение «эта вики» означает, что скрипт будет применён к той вики, на которой создана соответствующая страница.

Скрипт файла Расположение Затрагивание вики Затрагивание участников Затрагивание оформления
MediaWiki:Common.js эта вики эта вики все участники всё
MediaWiki:Fandomdesktop.js эта вики эта вики все участники по умолчанию
MediaWiki:ImportJS эта вики эта вики все участники всё
Special:MyPage/fandomdesktop.js эта вики эта вики только вы по умолчанию
Special:MyPage/common.js эта вики эта вики только вы всё
w:Special:MyPage/global.js сообщество все вики только вы всё

Вопросы по кешированию[]

Каждый файл, который вы загружаете из Интернета, попадает в кэш. Это здорово, потому что это уменьшает трафик для собственного компьютера и для серверов ФЭНДОМА, но это становится проблемой, когда дело доходит до тестирования изменений в проекте. Ждать придется несколько часов, прежде чем изменения вступят в силу, если не использовать следующие приёмы:

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

  • Firefox/Safari: удерживая клавишу Shift, нажмите на панели инструментов Обновить, или нажмите Ctrl-F5 или Ctrl-R (⌘-R на Mac).
  • Google Chrome / Microsoft Edge: нажмите Ctrl-Shift-R (⌘-Shift-R на Mac).
  • Internet Explorer: удерживая Ctrl, нажмите Обновить. Или нажмите Ctrl-F5.
  • Opera: нажмите Ctrl-Shift-Delete.

Чаще всего этого бывает достаточно, но иногда, когда вы тестируете свои изменения с помощью другого браузера, вам нужно очистить кэш ФЭНДОМА. Добавьте к URL страницы в адресной строку команду Purge. Например,

http://yourwiki.fandom.com/wiki/MediaWiki:Cheatsheet

необходимо переписать как:

http://yourwiki.fandom.com/wiki/MediaWiki:Cheatsheet?action=purge

Если и это не помогает, то вам нужно просто подождать. После нескольких часов кэш между вами и вики будет обновлён.

Советы[]

Применение CSS для определённой страницы[]

Используя CSS классы, вы можете применить стили для определённой страницы. В теге <body> используется уникальный класс, основанный на названии статьи. Например, для данной справочной статьи этот класс будет:

.page-Справка_Шпаргалка_по_CSS_и_JS

Формат класса определяется как .page-[название статьи]. Стоит учесть, что все пробелы, двоеточия и другие символы, не поддерживаемые CSS в качестве составляющих названия класса, заменяются на нижнее подчёркивание.

Применение JS для определённой страницы[]

Добавление switch кода на странице MediaWiki:Common.js поможет использовать отдельные скрипты для определённых страниц. Пример:

switch ( mw.config.get('wgPageName') ) {
    case 'Справка:Шпаргалка_по_CSS_и_JS':
        // Дальнейший код будет применяться только для страницы 'Справка:Шпаргалка по CSS и JS'
        break;
    case 'Справка:Проверка_JavaScript':
        // Код будет применяться для страницы 'Справка:Проверка JavaScript'
        break;
}

Применение CSS и JS для определённой вики[]

Используя свой персональный CSS одним файлом, вы всё равно можете настроить участки кода для работы на разных википроектах. Для этого вы можете использовать название вики из базы данных. Узнать это название можно с помощью Генератора кода на Вики Сообщества. Для CSS используйте следующий код:

.wiki-[database name]

Вики не на английской платформе будут иметь языковой префикс в наименовании database name, например:

.wiki-ru[database name]

Например, если вы хотите, чтобы часть фона Вукипедии казалась вам красной, добавьте это в свой файл global.css:

.wiki-rustarwars #WikiaMainContent { background-color:red; }

Для JS можно использовать wgDBname.

Порядок загрузки[]

Порядок загрузки как для CSS-страниц, так и для JS-страниц одинаков и происходит в следующем порядке:

  1. Основной код страницы
  2. Локальные стили и скрипты вики
  3. Персональные стили и скрипты
    1. Скрипты общего назначения
    2. Скрипты, отвечающие за оформление

На каждом из уровней первыми будут загружаться страницы Common, а затем — Fandomdesktop. Это значит, что если один и тот же стиль для одного класса, то применяться будет последний заданный стиль. Например, если прописан .class { color: red } в Common.css, и .class { color: green} в Fandomdesktop.css, то элемент с классом .class будет окрашен в зелёный. И поскольку личный CSS является последним уровнем, все, что вы туда поместите, всегда будет перекрывать стили локальной вики.

Также из-за того, что страницы Common.css и Fandomdesktop.css объединяются при загрузке, это может нарушить работу импортов стилей и шрифтов. Импорты всегда должны находиться в начале CSS-страницы и если @import прописан в Fandomdesktop.css, а на страницу Common.css были добавлены какие-то иные стили, то импорты не загрузятся.

Для избежания этого есть два варианта действий:

  • Записать все стили после импортов на странице Fandomdesktop.css.
  • Записать импорты в начале страницы Common.css.

Для JS порядок загрузки особенно важен. Поскольку ImportJS загружается последним, вы можете поместить коды с настройкой импортируемых с Dev вики скриптов в Common.js или Fandomdesktop.js, а сами скрипты импортировать через ImportJS. Порядок загрузки JS таков:

  1. Common.js
  2. Fandomdesktop.js
  3. Скрипты, импортированные через Common.js
  4. Скрипты, импортированные через Fandomdesktop.js
  5. ImportJS

Использование !important в CSS[]

В CSS коде вам может понадобится !important, чтобы ваш код был «более важным», чем общий код сайта. Однако следует избегать использования !important абсолютно для всех строк вашего кода. Используйте его точечно.

Дублирование JS[]

Многие скрипты могут вызывать ошибки на страницах сайта, если запускаются два и более раз. Записывайте код JS таким образом, чтобы каждый его фрагмент запускался строго один раз. Также избегайте добавлять один и тот JS скрипт в разные файлы на одной вики. Это может привести к ошибкам и сбоям в работе сайта.

Временное отключение CSS/JS[]

Если вы замечаете некорректную работу оформления и функционала вики, вы можете загрузить страницы с принудительно отключёнными стилями и скриптами, чтобы определить источник проблем. Это делается при помощи специальных команд, добавляемых в конце url-адреса страницы.

Команда Результат
?useusercss=0 Отключает весь персональный CSS.
?useuserjs=0 Отключает весь персональный JS.
?usesitecss=0 Отключает весь CSS, который был добавлен на страницы MediaWiki:Fandomdesktop.css и MediaWiki:Common.css.
?usesitejs=0 Отключает весь JS, который был добавлен на вики.
?safemode=1 Отключает весь персональный и локальный JS и CSS.

Пример использования:

https://community.fandom.com/ru/wiki/Служебная:Random?usesitecss=0 (отключается весь локальный CSS).

Если требуется применить более одной команды, вместо вопросительного знака (?) поставьте амперсанд (&) для следующих команд:

https://community.fandom.com/ru/wiki/Служебная:Random?usesitecss=0&useuserjs=0 (отключаются локальный CSS и личный JS)

Обозначение ошибок в редакторах CSS и JS[]

Редакторы CSS и JS обладают как подсветкой синтаксиса, так и возможностью проверки кода на ошибки:

  • После написания или добавления кода на странице появится информация о возможных ошибках синтаксиса. Все ошибки отображаются слева, возле номера строк, в виде восклицательного знака оранжевого цвета или же в виде креста в красном круге.
  • Учтите, что не каждая отмеченная ошибка требует исправления. CSS (также, как и JS) постоянно развивается и не все браузеры ведут себя одинаково — некоторые оповещения не требуют действий.

Стандартные ошибки[]

Ошибки в CSS
Ошибка Объяснение
@import prevents parallel downloads, use <link> instead По стандарту для импортирования CSS используется тэг link. Однако MediaWiki не поддерживает добавление данного тэга без помощи JS, так что такая ошибка может быть проигнорирована.
Expected X but found Y Данная ошибка означает, что введённое значение неверно. К примеру, в color: foo; foo является неверным значением, так как не является цветом.
Use of !important Использование !important в CSS по возможности нужно избегать, так как в дальнейшем с ним сложнее работать. Также участникам будет сложнее задать больший приоритет своему коду в личном CSS. В большинстве случаев использование точного селектора поможет вам избежать применение !important.
Unknown property 'codename' Ввиду того, что CSS постоянно обновляется и изменяется, инструмент не всегда распознаёт некоторый код. Тем не менее часть кода всё ещё поддерживается, если применяется для определённого объекта на странице (например, mix-blend-mode: color-dodge;).
Expected (<color> | inherit) but found 'var(--theme-accent-color)'. Это частая ошибка при использовании CSS-переменных для окрашивания границ, фона и других тегов HTML. CSS Lint, который CodeEditor использует для проверки синтаксических ошибок CSS, пока не поддерживает использование переменных, так что такая ошибка может быть проигнорирована.
Error: Expected RBRACE at line 4, col 5. Опять же, это происходит, если вы используете переменные CSS. Поскольку CSS Lint еще не поддерживает их, -- перед определением переменной вызовет эту ошибку. При сохранении появится раздражающая подсказка:
Документ содержит ошибки. Вы уверены, что хотите опубликовать его?
ОтменитьOK

Вы можете спокойно проигнорировать эту ошибку и нажать OK или отключить подсветку синтаксиса, чтобы полностью устранить ошибку.

См. также[]

Advertisement