Toolverse
All skills

templ-htmx

by Xe

Build interactive hypermedia-driven applications with templ and HTMX. Use when creating dynamic UIs, real-time updates, AJAX interactions, mentions 'HTMX', 'dynamic content', or 'interactive templ app'.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
Xe
Category
Frontend
Views
11

About this skill

Build interactive hypermedia-driven applications with templ and HTMX. Use when creating dynamic UIs, real-time updates, AJAX interactions, mentions 'HTMX', 'dynamic content', or 'interactive templ app'.

How to use

  1. Zaimportuj pakiet htmx w swoim projekcie Go i dodaj go do multipleksera HTTP. Użyj funkcji htmx.Mount(), aby zamontować statyczne pliki HTMX na ścieżce /.within.website/x/htmx/.

  2. W komponencie templ odpowiedzialnym za layout strony (np. Layout) dodaj @htmx.Use() w sekcji . Ta funkcja załaduje bibliotekę HTMX na każdej stronie.

  3. Jeśli potrzebujesz rozszerzeń HTMX (na przykład do obsługi Server-Sent Events, parametrów ścieżki lub WebSocketów), przekaż ich nazwy jako argumenty do htmx.Use(), np. @htmx.Use("sse", "path-params").

  4. W handlerach HTTP użyj funkcji htmx.Is(r), aby sprawdzić, czy żądanie pochodzi od HTMX. Pozwala to na warunkowe zwracanie pełnej strony lub tylko fragmentu HTML-a.

  5. Definiuj interaktywne elementy w szablonach templ, używając atrybutów HTMX takich jak hx-get, hx-post czy hx-trigger, aby wyzwalać żądania bez pełnego odświeżenia strony.

  6. Testuj przepływ: użytkownik wchodzi na stronę, HTMX się ładuje, a następnie interakcje (kliknięcia, submity formularzy) wysyłają żądania do serwera, który zwraca fragmenty HTML zamiast JSON.

Related skills