Przewodnik po BBCode

Wprowadzenie

Co to jest BBCode?
BBCode jest specjalną implementacją języka HTML, która daje lepszą kontrolę formatowania poszczególnych elementów w postach. Używanie BBCode na forum jest uzależnione od ustawień określanych przez administratora. Można wyłączyć BBCode w poszczególnych postach, zaznaczając odpowiednią funkcję w formularzu tworzenia posta. Sam BBCode jest podobny w składni do języka HTML, ale znaczniki zawarte są w nawiasach kwadratowych [przykład] zamiast w używanych w HTML-u nawiasach ostrych <przykład>. Każdy znacznik składa się ze znacznika otwierającego [nazwa_znacznika] i zamykającego [/nazwa_znacznika], np. [b][/b]. Zależnie od używanego szablonu można w bardzo łatwy sposób dodawać znaczniki BBCode do postów, używając odpowiednich przycisków znajdujących się na górze formularza tworzenia posta.
Na górę

Formatowanie tekstu

Jak utworzyć pogrubiony, pochylony lub podkreślony tekst?
BBCode zawiera znaczniki umożliwiające szybką zmianę podstawowego wyglądu tekstu. Można to uzyskać w następujący sposób:
  • Aby pogrubić jakiś tekst, należy wstawić go pomiędzy znaczniki [b][/b]. Przykład:

    [b]Tekst[/b]

    będzie wyświetlany jako Tekst
  • Aby pochylić jakiś tekst, należy wstawić go pomiędzy znaczniki [i][/i]. Przykład:

    [i]Tekst[/i]

    będzie wyświetlany jako Tekst
  • Aby podkreślić jakiś tekst, należy wstawić go pomiędzy znaczniki [u][/u]. Przykład:

    [u]Tekst[/u]

    będzie wyświetlany jako Tekst.
Na górę
Jak zmienić kolor lub rozmiar tekstu?
Aby zmienić kolor lub rozmiar tekstu można użyć znaczników wymienionych poniżej. Końcowy rezultat użycia znaczników formatujących zależy od używanej przeglądarki i systemu operacyjnego.
  • Zmianę koloru tekstu można uzyskać poprzez zawarcie tekstu pomiędzy znacznikami [color=] [/color]. Po znaku = należy podać nazwę koloru, np. red, blue, yellow, albo wartość szesnastkową, np. #FFFFFF, #000000. Przykładowo, aby uzyskać tekst w kolorze czerwonym, należy użyć kodu:

    [color=red]kolorze czerwonym[/color]

    albo

    [color=#FF0000]kolorze czerwonym[/color]

  • Zmianę rozmiaru tekstu można uzyskać podobnie, jak i w przypadku koloru poprzez zawarcie tekstu pomiędzy znacznikami [size=] [/size]. Ten znacznik jest uzależniony od używanego szablonu, niemniej zalecanym formatem jest wartość liczbowa wyrażona w procentach, określająca rozmiar tekstu począwszy od wartości 20 – bardzo mały, aż do 200 – bardzo duży. Na przykład, aby uzyskać:

    mały rozmiar tekstu należy użyć kodu [size=30]mały rozmiar tekstu[/size].

    Natomiast, aby uzyskać:

    duży rozmiar tekstu, należy użyć kodu [size=200]duży rozmiar tekstu[/size].
Na górę
Czy można łączyć znaczniki formatujące?
Tak, naturalnie, że można. Na przykład, aby zwrócić czyjąś uwagę, można napisać:

[size=200][color=red][b]POPATRZ NA MNIE![/b][/color][/size].

Tak napisany kod zostanie wyświetlony następująco:

POPATRZ NA MNIE!

Nie zaleca się nadużywania w tekście tego typu formatowania. Proszę pamiętać o prawidłowym domykaniu znaczników – zachowaniu poprawnej ich kolejności. Na przykład następujący kod jest nieprawidłowy:

[b][u]Tekst[/b][/u].

Po słowie Tekst powinien zostać użyty znacznik zamykający [/u] Prawidłowa konstrukcja tego kodu powinna wyglądać następująco:

[b][u]Tekst[/u][/b]
Na górę

Cytowanie i wstawianie tekstu o stałej szerokości znaków

Cytowanie tekstu w odpowiedziach
Są dwa sposoby cytowania tekstu – z odwołaniem i bez.
  • Cytując tekst podczas odpowiedzi na post, tekst posta jest dołączany do odpowiedzi w postaci bloku zawartego pomiędzy znacznikami [quote=" "][/quote]. Ta metoda umożliwia cytowanie z podaniem odwołania do autora posta lub innego dowolnego źródła. Na przykład, aby zacytować kawałek tekstu napisanego przez użytkownika o identyfikatorze „Adam”, należy napisać:

    [quote="Adam"]Tekst, który napisał Adam[/quote]

    Wynikiem tego będzie wyświetlanie przed cytowanym tekstem frazy “Adam pisze:. Należy obowiązkowo wstawić znaki cytowania (" ") wokół cytowanej nazwy źródła. W tym przypadku cytowanym źródłem jest „Adam”.
  • Druga metoda pozwala cytować tekst bez podawania źródła. Aby jej użyć, należy cytowany tekst umieścić między znacznikami [quote] i [/quote]. Wynikiem tak użytych znaczników cytowania będzie wyświetlanie przed cytowanym tekstem znaku .
Na górę
Wstawianie kodu lub tekstu o stałej szerokości znaków
Jeśli zachodzi potrzeba wstawienia do posta kawałka kodu lub cokolwiek, co wymaga stałej szerokości znaków, należy użyć znacznika [code][/code]. Przykład:

[code]echo "Oto jakiś kod";[/code]

Żadne znaki formatowania użyte między znacznikami [code] i [/code] nie będą przetwarzane podczas wyświetlania i zostaną wyświetlone w oryginalnej formie.
Na górę

Tworzenie list

Tworzenie listy wypunktowanej
BBCode umożliwia tworzenie dwóch rodzajów list: wypunktowanej i rozmieszczonej hierarchicznie. Są one w zasadzie takie same, jak ich odpowiedniki w języku HTML. Lista wypunktowana przedstawia kolejne pozycje jedna po drugiej, oznaczając każdą znakiem wypunktowania w formie kropki. Aby utworzyć listę wypunktowaną, należy użyć znacznika [list][/list] i oznaczyć każdą pozycję za pomocą znacznika [*]. Przykładowo, aby utworzyć listę ulubionych kolorów:

  • Czerwony
  • Niebieski
  • Żółty
należy zastosować następujący kod:

[list]
[*]Czerwony
[*]Niebieski
[*]Żółty
[/list]

Możesz również zmienić styl listy wypunktowanej używając [list=disc][/list], [list=circle][/list] lub [list=square][/list].
Na górę
Tworzenie listy rozmieszczonej hierarchicznie
Drugi typ list – rozmieszczona hierarchicznie, umożliwia kontrolę nad tym, co jest wyświetlane przed każdym elementem. Aby utworzyć listę numerowaną, należy użyć znacznika [list=1][/list], listę alfabetyczną – [list=a][/list]. Podobnie, jak w liście wypunktowanej poszczególne elementy listy są oznaczane znacznikiem [*]. Na przykład, aby utworzyć listę numerowaną:

  1. Idź do sklepu
  2. Kup nowy komputer
  3. Przeklnij go, gdy się zawiesi
należy zastosować następujący kod:

[list=1]
[*]Idź do sklepu
[*]Kup nowy komputer
[*]Przeklnij go, gdy się zawiesi
[/list]

Aby utworzyć listę alfabetyczną:

  1. Pierwsza odpowiedź
  2. Druga odpowiedź
  3. Trzecia odpowiedź
należy zastosować następujący kod:

[list=a]
[*]Pierwsza odpowiedź
[*]Druga odpowiedź
[*]Trzecia odpowiedź
[/list]

lub
  1. Pierwsza odpowiedź
  2. Druga odpowiedź
  3. Trzecia odpowiedź
należy zastosować następujący kod:

[list=A]
[*]Pierwsza odpowiedź
[*]Druga odpowiedź
[*]Trzecia odpowiedź
[/list]

Możesz również utworzyć listę:

  1. Pierwsza odpowiedź
  2. Druga odpowiedź
  3. Trzecia odpowiedź
należy zastosować następujący kod:

[list=i]
[*]Pierwsza odpowiedź
[*]Druga odpowiedź
[*]Trzecia odpowiedź
[/list]

lub
  1. Pierwsza odpowiedź
  2. Druga odpowiedź
  3. Trzecia odpowiedź
należy zastosować następujący kod:

[list=I]
[*]Pierwsza odpowiedź
[*]Druga odpowiedź
[*]Trzecia odpowiedź
[/list]

Na górę

Tworzenie odnośników

Odnośniki do innych stron
BBCode stosowany w phpBB umożliwia tworzenie URI (Uniform Resource Indicators), znanych też pod nazwą adresów URL oraz adresów www, na kilka różnych sposobów.
  • Pierwszy z nich wykorzystuje znacznik [url=][/url]. Wszystko, co zostanie wprowadzone za znakiem = zostanie uznane za adres URL. Na przykład, aby wstawić odnośnik do phpBB.com, gdzie opisem odnośnika będzie Odwiedź phpBB! należy użyć kodu:

    [url=http://www.phpbb.com]Odwiedź phpBB![/url].

    Odnośnik ten będzie otwierał się w tym samym lub nowym oknie – zależnie od ustawień przeglądarki użytkownika.
  • Jeżeli sam adres URL ma być wyświetlany jako opis odnośnika, należy użyć takiej konstrukcji znacznika:

    [url]http://www.phpbb.com/[/url]

    Taki kod wygeneruje następujący odnośnik: http://www.phpbb.com/
  • Dodatkowo phpBB zawiera funkcję zwaną magiczne odnośniki, która zmienia syntaktycznie (składniowo) poprawny adres URL na odnośnik, bez potrzeby dodawania jakichkolwiek znaczników lub nawet dopisywania na początku oznaczenia protokółu http://. Na przykład wpisanie www.phpbb.com w treści, zostanie automatycznie poprzedzone http:// i stanie się odnośnikiem www.phpbb.com podczas wyświetlania posta czy prywatnej wiadomości.
  • Podobnie jest z adresami e-mail. Można użyć znacznika BBCode [email][/email]. Adres e-mail zapisany w postaci

    [email]email@domena.pl[/email]

    będzie wyświetlany jako basia@domena.adr. Można także po prostu wpisać email@domena.pl. Adres ten podczas wyświetlania posta, czy prywatnej wiadomości, jeśli nie jest wyłączona funkcja magicznych odnośników, zostanie automatycznie zamieniony, tak jak w przypadku adresów URL, na odnośnik.
Adresy URL można wstawiać także do innych znaczników BBCode, takich jak [img][/img], [b][/b], itp. Zawsze należy pamiętać, aby prawidłowo otwierać i zamykać – zachować właściwą kolejność – znaczniki. Na przykład taka konstrukcja znaczników:

[url=http://www.phpbb.com/][img]http://www.phpbb.com/theme/images/logos/blue/160x52.png[/url][/img]

jest nieprawidłowa i może spowodować usunięcie posta, zatem należy zachować ostrożność i uważnie wstawiać znaczniki.
Na górę

Wstawianie obrazków i załączników

Wstawianie obrazków do posta
BBCode używane w phpBB zawiera znacznik umożliwiający wstawianie obrazków do postów. Należy jednak pamiętać o dwóch istotnych kwestiach: wielu użytkowników nie lubi wielu obrazków w postach oraz wstawiany obrazek musi być dostępny w internecie – nie może istnieć tylko na komputerze lokalnym, chyba że jest on serwerem. Aby wstawić obrazek, należy zawrzeć jego adres URL pomiędzy znacznikami [img] i [/img]. Na przykład:

[img]http://www.phpbb.com/theme/images/logos/blue/160x52.png[/img]

Jeśli obrazek ma być odnośnikiem do jakiejś strony, należy jego adres URL umieścić pomiędzy znacznikami [url] i [/url] w następujący sposób:

[url=http://www.phpbb.com/][img]http://www.phpbb.com/theme/images/logos/blue/160x52.png[/img][/url]

Tak przygotowany odnośnik może wyglądać tak:

Na górę
Wstawianie załączników do posta
Załączniki mogą być wstawiane do postów za pomocą znacznika [attachment=][/attachment]. Aby można go było używać, funkcja załączników na forum musi być włączona przez administratora witryny i użytkownicy muszą mieć odpowiednie uprawnienia. Na stronie tworzenia posta znajduje się etykieta „Dodaj załącznik” po kliknięciu, której otwiera się formularz dodawania załączników.
Na górę

Generating Spoilers

Adding a spoiler into a post
A basic spoiler consist in a text wrapped in [spoiler][/spoiler]. For example:

[spoiler]Details about the movie narrative[/spoiler]

This would generate:
Spoiler
Details about the movie narrative
Na górę
Adding a spoiler with title into a post
A spoiler can optionally show a custom title, to do so the text need to be wrapped in [spoiler title=][/spoiler]. For example:

[spoiler title=Plot summary]Details about the movie narrative[/spoiler]

This would generate:
Plot summary
Details about the movie narrative
Na górę

Osadzanie multimediów

Jak wyświetlić multimedia z innych stron na forum
Użytkownicy mogą wyświetlić zawartość z innych stron jak wideo lub muzyka poprzez znacznik [media][/media]. Należy wkleić adres URL pomiędzy znacznikami.

Na przykład: [media]https://youtu.be/QH2-TGUlwu4[/media]

Powyższy adres URL zostanie wyświetlony jak pokazano poniżej:

https://youtu.be/QH2-TGUlwu4

Na forum wspierane są strony:
abcnews, acast, amazon, anchor, applepodcasts, audioboom, audiomack, audius, bandcamp, bbcnews, bitchute, bleacherreport, brightcove, castos, cbsnews, clyp, cnbc, cnn, cnnmoney, codepen, comedycentral, coub, dailymotion, democracynow, dumpert, eighttracks, espn, facebook, falstad, flickr, foxnews, funnyordie, gamespot, getty, gfycat, gifs, giphy, gist, globalnews, gofundme, googledrive, googleplus, googlesheets, hudl, hulu, ign, imdb, imgur, indiegogo, instagram, internetarchive, izlesene, jsfiddle, jwplatform, kaltura, khl, kickstarter, libsyn, liveleak, livestream, mailru, medium, megaphone, metacafe, mixcloud, mlb, mrctv, msnbc, natgeochannel, natgeovideo, nbcnews, nbcsports, nhl, npr, nytimes, odysee, orfium, pastebin, pinterest, podbean, prezi, reddit, rumble, rutube, scribd, sendvid, slideshare, sporcle, sportsnet, spotify, spreaker, steamstore, stitcher, strawpoll, streamable, streamja, teamcoco, ted, telegram, theatlantic, theguardian, theonion, tiktok, tmz, tradingview, traileraddict, trendingviews, tumblr, twentyfoursevensports, twitch, twitter, ustream, vbox7, veoh, vevo, videodetective, vimeo, vine, vk, vocaroo, vox, washingtonpost, wavekit, wistia, wshh, wsj, xboxclips, xboxdvr, youku, youmaker, youtube.

Dokumentacja wraz z wszystkimi wspieranymi stronami i przykładami adresów URL znajduje się pod linkiem MediaEmbed Plugin Documentation.
Na górę

Różne

Czy można dodawać własne znaczniki?
Możliwość dodawania własnych znaczników mają administratorzy witryny posiadający odpowiednie uprawnienia.
Na górę

Advanced BBCode Box BBCodes

Rodzaj czcionki
[font=Comic Sans MS]tekst[/font]

Example:
[font=Comic Sans MS]The quick brown fox jumps over the lazy dog[/font]

Result:
The quick brown fox jumps over the lazy dog
Na górę
Wyróżnij tekst
[highlight=yellow]tekst[/highlight] Podpowiedź: możesz również opisać kolor HEXami

Example:
[highlight=yellow]The quick brown fox jumps over the lazy dog[/highlight]

Result:
The quick brown fox jumps over the lazy dog
Na górę
Wyrównaj tekst
[align=center|left|right|justify]tekst[/align]

Example:
[align=center]The quick brown fox jumps over the lazy dog[/align]

Result:
The quick brown fox jumps over the lazy dog

Na górę
Float tekst
[float=left|right]tekst[/float]

Example:
[float=right]The quick brown fox jumps over the lazy dog[/float]

Result:
The quick brown fox jumps over the lazy dog

Na górę
Przekreślenie tekstu
[s]tekst[/s]

Example:
[s]The quick brown fox jumps over the lazy dog[/s]

Result:
The quick brown fox jumps over the lazy dog
Na górę
Indeks dolny
[sub]tekst[/sub]

Example:
[sub]The quick brown fox jumps over the lazy dog[/sub] The quick brown fox jumps over the lazy dog

Result:
The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
Na górę
Indeks górny
[sup]tekst[/sup]

Example:
[sup]The quick brown fox jumps over the lazy dog[/sup] The quick brown fox jumps over the lazy dog

Result:
The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
Na górę
Poświata tekstu
[glow=color]tekst[/glow]

Example:
[glow=red]The quick brown fox jumps over the lazy dog[/glow]

Result:
The quick brown fox jumps over the lazy dog
Na górę
Tekst z miękkim cieniem
[shadow=kolor]tekst[/shadow]

Example:
[shadow=blue]The quick brown fox jumps over the lazy dog[/shadow]

Result:
The quick brown fox jumps over the lazy dog
Na górę
Tekst z twardym cieniem
[dropshadow=color]tekst[/dropshadow]

Example:
[dropshadow=blue]The quick brown fox jumps over the lazy dog[/dropshadow]

Result:
The quick brown fox jumps over the lazy dog
Na górę
Rozmycie tekstu
[blur=color]tekst[/blur]

Example:
[blur=blue]The quick brown fox jumps over the lazy dog[/blur]

Result:
The quick brown fox jumps over the lazy dog
Na górę
Pulsujący tekst
[fade]tekst[/fade]

Example:
[fade]The quick brown fox jumps over the lazy dog[/fade]

Result:
The quick brown fox jumps over the lazy dog
Na górę
Tekst preformatowany
[pre]tekst[/pre]

Example:
[pre]The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog[/pre]

Result:
The quick brown fox jumps over the lazy dog
	The quick brown fox jumps over the lazy dog

Na górę
Kierunek tekstu
[dir=ltr|rtl]tekst[/dir]

Example:
[dir=rtl]The quick brown fox jumps over the lazy dog[/dir]

Result:
The quick brown fox jumps over the lazy dog
Na górę
Pływający tekst
[marq=up|down|left|right]tekst[/marq]

Example:
[marq=left]The quick brown fox jumps over the lazy dog[/marq]

Result:
The quick brown fox jumps over the lazy dog

Na górę
Spoiler
[spoil]tekst[/spoil]

Example:
[spoil]The quick brown fox jumps over the lazy dog[/spoil]

Result:
► Pokaż Spoiler

Na górę
Ukryj tekst dla gośći
[hidden]tekst[/hidden]

Example:
[hidden]The quick brown fox jumps over the lazy dog[/hidden]

Result:
Ukryta zawartość
To forum wymaga zarejestrowania i zalogowania się, aby zobaczyć ukrytą zawartość.

Na górę
Wiadomość moderatora
[mod=username]tekst[/mod]

Example:
[mod=Nazwa użytkownika]The quick brown fox jumps over the lazy dog[/mod]

Result:
 ! Wiadomość z: Nazwa użytkownika
The quick brown fox jumps over the lazy dog

Na górę
Off Topic
[offtopic]tekst[/offtopic]

Example:
[offtopic]The quick brown fox jumps over the lazy dog[/offtopic]

Result:
Off Topic
The quick brown fox jumps over the lazy dog

Na górę
Informacja NFO
[nfo]NFO tekst[/nfo]

Example:
[nfo]༼ つ ◕_◕ ༽つ ʕ•ᴥ•ʔ ¯\_(ツ)_/¯[/nfo]

Result:
༼ つ ◕_◕ ༽つ    ʕ•ᴥ•ʔ   ¯\_(ツ)_/¯

Na górę
Osadź dowolny plik wideo
[bbvideo]http://video_url[/bbvideo]

Example:
[bbvideo]http://www.youtube.com/watch?v=sP4NMoJcFd4[/bbvideo]

Result:
[bbvideo]http://www.youtube.com/watch?v=sP4NMoJcFd4[/bbvideo]
Na górę