Эта статья является руководством по установке кода на Фэндоме.

Импорт CSS на Фэндоме

На Фэндоме правило @import может эффективно импортировать несколько CSS-стилей для:

  • экономии пространства и повышения производительности
  • чистого и точного отображения всех элементов
  • последовательной загрузки и сохранения кэша страниц

Рассмотрим приведённые ниже примеры.

Примеры использования правила @import

Слева показан пример нескольких операций импорта с использованием классического правила @import. Справа же вы можете увидеть, как можно объединить их в одну команду, которая будет минимизировать размер вашего кода, тем самым увеличивая производительность:

Много импортов — грязно и медленно
1 @import url("/index.php?title=MediaWiki:LocalCSS1.css&action=raw&ctype=text/css");
2 @import url("/index.php?title=MediaWiki:LocalCSS2.css&action=raw&ctype=text/css");
3 @import url("https://dev.fandom.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css");
4 /* CSS */
Один импорт — чисто и эффективно
1 @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
2 /* CSS */

Размещение @import на страницах CSS

Правила импорта CSS должны быть указаны в начале страницы перед любым другим правилом. В противном случае они не будут работать. Вот пример правильного размещения:

Неправильное размещение
1 /* CSS */
2 @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
Правильное размещение
1 @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
2 /* CSS */

Также можно импортировать CSS с помощью страниц JavaScript через importArticles (подробнее).

Импорт JavaScript на Фэндоме

Оператор importArticles предназначен для эффективного пакетного импорта скриптов, чтобы:

  • ускорить их работу,
  • сделать ваш код чище,
  • объединить несколько HTTP-запросов в единый
  • и позволить нескольким скриптам загружаться и выполняться быстрее.

Если вы устанавливаете несколько разных скриптов, в вашем JavaScript, вероятно, накопились ненужные операторы импорта.

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

Если в вашем JavaScript есть несколько строк кода, которые начинаются с importScript, importScriptPage или importArticles, вы можете их объединить! Рассмотрим приведённый ниже пример. Слева — пример того, как может выглядеть ваш JavaScript. Справа — как вы можете улучшить этот код.

Много импортов — грязно и медленно
1 importScriptPage('Script1.js', 'dev');
2 importScript('MediaWiki:Script2.js');
3 importArticle({
4   type: 'script',
5   article: 'u:dev:Script3/code.js'
6 });
7 importScriptPage('Page1.js', 'wiki');
8 importScriptPage('Page2.js', 'wiki');
Один импорт — чисто и эффективно
 1 importArticles({
 2     type: 'script',
 3     articles: [
 4         'u:dev:Script1.js',
 5         'MediaWiki:Script2.js',
 6         'u:dev:Script3/code.js',
 7         'u:wiki:Page1.js',
 8         'u:wiki:Page2.js'
 9     ]
10 });

Заметки об импорте JavaScript

Примечание: в этом примере обратите внимание на размещение запятых и других знаков препинания. Для людей, которые не знакомы с программированием (и даже для тех, кто знаком!), Распространённая ошибка при написании кода заключается в случайном удалении, забывании или неправильном использовании критически важных символов, таких как запятые или кавычки. Это может привести к синтаксической ошибке, которая нарушает структуру кода. Внимательно следуйте приведённому здесь соглашению при использовании importArticles.

Ещё одним методом является использование страницы MediaWiki:ImportJS для импорта ваших скриптов. Но с importArticles вы сможете сделать гораздо больше, например, указать необходимые настройки, чем при использовании ImportJS!

HTML и вики-разметка на Фэндоме

Как переключиться в режим исходного кода и сделать ваш код чище

Режим исходного кода предназначен для обработки сложных HTML-кодов на странице, что позволяет уменьшить количество нежелательного кода, который иногда автоматически добавляется. Режим исходного кода — лучший способ редактирования, если вы используете шаблоны или HTML-теги, такие как <span>, <p> и <div>.

Вот несколько полезных советов:

  • Когда вы видите Элемент кода в области редактирования в Визуальном редакторе, он относится к шаблону или содержимому с кодом, который не поддерживается или слишком сложен для обработки в Визуальном редакторе. В режиме исходного кода вы увидите это содержимое полностью.
  • Когда вы видите Комментарии в области редактирования визуального режима, это относится к комментариям. В исходном режиме этот контент будет отображаться как <!-- -->.
  • Движок MediaWiki имеет специальный язык, называемый вики-текстом, чтобы сделать редактирование более простым. Этот язык поддерживается в визуальном редакторе и не будет так легко ломаться, как HTML.
  • Некоторые HTML-теги, такие как <u> или <s>, поддерживаются в визуальном редакторе.
  • Вы также можете войти в режим исходного кода при создании или ответе на темы в форуме или при использовании стены обсуждения, щёлкнув Source Icon в области редактирования.
  • Шаблоны можно редактировать только в режиме исходного кода.

См. также

Community content is available under CC-BY-SA unless otherwise noted.