The Django Template Language <\/strong>(DTL) provides placeholders and logic, like loops and conditionals, to insert dynamic data into HTML.<\/p> In addition to simplifying the development process, it organizes your project structure when deploying it to a Django virtual private server<\/a> (VPS).<\/p> Setting up templates in Django is not difficult at all. Here’s a quick guide.<\/p> To create a template in Django, you need to create an HTML file inside a templates <\/strong>directory. The directory structure might look like this:<\/p> In this structure, Django automatically looks for templates in the templates <\/strong>directory of your app. You can further organize templates inside app-specific folders (like myapp\/homepage.html<\/strong>), ensuring that each app has its own templates.<\/p> Here’s an example of a simple template (homepage.html<\/strong>):<\/p> In this template, {{ site_name }}<\/strong> and {{ message }}<\/strong> are placeholders that will be filled with dynamic data passed from the view.<\/p> To render a template, you need to pass it to the view using Django’s render()<\/strong> function. Here’s an example of how to render the homepage.html<\/strong> template with some context data in a function-based view (FBV)<\/strong>:<\/p> In this example, render()<\/strong> combines the template (homepage.html<\/strong>) with data inside context<\/strong>. Context<\/strong> is a dictionary containing the data that Django will insert into the template (site_name<\/strong> and message<\/strong>).<\/p> When a user visits this page, the placeholders {{ site_name }}<\/strong> and {{ message }}<\/strong> in the template will be replaced by “My Django Website<\/strong>” and “This is the homepage content!<\/strong>” respectively, as specified in context<\/strong>.<\/p> Django templates also support template tags<\/strong> and filters<\/strong>, which allow you to add dynamic content and logic inside your HTML files.<\/p> Template tags<\/strong> enable you to perform logic inside templates, such as loops and conditionals, instead of directly rendering the value. For example, the following code include an if <\/strong>condition:<\/p> Meanwhile, template filters <\/strong>take values from variables and modify it for display purposes. For instance the following filter take article publishing date and show it in a MMMM\/DD\/YYY<\/strong> format:<\/p> Django supports template inheritance, allowing you to create base templates that other templates can extend. This is especially useful for maintaining a consistent layout across multiple pages, such as a common header and footer.<\/p> The structure of the base template (base.html<\/strong>) is the same as other templates. Here’s an example code:<\/p> To extend the base template, create a new template with the {% template %}<\/strong> tag. Here’s a code example of a child template (homepage.html<\/strong>):<\/p> By extending the base template, you can reuse the header and footer across different pages, maintaining a consistent layout and avoiding repetition.<\/p> Templates also allow you to reference static files (like CSS, JavaScript, or images) using the {% static %}<\/strong> template tag. For example, to include a CSS file:<\/p> Make sure you’ve set up your static file directories correctly in settings.py<\/strong>:<\/p> By effectively using Django’s template system, you can create dynamic, data-driven web pages and maintain a clean separation between logic and presentation.<\/p> Context variables let you pass data from your views to templates for rendering. They enable you to process dynamic data that changes based on the process in your view. For example, you can make a web page that automatically updates to show the latest post.<\/p> To use context variables, add a key-value pair in your views’ dictionary. The key specifies the variable names, while the value is the data you want to pass.<\/p> In this simple example, we create the latest_posts <\/strong>and page_title<\/strong> context variables in the homepage’s view. The latest_posts<\/strong> fetches data from the latest_posts <\/strong>queryset while page_title <\/strong>passes the page title:<\/p> To render the context variable in your template, call them by writing their names inside the placeholder tags. For example, if you have a variable called data<\/strong>, display it using {{ data }}<\/strong>.<\/p> Let’s insert the simple code example above into the home.html <\/strong>template. The code should look as follows:<\/p>![\"\"](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/VPS-hosting-banner-1024x300.png\")
<\/a><\/figure>Setting up Django templates<\/h2>
How to create a template<\/h3>
myproject\/\n│\n├── myapp\/\n│ ├── templates\/\n│ │ └── myapp\/\n│ │ └── homepage.html\n│ └── views.py\n│\n└── manage.py<\/pre>
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Home<\/title>\n<\/head>\n<body>\n <h1>Welcome to {{ site_name }}<\/h1>\n <p>{{ message }}<\/p>\n<\/body>\n<\/html><\/pre>Rendering Templates in views<\/h3>
from django.shortcuts import render\n\ndef homepage(request):\n context = {\n 'site_name': 'My Django Website',\n 'message': 'This is the homepage content!'\n }\n return render(request, 'myapp\/homepage.html', context)<\/pre>Using template tags and filters<\/h2>
{% if user.is_authenticated %}\n <p>Welcome back, {{ user.username }}!<\/p>\n{% else %}\n <p>Hello, Guest!<\/p>\n{% endif %}<\/pre><p>Published on {{ article.published_date|date:\"F j, Y\" }}<\/p><\/pre>Inheriting templates<\/h2>
Creating a base template<\/h3>
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>{% block title %}My Site{% endblock %}<\/title>\n<\/head>\n<body>\n <header>\n <h1>Site Header<\/h1>\n <\/header>\n\n <main>\n {% block content %}\n <!-- Page-specific content goes here -->\n {% endblock %}\n <\/main>\n\n <footer>\n <p>Footer Content<\/p>\n <\/footer>\n<\/body>\n<\/html><\/pre>Extending a template<\/h3>
{% extends 'base.html' %}\n\n{% block title %}Home Page{% endblock %}\n\n{% block content %}\n <h2>Welcome to the homepage!<\/h2>\n <p>This is the homepage content.<\/p>\n{% endblock %}<\/pre>Including static files in templates<\/h2>
<link rel=\"stylesheet\" type=\"text\/css\" href=\"{% static 'css\/style.css' %}\"><\/pre>STATIC_URL = '\/static\/'<\/pre>
Context variables in templates<\/h2>
from django.shortcuts import render\nfrom .models import Post\n\ndef home(request):\n # Query the latest blog posts\n latest_posts = Post.objects.order_by('-published_date')[:5] # Get the 5 most recent posts\n context = {\n 'latest_posts': latest_posts,\n 'page_title': 'Home - My Blog',\n }\n return render(request, 'home.html', context)<\/pre><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>{{ page_title }}<\/title>\n<\/head>\n<body>\n <h1>Latest Blog Posts<\/h1>\n <ul>\n {% for post in latest_posts %}\n <li>\n <h2>{{ post.title }}<\/h2>\n <p>{{ post.content|truncatewords:30 }}<\/p> <!-- Show a snippet of the content -->\n <a href=\"{% url 'post_detail' post.id %}\">Read more<\/a>\n <\/li>\n {% empty %}\n <li>No posts available.<\/li>\n {% endfor %}\n <\/ul>\n<\/body>\n<\/html><\/pre>