FANDOM


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

Импорт 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 и вики-разметка на Фэндоме

Location Source

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

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

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

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

См. также

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

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+