Ця стаття є довідником щодо встановлення коду на Фандомі.
Імпорт CSS на Фандомі[]
На Фандомі @import в CSS може ефективно імпортувати набір таблиць стилів для:
- зменшення та підвищення їхньої продуктивності
- чистого вигляду коду
- послідовного завантаження та збереження кешу
Розглянемо приклади нижче.
Приклади використання @import[]
Зліва наведено приклад кількох імпортерів за правилом класичного @import. Справа в тому, як ви можете об'єднати їх в одній команді, яка буде містити їх, тим самим збільшуючи продуктивність:
- Декілька імпортів &mdаsh; брудно та повільно
-
@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 */
- Один імпорт &mdаsh; чисто та ефективно
-
@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.
Розміщення правил CSS @import[]
Правила імпорту 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 на даний момент. Справа — як ви могли покращити цей код.
- Декілька імпортів &mdаsh; брудно та повільно
-
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');
- Один імпорт &mdаsh; чисто та ефективно
-
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 ви можете імпортувати свої скрипти ефективніше!
HTML і вікі-розмітка на Фандомі[]
Як переключитися в режим вихідного коду і зробити ваш код чистіше
Режим вихідного коду призначений для обробки складних HTML-кодів на сторінці, що дозволяє зменшити кількість небажаного коду, який іноді автоматично додається. Режим вихідного коду — кращий спосіб редагування, якщо ви використовуєте шаблони HTML-теги, такі як <span>, <p> та <div>.
Ось кілька корисних порад:
- Коли ви бачите
в області редагування у Візуальному редакторі, він відноситься до шаблону або вмісту з кодом, який не підтримується або занадто складний для обробки у Візуальному редакторі. У режимі вихідного коду ви побачите вміст повністю. - Коли ви бачите
в області візуального режиму редагування, це відноситься до коментарів. В початковому режимі цей контент буде відображатися як <!-- -->. - Рушій MediaWiki має спеціальну мову, звану вікі-текстом, щоб зробити редагування більш простим. Ця мова підтримується у візуальному редакторі і не буде так легко ламатися, як HTML.
- Деякі HTML-теги, такі як
<u>або<s>, підтримуються у візуальному редакторі. - Шаблони можна редагувати тільки в режимі вихідного коду.
