In todo/templates, create a file called index.html and add the following code: If you would like to understand base templates in more detail, I have a separate tutorial here. In todo/templates, create a file called base.html. Step 2: Create a base templateĪ base template is useful to provide a common layout to all of your pages.Įven though this project just has one page, a base template is a good place to add our tag and install Bootstrap without cluttering the index.html template. If you don’t plan on using htmx, then the decision to use partials depends on your personal code style.
You can get your view to render a partial instead of a full template to selectively rerender parts of a page. Note: If you plan on using htmx, partials are very helpful, because htmx works by swapping HTML inside tags. Inside the for-loop, we include the partial for the row. This snippet creates the todo list table. Todo listĬreate another file in the partials folder called todo_list.html. This is the HTML for a single row of the table. Todo rowĬreate a file called todo_row.html and enter the following code: To create a partial, start by creating a directory inside the templates directory called partials. These are good for snippets that will appear in multiple places. Partials are snippets of HTML that you can import into templates. The initial code for this tutorial can be found here, and the finished code here. What our UI looks like at the moment What the to-do list will look like CodeĪs usual, the code for this tutorial is available to view on GitHub.
In Parts 6, 7 and 8, we will add interactivity to the UI, letting users edit, delete and filter tasks. In this part, we will focus on building out the UI. In Parts 1 to 4, we focused on adding functionality to our app. Welcome to Part 5 of my tutorial series on creating a To Do list app with Django.
0 kommentar(er)
