Эта статья является руководством по установке кода на Фэндоме.
Импорт CSS на Фэндоме[]
На Фэндоме правило @import может эффективно импортировать несколько CSS-стилей для:
- экономии пространства и повышения производительности
- чистого и точного отображения всех элементов
- последовательной загрузки и сохранения кэша страниц
Рассмотрим приведённые ниже примеры.
Примеры использования правила @import[]
Слева показан пример нескольких операций импорта с использованием классического правила @import. Справа же вы можете увидеть, как можно объединить их в одну команду, которая будет минимизировать размер вашего кода, тем самым увеличивая производительность:
- Много импортов — грязно и медленно
-
@import url("/index.php?title=MediaWiki:LocalCSS1.css&action=raw&ctype=text/css"); @import url("/index.php?title=MediaWiki:LocalCSS2.css&action=raw&ctype=text/css"); @import url("https://dev.fandom.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css"); /* CSS */
- Один импорт — чисто и эффективно
-
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css"); /* CSS */
Note: That, however, would not work well for some stylesheets which import other stylesheets in their turn. Those "parent" stylesheets may break if combined with other stylesheets in the same @import statement.
Размещение @import на страницах CSS[]
Правила импорта CSS должны быть указаны в начале страницы перед любым другим правилом. В противном случае они не будут работать. Вот пример правильного размещения:
- Неправильное размещение
-
/* CSS */ @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
- Правильное размещение
-
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css"); /* CSS */
Также можно импортировать CSS с помощью страниц JavaScript через importArticles (подробнее).
Импорт JavaScript на Фэндоме[]
Оператор importArticles предназначен для эффективного пакетного импорта скриптов, чтобы:
- ускорить их работу,
- сделать ваш код чище,
- объединить несколько HTTP-запросов в единый
- и позволить нескольким скриптам загружаться и выполняться быстрее.
Если вы устанавливаете несколько разных скриптов, в вашем JavaScript, вероятно, накопились ненужные операторы импорта.
Примеры использования importArticles[]
Если в вашем JavaScript есть несколько строк кода, которые начинаются с importScript, importScriptPage или importArticles, вы можете их объединить! Рассмотрим приведённый ниже пример. Слева — пример того, как может выглядеть ваш JavaScript. Справа — как вы можете улучшить этот код.
- Много импортов — грязно и медленно
-
importScriptPage('Script1.js', 'dev'); importScript('MediaWiki:Script2.js'); importArticle({ type: 'script', article: 'u:dev:Script3/code.js' }); importScriptPage('Page1.js', 'wiki'); importScriptPage('Page2.js', 'wiki');
- Один импорт — чисто и эффективно
-
importArticles({ type: 'script', articles: [ 'u:dev:Script1.js', 'MediaWiki:Script2.js', 'u:dev:Script3/code.js', 'u:wiki:Page1.js', 'u:wiki:Page2.js' ] });
Заметки об импорте JavaScript[]
Примечание: в этом примере обратите внимание на размещение запятых и других знаков препинания. Для людей, которые не знакомы с программированием (и даже для тех, кто знаком!), Распространённая ошибка при написании кода заключается в случайном удалении, забывании или неправильном использовании критически важных символов, таких как запятые или кавычки. Это может привести к синтаксической ошибке, которая нарушает структуру кода. Внимательно следуйте приведённому здесь соглашению при использовании importArticles.
Ещё одним методом является использование страницы MediaWiki:ImportJS для импорта ваших скриптов. Но с importArticles вы сможете сделать гораздо больше, например, указать необходимые настройки, чем при использовании ImportJS!
HTML и вики-разметка на Фэндоме[]
Как переключиться в режим исходного кода и сделать ваш код чище
Режим исходного кода предназначен для обработки сложных HTML-кодов на странице, что позволяет уменьшить количество нежелательного кода, который иногда автоматически добавляется. Режим исходного кода — лучший способ редактирования, если вы используете шаблоны или HTML-теги, такие как <span>, <p> и <div>.
Вот несколько полезных советов:
- Когда вы видите
в области редактирования в Визуальном редакторе, он относится к шаблону или содержимому с кодом, который не поддерживается или слишком сложен для обработки в Визуальном редакторе. В режиме исходного кода вы увидите это содержимое полностью. - Когда вы видите
в области редактирования визуального режима, это относится к комментариям. В исходном режиме этот контент будет отображаться как <!-- -->. - Движок MediaWiki имеет специальный язык, называемый вики-текстом, чтобы сделать редактирование более простым. Этот язык поддерживается в визуальном редакторе и не будет так легко ломаться, как HTML.
- Некоторые HTML-теги, такие как
<u>или<s>, поддерживаются в визуальном редакторе. - Вы также можете войти в режим исходного кода при создании или ответе на темы в форуме или при использовании стены обсуждения, щёлкнув
в области редактирования. - Шаблоны можно редактировать только в режиме исходного кода.
