FANDOM


Ця стаття є довідником щодо встановлення коду на Фендомі.

Імпорт CSS на Фендомі

На Фендомі @import в CSS може ефективно імпортувати набір таблиць стилів для:

  • зменшення та підвищення їхньої продуктивності
  • чистого вигляду коду
  • послідовного завантаження та збереження кешу

Розглянемо приклади нижче.

Приклади використання @import

Зліва наведено приклад кількох імпортерів за правилом класичного @import. Справа в тому, як ви можете об'єднати їх в одній команді, яка буде містити їх, тим самим збільшуючи продуктивність:

Декілька імпортів &mdаsh; грязно та повільно

  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 */

Один імпорт &mdаsh; чисто та ефективно

  1. @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
  2. /* CSS */

Розміщення правил CSS @import

Правила імпорту 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 на даний момент. Справа — як ви могли покращити цей код.

Декілька імпортів &mdаsh; грязно та повільно

  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');

Один імпорт &mdаsh; чисто та ефективно

  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 ви можете імпортувати свої скрипти ефективніше!

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+