Centrum Społeczności
Advertisement

Poniższy przewodnik nauczy Cię krok po kroku, jak szybko i łatwo zastąpić klasyczne infoboksy w wikitekście do przenośnych infoboksów. Chociaż niemożliwe jest omówienie każdego typu infoboksu — niektóre infoboksy są bardziej egzotyczne niż inne — powinieneś zauważyć, że te instrukcje mają szerokie zastosowanie w większości sytuacji.

Jest ona przeznaczona dla osób na wszystkich poziomach umiejętności. Powinien być dobrym przewodnikiem do tworzenia dobrych infoboksów od samego początku. Przewodnik zawiera również "najlepsze praktyki" dotyczące budowania infoboksów dodatkowo rozszerzając temat.

Podstawy[]

Przed przystąpieniem do migracji, zaznajom się z:

  • podstawowym wikitekstem;
  • składnią CSSu — w szczególności, czym są selektory i właściwości;
  • zasadami poprawności składni XML, na której opierają się znaczniki przenośnych infoboksów
  • terminami klasyczny infobox, nieprzenośny infobox oraz NPI lub nPI (oznaczają to samo).

Krok 1: Sprawdź, co musi być przekształcone[]

Przed rozpoczęciem procesu konwersji należy najpierw ustalić, które szablony trzeba przekształcić. Jeśli masz szczęście, większość z nich będzie znajdować się w kategorii, często nazywanej Kategoria:Infoboksylub Kategoria:Szablony infoboksów.

Krok 2: Rozważ potencjalne motywy i warianty infoboksu[]

Pierwsza część tego kroku jest dość prosta. Przejrzyj artykuły, które używają infoboksów, które mają zostać zmigrowane, korzystając z Specjalna:Linkujące. Zwróć uwagę na wygląd każdego szablonu — czy są wykonane w podobnym styly (lub można je ujednolicić), czy wyglądają zupełnie inaczej. Każda większa różnica w wyglądzie szablonu może stać się oddzielnym motywem w dalszych etapach migracji. Pamiętaj, aby zanotować, które elementy są spójne (takie jak kolor lub zaokrąglone rogi) w większości motywów — mogą okazać się przydatne podczas tworzenia domyślnego stylu infoboksów poprzez selektor .portable-infobox.

Druga część może być trudniejsza technicznie, ale jest konieczna do spójnego zastąpienia starych infoboksów. Najprostszym sposobem na to jest przejrzenie kodu źródłowego starego infoboksu i szukanie miejsc, gdzie styl jest zmieniany przez specjalne parametry, takie jak class="{{{roundy|10px}}}" lub style="width: {{{szerokość|250px}}}; background-color: {{{tło|white}}}". Przykładowo, parametr tło użyty w ostatnim przykładzie do określenia koloru tła może zostać wykorzystywany w atrybucie accent-color-source="tło", by odtworzyć jego funkcjonalność.

Krok 3: Przenieś elementy szablonu niezwiązane z infoboksem (noinclude i includeonly)[]

Szablony działają poprzez transkluzję — dołączenie treści szablonu źródłowego do dowolnego artykułu docelowego. Często zdarza się, że niektóre części szablonu nie są użyteczne we wszystkich przypadkach, więc używamy dodatkowych znaczników, aby to kontrolować:

<noinclude>
ukrywa zawartość w tagu w artykule.
Często zdarza się, że szablon będzie potrzebował pewnych sekcji ukrytych w artykułach. Dokumentacja, podglądy infoboksów i kategorie szablonów są tego dobrymi przykładami.
<onlyinclude>
ukrywa zawartość poza tagiem w artykule.
Ten tag jest rzadziej używany, ale pozwala szybko oddzielić infoboks od pozostałej zawartości szablonu. Ogólnie rzecz biorąc, <onlyinclude> jest preferowany dla przejrzystości kodu i łatwego zrozumienia.
<includeonly>
ukrywa zawartość wewnątrz tagu na stronie szablonu
Sam infoboks, towarzyszące mu kategorie artykułów i przypisy prawdopodobnie powinny zostać ukryte na samej stronie szablonu. Pomaga to zapobiegać błędom z wykrywaniem nPI.

Zachowanie elementów starego szablonu[]

Oryginalne, nieprzenośne infoboksy będą prawdopodobnie składać się z dwóch części: samej tabeli infoboksu, którą planujemy zmigrować, oraz innych elementów pomocniczych: dokumentacji, kategoryzacji czy nawigacji. Często będzie to wyglądać następująco:

<pre>
{|class="infobox"
...linie kodu
|}
<noinclude>{{dokumentacja}}[[Kategoria:Infoboksy]]</noinclude>

Skopiuj wszystko, co znajduje się poza kodem NPI. Oznacza to, że skopiuj wszystko, co znajduje się powyżej {| i poniżej |}. W kodzie nowego PI wstaw elementy, które właśnie skopiowałeś ze starego NPI, bez wprowadzania zmian. W powyższym przykładzie przekopiowaną częścią będzie:

<noinclude>{{dokumentacja}}[[Kategoria:Infoboksy]]</noinclude>

Krok 4: Przetłumacz układ i grupy klasycznego infoboksu[]

Ze względu na sposób kodowania niektórych klasycznych szablonów parametry wikitekstu mogą być interpretowane w niewłaściwej kolejności lub całkowicie zignorowane. Najlepszym sposobem na jego odpowiednie ukształtowanie jest przejście od góry do dołu i ręczne ułożenie we właściwej kolejności i zgrupowanie elementów.

Przenośne infoboxy automatycznie ukrywają wybrane wiersze, jeśli nie zostanie podana żadna wartość, więc dodatkowy kod ukrywający te elementy danych nie jest konieczny. Ponadto, jeśli znacznik <group> zawiera wewnątrz nagłówek <header> i żaden element grupy nie ma wartości, nagłówek nie zostanie wyświetlony.

UWAGA: Wiele społeczności oznacza wartości jako „Nieznane” w swoich infoboksach, gdy nie jest podana żadna wartość. Chociaż jest to akceptowalne, nie jest to rozwiązanie idealne (i zwykle powoduje wizualny bałagan), chyba że oczekujemy określonego układu tabeli infoboksu — w takich sytuacjach powinniśmy użyć atrybutu show="incomplete" znacznika grupy.

Typy danych[]

Czy wybrane pole to obraz, tytuł, dane, nawigacja, a może nagłówek? Nie zawsze jest to proste.

  • Tag <title> odpowiada za wyświetlanie tytułów, bez widocznych etykiet[1]. Ten element może być również wykorzystany do wyświetlania alternatywnych tytułów (np. w innych językach). Zdefiniowane tytuły podrzędne mogą być stylowane za pomocą CSS z użyciem selektora .pi-title ~ .pi-title.
    • Wiele infoboksów automatycznie generuje tytuły w postaci <title source="name"><default>{{PAGENAME}}</default></title>. Aby ukryć tytuł na stronie szablonu, można go zastąpić za pomocą <title source="name"><default><includeonly>{{PAGENAME}}</includeonly></default></title>.
    • Tytuły w tym samym języku powinny być umieszczone w tym samym tagu danych, jeśli są one względem siebie równoważne (np. reprezentacja kanji/kana/rōmaji tego samego tytułu). Często tytuł w języku japońskim jest podawany w formach kana, kanji i rōmaji. Idealnie, powinny one być zawarte w pojedynczym elemencie <title>, sformatowanym z użyciem znacznika <ruby>. [2]. Wizualny wskaźnik używanego języka nie jest zwykle wymagany, a używanie flag do reprezentowania języka jest uznawane za złą praktykę. Jeśli dostępne są różne tłumaczenia tytułów (poza językiem źródłowym i językiem wiki), powinny one być dodane jako elementy <data> w <group>, a nie jako tytuły.
    • Tytuły dotyczące konkretnego regionu lub języka powinny być używane jako odrębne pola, na przykład tytuły hiszpańskojęzyczne, które różnią się w Hiszpanii i Ameryce Łacińskiej.
    • Logo prezentujące tytuł powinno być traktowane jako element dodatkowy, nie zastępując tekstowej reprezentacji tytułu.
  • Tag <image> służy do wyświetlania obrazów i nie wyświetla etykiety[1].
    • Pola obrazów obsługują jedynie dane dotyczące obrazu. Wstawienie zarówno tekstu, jak i obrazu w jedno pole spowoduje wyświetlenie tylko obrazu[3].
    • Pola obrazów mogą zawierać tagi <tabber> lub <gallery>, aby utworzyć galerię z zakładkami (lub przesuwaną galerię na urządzeniach mobilnych). Preferowane jest użycie <gallery> ze względu na prostotę kodu. W zależności od tego, jak ta funkcja jest używana, może być konieczne zastosowanie funkcji parsera {{#tag:gallery}}. Nie wszystkie właściwości galerii, które są dostępne poza infoboksem, są dostępne wewnątrz niego, na przykład pokazy slajdów.
    • Znacznik podrzędny <caption> obsługuje podpisy. Jeśli pole obrazu zawiera tag <gallery>, "podpis" użyty dla elementu galerii zostanie użyty jako etykieta zakładki.[4]
    • Pola obrazów nie wymagają pełnych ścieżek plików ani linków, choć w większości przypadków będą one akceptowane. Jednakże wszelkie informacje o rozmiarze lub podpisie dodane za ich pomocą nie będą miały żadnego efektu.
    • Pola obrazów dynamicznie zmieniają rozmiar obrazów szerszych niż 130 pikseli, aby jak najlepiej pasowały do infoboksu. Nniejsze obrazy pozostaną w swoim natywnym rozmiarze; jeśli mniejszy obraz jest ikoną gry lub podobną informacją uzupełniającą, powinien być on zamiast tego umieszczony w polu <data>.
  • <data> to typowy obszar dla większości innych parametrów.
  • <navigation> to obszar bez etykiet[1] dla dowolnego tekstu wiki.
    • Ikony w górnym obszarze "tytułu" powinny być traktowane jako nawigacja[5]; nie należy w celu ich wyświetlenia używać elementów <title>, ani <image>.

Grupy[]

W przypadku typowych, pionowych grup wystarczy umieścić interesujące nas elementy grupy wewnątrz znacznika <group>. Jednakże w przypadku grup poziomych przenośne infoboksy oferują dwa różne rozwiązania: tradycyjnym układ "poziomy" oraz grupy "inteligentnw". Każda z tych opcji może być stylizowana na swój sposób, jeśli istnieje ku temu potrzeba, jednakże decyzja między nimi może zależeć od różnych czynników.

Tradycyjny układ poziomy jest sztywny i najlepiej sprawdza się w przypadku małej i stałej liczby elementów, których zmienność jest minimalna. Na przykład, pola "Poprzedni" i "Następny" powinny być umieszczone w grupach poziomych. Nadają się one do użycia w logicznych zbiorach, w których układ elementów powinien być zachowany w jednym wierszu.

Z kolei grupy inteligentne są dostosowane do obsługi potencjalnie większych i bardziej zróżnicowanych zbiorów elementów. Reagują na liczbę elementów w grupie i automatycznie przenoszą kolejne elementy grupy do nowego wiersza w momencie, gdy ilość elementów wiersza przekroczy maksymalną liczbę określoną poprzez atrybut row-items.

Etykiety danych[]

Etykiety danych mogą zawierać większość elementów wikitekstu, w tym możliwość użycia tagów <noinclude> (aby dodać dodatkowe wyjaśnienie etykiety w edytorze w sposób niewidoczny dla czytelników) oraz <includeonly> (aby wyświetlić tylko te części etykiety, które powinny pojawić się w artykule, a nie w trybie edycji). Jeśli etykiety zawierają ikony informacyjne, należy zachować ostrożność, aby uniknąć problemów z dostępnością[6][2]. Jedynie elementy <data> posiadają widoczne etykiety[1].

W kontekście czytelności i dostępności warto zauważyć, że etykiety wyśrodkowane pionowo mogą być mylące, ponieważ ludzkie oko może się w nich gubić. Krótkie etykiety, takie jak "ATK" i "DEF", mogą być zrozumiałe dla anglojęzycznych czytelników, jednakże zaleca się użycie tagu <abbr> w celu ułatwienia zrozumienia dla osób niezaznajomionych z tematem lub językiem[2]. Natomiast bardzo długie etykiety należy w miarę możliwości uprościć.

Ustawienie szerokości etykiety jako 50 % (równą szerokości wartości pola) może być mniej czytelne w przypadku pionowych elementów danych, gdyż odwraca uwagę od rzeczywistej wartości. W nowych szablonach warto unikać takiej praktyki. Jeśli konieczne jest zwiększenie szerokości etykiety, lepszym rozwiązaniem jest używanie właściwości CSS flex-basis.

Krok 5: Zdefiniuj domyślne wartości i formatowanie parametrów[]

Zazwyczaj zaleca się stosowanie najprostszych danych wejściowych do zasilania szablonu, ograniczając je do podstawowych typów danych, takich jak liczby, ciągi tekstowe, linki lub listy linków. W tym celu możemu użyć tagu <format> , który pozwala przekształcić surowe dane wejściowe na odpowiednio sformatowane dane wyjściowe. Na przykład, jeśli przedmiot kosztuje "10 złota", możemy jako parametr podać samą wartość "10" i użyć tagu <format> do wyświetlenia jej jako "10 złota" (lub wykorzystać odpowiednią ikonę informacyjną w grze dla złota itp.). Tag <format> można stosować wewnątrz tagów <data> lub <title>, jednakże nie jest akceptowany w przypadku tagów <image> i <navigation>.

Wartości domyślne zadeklarowane za pomocą tagu <default> zostaną użyte tylko wtedy, gdy artykuł nie dostarcza wartości dla nazwanego parametru określonego w atrybucie source=. Tag <default> jest akceptowany wewnątrz tagów <data>, <title> oraz <image>, jednakże nie wewnątrz tagu <navigation>.

Wartości domyślne powinny unikać wartości typu "nieznany" lub "-", chyba że są one wymagane by zachować układ infoboksu. Przenośne infoboksy zostały zaprojektowane w taki sposób, aby nie wyświetlać wartości, które nie są używane w danym artykule, więc dodawanie dodatkowej logiki ukrywania nie jest konieczne. Ponadto, jeśli żadne elementy danych w grupie nie są używane, ani grupa, ani jej nagłówek nie zostaną wyświetlane, chyba że zostanie do nich dodany atrybut show="incomplete".

WSKAZÓWKA: Automatyzacja nie zawsze jest korzystna. Choć pominięcie nazwy lub tytułu na rzecz magicznego słowa {{PAGENAME}} może wydawać się efektywne, może prowadzić do problemów, gdy nazwa strony zmienia się lub zawiera znaki lub znaczniki, które nie mogą być częścią nazwy artykułu. Używanie innych elementów, takich jak obrazy, zależnych od nazwy strony, może znacznie komplikować pracę, zwłaszcza jeśli użytkownicy społeczności nie rozumieją wewnętrznej logiki szablonu. Użycie szablonów pomocniczych, funkcji Lua lub zagnieżdżonych funkcji parsera może dezorientować użytkowników próbujących korzystać z szablonu jak również utrudnić konserwację szablonów w przyszłości.

Jeśli element danych nie wymaga przetwarzania (np. jest używany tylko jako {{parameter}} i nie jest w żaden sposób modyfikowany), tagi <default> oraz <format> mogą być pominięte. To podejście znacząco upraszcza niektóre klasyczne infoboxy podczas migracji. W przeciwnym razie, skuteczne użycie tagów <default> oraz <format> jest kluczowe podczas migracji infoboksów, by nie utracić pierwotnej funkcjonalności szablonu.

WSKAZÓWKA: Jeśli dodajesz kategorię, która zależy od wartości <data>, umieszczenie jej deklaracji w tym miejscu uchroni Cię przed koniecznością wykonywania tego później.

Krok 6: Ostyluj nowe infoboksy[]

Stylowanie przenośnych infoboksów (PI) odbywa się głównie za pomocą globalnego arkusza CSS. Należy unikać stosowania tzw. inline CSS (atrybutów style i class nie będących częśią kodu PI), na ile to możliwe. Innymi słowy, jeśli elementy tego samego typu mają być stylowane identycznie, style te powinny zostać zdefiniowane jako element motywu lub domyślnej klasy .portable-infobox — nie należy nanosić tych modyfikacji ręcznie dla każdego pola.

Jeśli wybrana wartość ma mieć inny styl względem innych elementów tego typu (np. zapisanie transkrypcji Rōmaji kursywą obok kanji lub kana), powinniśmy w pierwszej kolejności rozważyć użycie wikiteksu (np. ''') lub odpowiedniego znacznika HTML (np. <dfn>) wewnątrz tagu <format> w miejsce CSSu, by zwiększyć przenośność tak przygotowanego infoboksu mędzy wiki.

Zaleca się również niezmienianie szerokości infoboksów za pomocą CSS, ponieważ może to prowadzić do problemów z wyświetlaniem obrazów. Obrazy, które są zwężane za pomocą CSS, mogą zostać zniekształcone[7].

Stylowanie przenośnych infoboksów za pomocą CSS jest tematem bardziej zaawansowanym, który został szczegółowo omówiony na stronie Pomoc:Infoboksy/CSS.

Bonus: Centralny arkusz CSS i zatwierdzanie wersji roboczych[]

W zależności od złożoności CSS i kodu pomocniczego, oddzielna wiki służąca jako piaskownica zwykle nie jest konieczna. Rozwijanie kodu szablonu bezpośrednio na wiki docelowej przy użyciu systemu szkiców jest proste i ułatwia testowanie nowego szablonu w odniesieniu do istniejących artykułów. Ponadto pozwala to uniknąć nieoczekiwanych konfliktów ze stylami nie istniejącymi na wiki-piaskowicy.

Szkice jest bardzo użyteczne do szybkiego testowania szablonów na stronach, poprzez podgląd strony zawierającej poprzedni szablon poprzez dopisanie /szkic na końcu nazwy szablonu. To podejście działa w przypadku wszystkich szablonów, nie tylko na infoboksach.

Umieszczenie selektora .portable-infobox i innych specyficznych dla PI styli CSS w oddzielnym arkuszu stylów (np. MediaWiki:Themes.css) zaimportowanym do MediaWiki:Common.css lub MediaWiki:Fandomdesktop.css może również okazać się pomocne próbując zapanować nad dużą ilością styli dotyczących wielu elementów wiki. Aby zaimportować style w głównym arkuszu stylów skórki w zoptymalizowany sposób, należy użyć @import url("/load.php?mode=articles&articles=MediaWiki:Themes.css&only=styles");. Warto pamiętać, że ww. linia musi znaleźć się na samej górze arkusza MediaWiki:Common.css (lub MediaWiki:Fandomdesktop.css, gdy Common.css jest pusty).

Podsumowanie[]

Migracja klasycznych infoboxów do przenośnych infoboków może znacznie ułatwić ich przyszłą konserwację i pozwolić na kompleksowe zmiany stylu bez konieczności zmiany wielu szablonów. Język został zaprojektowany tak, aby był zarówno elastyczny, jak i potężny. Jeśli napotkasz problemy z migracją, nie wahaj się skontaktować ze wsparciem Fandomu.

Przypisy[]

  1. 1,0 1,1 1,2 1,3 . Nawet jeśli etykiety nie są wyświetlane w artykułach (jak w przypadku <title> i <image>), są one jednak widoczne w VisualEditorze, co ułatwia edycję. Tag <navigation> nie obsługuje etykiet.
  2. 2,0 2,1 2,2 Element <span> nie powinien być używany do wyświetlania podpowiedzi. Zamiast niego należy używać znacznika <abbr title=""> do objaśnienia skrótów oraz <dfn> (bez atrybutu title) do opisania terminu w obcym języku.
  3. . Zasada przenośności nakazuje nie mieszanie typów danych w jednym polu. Tekst jest tekstem, a obrazy są obrazami.
  4. . Zasada przenośności: zmień tylko jedną rzecz. Ta sama akcja nie powinna zmieniać wielu pól.
  5. Aby uzyskać dobry efekt ikony w rogu infoboksu, należy umieścić tag <navigation> odpowiedzialny za ikony i znacznik <title> z tytułem wewnątrz elementu <group>, w tej kolejności. Następnie należy ustawić właściwości float i clear wewnątrz selektora .pi-group > .pi-navigation w CSS.
  6. . W celu uniknięcia mieszania tekstu i obrazów, ikony informacyjne powinny korzystać z symboli Unicode, takich jak ℹ️ (kod U+2139). Można użyć tagu i tytułu, aby przekazać krótkie opisy, jednakże należy pamiętać, że mogą one również służyć jako linki do bardziej szczegółowych artykułów.
  7. Istnieją metody wykorzystujące CSS do skrócenia obrazu, który jest wyższy niż pożądany, takie jak max-height: 500px; width: auto;

Dalsze wsparcie

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

Advertisement