Spoiler Block w postach [MyCode]

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 administratora → Konfiguracja → MyCode → Nowy MyCode.
Następnie w formularzu podajemy nazwę np. Spoiler, wyrażenie regularne:

\[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 administratora → Style 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: