Wikikod - poradnik

Witaj! Skoro tu trafiłeś, to znaczy że chcesz poznać nieco tajników kodu Wikidotu używanego w formatowaniu dzieł na witrynie SCP. Więc jesteś w dobrym miejscu! Poznasz tu podstawy podstaw w aspekcie pisania raportów oraz elementy które może i znajdują się w innych miejscach ale uczynią Twoje dzieło bardziej estetycznym i ładnym.

Zapewne widziałeś na stronie wszelkiego rodzaju szablony. Cóż, metoda kopiuj-wklej jest często najlepsza, sam ją stosuję przy bardzo zaawansowanych kodach. Ale tu dowiesz się co nie co o teorii i sposobie funkcjonowania kodów.

Na początku pozwolę przytoczyć iż Wikidot, jak sama nazwa wskazuje, to platforma do tworzenia stron typu ''Wiki'' czyli ''Wikipedie'' na temat czegoś. Z tego względu kody zostały utworzone tak aby oprócz podstawowego formatowania tekstu umożliwiały tworzenie stron tematycznych. Ponieważ prekursorom SCP spodobała się ta platforma, utworzyli na nią swoją stronę a wykorzystywanie kodu bardzo ładnie wzbogaca tworzone prace i inne strony.

Tak naprawdę samych kodów jest bardzo dużo, jednak ja przytoczę tylko te najbardziej przydatne i takie na które możecie natknąć się w Panelu Edycji. Jeżeli jesteś zainteresowany/zainteresowana wszystkimi kodami opisanymi oryginalnie, odsyłam do strony Wiki-Syntaxu. Dobra znajomość angielskiego obowiązkowa.

To możemy zaczynać, prawda?


Lekcja 1: Opis ogólny Panelu Edycji.

Tabelka%20edycji%20-%201.png

Oto i nasz Panel Edycji. Jest to na pewno jedna z rzeczy która jako pierwsza rzuca się w oko po kliknięciu opcji edycji jakiejś strony. Czym jest ten panel? Nie jest to nic innego jak ułatwienie we wpisywaniu kodu do naszego tekstu. Wystarczy kliknąć dany przycisk a surowy kod zostanie zastosowany, oczywiście my musimy go odpowiednio użyć. Dostajemy jedynie szablon.

Podzieliłem panel na kolumny i rzędy. Dla ułatwienia dalszych lekcji i orientacji.

Więc to mamy omówione. Co to jest panel, co robi itd. Możemy przejść do następnej lekcji.


Lekcja 2: Podstawowy kod wykorzystywany w pisarstwie SCP.

Lekcja ta jest najważniejszą ze wszystkich. W niej dowiesz się nieco o podstawowych kodach używanych najczęściej w dziełach SCP oraz zapoznasz się z podstawami samodzielnego wpisywania tychże kodów.

Tabelka%20edycji%20-%202.png

Na czerwono zaznaczyłem te przyciski które zawierają, jak wspomniałem, najważniejsze kody formatowania i nie tylko.

Jedziemy po kolei. Przycisk z 1 kolumny w 1 rzędzie służy do tworzenia tzw. nagłówku. Nagłówki są najczęściej stosowane do wyróżnienia jakiejś sekcji danej pracy lub strony. Nagłówek dzieli się na 6 poziomów. Po najechaniu na przycisk pojawi się nam kolejne 5, do użycia według zapotrzebowania. Efekt jest mniej więcej taki:

Poziom 1

Poziom 2

Poziom 3

Poziom 4

Poziom 5
Poziom 6

Jak widać również w praktyce, nagłówki można wprowadzić ręcznie poprzez wpisywanie kolejno plusów w liczbie odpowiadającej poziomowi nagłówka. Wygląda to tak:

+ Poziom 1

++ Poziom 2

+++ Poziom 3

++++ Poziom 4

+++++ Poziom 5

++++++ Poziom 6

Kolejne cztery przyciski znajdują się w 1 rzędzie w 2, 3, 4 i 5 kolumnie. Są to bardzo dobrze znane formatowania tekstu jak pogrubienie, kursywa, podkreślenie i przekreślenie.

Zanim przejdę do dalszej części, przedstawię pewną cechę bardzo istotną dla używania jakiegokolwiek formatowania. Otóż, wszystko opiera się na kodzie który musi zostać otwarty i zamknięty. Pokażę jak wymienione wyżej efekty wyglądają na surowo:

**Pogrubienie** 

//Kursywa//

__Podkreślenie__

--Przekreślenie--

Wszystko musi zostać zaczęte i zakończone odpowiednimi znakami w odpowiedniej ilości, gdyż inaczej kod nie zostanie odczytany i efekt nie zostanie zastosowany lub będzie ''wykraczony'' np. pogrubienie i gwiazdka, bo o jedną za dużo zostało wpisane. Podobna rzecz ma się w przypadku modułów, ale o tym w następnej lekcji.

Wracając do efektów, te wymienione wyżej są używane najczęściej, znajdują się nawet w podstawowym szablonie raportu. Pogrubienie służy do wyróżnienia sekcji jak np. opis czy Specjalne Czynności Przechowawcze (nazwa własna, z dużej piszemy wszystko), tworzy się używając dwóch gwiazdek * na początku i na końcu pogrubionej sekcji. Kursywa używana jest często dla łacińskich nazw oraz we wszelkiego rodzaju notatkach jakiegoś doktora który wypowiedział się pod raportem. Z kolei w przesłuchaniach najczęściej pełni to rolę tekstu pobocznego jak np: ''Dziękuję, to wszystko. (Podaje dwie tabletki zawierające preparat amnezyjny) Proszę to połknąć, poczuje się pan lepiej po tych niecodziennych zajściach.'' Kursywę stosujemy poprzez wpisanie dwóch linii ukośnych / przed i po sekcji przechylonej. Podkreślenie zazwyczaj, ale nie zawsze, używane do wyróżnienia jakiejś istotnej kwestii. Podkreślenie używamy podobnie jak pozostałych efektów, z tym że znakiem specjalnym są dwie podłogi _ . Najczęściej stanowi tylko zabieg kosmetyczny np. Dziennik Eksperymentów SCP-XXX gdzie w parze z pogrubieniem tworzy ładny efekt. Tak, wszelkie zabiegi formatowania tekstu można standardowo łączyć, jednak należy pamiętać o poprawnej kolejności rozpoczynania i kończenia kodu. Jak wyżej, efekt zastosowany wygląda tak:
__**Dziennik Eksperymentów SCP-XXX**__. Praktycznie jest to pogrubienie które zostało podkreślone. Kolejność zastosowania danego formatowania jest nieważna, jedynie co to jak wspomniałem należy pamiętać żeby dobrze wpisać znaki kodu.

Przekreślenie z kolei używane jest wtedy gdy na przykład chcemy jakąś część raportu usunąć specjalnie i jednocześnie zostawić bo stanowi część fabuły (praca to nie tylko anomalia, to zawarta w niej historia) np. używane jest w raportach typu EX, gdzie używa się tego do ''usuwania'' procedur przechowawczych (raporty zrozumiane czyli ''EX'' nie potrzebują Specjalnych Czynności Przechowawczych ponieważ nie stanowią już opisu anomalii — przyp. autora). Przekreślenie stosujemy używając dwóch myślników - . Z przekreśleniem jest pewien problem, gdyż same dwa myślniki tworzą długą spację czyli — . Stosując ich dużą ilość, lub przekreślając dużo należy pamiętać że znaki formatowania muszą być zawsze wpisywane bez spacji zarówno przed jak i po sekcji, w przeciwnym razie wyjdą nam niepożądane abominacje.

Poprawnie wykonane przekreślenie realizowane jest w ten sposób:

Dobrze przekreślone

Czyli:

--Dobrze przekreślone--

Jeżeli np. damy spację, wyjdzie coś takiego:

— No popatrz, nie przekreśliło —

Czyli:

-- No popatrz, nie przekreśliło --

Jeżeli damy jedną spację, będzie:

—Znowu nie przekreśliło —

Czyli:

--Znowu nie przekreśliło --

Takie samo wypaczenie powstanie gdy przedzielimy znaki między sobą np. nie -- tylko - - .

Więc przestrzegam przed niepoprawnym wpisywaniem znaków do kodu, dotyczy to każdego formatowania.

Dobrze, kolejnym formatowaniem tekstu jest efekt z 6 kolumny 1 rzędu, czyli czcionka o stałej szerokości znaków. W praktyce wygląda to tak: czcionka o stałej szerokości znaków. Używamy ją wpisując nawias klamrowy na początku dwa razy i na końcu dwa razy. Uwaga! Nawias mamy otwarty i zamknięty, wiemy z lekcji matematyki jak należy stosować nawiasy (wiemy, prawda? :P) i tak samo tu się je używa. W praktyce:

{{czcionka o stałej szerokości znaków}}

Ciekawostka: Taki efekt jest domyślny dla tekstu wpisanego w moduł kodu. Jak wspomniałem moduły to nie rozmowa na tę lekcję. Cierpliwości. ;)

Następnym efektem jest cytat. Tworzy on mniej więcej taką ramkę:

Cytat

Nie jest to nic innego jak wpisanie znaku większości ''>'' (tak, tak się to nazywa) przed tekst. W praktyce musimy wpisać ten znak, następnie spacja i tekst.

> Cytat

Można także tworzyć przerwę pomiędzy tekstem, za pomocą entera. Należy pamiętać że znak musi pojawić się na początku każdej linijki, nawet tej z enterem. Proszę:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam pellentesque, mauris a vulputate semper, justo risus placerat magna, sit amet consectetur lacus turpis a urna.

Czyli:

> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> 
> Nullam pellentesque, mauris a vulputate semper, justo risus placerat magna, sit amet consectetur lacus turpis a urna.

Jeżeli zapomnimy o tym jednym >, nasz tekst zostanie źle sformatowany i podzielony lub wsadzony poza blok cytatu. Może to być użyte celowo, dla zrobienia dwóch cytatów po sobie:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam pellentesque, mauris a vulputate semper, justo risus placerat magna, sit amet consectetur lacus turpis a urna.

Czyli:

> Lorem ipsum dolor sit amet, consectetur adipiscing elit.

> Nullam pellentesque, mauris a vulputate semper, justo risus placerat magna, sit amet consectetur lacus turpis a urna.

To cytat mamy omówiony, jedziemy dalej.

Teraz będzie znacznie krócej. Kolejne efekty znajdują się w 1 rzędzie w kolumnach 8 i 9. Są to kolejno indeks górny i indeks dolny. Jak nazwa wskazuje, przenosi to nam tekst na górę lub dół linijki. Indeks górny tworzymy za pośrednictwem akcentu przeciągłego, popularnie daszku lub skrzata ^ . Musimy użyć go tak samo jak w wymienionych wyżej efektach, dwa razy na początku i na końcu. Indeks dolny tworzymy za pomocą dwukrotnego przecinka , . W praktyce:

Tekst Indeks górny

Tekst Indeks dolny

Czyli:

Tekst ^^Indeks górny^^

Tekst ,,Indeks dolny,,

Do czego to może służyć? Indeks górny jest dobry do potęg np. km2, indeks dolny z kolei w związkach chemicznych np. C6H12O6.

Wygląda to tak:

km^^2^^

C,,6,,H,,12,,O,,6,,

Zwróćcie uwagę jak nieczytelne wydaje się wpisanie znaków w C6H12O6. Musicie tu zwracać szczególną uwagę na to, które części mają zostać sformatowane i patrzeć tylko na nie. Pomyłka poskutkuje wypaczeniem kodu. W tym przypadku wygląda to tak: C puste, potem zaczęte i skończone 6, następnie puste H, potem zaczęte i skończone 12, następnie puste O po czym zaczęte i skończone 6. Uwaga przede wszystkim.

Ostatnim formatowaniem tej lekcji jest bloczek z rzędu 2 kolumny 1. Linia pozioma. Łopatologicznie:

Linia:


Czyli:

------

Wystarczy wklepać parę myślników. Ponieważ to nie ma żadnego wpływu na tekst, polecam po prostu szybsze i przyjemniejsze kliknięcie raz w bloczek na panelu edycji zamiast męczenie klawisza.


Lekcja 3: Efekty dodatkowe.

Będzie to chyba najciekawsza część tego poradnika. Zostaną tu przedstawione efekty dodatkowe, dzięki którym praca będzie się widocznie wyróżniać.

Tabelka%20edycji%20-%203.png

Na niebiesko zaznaczyłem wszystkie omawiane w tej części funkcje Panelu Edycji. Dodatkowo na końcu lekcji przedstawię wam fajne i ciekawe efekty, których nie znajdziecie za pośrednictwem panelu.

Pierwsza pozycja znajduje się w 1 rzędzie 10 kolumny. Jest to ''raw text'', czyli po polsku ''surowy tekst''. W praktyce wygląda to tak, że używając tego otrzymujemy podobnie jak przy formatowaniu tekstu dwa znaki kodowe, którymi w tym przypadku są małpy @ . Wiemy już jak stosować znaki kodowe przy formatowaniu, więc nie muszę chyba tego tłumaczyć. Raw text jest to tyle ciekawy, że stanowi dodatek pomocny przy otwieraniu pracy do kolaboracji, np. użytkownicy mogą dodawać własne eksperymenty do jakiegoś obiektu. Zazwyczaj wszystko trzyma się szablonu. Raw text posiada funkcję ignorowania wpisanego w nań jakiegokolwiek kodu Wikidotu, powodując że nie zostanie on użyty pomimo poprawnego wpisania. Dla przykładu: To jest pogrubione, ale **to już nie jest pogrubione**. W praktyce:

**To jest pogrubione**

@@**to już nie jest pogrubione**@@

Nie jest to często stosowane, z tego co zauważyłem często używa się modułu kodu, ale to jeszcze nie ten temat.

Następną rzeczą jest pozycja z 2 rzędu 4 kolumny. Kreator tabeli, czyli nie muszę tłumaczyć co to. Dostosowanie jest bardzo proste, po kliknięciu ukazuje się nam magik tabeli. Wpisujemy ile chcemy kolumn, rzędów, i zaznaczamy czy pierwszy rząd ma być nagłówkiem — zostanie wtedy przyciemniony. Na spodzie mamy podaną instrkucję: ''you can change horizontal alignment of individual cell contents by putting <, = and > after the || marker which give: left, center or right alignment.'' Tabela składa się z komórek, które tworzone są z dwóch pionowych linii | na początku i na końcu. W tym przypadku czy dacie spacje między linią ''wewnętrzną'' a tekstem jest nieistotne. Możecie także ustalić pozycję komórki, ale nigdy z tym nie eksperymentowałem i raczej nie jest to używane. Tabelka jest o tyle łatwa w użytkowaniu, że mamy ją gotową i wystarczy zastąpić frazę ''cell-content'' tym czym chcemy. Przykładowa tabelka:

header header header
cell-content cell-content cell-content
cell-content cell-content cell-content

czyli:

||~ header ||~ header ||~ header ||
|| cell-content || cell-content || cell-content ||
|| cell-content || cell-content || cell-content ||

Widać jak co wygląda, przy większych tabelkach trzeba mieć dobre oko.

Następnymi pozycjami są te z rzędu drugiego, z kolumn 8 i 9. Są to ''łącze URL'' i ''Kreator łącza URL''. Po prostu umożliwia nam to wpisanie linku do pracy, który będzie ukryty pod podaną frazą. Domyślnie łącze URL wygląda tak: [http://www.example.com describe link]. Są nawiasy i jak widzimy dwie sekcje: link, w tym przypadku example.com oraz describe link czyli opis linku. Pozycje te zamieniamy swoimi, dajemy swój link oraz swój opis. Należy pamiętać aby link i opis były oddzielone spacją. Łatwiejszy w użyciu jest ''Kreator łącza URL'' ponieważ od razu wpisujemy mu link, opis oraz wybieramy funkcję czy link ma zostać otwarty na nowej karcie. Otwarcie na nowej karcie realizowane jest poprzez dodanie jednej gwiazdki przez linkiem.

Kolejnymi podobnymi funkcjami są pozycje z 2 rzędu, kolumny 10 i 11, czyli ''łącze do strony'' oraz ''kreator łącza do strony''

Tak samo jak wymienione wyżej funkcje umożliwiają zalinkowanie czegoś, tak samo łącza do strony spełniają tę funkcję w odrobinę inny sposób. Łącze do strony służy do przekierowywania do wewnętrznego linku, czyli poprzez wpisanie nazwy strony. Jeżeli chcemy coś zalinkować do SCP-PL-000, nie piszemy całego linku tylko to jak się strona nazywa, czyli właśnie SCP-PL-000. W przypadku polskich znaków nie uwzględniamy ich, zamiast ''ą'' piszemy ''a'' itd. Samo łącze do strony wygląda tak: [[[page name]]]. Czyli nazwa strony. I tyle. Łącze do strony nie działa do innych stron, czyli takich znajdujących się poza danym projektem. Nie możemy zalinkować tym czegoś na Sandboxie pisząc na SCP-Wiki. Kreator łącza do strony umożliwia dodatkowo wpisanie nazwy zakładki odnoszącej do wybranej strony, realizowane to jest w ten sposób: [[[nazwa strony |teks zakładki]]]. Mamy nazwę strony, potem spacja, linia pionowa i tekst.

Następną rzeczą są pozycje z 2 rzędu, kolumny 12 i 13. Zaczniemy od pierwszej, czyli ''wstaw obrazek''. No co więcej mówić… wstaw obrazek. Kod wygląda tak:

[[image source]]

Zamiast ''source'' wpisujemy źródło, czyli link do obrazka. Pamiętajcie o poprawnej licencji, tłuczemy o tym wszędzie i będziemy tłuc. Mandaty za złamanie jej liczone są w tysiącach euro. Nie żartuję.

Wracając. Pozycja obok to ''kreator wstawiania obrazka''. Bardzo użyteczna funkcja, możemy wybrać obrazek z URL, dołączonego do strony pliku — ukaże się wtedy okienko ze wszystkimi dostępnymi, lub z Flickra. Dodatkowo możemy w przypadku dołączonego pliku ustalić rozmiar, ogólnie możemy dodać pozycję obrazka, czy ma znajdować się razem z tekstem (nie z opisem obrazka) po prawej czy po lewej.

Od razu podkreślę, że takich sposobów wstawiania obrazka nie stosuje się jako głównej grafiki raportu, chodzi o tą z opisem. Takie cudo tworzymy za pomocą następującego kodu:

[[include component:image-block name=http://adres.obrazka.jpg|caption=Tekst pod obrazkiem.]]

Jest to moduł, który został odpowiednio zaprogramowany na pokazywanie obrazka w ramce z podpisem na spodzie. Nie będę zagłębiał się w jego szczegóły.

Kolejną omawianą rzeczą będzie bloczek z 2 rzędu 15 kolumny, czyli wstawianie kodu HTML. Nie ma on swojej własnej nazwy, aczkolwiek zawiera opis co możemy dzięki temu zrobić:

[[html]]
Insert any HTML code, including widgets and video or audio players
[[/html]]

Czyli jeżeli chcielibyście wrzucić film lub jakiś dźwięk do raportu, używacie właśnie tego. Sęk w tym że jest to o tyle rzadko używane jak i stosowane przy bardziej rozbudowanych raportach. Jeżeli chodzi o plik dźwiękowy, możecie użyć prostszej metody. Podobnie jak ze wrzucaniem obrazków na serwer danej strony, wrzucacie swój plik dźwiękowy (licencja ich także dotyczy) a następnie używacie tego modułu:

[[include:snippets:mp3 | URL= Link do utworu MP3 ]]

Podobne do obrazka w ramce, prawda? Niestety jak wspomniałem — zagłębiać się w ten kod nie będę. Nie ma potrzeby. Dodatkowo istnieje jeszcze prostszy sposób. Po załadowaniu pliku możecie użyć znanego już łącza URL:

[*link nazwa zakładki]

Wracając do HTML'ów, widziałem że można robić cuda. Niestety wymaga to już bardzo zaawansowanych umiejętności w operowaniu kodem.

Następnymi omawianymi rzeczami będą pozycje z 3 rzędu 1 i 2 kolumny. Lista numerowana i lista wypunktowana. Czyli jak sama nazwa wskazuje, jedno umożliwia nam wskazywanie czegoś po kolei numeracją, drugie punktami. Kody wyglądają tak:

Dla listy numerowanej:

# list item

Dla listy wypunktowanej:
* list item

Co w efekcie daje:

  1. list item
  • list item

Ułatwieniem jest to, że po każdym naciśnięciu entera od razu nam wypunktowuje. Nie musicie się martwić o kolejność liczb, wystarczy że kratka # będzie znajdowała się przed każdym akapitem.

Następnie omówię przypisy, czyli pozycję z 3 rzędu 6 kolumny. Na pewno każdy z nas czytał kiedyś Wikipedię i widział zastosowanie przypisów. Stawia nam to mały numerek obok wyznaczonej pozycji zawierający dodatkowy komentarz odnośnie frazy. Przypisy są wyświetlane na dole strony, numerowane są automatycznie oraz jest możliwość ich przeczytania po najechaniu kursorem na numerek. Naciśnięcie spowoduje przesunięcie na dół strony. W praktyce wygląda to tak:

Tekst.1

A kodem następująco:

Tekst.[[footnote]](treść przypisu)[[/footnote]]

Normalnie przypisy pojawiają się na samym dole strony. Na potrzeby poradnika zastosowałem dodatkowe rzeczy aby przypisy były pokazywane od razu tu. Nie, tego się nie stosuje. :D

Jest to, zauważcie, moduł. Każdy moduł rozpoczyna się i kończy takim samym kodem, w tym przypadku [[footnote]], różnica polega na tym że moduł zamykamy frazą rozpoczętą od pochyłej linii / , czyli jak tu [[/footnote]].

Zauważcie że pominąłem jeden bloczek na początku. Pozycję z rzędu 2, kolumny 2. Element blokowy div. Co to takiego? Jest to prawdziwa magia w estetyce prac. Normalnie wygląda tak:

[[div]]
block contents
[[/div]]

Wydawałoby się nic specjalnego. Jednakowoż umożliwia tworzenie elementów blokowych, znanych nam choćby ze strony głównej SCP-Wiki. Tworzy to ramkę z tłem, cieniem, tekstem, może zawierać również obrazek. Po prostu wstawiacie wszystko odpowiednio, programujecie i macie wspaniałe efekty.

Dla przykładu: najprostsze użycie diva:

Tekst

W kodzie:

[[div class="content-panel centered standalone"]]
Tekst
[[/div]]

Utworzyło nam to panel z treścią ze specjalną funkcją wyśrodkowania tekstu. Znajomość angielskiego jest wymagana przy programowaniu divów. Są to bardzo fajne efekty, wyraźnie polepszają jakość kosmetyczną pracy. Pamiętajcie że to tylko wygląd, najważniejsza jest dobra treść. Jeżeli chcielibyście użyć w swojej pracy diva, poszukajcie trochę na naszej oraz innych stronach gdyż z doświadczenia przyznam iż najłatwiejszą metodą jest kopiuj-wklej z page source (źródło strony) danej strony i pozmienianie na swoje. Dla przykładu podam kilka przykładów:

Pierwsze, zaczerpnięte ze strony głównej Filii Rosyjskiej:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum, odio et pharetra egestas, ipsum quam sodales leo, eget mattis nisi diam a sapien. In orci velit, sodales id tellus ut, congue rutrum lacus. Maecenas consectetur, justo tincidunt imperdiet pretium, magna velit accumsan ligula, eget fermentum augue lacus at neque. Donec aliquet fringilla erat sed sodales. Aenean eros quam, imperdiet a pellentesque vel, dignissim quis purus. Curabitur sit amet tellus nibh. Maecenas aliquam interdum cursus. Sed viverra est vitae efficitur aliquet.

Lub takie coś, stworzone przeze mnie na podstawie powyższego: (ZeroStrider twierdzi że unczytable)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum, odio et pharetra egestas, ipsum quam sodales leo, eget mattis nisi diam a sapien. In orci velit, sodales id tellus ut, congue rutrum lacus. Maecenas consectetur, justo tincidunt imperdiet pretium, magna velit accumsan ligula, eget fermentum augue lacus at neque. Donec aliquet fringilla erat sed sodales. Aenean eros quam, imperdiet a pellentesque vel, dignissim quis purus. Curabitur sit amet tellus nibh. Maecenas aliquam interdum cursus. Sed viverra est vitae efficitur aliquet.

A w kodzie wygląda następująco:

[[div style="border:solid 1px #600; background:#f2f2c2; padding:5px; margin-bottom: 10px; border-radius: 10px; box-shadow: 0 2px 6px rgba(102,0,0,.5);"]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum, odio et pharetra egestas, ipsum quam sodales leo, eget mattis nisi diam a sapien. In orci velit, sodales id tellus ut, congue rutrum lacus. Maecenas consectetur, justo tincidunt imperdiet pretium, magna velit accumsan ligula, eget fermentum augue lacus at neque. Donec aliquet fringilla erat sed sodales. Aenean eros quam, imperdiet a pellentesque vel, dignissim quis purus. Curabitur sit amet tellus nibh. Maecenas aliquam interdum cursus. Sed viverra est vitae efficitur aliquet.

[[/div]]

oraz:

[[div style="border:solid 0px black; background:black; padding:5px; margin-bottom: 10px; border-radius: 10px; box-shadow: 0 2px 6px rgba(102,0,0,.5);"]]
[[span style="color: green"]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum, odio et pharetra egestas, ipsum quam sodales leo, eget mattis nisi diam a sapien. In orci velit, sodales id tellus ut, congue rutrum lacus. Maecenas consectetur, justo tincidunt imperdiet pretium, magna velit accumsan ligula, eget fermentum augue lacus at neque. Donec aliquet fringilla erat sed sodales. Aenean eros quam, imperdiet a pellentesque vel, dignissim quis purus. Curabitur sit amet tellus nibh. Maecenas aliquam interdum cursus. Sed viverra est vitae efficitur aliquet.

[[/span]]
[[/div]]

Jak widać, bardzo ładnie to wygląda. Niestety to tylko wygląd, po jakiejś dobrze wyglądającej sekcji spodziewamy się solidnej i ciekawej treści. Nie zmieni to w żaden sposób nawet najgorszej pracy.

Więcej użytecznych przycisków już nie ma. Jednak to nie koniec, wiele efektów także przysługujących się przy tworzeniu prac nie jest zawarte w Panelu Edycji.

Zaczniemy od najprostszej rzeczy, pewnie też wiele osobom się spodoba. Jest to kolorowa czcionka. Przypomnijmy sobie w jaki sposób formatowaliśmy tekst. Jest to na prawie tej samej zasadzie, używamy tu znaku kratki # , który stawiamy na początku i na końcu podwójnie. Na tym kończy się podobieństwo. Po pierwszej frazie podwójnej kratki musimy wpisać kolor, jakiego chcemy użyć. Możemy posłużyć się prostym wpisywaniem angielskiej nazwy koloru np. red, lub wpisując jego kod. Polecam użyć tej strony: http://html-color-codes.info , po wybraniu danego koloru otrzymujemy jego kod html, który używamy w ww. module. Po nazwie bądź kodzie używamy pionowej linii |, po czym piszemy swój tekst. Po zakończeniu akapitu wpisujemy od razu bez spacji ponownie dwie kratki. Wygląda to tak:

Czerwony

Czyli:

##red|Czerwony##

Kod ten jest prosty lecz działa tylko na jeden akapit. Po zastosowaniu entera wszystko nam się zepsuje. Dlatego przy bardziej złożonych frazach aby nie wpisywać ciągle jednego kodu, używamy modułu span, który ukazałem przy jednym z przykładów diva.

Dla przykładu:


Zielone

Zielone

Czyli:

[[span style="color: green"]]
Zielone

Zielone
[[/span]]

Moduł span można także używać dla innych rzecz, np. zmiany czcionki, lecz nie będę tego omawiał.

Następna rzecz to zakładki. Nie jest to używane często w raportach lecz jest jak najbardziej pomocne przy tworzeniu sandboxów, aby nie spamić 10 sandboxami dla pojedynczych prac. Wygląda to tak:

Czyli:

[[tabview]]
[[tab Tytuł Pierwszej Zakładki]]
Tekst
[[/tab]]
[[tab Tytuł Drugiej Zakładki]]
Tekst
[[/tab]]
[[/tabview]]

Każda zakładka zaczyna się modułem z nazwą, czyli jak wyżej [[tab Tytuł Pierwszej Zakładki]]. Kończy się formułą [[/tab]]. Aby utworzyć następną zakładkę, ponownie wpisujemy moduł tytułu i zamykamy go podaną formułą. I robimy tak ile potrzebujemy.

Kolejna rzecz to coś bardzo rzadko używanego, ale dosyć ładnie wyglądającego. Wiemy jak wygląda linkowanie do jakiejś strony. Jest czerwone. A może by tak… zmienić kolor? Jak najbardziej to możliwe, z tym że musimy użyć specjalnej formuły:

[[a href="adres strony" style="color:kod koloru"]]Nazwa linku[[/a]]

Dla przykładu zrobię fioletowy odnośnik do strony głównej sandboxa:

Link do sandboxa

Czyli:

[[a href="http://scpsandbox-pl.wikidot.com/main" style="color:purple"]]Link do sandboxa[[/a]]

No i fajnie.

Kolejną rzeczą będzie zmienianie rozmiaru tekstu. Nagłówki robią to, jednakże nie są tak praktyczne jak to. Używamy modułu size… yyy znowu moduł… Zdziwicie się jaki on jest prosty :P

W podwójnym nawiasie kwadratowym piszemy najpierw size a potem liczna i procent. Zamykamy nawias i tyle. Moduł kończymy frazą [[/size]]. Dla przykładu:

Ale wielkie

Czyli:

[[size 130%]] Ale wielkie [[/size]]

Nic trudnego prawda? Kiedyś pomyliłem się i zamiast 160% wpisałem 1600%. Nie pytajcie.

Następną omawianą rzeczą będzie chowanie tekstu za pomocą modułu collapsible.

Moduł ten można kształtować na wiele sposobów, jednak najczęściej używany jest ten ze zdefiniowaną nazwą otwarcia i zamknięcia. Dla przykładu:

Czyli:

[[collapsible show="Otwórz" hide="Zamknij"]]
Tekst
[[/collapsible]]

Jeżeli moduł będzie bez jakichkolwiek definicji, czyli tylko collapsible bez niczego, uzyskamy taki efekt domyślny:

Czyli:

[[collapsible]]
Tekst
[[/collapsible]]

Kolejnym przydatnym narzędziem będzie funkcja wyrównywania tekstu: do prawej, do środka oraz do lewej.

Jest to na tej samej zasadzie co moduły, wygląda następująco:

Do lewej

Do środka

Do prawej

Czyli:

[[<]]
Do lewej
[[/<]]

[[=]]
Do środka
[[/=]]

[[>]]
Do prawej
[[/>]]

Nie będę opowiadał szczegółowo o co tu chodzi, jest to jeszcze prostsze niż rozmiar tekstu. należy pamiętać aby znaki większości i mniejszości pełniły funkcję ''strzałki'' w którą stronę ma zostać wyrównany tekst. Wyśrodkowanie przebiega za pomocą znaku równości = .

Dobrze. Ostatnią więc rzeczą jaką pokażę jest kod użytkownika: tworzy to podgląd danego konta znajdującego się na Wikidocie. Kod ma dwie wersje: sam nick oraz nick z paskiem karmy oraz avatarem. Zacznę od pierwszego:

Dr_Blackpeace

Czyli:

[[user Dr_Blackpeace]]

A drugie:

Dr_BlackpeaceDr_Blackpeace

Czyli:

[[*user Dr_Blackpeace]]

Widzicie jak to robić, wszystko różni się jedynie gwiazdką pod frazą ''user''. Należy pamiętać aby dokładnie wpisywać nazwę użytkownika, uwzględniając spację. Funkcja dobra na forum gdzie możemy wspomnieć o kimś.

No to by było na tyle z tej lekcji. Poznaliście wiele ciekawych i użytecznych rzeczy, zachęcam do eksperymentowania na waszych sandboxach!


Lekcja 4: Pozostałe kody Panelu Edycji.

Ostatnia lekcja nie będzie zbyt użyteczna. Poświęcona jest ona pozostałym pozycją z Panelu Edycji, których się albo nie używa w ogóle albo są stosowane przez administrację/bardzo prawie że nigdy używane w bardzo rozbudowanych pracach.

Tabelka%20edycji%20-%204.png

Na żółto zaznaczyłem omawiane pozycje.

Pierwsza pozycja to bloczek z 2 rzędu 3 kolumny, czyli wyczyść elementy pływające. Dzieli się na funkcję ''oba'', ''lewy'', ''prawy''. W kodzie wygląda to tak:

~~~~

~~~~<

~~~~>

W zasadzie widziałem podobne rzeczy na stronie głównej, więc służy do tego aby strona posiadająca wiele modułów oraz bloków się nie psuła.

Następna rzecz to ''spis treści'', pozycja z rzędu 2 kolumny 5. Podstawowo wygląda tak:

[[toc]]

Jeżeli użyjemy tej funkcji, nasza strona zostanie wyposażona w ramkę o nazwie ''spis treści''. Będą w niej znajdować się odnośniki do wszelkich nagłówków znajdujących się w raporcie. Nagłówki w spisie treści będą delikatnie i odpowiednio przesunięte w zależności od poziomu nagłówka. Jeżeli jednak nie chcemy aby nagłówek znalazł się w spisie treści mimo że jest on stosowany, musimy po plusach użyć gwiazdki np. +* Tekst. Użyłem tego na potrzeby poradnika.

Spis treści możemy umieścić po prawej lub po lewej. Musimy wtedy użyć następującego kodu:

Dla strony lewej:

[[f<toc]]

I dla prawej:

[[f>toc]]

Następne co mamy wcale nie jest takie bezużyteczne, chodzi o pozycję z 2 rzędu 6 kolumny. Ja dla przykładu użyłem tego wiele razy w tym poradniku. Wspomniany na początku ''moduł kodu'' działa podobnie co raw text, jednak wszystko wpisuje w ramkę przypominającą tę od cytatu z tą różnicą iż ta posiada suwak na spodzie.

Przykładem są wszelkie kody zamieszczone na podgląd, a sam blok kodu w kodzie wygląda tak:

[[code]]
insert the code here
[[/code]]

Przydatne jeżeli chcecie podzielić się z kimś na forum jakimś kodem.

Sąsiedni blok czyli pozycja z 2 rzędu 7 kolumny zwie się ''asystent bloku kodu''. Można się tu pobawić ze wszelkimi kodami używanymi w programowaniu. Ja się na tym osobiście nie znam, jeżeli jest tu ktoś kto to ogarnia będzie miał pole do popisu.

Kolejne pozycje to sąsiedzi z 3 rzędu, 3 i 4 kolumny. Zwiększ oraz zmniejsz wcięcie. Nie wiem naprawdę do czego to służy, po kliknięciu w to nic się nie dzieje. Nie zagłębiałem się nigdy w ten kod.

Następny bloczek to 3 rząd 5 kolumna. Lista definicji. Też nie wiem do czego służy. W kodzie wygląda tak:

: item : definition

Kolejne bloczki to pozycje z 3 rzędu 7 i 8 kolumny, czyli kolejni ''wyrażenie matematyczne'' i ''liniowe wyrażenie matematyczne''. Jeżeli ktoś chce wpisać jakieś trudne do utworzenia równanie (matematyka to nie tylko plus minus) np. różniczkowanie albo coś podobnego, używa się takich oto kodów. W raportach jest to nieużywane ze względu na to że istnieje nikła szansa wymyślenia nowego równania matematycznego dla raportu. Jeżeli ktoś takie coś stworzy chwała mu za to.

Kolejny bloczek to pozycja z 3 rzędu 9 kolumny. Coś o nazwie ''equation reference''. Po naciśnięciu wyskakuje error. Tak.

Następnie mamy pozycję z 3 rzędu 10 kolumny. ''Blok bibliografii'' stworzony na potrzeby jak wspomniałem tworzenia stron typu Wiki. Chyba każda strona na Wikipedii ma bibliografię, więc nie muszę tłumaczyć jak to działa. W kodzie wygląda następująco:

[[bibliography]]
: insert the code here : full source reference
[[/bibliography]]

Następnie mamy ''cytat bibliografii''. Cytuje nam to frazę z bibliografii w miejscu gdzie wstawimy ten kod. W zasadzie bibliografia działa na podobnej zasadzie co załączniki, z tym że w tym przypadku to my ustalamy kolejność i nazwę załącznika.

Kod:

[((bibcite label))]

Tym oto sposobem doszliśmy do końca tego niezmiernie długiego poradnika. Mam nadzieję że czas który spędziłeś/spędziłaś na jego zgłębianiu zaowocuje polepszeniem wiedzy o kodzie Wikidotu oraz wykorzystaniu go w praktyce.

Jeżeli masz jakieś pytania, napisz do mnie Dr_BlackpeaceDr_Blackpeace, autora niniejszego poradnika. Jeżeli interesujesz się bardziej kodowaniem Wikidotu, polecam udać się do użytkownika Mefioo9Mefioo9 który specjalizuje się w tej dziedzinie.

Poradnik może zostać zedytowany o nowe informacje jeżeli tylko któryś użytkownik poprosi o taką czynność.

Mi nie pozostało nic innego jak życzyć powodzenia w tworzeniu prac, jak wspomniałem również zachęcam do bawienia się kodowaniem oraz przeglądaniem stron zawierających takie aby poznać sposoby w jakie dane efekty zostały stworzone. Wszystko tu opiera się na kodzie.

To tyle. Powodzenia! ;)


Poradnik pochodzi ze strony Kod Wikidotu - poradnik umieszczonego samodzielnie na stronie Sandbox SCP-PL II.

O ile nie zaznaczono inaczej, treść tej strony objęta jest licencją Uznanie autorstwa — na tych samych warunkach 3.0 unported