Ten artykuł jest przewodnikiem po instalacji kodu na Fandomie.
Importy CSS-u na Fandomie
Na Fandomie reguła CSS @import może efektywnie importować zestaw styli do postaci:
- zminifikowanej i zwiększającej wydajność
- wyglądającej przejrzyściej
- czyniącej pamięć podręczną spójną
Rozpatrz poniższe przykłady.
Przykłady użycia @import
Po lewej stronie znajduje się klasyczny przykład użycia kilku reguł @import, natomiast po prawej stronie przedstawiono w jaki sposób można je scalić do jednej linii, co wiąże się również z ich minifikacją i zwiększeniem wydajności:
- Powtórzone importy — brzydkie i wolne
-
@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 */
- Jeden import — czysty i wydajny
-
@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.
Umieszczanie reguł @import
Reguły importowania muszą być umieszczanie na samym początku strony, przed jakimikolwiek innymi regułami, w innym wypadku nie będą działać. Poniżej znajduje się przykład poprawnego umieszczenia:
- Błędne umieszczenie
-
/* CSS */ @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
- Prawidłowe umieszczenie
-
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css"); /* CSS */
Jest również możliwe importowanie arkuszy CSS za pośrednictwem JavaScriptu, przy użyciu reguły importArticles (szczegóły).
Importy JavaScriptu na Fandomie
Deklaracja importArticles została zaprojektowana w taki sposób, aby wydajnie importować pakiet skryptów:
- w celu przyspieszenia strony.
- uczynienia kodu czystszym.
- połączenia wielu żądań HTTP w jeden transfer danych.
- oraz pozwolenia na jednoczesne szybkie i efektywne ładowanie oraz wykonywanie wielu skryptów.
Jeżeli zainstalowałeś wiele różnych skryptów, twój plik JavaScript prawdopodobnie zawiera wiele niepotrzebnych reguł importowania.
Przykłady użycia importArticles
Jeśli twój plik JavaScript zawiera kilka linii kodu o tytułach importScript, importScriptPage, lub importArticles, z całą pewnością możesz je połączyć! Rozważ poniższy przykład. Po lewej stronie znajduje się przykład tego, jak aktualnie może wyglądać twój plik JavaScript, po prawej zaś — sposób, w jaki możesz poprawić swój kod.
- Powtórzone importy — brzydkie i wolne
-
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');
- Jeden import — czysty i wydajny
-
importArticles({ type: 'script', articles: [ 'u:dev:Script1.js', 'MediaWiki:Script2.js', 'u:dev:Script3/code.js', 'u:wiki:Page1.js', 'u:wiki:Page2.js' ] });
Uwagi na temat importowania JavaScriptu
Uwaga: W tym przykładzie zwróć szczególną uwagę umieszczenie przecinków i innych znaków interpunkcyjnych. U osób, które nie są zaznajomione z programowaniem (a nawet u tych, które są), częstym błędem podczas pisania kodu jest przypadkowe usunięcie, przegapienie lub nieprawidłowe umieszczenie krytycznych symboli, jak przecinki i cudzysłowy. Może to spowodować błąd składni, który zepsuje cały kod. Podczas używania importArticles należy postępować zgodnie z przykładem podanym na tej stronie.
Innym podejściem do tematu importowania kodu jest użycie MediaWiki:ImportJS, ale istnieje wiele więcej do importArticles niż tylko to!
Znaczniki HTML i wikitekst na Fandomie
Jak przełączyć się do trybu źródłowego i sprawić, by kod wyglądał bardziej przejrzyście.
Edytor źródłowy został zaprojektowany do obsługi złożonych kodów HTML w artykule, pozwalając na zmniejszenie ilości niechcianego kodu, który czasami jest dodawany automatycznie. Tryb źródłowy to najlepszy sposób edycji w przypadku korzystania z szablonów lub znaczników HTML, takich jak <span>, <p>, and <div>.
Oto kilka przydatnych wskazówek:
- Kiedy widzisz
w obszarze edycji trybu wizualnego, odnosi się on do szablonu.
- Gdy zobaczysz
nad treścią w obszarze edycji w trybie wizualnym, zawiera kod, który nie jest obsługiwany lub jest zbyt złożony, aby edytor wizualny mógł go obsłużyć. W trybie źródłowym zawartość ta będzie widoczna w całości.
- Kiedy zobaczysz
w obszarze edycji trybu wizualnego odnosi się do komentarza. W trybie źródłowym zawartość ta będzie widoczna jako
<!-- -->. - MediaWiki posiada specjalny język zwany wikitekstem aby ułatwić edycję. Język ten jest obsługiwany w trybie wizualnym i nie ulega tak łatwo uszkodzeniu, jak HTML.
- Niektóre znaczniki HTML, takie jak
<u>lub<s>są obsługiwane w edytorze wizualnym. - Szablony nie mają dostępnej edycji wizualnej i można je edytować tylko w trybie źródłowym (z wyjątkiem infoboksów, dla których istnieje Infobox Builder).