Шорткод toggle

Вот пример шорткода для раскрывающегося текста в Hugo. Создайте файл toggle.html в папке layouts/shortcodes/:

<div class="toggle" style="text-align: center;">
    <button class="toggle-button" 
            onclick="this.nextElementSibling.classList.toggle('show');" 
            style="background-color: {{ .Get "buttonColor" }}; border: none; cursor: pointer; padding: 5px 10px; border-radius: 4px; transition: all 0.3s;">
        <span style="color: #479F76;">{{ .Get "title" }}</span>
    </button>
    <div class="toggle-content" style="text-align: left;">
        {{ .Inner | markdownify }}
    </div>
</div>

<style>
.toggle-content {
    display: none;
}
.toggle-content.show {
    display: block;
}
.toggle-button {
    color: #479F76; /* Цвет текста кнопки */
}
.toggle-button:hover {
    background-color: {{ .Get "hoverButtonColor" }}; /* Цвет кнопки при наведении */
    color: white; /* Цвет текста при наведении */
}
</style>

Использование шорткода

Теперь вы можете использовать этот шорткод в своих Markdown-файлах:

{{&lt; toggle title="Подробнее" buttonColor="#33" hoverButtonColor="#B3B8BC" &gt;}}
**Здесь** находится _дополнительное_ описание.
{{&lt;/toggle&gt;}}

Для применения удалить экранирующие символы исполнения кода &lt; и &gt;

Параметры

  • buttonColor: цвет кнопки (например, #33).
  • hoverButtonColor: цвет кнопки при наведении (например, #B3B8BC).

Примечание

Этот шорткод использует простой JavaScript для раскрытия текста. Убедитесь, что ваш сайт поддерживает выполнение JavaScript.

Пример как это будет выглядеть

Здесь находится дополнительное описание, которое будет раскрыто при нажатии на кнопку.