Pomoc:Personalizacja - porady dla zaawansowanych

Z Wikipedii, wolnej encyklopedii
Skocz do: nawigacja, szukaj
nazwa
skórki
podstrony
javascript
(.js)
arkusz stylów
(.css)
Globalne (na Meta) global.js global.css
Wszystkie skórki
(lokalnie)
common.js common.css
Wektor
(domyślna)
vector.js vector.css
Książka monobook.js monobook.css
Nowoczesna modern.js modern.css
Błękit cologneblue.js cologneblue.css

Na stronie Pomoc:Personalizacja opisano jakie możliwości daje oprogramowanie MediaWiki w dostosowywaniu Wikipedii do własnych potrzeb. Jak to wykorzystać? Najprostsze jest przejście na stronę Specjalna:Preferencje i ustawienie tam kilku opcji. Znacznie większe możliwości daje posiadanie własnego arkusza stylów (plik CSS), a przede wszystkim własnego JavaScriptu (plik JS).

Co dają zmiany w CSS? Najprościej może wytłumaczyć na przykładzie. Ten artykuł bez arkusza CSS wyglądałby mniej więcej tak: [1]. Nieco bardziej drastyczne przykłady przemiany można znaleźć na stronie css Zen Garden (ta sama strona bez CSS). Generalnie CSS pozwala na zmianę kolorów, krojów pisma oraz rozmiarów i pozycji różnych elementów. Np. bez CSS menu widoczne po prawej znajdowałoby się pod artykułem, podobnie jak widoczne na górze zakładki. Bardziej zaawansowane właściwości pozwalają na dodawanie tekstu przed lub za wybranymi elementami.

A co dają zmiany w JS? Umożliwiają bardzo dużo. Można całkowicie skasować zawartość strony i wpisać dowolny tekst, a także stworzyć dowolne elementy jak np. tabelki czy formularze. Bardziej zaawansowane skrypty mogą też pobierać zawartość stron, których nie ma jeszcze w przeglądarce i przetwarzać ich zawartość (tak działa popups).

Dodawanie linków do górnego paska[edytuj]

Załóżmy, że chcemy dodać sobie kilka linków do górnego paska (tego z linkiem do własnej strony, strony dyskusji, strony preferencji itd.)

Poniższy skrypt dodaje link do tablic ogłoszeń:

jQuery( document ).ready( function() {
	var elBefore = document.getElementById( 'pt-mytalk' );

	var elNew = document.createElement( 'li' );
	elNew.innerHTML = '<a href="//pl.wikipedia.org/w/index.php?title=Wikipedia:Tablica_og%C5%82osze%C5%84">TO</a>';
	elBefore.parentNode.insertBefore( elNew, elBefore );
} );

Jak to działa? Dla większości osób pewnie wystarczy informacja, że po fragmencie "elNew.innerHTML=" można wpisać prawie dowolny kod HTML, podany w apostrofach i zakończyć średnikiem. Oczywiście należy też dodać następne linie kodu, żeby wszystko działało jak należy. To na co należy zwrócić szczególną uwagę, to kodowanie znaków (%XX%XX). Najlepiej po prostu przejść na daną stronę i skopiować link w całości.

Można też dodawać linki do konkretnych akcji. Na przykład link do historii tablicy ogłoszeń wstawia się tak:

jQuery( document ).ready( function() {
	var elBefore = document.getElementById( 'pt-mytalk' );

	var elNew = document.createElement( 'li' );
	elNew.innerHTML = '<a href="/w/index.php?title=Wikipedia:Tablica_og%C5%82osze%C5%84&action=history">historia TO</a>';
	elBefore.parentNode.insertBefore( elNew, elBefore );
} );

Kolejne linki można dodawać kopiując trzy kolejne linie kodu i je dodając pod spodem:

jQuery( document ).ready( function() {
	var elBefore = document.getElementById( 'pt-mytalk' );

	var elNew = document.createElement( 'li' );
	elNew.innerHTML = '<a href="//pl.wikipedia.org/w/index.php?title=Wikipedia:Tablica_og%C5%82osze%C5%84">TO</a>';
	elBefore.parentNode.insertBefore( elNew, elBefore );

	var elNew = document.createElement( 'li' );
	elNew.innerHTML = '<a href="/w/index.php?title=Wikipedia:Tablica_og%C5%82osze%C5%84&action=history">historia TO</a>';
	elBefore.parentNode.insertBefore( elNew, elBefore );
} );

Można też wpisać jeden po drugim (po spacji, nie po nowej linii!):

jQuery( document ).ready( function() {
	var elBefore = document.getElementById( 'pt-mytalk' );

	var elNew = document.createElement( 'li' );
	elNew.innerHTML = '<a href="//pl.wikipedia.org/w/index.php?title=Wikipedia:Tablica_og%C5%82osze%C5%84">TO</a> <a href="/w/index.php?title=Wikipedia:Tablica_og%C5%82osze%C5%84&action=history">historia TO</a>';
	elBefore.parentNode.insertBefore( elNew, elBefore );
} );

Tworzenie własnych narzędzi[edytuj]

Tworzenie własnych narzędzi zależy wyłącznie od własnej fantazji i czasu. Można wstawić sobie jakiś element, który będzie kontrolował jakieś zachowania – chowanie któregoś z elementów, tworzenie/pokazywanie jakiegoś formularza itp.

Dobry styl programowania[edytuj]

Główne zasady:

  1. Wszystkie zmienne powinny zostać zadeklarowane przy użyciu słowa kluczowego var.
  2. Wszystkie funkcje powinny zwracać wartość, jeśli w ogóle zwracają ją w jakimś miejscu.

Przykład 1[edytuj]

źle

el = document.getElementById( 'pt-mytalk' );

dobrze

var el = document.getElementById( 'pt-mytalk' );

Przykład 2[edytuj]

źle

function waliduj() {
        if ( document.getElementById( 'form_field' ).value == '' ) {
                alert( 'Pole puste' );
                return false;
        }
}

prawie dobrze

function waliduj() {
        if ( document.getElementById( 'form_field' ).value == '' ) {
                alert( 'Pole puste' );
                return false;
        }
        return true;
}

Dlaczego „prawie dobrze”? Bo powyższy kod będzie błędny, jeśli zostanie wykonany, gdy element o id „form_field” nie będzie istniał. Dlatego lepiej byłoby użyć czegoś takiego:

function waliduj() {
        var el = document.getElementById( 'form_field' );
        if ( el && el.value == '' ) {
                alert( 'Pole puste' );
                return false;
        }
        return true;
}

Z drugiej strony zależy to od sytuacji – jeśli sprawdzamy konkretny formularz, który zawsze zawiera to pole, to pole zawsze będzie istniało. W takiej sytuacji w funkcji inicjującej wystarczy sprawdzić, czy istnieje ten formularz.

Parametry i funkcje dzięki uprzejmości programistów Mediawiki :)[edytuj]

Istnieją pewne gotowe zmienne i funkcje w MediaWiki, które nieco ułatwiają tworzenie skryptów. Podstawową funkcją jest tutaj: jQuery(document).ready(), przyjmująca jako parametr nazwę funkcji, która ma być wywołana po załadowaniu całej strony. To bardzo ważna funkcja, ponieważ uniezależnia wykonanie od przeglądarki i zapobiega konfliktom skryptów. Wywoływanie funkcji inicjujących skrypt po załadowaniu całej strony jest konieczne, ponieważ dopiero wtedy dostępne są wszystkie elementy, które możemy chcieć zmienić. W praktyce nie można też przewidzieć, w którym miejscu pojawiłby się tekst wypisany od razu w czasie interpretowania skryptu.

Podstawowe zmienne ustawiane przez MediaWiki
var skin = "monobook";
var stylepath = "/skins-1.5";
var wgArticlePath = "/wiki/$1";
var wgScriptPath = "/w";
var wgServer = "//pl.wikipedia.org";
var wgCanonicalNamespace = "User";
var wgCanonicalSpecialPageName = false;
var wgNamespaceNumber = 2;
var wgPageName = "Wikipedysta:Nux/pomysły";
var wgTitle = "Nux/pomysły";
var wgArticleId = "494711";
var wgIsArticle = false;   // prawda tylko przy przeglądaniu artykułów (dyskusja jest tutaj też artykułem)
var wgUserName = "Nux";
var wgUserGroups = ["sysop", "*", "user", "autoconfirmed", "emailconfirmed"]; // null jeśli niezalogowany
var wgUserLanguage = "pl";
var wgContentLanguage = "pl";   // ogólne dla serwisu (en.wiki=en, de.wiki=de)
var wgBreakFrames = false;   // ???
var wgCurRevisionId = "6868099";
Ciasteczka (kolejność dowolna)
document.cookie.split( "; " ) = ["plwikiUserID=18831", "plwikiUserName=Nux", "plwiki_session=b8d743a8749873d298479283fca74"]

Ciacha ustawiane okazjonalnie:

  • hidetoc
  • dismissSiteNotice
  • popup_disabled

Jak testować skrypty?[edytuj]

Najprościej skorzystać FireBuga. Program działa pod Firefoksem i umożliwia wszechstronne testowanie skryptów JS oraz arkuszy stylów. Posiada też konsolę, którą można rozwinąć (na początku jest jednolinijkowa) i wpisać praktycznie dowolną ilość kodu i uruchomić. Można też edytować wybrane fragmenty kodu HTML oraz CSS.

Ostatecznym sprawdzianem powinno być zawsze zainstalowanie skryptu w swoim JS-ie (np. przy użyciu {{JS}}) i przetestowanie w jak największej ilości przeglądarek. Potem wystarczy tylko stworzyć choćby krótką instrukcję na podstronie Wikipedia:Narzędzia i dopisać się do tabelki.

Ciasteczka w JavaScripcie[edytuj]

Ogólny sposób na odczytanie i zapisywanie ciasteczek w JS znajduje się w artykule o ciasteczkach. W skryptach częściej może być potrzebne zapamiętanie wartości typu boolean (o dwóch możliwych wartościach).

Ustawianie ciasteczka
document.cookie = "nazwa_ciasteczka=1; path=/";

Uwaga!: nazwa_ciasteczka powinna być na tyle długa, by nie pomyliła się się z inny ciasteczkiem, a w szczególności, żeby ciasteczka nie miały tych samych przyrostków (a właściwie, żeby nazwa jednego nie była przyrostkiem drugiego). Istotą problemu jest to, że ciasteczka w skryptach na wiki są sprawdzane według podanej niżej metody, a w zmiennej document.cookie, znajdują się wszystkie ciasteczka wraz z ich wartościami.

Uproszczona metoda sprawdzenia wartości ciasteczka
document.cookie.indexOf('nazwa_ciasteczka=1')

Przy takiej metodzie odczytu istnieje możliwość pomylenia ze sobą ciasteczek. Przykład: jeden ze skryptów ustawia sobie ciasteczko „m_disable”, a drugi „param_disable”; wówczas wartość document.cookie może być taka: 'param_disable=0; m_disable=1' i wtedy przy wywołaniu document.cookie.indexOf('m_disable=0') dopasowanie nastąpi do pierwszego wystąpienia, a jednak zmienna, o którą nam chodziło ma wartość 1.

Ustawianie ciasteczka z datą wygaśnięcia

Należy też pamiętać, że bez określenia daty wygaśnięcia ciasteczka, przy ustawianiu go, ciasteczko wygaśnie na końcu sesji (po wyłączeniu przeglądarki). Można to zmienić dodając parametr expires z datą w odpowiednim formacie:

var d = new Date();
d = new Date(d.getTime()+3600000); //+1h (ilość sekund * 1000)
document.cookie = "nazwa_ciasteczka=1; path=/; expires=" + d.toGMTString();

Zobacz też[edytuj]

Linki zewnętrzne[edytuj]