Django Templates

What We Have Known
{{ <post.title> }}
{% if post.photo %}
<div class="thumbnail">
<img src="{{ post.photo }}" alt="">
</div>
{% else %}
<div class="thumbnail thumbnail-default"></div>
{% endif %}
{% for post in post_list %}
…
{% endfor %}
{{ post.created_at|date:"Y / m / d" }}
Variable
Tag <a href="{% url 'post_detail' pk=post.pk %}">
Filter

Template Inheritance
home.html post.html

Template Inheritance
home.html
post.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Django Girl's Adventure</title>
<link href=“//…/assets/css/style.css” rel="stylesheet">
</head>
<body>
<div class="header">
<h1 class="site-title text-center">
<a href="/">A Django Girl’s Adventure</a>
</h1>
</div>
<div class=“container">
{% block content %} {% endblock content %}
</div>
</body>
</html>

Extends a template

{% extends "base.html" %}
{% block content %}
<div class="post-wrapper">
<div class="post">
…
</div>
</div>
{% endfor %}
{% endblock content %}

Extends a template
{% block content %}
<div class="post">
…
</div>
</div>
{% endfor %}
{% extends %} must be the first template tag

Fill the Block
{% block content %}
<div class="post">
…
</div>
</div>
{% endfor %}
base.html
Fill content to the block you defined

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class=“header">
</h1>
<ul class="nav navbar-nav">
<li><a href="#">About Me</a></li>
<li><a href="#">Favorite Trips</a></li>
<li><a href="#">Albums</a></li>
...
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</body>
</html>
Include

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class=“header">
</h1>
<ul class="nav navbar-nav">
<li><a href="#">About Me</a></li>
<li><a href="#">Favorite Trips</a></li>
<li><a href="#">Albums</a></li>
...
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</body>
</html>
Extract as Another Template

<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% include ‘_header.html’ %}
</div>
</body>
</html>
Include Template

Example: base.html
<!DOCTYPE html>
{% load static %}
<html>
<head>
<link rel="stylesheet" href="main.css" />
{% block extra_css %}{% endblock extra_css %}
<title>
{% block title_tag %}
{% block title %} Welcome {% endblock title %} | A Django Girl's Adventure
{% endblock title_tag %}
</title>
</head>
<body>
{% include "_header.html" %}
<div class="container">
</div>
<script src="{% static 'js/vendors/jquery.js' %}"></script>
<script src="{% static 'js/vendors/bootstrap.js' %}"></script>
{% block extra_js %}{% endblock extra_js %}
</body>
</html>

{% block title %}Home{% endblock title %}

{% block title %}{{ post.title }}{% endblock title %}
<title>
</title>

{% block title_tag %}{{ post.title }}{% endblock title_tag %}
Home | A Django Girl's Adventure
| A Django Girl's Adventure

block.super
| Welcome | A Django Girl's Adventure

{% block title %}{{ post.title }} | {{ block.super }}{% endblock title %}
<title>
</title>
Use {{ block.super }} to include parent’s content

Common Conventions
• Prefer underscore over dash in template name, block name
• Included name of the block in endblock tag 
• Template called by other template are prefixed with `_`
{% include ‘_header.html’ %}

2-Tier Template Architecture
templates/
base.html
home.html # extends base.html
trips/
trips_list.html # extends base.html
trips_detail.html # extends base.html
Best for websites with a consistent overall layout
from app to app

3-Tier Template Architecture
templates/
base.html
trips/
base_trips.html # extends base.html
trips_list.html # extends base_trips.html
trips_detail.html # extends base_trips.html
album/
base_album.html # extends base.html
album_list.html # extends base_album.html
album_detail.html # extends base_album.html
Best for websites where each sections requires a
distinctive layout

Flat is Better Than Nested
Zen of Python

Comment in Django Template
{% comment %}
<div class="sidebar">
sidebar content is not ready
</div>
{% endcomment %}
Multi-line Comment
{# single line comment #}
Single Line Comment

Filters
{{ post.title | upper }}
{{ post.title | lower }}
{{ post.title | title }}
post.title = “a wonderFul tRip”
A WONDERFUL TRIP
a wonderful trip
A Wonderful Trip

Filters
I have {{ post_list.count }}
post{{ post_list.count |pluralize}}
post_list.count = 1
I have 2 postspost_list.count = 2
I have 1 post

Filters
{{ post.title|truncatewords:2 }}
{{ value|truncatechars:15 }}

django.contrib.humanize
1. Add 'django.contrib.humanize' to your INSTALLED_APPS settings
2. Use {% load humanize %} in a template

{% load humanize %}
{% block title %}{{ post.title }}{% endblock title %}
{% block content %}
<div class="post-heading">
<h1 class="title"><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title | title }}</a>
</h1>
<div class="date">{{ post.created_at|naturaltime }}</div>
</div>
…
{{ value|naturaltime }}

Philosophy
Express Presentation
Not Program Logic

Summary
• Template Inheritance:
• {% block %} {% end block %}
• {% extends %}
• {{ block.super }}
• Organize: {% include %}
• Comment: {# comment #}, {% comment %}{% endcomment %
• Filters
• upper , lower, title,  
pluralize, truncatewords, truncatechars
• django.contrib.humanize: naturaltime

Django Templates

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Django Templates

Similar to Django Templates (20)

Recently uploaded

Recently uploaded (20)

Django Templates