Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Django Templates
@starwilly
What We Have Known
{{ <post.title> }}
{% if post.photo %}
<div class="thumbnail">
<img src="{{ post.photo }}" alt="">
</di...
Template Inheritance
home.html post.html
Template Inheritance
home.html
post.html
base.html
home.html
post.html
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Django Girl's Adventure</title>
<link hre...
Extends a template
<!-- home.html -->
{% extends "base.html" %}
{% block content %}
{% for post in post_list %}
<div class...
Extends a template
{% extends "base.html" %}
{% block content %}
{% for post in post_list %}
<div class="post-wrapper">
<d...
Fill the Block
{% extends "base.html" %}
{% block content %}
{% for post in post_list %}
<div class="post-wrapper">
<div c...
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Django Girl's Adventure</title>
<link hre...
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Django Girl's Adventure</title>
<link hre...
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Django Girl's Adventure</title>
<link hre...
Example: base.html
<!DOCTYPE html>
{% load static %}
<html>
<head>
<link rel="stylesheet" href="main.css" />
{% block extr...
<!-- home.html -->
{% block title %}Home{% endblock title %}
<!-- post.html -->
{% block title %}{{ post.title }}{% endblo...
block.super
| Welcome | A Django Girl's Adventure
<!-- post.html -->
{% block title %}{{ post.title }} | {{ block.super }}...
Common Conventions
• Prefer underscore over dash in template name, block name
• Included name of the block in endblock tag...
2-Tier Template Architecture
templates/
base.html
home.html # extends base.html
trips/
trips_list.html # extends base.html...
3-Tier Template Architecture
templates/
base.html
trips/
base_trips.html # extends base.html
trips_list.html # extends bas...
Flat is Better Than Nested
Zen of Python
Comment
Comment in Django Template
{% comment %}
<div class="sidebar">
sidebar content is not ready
</div>
{% endcomment %}
Multi-...
Filters
Filters
{{ post.title | upper }}
{{ post.title | lower }}
{{ post.title | title }}
post.title = “a wonderFul tRip”
A WONDE...
Filters
I have {{ post_list.count }}
post{{ post_list.count |pluralize}}
post_list.count = 1
I have 2 postspost_list.count...
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 t...
Philosophy
Express Presentation
Not Program Logic
Summary
• Template Inheritance:
• {% block %} {% end block %}
• {% extends %}
• {{ block.super }}
• Organize: {% include %...
Thank you
Upcoming SlideShare
Loading in …5
×

Django Templates

776 views

Published on

For Django girls meetup

Published in: Technology
  • If you’re looking for a great essay service then you should check out ⇒ www.HelpWriting.net ⇐. A friend of mine asked them to write a whole dissertation for him and he said it turned out great! Afterwards I also ordered an essay from them and I was very happy with the work I got too.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can hardly find a student who enjoys writing a college papers. Among all the other tasks they get assigned in college, writing essays is one of the most difficult assignments. Fortunately for students, there are many offers nowadays which help to make this process easier. The best service which can help you is ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Django Templates

  1. 1. Django Templates @starwilly
  2. 2. 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
  3. 3. Template Inheritance home.html post.html
  4. 4. Template Inheritance home.html post.html
  5. 5. base.html home.html post.html
  6. 6. <!-- base.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>
  7. 7. Extends a template <!-- home.html --> {% extends "base.html" %} {% block content %} {% for post in post_list %} <div class="post-wrapper"> <div class="post"> … </div> </div> {% endfor %} {% endblock content %}
  8. 8. Extends a template {% extends "base.html" %} {% block content %} {% for post in post_list %} <div class="post-wrapper"> <div class="post"> … </div> </div> {% endfor %} {% endblock content %} {% extends %} must be the first template tag
  9. 9. Fill the Block {% extends "base.html" %} {% block content %} {% for post in post_list %} <div class="post-wrapper"> <div class="post"> … </div> </div> {% endfor %} {% endblock content %} base.html Fill content to the block you defined
  10. 10. <!-- base.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> <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 class=“container"> {% block content %} {% endblock content %} </div> </body> </html> Include
  11. 11. <!-- base.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> <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 class=“container"> {% block content %} {% endblock content %} </div> </body> </html> Extract as Another Template
  12. 12. <!-- base.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> {% include ‘_header.html’ %} <div class=“container"> {% block content %} {% endblock content %} </div> </body> </html> Include Template
  13. 13. 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"> {% block content %} {% endblock content %} </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>
  14. 14. <!-- home.html --> {% block title %}Home{% endblock title %} <!-- post.html --> {% block title %}{{ post.title }}{% endblock title %} <title> {% block title_tag %} {% block title %} Welcome {% endblock title %} | A Django Girl's Adventure {% endblock title_tag %} </title> <!-- post.html --> {% block title_tag %}{{ post.title }}{% endblock title_tag %} Home | A Django Girl's Adventure | A Django Girl's Adventure
  15. 15. block.super | Welcome | A Django Girl's Adventure <!-- post.html --> {% block title %}{{ post.title }} | {{ block.super }}{% endblock title %} <title> {% block title_tag %} {% block title %} Welcome {% endblock title %} | A Django Girl's Adventure {% endblock title_tag %} </title> Use {{ block.super }} to include parent’s content
  16. 16. 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 `_` {% block content %} {% endblock content %} {% include ‘_header.html’ %} {% block title_tag %}
  17. 17. 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
  18. 18. 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
  19. 19. Flat is Better Than Nested Zen of Python
  20. 20. Comment
  21. 21. Comment in Django Template {% comment %} <div class="sidebar"> sidebar content is not ready </div> {% endcomment %} Multi-line Comment {# single line comment #} Single Line Comment <!-- HTML Comment -->
  22. 22. Filters
  23. 23. Filters {{ post.title | upper }} {{ post.title | lower }} {{ post.title | title }} post.title = “a wonderFul tRip” A WONDERFUL TRIP a wonderful trip A Wonderful Trip
  24. 24. 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
  25. 25. Filters {{ post.title|truncatewords:2 }} {{ value|truncatechars:15 }}
  26. 26. django.contrib.humanize 1. Add 'django.contrib.humanize' to your INSTALLED_APPS settings 2. Use {% load humanize %} in a template <!-- post.html --> {% extends "base.html" %} {% 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 }}
  27. 27. Philosophy Express Presentation Not Program Logic
  28. 28. 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
  29. 29. Thank you

×