FANDOM


Tworzysz własny kod dla swojej społeczności albo tylko dla własnego konta? Na tej stronie znajdziesz szczegóły, które pozwolą ci z jednym i drugim.

Zanim zaczniesz, sprawdź które strony mogą być edytowane. Jeśli chcesz napisać skrypt JavaScript dla swojej społeczności, będziesz potrzebować jego włączenia poprzez kontakt z personelem Fandomu. Gdy to się stanie, zapoznaj się z procesem przeglądu kodu JavaScript.

Specyfikacja dostosowywania stron

CSS

Umieszczany w artykułach znacznik HTML <body> posiada swój unikatowy identyfikator, bazujący na tytule strony. Dla przykładu, dla tej strony pomocy, klasą będzie .page-Pomoc_Zaawansowane_CSS_i_JS

Ogólny format to .page-[nazwa artykułu], gdzie spacje, dwukropki i inne znaki specjalne są zastępowane podkreśleniami.

JavaScript

W MediaWiki:Common.js użyj instrukcji switch do zaaplikowania JavaScriptu dla konkretnej strony:

switch (mw.config.get('wgPageName')) {
    case 'nazwa strony':
        // JS zaaplikowany tutaj zostanie wprowadzony dla strony „nazwa strony”
        break;
    case 'przykładowa inna strona':
        // JS zaaplikowany tutaj zostanie wprowadzony dla strony „przykładowa inna strona”
        break;
}

Aplikowanie zmian dla pojedynczych społeczności

W swoim osobistym arkuszu CSS możesz dodać selektory, które zmienią style tylko dla poszczególnych wiki.

Klasy są oparte na nazwie bazy danych, a nie adresie URL — są one jednakże przeważnie, ale jednak nie zawsze, takie same. Klasa wygląda w ten sposób:

.wiki-[nazwa bazy danych]

lub, jeśli masz do czynienia z wiki w innym języku niż angielski:

.wiki-[kod języka][nazwa bazy danych]

Dla przykładu, jeśli chcesz aby część tła strony Wookieepedii była czerwona tylko dla ciebie, dodaj te style do twojego arkusza global.css:

.wiki-starwars #WikiaMainContent { background-color:red; }

W przypadku JavaScriptu możesz użyć wgDBname do zidentyfikowania odpowiedniej społeczności.

Kolejność ładowania

Ogólną kolejnością ładowania jest:

  1. Podstawowy kod Fandomu
  2. lokalny kod społeczności
  3. osobisty kod

W kwestii ładowania na konkretnej wiki, pierwszy jest Common, a potem Wikia, więc jeśli w arkuszu Common.css umieściłeś .class { color: red }, a w Wikia.css .class { color: green}, tekst zwarty w .class będzie zielony. Co za tym idzie, ponieważ personalny arkusz CSS jest ostatni, nadpisze style lokalnej wiki.

W przypadku JS-u, kolejność ładowania jest szczególnie istotna w celu jak najlepszego użycia MediaWiki:ImportJS. Ponieważ wczytuje się jako ostatnie, możesz dostosowywać skrypty z Dev Wiki w Common.js lub Wikia.js, a sam import zachować w ImportJS. Pełną kolejnością ładowania JavaScriptu jest:

  1. Common.js
  2. Wikia.js
  3. Skrypty importowane przez Common.js
  4. Skrypty importowane przez Wikia.js
  5. ImportJS

Na koniec zapamiętaj oczywistą rzecz: strony ładują się od góry do dołu, więc style i skrypty zapisane u góry, mogą zostać nadpisane przez te znajdujące się na dole.

!important w CSS

Czasami może zajść potrzeba użycia właściwości !important do pominięcia kolejności w celu upewnienia się, że reguła została zastosowana.

Problemy z pamięcią podręczną

Każdy plik, który pobierasz z internetu ląduje w pamięci podręcznej. Normalnie to dobrze, ponieważ zmniejsza to ilość ruchu zarówno na Twoim urządzeniu jak i na serwerach Fandomu, ale często może być problemem przy testowaniu zmian. Opróżnienie pamięci podręcznej może trochę potrwać chyba, że użyjesz tych trików.

Jeśli pamięć podręczna nadal nie chce się odświeżyć, spróbuj dodać ?debug=1 do adresu URL dowolnej strony. Dzięki temu upewnisz się, że skrypty lub style ładują się w 100% prawidłowo.

Popularne skrypty JavaScript

Możesz zapoznać się z popularnymi skryptami JavaScript, sprawdź ich listę dostępną na Fandom Developers Wiki.

Duplikacja skryptów

Wiele skryptów może sprawiać problemy, jeśli uruchamiają się wiele razy na tej samej stronie. Wobec tego musisz pamiętać, aby twój określony fragment kodu działał tylko raz. Unikaj umieszczania tych samych skryptów w różnych arkuszach, gdyż prawdopodobnie spowoduje to wiele błędów dla ciebie oraz innych, odwiedzających twoją społeczność.

Czasowe wyłączenie CSS/JS

Style i skrypty CSS i JS mogą być tymczasowo zdezaktywowane za pomocą odpowiednich komend.

Ów komendy powinny być zapisane na końcu adresu URL (przykład: https://spolecznosc.fandom.com/wiki/Specjalna:Losowa_strona?usesitecss=0 [Ten przykład wyłączył CSS dla wylosowanej strony na Centrum Społeczności]).

Jeśli potrzebujesz więcej niż jednej komendy, zacznij od znaku zapytania (?), a drugie, trzecie i każde kolejne komendy oddzielaj znakiem et (&) (przykład: https://spolecznosc.fandom.com/wiki/Specjalna:Losowa_strona?usesitecss=0&useuserjs=0 [Ten przykład wyłączył CSS i osobisty JS dla wylosowanej strony na Centrum Społeczności]).

Oto tabela dla wszystkich komend dezaktywujących CSS i JS:

Komenda Rola
?useusercss=0 Wyłączenie personalnego CSS
?useuserjs=0 Wyłączenie personalnego JS
?usesitecss=0 Wyłączenie wszystkich styli zapisanych w MediaWiki:Wikia.css.
?usesitejs=0 Wyłączenie wszystkich styli zapisanych w MediaWiki:Wikia.js.

Sprawdzanie błędów CSS i JS w edytorze

Edytory CSS i JS Fandomu posiadają funkcję aktywnego sprawdzania błędów ("lintowania") oraz podświetlanie składni:

  • W czasie pisania kodu, edytor zwróci Ci uwagę na błędy w składni, które się pojawią.
  • Zwróć uwagę na to, że nie wszystkie problemy muszą zostać rozwiązane – technologia CSS (oraz nawet JS) ciągle się rozwija, a przeglądarki nie zawsze zachowują się identycznie: niektóre komunikaty nie potrzebują podjęcia akcji.

Częste problemy

Problemy z CSS
Problem Wytłumaczenie
@import prevent parallel downloads, use <link> instead

@import uniemożliwia równoległe pobierania, zamiast tego użyj <link>

Tagi link są z reguły używane do importowania CSS. Ponieważ MediaWiki nie pozwala na dodawanie własnych tagów link bez użycia JS, ten problem może zostać zignorowany.
Expected X but found Y

Oczekiwano X, ale znaleziono Y

Oznacza to, że została wprowadzona niepoprawna wartość dla właściwości. Na przykład, w 'color: foo;', wartość foo nie jest poprawna, ponieważ to nie kolor.
Use of !important

Użycie !important

Z reguły powinno się unikać używania !important, ponieważ powoduje trudności w utrzymaniu kodu oraz utrudnia użytkownikom nadpisanie wartości za pomocą osobistego arkusza. W większości wypadków użycie poprawnego selektora powinno zniwelować potrzebę użycia !important.
Unknown property 'codename'

Nieznana właściwość 'codename'

Chociaż nie cały kod CSS jest rozpoznawany przez narzędzie (CSS jest często aktualizowane) niektóre kody CSS ciągle mogą być odczytane jeśli są zaimplementowane dla jakiegoś obiektu na stronie (np: mix-blend-mode: color-dodge;).

Zobacz również

Dalsze wsparcie

Szukasz dalszego wsparcia lub masz pytanie? Sprawdź poniższe linki aby dowiedzieć się więcej.

Treści społeczności są dostępne na podstawie licencji CC-BY-SA , o ile nie zaznaczono inaczej.