Skip to content

Latest commit

 

History

History
60 lines (39 loc) · 2.41 KB

base_template.rst

File metadata and controls

60 lines (39 loc) · 2.41 KB

Base template

To get going, you’ll need to install htmx somehow into your template.

Most likely, you’ll want to put it into a base template. There are lots of options for the exact details of how to do this in Django (depending on if you are using bundlers for your static assets etc.), but the simplest is like one of the following in your base.html template (or whatever you have called it):

Using the CDN:

<html>
  <head>
    <script defer src="https://unpkg.com/[email protected]" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script>
    ...

(You should specify the version you want, see htmx installation docs)

Or, download the htmx.min.js into one of your folders for static assets in your Django projects, and use like this in your base.html:

{% load static %}
<html lang="en">
  <head>
    <script defer src="{% static 'js/htmx.min.js' %}"></script>

I normally include the version number in the file name when I do this.

Example template.

Bundlers

You can use bundlers like webpack etc. I usually use django-compressor, so my template ends up looking like:

{% compress js %}
  <script type="text/javascript" defer src="{% static "js/htmx.min.js" %}"></script>
  <script type="text/javascript" defer src="{% static "js/mystuff.js" %}"></script>
{% endcompress %}

Note the use of defer (see the docs on script async/defer). By bundling my own code with htmx, and putting it after it, I know that htmx will have loaded before my own code executes, in case I need to use the htmx Javascript API. In development I set COMPRESS_ENABLED to True. To aid debugging, I don’t run minify filters in development, and use unminified 3rd party libs if necessary.

Other

You should also see the notes about post requests for things you might want in your base templates.