Pomoc:Personalizacja - porady dla zaawansowanych

Z Wikipedii

Spis treści

1 Wstęp
2 Dodawanie linków do górnego paska
3 Tworzenie własnych narzędzi
4 Zobacz też
5 Linki zewnętrzne

[edytuj] Wstęp

nazwa skórki	podstrony
nazwa skórki	javascript (.js)	arkusz stylów (.css)
MonoBook (domyślna)	monobook.js	monobook.css
Simple	simple.js	simple.css
Standard	standard.js	standard.css
Modern	modern.js	modern.css
MySkin	myskin.js	myskin.css
Cologne Blue	cologneblue.js	cologneblue.css
Nostalgia	nostalgia.js	nostalgia.css
Chick	chick.js	chick.css

Na stronie Pomoc:Personalizacja opisane jest jakie możliwości daje oprogramowanie MediaWiki w dostosowywaniu Wikipedii do własnych potrzeb. Pytaniem podstawowym jest jak to wykorzystać. Najprostsze jest przejście na stronę Specjalna:Preferencje i ustawienie tam paru opcji. To jednak nic w porównaniu z tym jakie 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 mozna 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ło by 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? Hm... Właściwie nie ma takiej rzeczy której nie dają. 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ż ściągać zawartość stron, których nie ma jeszcze w przeglądarce i przetwarzać ich zawartość (tak działa popups).

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

Załóżmy, że chcemy dodać sobie parę 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ń

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

        var elNew = document.createElement('li');
        elNew.innerHTML='<a href="http://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:

addOnloadHook(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 dodając pod spodem - o tak:

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

        var elNew = document.createElement('li');
        elNew.innerHTML='<a href="http://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!):

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

        var elNew = document.createElement('li');
        elNew.innerHTML='<a href="http://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);
});

[edytuj] Tworzenie własnych narzędzi

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.

[edytuj] Dobry styl programowania

Główne zasady:

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

[edytuj] Przykład 1

źle

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

dobrze

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

[edytuj] Przykład 2

ź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ł. Stąd 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.

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

Istnieją pewne gotowe zmienne i funkcje w MediaWiki, które nieco ułatwiają tworzenie skryptów. Podstawową funkcją jest tutaj: addOnloadHook, która jako parametr przyjmuje 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 = "http://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
js_hideSidebarByDefault

[edytuj] Jak testować skrypty?

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.

[edytuj] Ciasteczka w JavaScript

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 wg 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ć tak: '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();

[edytuj] Zobacz też

[edytuj] Linki zewnętrzne

Ukryta kategoria: WP?