27.06.2022, 22:58
1 Wstęp
Tag
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
Następnie w formularzu podajemy nazwę np.
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
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
.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: