Webboard

Pełna wersja: Spoiler Block w postach [MyCode]
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

1 Wstęp


Tag [spoiler] służy do ukrywania zawartości postu lub jego części i zmusza użytkowników do dodatkowej interakcji, aby ją wyświetlić. Jest to funkcja bardzo często wykorzystywana do ukrywania zestawu linków, lub zbyt dużych obrazków.

Treść jest ukrywana jedynie przed oczami użytkowników. Boty nadal są w stanie indeksować tę zawartość jeśli pozwalają na to inne ustawienia forum.
 

2 Nowy MyCode


Aby dodać nowy tag, przechodzimy do Panel administratoraKonfiguracja → MyCode → Nowy MyCode.
Następnie w formularzu podajemy nazwę np. Spoiler, wyrażenie regularne:
Kod:
\[spoiler\](.*?)\[/spoiler\]

oraz Zamianę:

<div class="spoiler codeblock">
    <div class="spoiler-title">
        <input class="button" type="button" value="Spoiler (otwórz)" onclick="if (this.parentNode.parentNode.querySelector('[data-spoiler-content]').style.display != '') {this.parentNode.parentNode.querySelector('[data-spoiler-content]').style.display = ''; this.innerText = ''; this.value = 'Spoiler (ukryj)'; } else { this.parentNode.parentNode.querySelector('[data-spoiler-content]').style.display = 'none'; this.innerText = ''; this.value = 'Spoiler (otwórz)'; }" />
    </div>
    <div class="spoiler-content" style="display: none;" data-spoiler-content>$1</div>
</div>

Upewniamy się, że opcja Włączony jest ustawiona na Tak i zapisujemy. Już teraz tag [spoiler]...[/spoiler] powinien działać w postach bez problemu.

3 Stylowanie


Najszybszym sposobem będzie wykorzystanie istniejących klas. Możesz użyć narzędzia "Zbadaj element", by sprawdzić, jakie klasy mają przyciski w Twoim szablonie. Następnie możesz ich użyć w powyższym kodzie w tagu input. Analogicznie jest z resztą elementów. 

Inną opcją jest własny kod CSS który należy umieścić w Panel administratoraStyle i szablony → Twój styl → showthread.css lub innym pliku dedykowanym postom / widokowi wątku. Oto przykładowy kod CSS dla tego spoilera:


.spoiler {
    padding: 8px;
    margin: 8px 0;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #f1f3f4;
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.spoiler .button {
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    background: #f1f3f4;
    transition: background 75ms;
}

.spoiler .button:hover {
    background: #e3e8eb;
}

.spoiler-content {
    border-top: 1px solid #f1f3f4;
    padding: 12px;
    margin-top: 8px;
}
 

4 Efekt końcowy


Tak oto prezentuje się nasz nowy MyCode z przykładowym kodem CSS: