клонировать репозиторий и перейти в каталог:
git clone [email protected]:YuriyGrinev/examples-htmx.git && cd examples-htmx
- python3
- pdm
Установить через pdm все продакш зависимости:
pdm install --prod
Перейти в каталог src и запустить проект:
cd src
pdm run uvicorn main:app --reload --host 0.0.0.0
htmx - JS-библиотека, которая позволяет получать доступ к современным функциям браузера, не используя при этом написание функций непосредственно на JavaScript
Для использования HTMX необходимо скачать подключить библиотеку в основной шаблон:
<script src="/path/to/htmx.min.js"></script>
или подключить, используя загрузку через CDN:
<script src="https://unpkg.com/[email protected]" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script>
<style>
#quote.htmx-added {
opacity: 0;
}
#quote {
opacity: 1;
transition: opacity 1s ease-out;
}
</style>
<div
id="quote"
hx-get="/quote"
hx-trigger="click, every 5s"
hx-swap="outerHTML settle:1s"
hx-target="#quote">
{{ quote.text }}
</div>
Разберем код, представленный выше. Представим, что нам нужно обновлять какой-то блок контента (например известные цитаты известных людей) на странице автоматически и/или по клику на него мышкой.
hx-get="/quote"
- позволяет выполнить GET-запрос на указанный URLhx-trigger="click, every 5s"
- указывает триггер, на который будет реагировать этот элемент. Здесь реакция на клик мышкой и автоматическая активация каждые 5 секундhx-swap="outerHTML settle:1s"
- описывает стратегию замены. outerHTML заменяет весь целевой элемент возвращенным содержимым. Дополнительно мы можем управлять анимаций замены, описывая дополнительные CSShx-target="#quote"
- указывает на id целевого элемета для замены