Tengo una aplicación con encabezado y pie de página fijos (es importante que no se vuelvan a cargar cuando navegamos por las páginas). Yo uso HTMX. El atributo hx-push-url permite tener un historial de navegación a través de las páginas: podemos usar los botones "atrás" y "adelante", y funciona como se esperaba:
index.html :
<style> #header { background-color: yellow; height: 20%; } #container { background-color: gray; height: 60%; } #footer { background-color: yellow; height: 20%; } </style> <script src="https://unpkg.com/htmx.org@1.7.0"></script> <div id="header">This is the header</div> <div id="container"> This is the main container <button hx-get="newpage1" hx-target="#container" hx-swap="outerHTML" hx-push-url="true">Go to newpage1</button> </div> <div id="footer">This is the footer</div> newpage1 :
<div id="container">Hello <button hx-get="newpage2" hx-target="#container" hx-swap="outerHTML" hx-push-url="true">Go to newpage2</button> </div> newpage2 :
<div id="container">Test</div> Después de hacer clic en el botón "Ir a nueva página1", el div del contenedor se reemplaza por el contenido de newpage1 como se esperaba y la URL del navegador ahora es http://127.0.0.1/newpage1 .
Problema: si ingresamos esta URL directamente en el navegador, no tendremos la página completa, sino solo el contenedor <div id="container">...</div> .
¿Cuál es la solución HTMX común a este problema cuando construimos una aplicación de una sola página?
En el lado del servidor, verifique los encabezados de solicitud para el encabezado de solicitud HX y, si existe, simplemente envíe su parte, de lo contrario, envíe la página completa.
Si está utilizando Django en el lado del servidor, este método se explica paso a paso en esta parte de un artículo de blog:
El problema con lo anterior es que si un usuario recarga manualmente el token o la página de soporte, solo terminará con el fragmento HTML en lugar de la página HTML completa. La solución, en el lado de Django, es renderizar 2 plantillas diferentes dependiendo de si la solicitud proviene de htmx o no. Así es como podrías hacerlo. En su views.py, debe verificar si el encabezado HTTP_HX_REQUEST se pasó en la solicitud. Si lo fue, significa que se trata de una solicitud de htmx y, en ese caso, solo puede mostrar el fragmento HTML. Si no fuera así, debe renderizar la página completa.