Jak wstawiać noty boczne

Jak wstawiać noty boczne

NAJEDŹ NA MNIE MYSZKĄ, JEŚLI UŻYWASZ KOMPUTERA

ŁOOO, JESTEM NOTĄ BOCZNĄ

Celem tej podstrony jest wyjaśnienie, jak wstawiać noty boczne.

Noty boczne istnieją w kilku wariantach. Jeden zawiera tylko tekst, jeden — tylko obrazek, a jeden — i to, i to.

TYLKO TEKST

[[include component:sidenote
contents=ZAWARTOŚĆ|
figure=TEKST ZEWNĘTRZNY
]]

TYLKO OBRAZEK

[[include component:sidenote
figure=TEKST ZEWNĘTRZNY|
name=NAZWA|
type=image
]]

TEKST I OBRAZEK

[[include component:sidenote
contents=ZAWARTOŚĆ|
figure=TEKST ZEWNĘTRZNY|
name=NAZWA|
type=both
]]

Zamień ZAWARTOŚĆ na tekst, jaki ma się znaleźć w środku noty.
Zamień TEKST ZEWNĘTRZNY na tekst, jaki ma się znaleźć w tytule noty.
Zamień NAZWA na URL obrazka.

Muszę nadmienić, że kiedy wstawisz na daną podstronę notę boczną, to w podglądzie ta nota będzie się wydawała nie działać. Jeżeli jednak wstawiona została poprawnie, będzie wyglądać należycie po zapisaniu podstrony.

Ponadto możesz zdecydować, w którym miejscu podstrony nota ma się wyświetlać.

POŚRODKU

[[include component:sidenote
contents=ZAWARTOŚĆ|
figure=TEKST ZEWNĘTRZNY|
align=center
]]

PO LEWEJ STRONIE

[[include component:sidenote
contents=ZAWARTOŚĆ|
figure=TEKST ZEWNĘTRZNY|
align=left
]]

wow, jestem pośrodku

nieźle

och, a tu mamy obrazek

{$contents}

Jeśli z jakiegoś dziwnego powodu chcesz, by nota boczna była zawsze rozwinięta, możesz zrobić coś takiego.

ZAWSZE ROZWINIĘTA

[[include component:sidenote
contents=ZAWARTOŚĆ|
figure=TEKST ZEWNĘTRZNY|
lock=true
]]

Kod do stylizacji not bocznych na podstronach szablonów i innych.

:root {
--sidenote-open-background: #1c2431;
--sidenote-closed-background: var(--content-bar-background);
--sidenote-box-shadow: var(--content-box-shadow);
--sidenote-background: var(--primary-background);
--sidenote-contents-border: 1px dashed #333;
--sidenote-figure-border: 1px solid #333;
--sidenote-contents-open-color: var(--text-color);
--sidenote-figure-open-color: var(--text-color);
--sidenote-contents-closed-color: var(--text-color);
--sidenote-figure-closed-color: var(--text-color);
}