Django
Django Templates Explained: A Guide to Dynamic Web Pages

Django Templates Explained: A Guide to Dynamic Web Pages

Rohit Rajput's photo
Rohit Rajput
·

6 min read

Table of contents

What is Django Template out pages ?

  • Templating out a website in Django means breaking down your HTML into reusable components (like headers, footers, or navigation bars) and then assembling them into different pages programmatically.

  • Later, Django template output page is the final HTML page that the browser shows after Django renders the template with data passed from the view.

  • This makes your code more organized, easier to maintain and scalable.

Example :

🔆
To template the website, we need to create different templates like base.html, index.html, navbar.html, and about.html to get started.
  • First, go to templates/index.html and cut the commonly used parts like the head and footer which is present in body. Paste them into templates/base.html to avoid repetition.
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ========================= FAVICON ============================ -->
    <link rel="shortcut icon" href="{% static '/assets/favicon.png' %}" type="image/x-icon">
    <!-- ========================= REMIXICONS ============================ -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.css">
    <!-- ========================= SWIPER CSS ============================ -->
    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
    <!-- ========================= CSS ================================== -->
    <link rel="stylesheet" href="{% static '/css/styles.css'%}">
    <title>WATCHES</title>
</head>
<body>
    {% include 'navbar.html' %}

    {% block content %}   
    {% endblock %}

    <!-- =============================== GSAP ================================= -->
    <script src="/static/js/gsap.min.js"></script>
    <!-- =============================== SWIPER JS ============================= -->
    <script src="/static/js/swiper-bundle.min.js"></script>
    <!-- =====================JavaScript========================= -->
    <script src="{% static '/js/main.js' %}"></script>
</body>
</html>
  • After this, we will extend templates/base.html in templates/index.html so it can access the main content of the website. This will ensure that the layout is applied correctly in the output.
{% extends 'base.html' %}
<!-- {% load static %} -->
{% block content %}
<!-- ======================== Main =================================== -->
<main class="main">
    <!-- ========================== Home ============================= -->
     <section class="home">
        <div class="home__container container">
            <div class="home__data">
                <div class="home__content">
                    <div class="home__stars">
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-fill"></i>
                        <i class="ri-star-half-line"></i>
                    </div>
                    <h1 class="home__title">
                        Premerior <br>
                        Watches <br>
                        Collection
                    </h1>
                    <h3 class="home__price">$500</h3>
                </div>

                <a href="#" class="home__button">
                    ADD TO CART
                    <i class="ri-arrow-right-s-line"></i>
                </a>
            </div>
            <div class="home__images">
                <div class="home__swiper swiper">
                    <div class="swiper-wrapper">
                        <article class="home__article swiper-slide">
                            <img src="{% static '/img/watches-1.png' %}" alt="image" class="home__img">
                        </article>
                        <article class="home__article swiper-slide">
                            <img src="{% static '/img/watches-2.png' %}" alt="image" class="home__img">
                        </article>
                        <article class="home__article swiper-slide">
                            <img src="{% static '/img/watches-3.png' %}" alt="image" class="home__img">
                        </article>
                    </div>
                </div>
                <!-- Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="home__info">
                <img src="{% static '/img/watches-border.png' %}" alt="image" class="home__info-img">
                <div class="home__info-content">
                    <p class="home__info-description">
                        Personalize your watch with a message that will last a lifetime. The perfect gift for you or someone special.
                    </p>
                    <a href="#" class="home__button-link">LEARN MORE</a>
                </div>
            </div>
        </div>
     </section>
    <!-- ========================= CARD CONTAINER ============================== -->
    <h1 class="related-product">Related Products</h1>
    <div class="container card-container">
        {% for product in products %}
            {% if product.is_sale %}
                <div class="card">
                    <!-- Sale Badge -->
                    <div class="badge position-absolute" style="top: 0.5rem; right: 0.5rem; background-color: rgba(39, 37, 37, 0.451); color: red; font-size: 1.15rem; padding: 0.3rem 1.5rem;">
                    <b>Sale!!!</b>                    
                    </div>
                    <!-- Product Body -->
                    <img src="{{ product.image.url }}" class="card-img-top" alt="Card Image">
                    <div class="card-body">
                        <h5 class="card-title">{{product.name}}</h5>
                        <p class="card-text"> <strike>${{product.price}}</strike> &nbsp; ${{product.sale_price}}</p>
                        <a href="#" class="btn btn-primary">View options</a>
                    </div>
                </div>
            {% else %}
                <div class="card">
                    <!-- Product Body -->
                    <img src="{{ product.image.url }}" class="card-img-top" alt="Card Image">
                    <div class="card-body">
                        <h5 class="card-title">{{product.name}}</h5>
                        <p class="card-text">{{product.price}}</p>
                        <a href="#" class="btn btn-primary">View options</a>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
</main>
{% endblock %}
  • Now, we will move the navbar from templates/index.html to templates/navbar.html. This navbar will be present on every page and will extend from templates/base.html.
<!-- ======================== Header =================================== -->
<header class="header" id="header">
   <nav class="nav container">
       <a href="{% url 'home' %}" class="nav__logo">WATCHES</a>
       <div class="nav__menu" id="nav-menu">
           <ul class="nav__list">
               <li class="nav__item">
                   <a href="{% url 'home' %}" class="nav__link">HOME</a>
               </li>

               <li class="nav__item"></li>
                   <a href="{% url 'about' %}" class="nav__link">ABOUT</a>
               </li>
               <li class="nav__item"></li>
                   <a href="#" class="nav__link">FEATURED</a>
               </li>
               <li class="nav__item"></li>
                   <a href="#" class="nav__link">NEW</a>
               </li>
           </ul>
           <div class="nav__social">
               <a href="www.facebook.com" target="_blank" class="nav__social-link">
                   <i class="ri-facebook-box-fill"></i>
               </a>
               <a href="www.instagram.com" target="_blank" class="nav__social-link">
                   <i class="ri-instagram-fill"></i>
               </a>
               <a href="www.x.com" target="_blank" class="nav__social-link">
                   <i class="ri-twitter-fill"></i>
               </a>
           </div>
           <!-- Close Button -->
            <div class="nav__close" id="nav-close">
               <i class="ri-close-line"></i>
            </div>
       </div>
       <!-- Toggle -->
        <div class="nav__toggle" id="nav-toggle">
           <i class="ri-menu-line"></i>
        </div>
   </nav>
</header>
👨‍🔧
We have also replaced the URLs with Django URLs. For example, the link to about.html and index.html will be:
<a href="{% url 'home' %}">About Us</a>
<a href="{% url 'about' %}">About Us</a>
  • At last, we will create templates/about.html to provide information about our Watches website.
{% extends 'base.html' %}
{% block content %}
<!-- Add space between the header and the top of the page -->
<br><br><br><br><br>
<!-- Header Section -->
<header class="bg-dark py-5">
    <div class="container px-4 px-lg-5 my-5">
        <div class="d-flex justify-content-center align-items-center">
            <div class="text-center text-white">
                <h1 class="home__title display-3 fw-bolder">About Watches</h1> <!-- Using home__title class -->
            </div>
        </div>
    </div>
</header>
<br>
<!-- About Section -->
<div class="container about-container">
    <div class="about-content">
        <p>
            At <strong>WATCHES</strong>, we are passionate about preserving the timeless elegance of vintage and rare watches. 
            Our curated collection features exquisite timepieces from iconic brands, each with its own story of craftsmanship and heritage. 
            Whether you’re a seasoned collector or just starting your journey into the world of horology, we offer pieces that reflect the 
            artistry and precision of a bygone era.
        </p>
        <br>
        <p>
            We believe that a watch is more than just an accessory—it’s a symbol of history, individuality, and personal style. 
            Every watch in our selection is carefully inspected and authenticated, ensuring that our customers receive nothing 
            but the finest examples of horological mastery. From limited editions to discontinued models, we strive to connect 
            enthusiasts with the unique and hard-to-find treasures they seek.
        </p>
        <br><br>
        <h3 class="fs-3">Why Choose Us?</h3>
        <br>
        <ul>
            <li><strong>- Exquisite Collection:</strong> Rare timepieces from renowned brands chosen for craftsmanship and legacy.</li>
            <li><strong>- Authenticity Guaranteed:</strong> Carefully inspected and authenticated by experts.</li>
            <li><strong>- Unique Finds:</strong> Discover limited editions, discontinued models, and rare treasures.</li>
            <li><strong>- Passion for Horology:</strong> Pieces that tell stories of time and precision.</li>
            <li><strong>- Trust and Transparency:</strong> Ensuring transactions reflect integrity and honesty.</li>
            <li><strong>- Personalized Service:</strong> Helping you find a watch that resonates with your personal style.</li>
        </ul>
        <br><br>
        <h3 class="fs-3">Our Mission</h3>
        <br>
        <p>
            At the heart of our mission is a dedication to trust, transparency, and passion. We pride ourselves on delivering an 
            exceptional customer experience, helping collectors find pieces that resonate with them on a deeper level.
        </p>
        <br>
        <p>
            Explore our collection and discover the charm and legacy of owning a truly remarkable watch. Each timepiece offers 
            more than just time—it tells a story of artistry, precision, and individuality.
        </p>
    </div>
</div>
{% endblock %}
  • We know that Django follows the MVT architecture, so we will create a view for about.html in store/views.py.
from django.shortcuts import render
from .models import Product

def home(request):
    products = Product.objects.all()
    return render(request, 'index.html', {'products':products})

def about(request):
    return render(request, 'about.html',{})
  • Now, update store/urls.py to redirect to about.html when it is clicked.
from django.urls import path
from . import views

urlpatterns = [
    path('',views.home,name='home'),
    path('about/',views.about,name='about')
]
  • Save the about.html file and run the Django server to check if the products are properly fetched into their designated fields.
python manage.py runserver

Similarly, we can create templates for different pages based on our website's needs.

Connect with me :

DjangoWeb DevelopmentProgramming BlogsDevopsDeveloperPythonbackend