149 / 478
lists/templates/home.html.
{% extends 'base.html' %}
{% block header_text %}Start a new To-Do list{% endblock %}
{% block form_action %}/lists/new{% endblock %}
You can see that lots of the boilerplate HTML disappears, and we just concentrate on
the bits we want to customise. We do the same for
list.html
:
lists/templates/list.html.
{% extends 'base.html' %}
{% block header_text %}Your To-Do list{% endblock %}
{% block form_action %}/lists/{{ list.id }}/add_item{% endblock %}
{% block table %}
<table
id=
"id_list_table"
>
{% for item in list.item_set.all %}
<tr><td>
{{ forloop.counter }}: {{ item.text }}
</td></tr>
{% endfor %}
</table>
{% endblock %}
That’s a refactor of the way our templates work.We rerun the FTs tomake sure we haven’t
broken anything…
AssertionError: 110.0 != 512 within 5 delta
Sure enough, they’re still getting to exactly where they were before. That’s worthy of a
commit:
$
git diff -b
# the -b means ignore whitespace, useful since we've changed some html indenting
$
git status
$
git add lists/templates
# leave static, for now
$
git commit -m"refactor templates to use a base template"
Integrating Bootstrap
Now it’s much easier to integrate the boilerplate code that Bootstrap wants—we won’t
add the JavaScript yet, just the CSS:
lists/templates/base.html (ch07l006).
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
To-Do lists
</title>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<link
href=
"css/bootstrap.min.css"
rel=
"stylesheet"
media=
"screen"
>
</head>
[...]
Integrating Bootstrap
|
121