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).
