Scribd
Upload
5 views22 pages

Django Workspace

The document outlines the process of creating a Django blog application, including setting up the app, creating views and URLs, and handling dynamic URL segments. It also covers redirecting old URLs to new ones, using named URLs for better maintainability, and returning HTML pages for the blog's index and detail views. Additionally, it provides example HTML templates for the blog's layout and structure.

Uploaded by

caddamtechnologypvtltd
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views22 pages

Django Workspace

The document outlines the process of creating a Django blog application, including setting up the app, creating views and URLs, and handling dynamic URL segments. It also covers redirecting old URLs to new ones, using named URLs for better maintainability, and returning HTML pages for the blog's index and detail views. Additionally, it provides example HTML templates for the blog's layout and structure.

Uploaded by

caddamtechnologypvtltd
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Creating Apps

Python [Link] startapp blog

Register app
myapp -> [Link] -> add ( Installed_Apps[‘blog’])

INSTALLED_APPS = [
'[Link]',
'[Link]',
'[Link]',
'[Link]',
'[Link]',
'[Link]',
'blog',
]

Creating First View

Blog -> [Link]

from [Link] import render


from [Link] import HttpResponse
# Create your views here.

def index(request):
return HttpResponse("Hello world, You are at blog's index")

def detail(request):
return HttpResponse("You are viewing post detail page")

App -> New file create


Blog -> [Link]

from [Link] import path


from . import views

urlpatterns = [
path("", [Link], name="index" ),]

Blog -> [Link] insert into myapp -> Myapp ->

from [Link] import admin


from [Link] import path, include

urlpatterns = [
# path("", include("[Link]")), #[Link]
path("blog/", include("[Link]")), #[Link]
path('admin/', [Link]),
]
More Urls & Views

Blog -> [Link] - add another python function

def detail(request, post_id):


return HttpResponse(f'You are viewing post detail page. And ID id {post_id}')

Blog -> [Link]

from [Link] import path


from . import views

urlpatterns = [
path("", [Link], name="index" ),
path("post/detail", [Link], name="detail"), ]
#[Link]

Dynamic Url Segment

blog -> [Link] function write

def detail(request, post_id):


return HttpResponse(f'You are viewing post detail page. And ID id {post_id}')

Blog -> [Link]

from [Link] import path


from . import views

urlpatterns = [
# path("", [Link], name="index" ),
# path("post/detail", [Link], name="detail"),
#[Link]
Dynamic URL segment - [Link]
path("post/<int:post_id>", [Link], name="detail"),
#[Link]
path("post/<str:post_id>", [Link], name="detail"), ]
#[Link]

Redirect

Blog -> [Link] -> write two functions

from [Link] import render, redirect


from [Link] import HttpResponse
# Create your views here.

def index(request):
return HttpResponse("Hello world, You are at blog's index")
# def detail(request):
# return HttpResponse("You are viewing post detail page")

# def detail(request, post_id):


# return HttpResponse(f'You are viewing post detail page. And ID id {post_id}')

def old_url_redirect(request):
return redirect(new_url_view)

def new_url_view(request):
return HttpResponse("This is the new URL")

Blog -> [Link] -> path add

from [Link] import path


from . import views

urlpatterns = [
# path("", [Link], name="index" ),
# path("post/detail", [Link], name="detail"),
#[Link]
# Dynamic URL segment - [Link]
# path("post/<int:post_id>", [Link], name="detail"),
#[Link]
# path("post/<str:post_id>", [Link], name="detail"),
#[Link]
path("new_url", views.new_url_view, name="new_url"),
path("old_url", views.old_url_redirect, name="old_url"),

Reverse and Named URL

Blog -> [Link]

In Django, a named URL is a URL pattern assigned a unique identifier


using the name argument, and URL reversing is the process of
dynamically generating the actual URL string from that name. This
approach promotes the "Don't Repeat Yourself" (DRY) principle, making
your application more maintainable and adaptable to changes in URL
structures.

from [Link] import render, redirect


from [Link] import HttpResponse
# Create your views here.
from [Link] import reverse

# def index(request):
# return HttpResponse("Hello world, You are at blog's index")

# def detail(request):
# return HttpResponse("You are viewing post detail page")
# def detail(request, post_id):
# return HttpResponse(f'You are viewing post detail page. And ID id {post_id}')

# def old_url_redirect(request):
# return redirect(new_url_view) #redirect() --> [Link] there.. in
redirection

def old_url_redirect(request):
return redirect(reverse('blog:new_page_url'))

Blog -> [Link]

from [Link] import path


from . import views

app_name ='blog'

urlpatterns = [
# path("", [Link], name="index" ),
# path("post/detail", [Link], name="detail"),
#[Link]
# Dynamic URL segment - [Link]
# path("post/<int:post_id>", [Link], name="detail"),
#[Link]
# path("post/<str:post_id>", [Link], name="detail"),
#[Link]
# path("new_url", views.new_url_view, name="new_url"),
path("new_something_url", views.new_url_view, name="new_page_url"),

Returning Html Page

[Link]

blog->template(folder)->blog(folder)->[Link], [Link]

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="[Link]
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link rel="stylesheet" href="./[Link]">
<link rel="stylesheet"
href="[Link]
</head>
<body >
<header class="p-3 bg-dark text-white">
<div class="row">
<div class="col">
<h3>Blog</h3>
</div>
<div class="col">
<div class="d-flex justify-content-center gap-3">
<a class="text-light text-decoration-none" href="">Home</a>
<a class="text-light text-decoration-none" href="">About</a>
<a class="text-light text-decoration-none" href="">Contact</a>
</div>
</div>
</div>
</header>
<div class="container-fluid ">
<div class="row my-2">
<div class="col">
<h2 >Latest Posts</h2>
</div>
<div class="col-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..."
aria-label="Search">
<button class="btn btn-outline-light btn-primary " type="button"
id="button-search">
<i class="bi bi-search"></i> <!-- Bootstrap Icons -->
</button>
</div>
</div>
</div>
<div class="row m-3">
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Sports</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Development</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Engineering</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Kids</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Design</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Movies</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 my-3">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="?page=1" aria-label="First">
<span aria-hidden="true">&laquo; first</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=1" aria-label="Previous">
<span aria-hidden="true">previous</span>
</a>
</li>
<li class="page-item"><span class="page-link">Page 3 of
20.</span></li>
<li class="page-item">
<a class="page-link" href="?page=4" aria-label="Next">
<span aria-hidden="true">next</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=20" aria-label="Last">
<span aria-hidden="true">last &raquo;</span>
</a>
</li>
</ul>
</nav>

</div>
</div>
<div class="row">

</div>

</div>
<footer class="bg-dark text-light p-3">
<div class="col-4 d-flex justify-content-center align-items-center">
<span class="text-light">© 2021 Company, Inc</span>
</div>
</footer>
<script
src="[Link]
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="[Link]
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link rel="stylesheet" href="./[Link]">
</head>
<body >
<header class="p-3 bg-dark text-white">
<div class="row">
<div class="col">
<a class="text-decoration-none text-light"
href="./[Link]"><h3>Blog</h3></a>
</div>
<div class="col">
<div class="d-flex justify-content-center gap-3">
<a class="text-light text-decoration-none" href="">Home</a>
<a class="text-light text-decoration-none" href="">About</a>
<a class="text-light text-decoration-none" href="">Contact</a>
</div>
</div>
</div>
</header>
<div class="container-fluid ">
<div class="row">
<div class="col-lg-8">
<h1 class="mb-4">Post Title</h1>
<p class="text-muted">Posted on January 1, 2024</p>
<img src="[Link] class="img-fluid mb-4"
alt="Blog Image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
consectetur tortor vel magna tincidunt tempus. Maecenas eget maximus eros. Vivamus id
nisl lacus. Donec et risus turpis. In nec efficitur purus, ac faucibus nulla. Aenean
nec malesuada velit. Quisque ac mauris ac turpis semper interdum.</p>
<p>Sed et lorem et lacus consequat suscipit. Vestibulum dapibus sapien
et eros aliquam, a dictum leo vehicula. Aliquam consequat turpis vitae lectus
tristique, quis efficitur orci fermentum. Phasellus a ligula pulvinar, blandit eros
at, euismod nisl. Nam pharetra urna id purus volutpat, a feugiat magna convallis.
Curabitur vestibulum velit sit amet nisl sollicitudin, eget rutrum enim fermentum.</p>
<p>Donec quis nisi vitae metus sodales fermentum ac eu eros. Nulla
facilisi. Fusce bibendum nisl et varius vehicula. Duis volutpat convallis justo nec
pharetra. Cras convallis dolor vitae hendrerit mollis. Curabitur ultrices odio vitae
sapien fringilla rhoncus. Ut feugiat condimentum ligula, vel faucibus neque
sollicitudin sed. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Nam eget mauris hendrerit, lobortis urna id, sollicitudin
est. Nam semper aliquam magna, non egestas orci elementum ac.</p>
</div>
<div class="col-lg-4">
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Related Posts</h5>
<ul class="list-unstyled">
<li><a href="./[Link]">Post 1</a></li>
<li><a href="./[Link]">Post 2</a></li>
<li><a href="./[Link]">Post 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-light p-3 fixed-bottom">
<div class="col-4 d-flex justify-content-center align-items-center">
<span class="text-light">© 2021 Company, Inc</span>
</div>
</footer>
<script
src="[Link]
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>

Blog->[Link]

from [Link] import render, redirect


from [Link] import HttpResponse
# Create your views here.
from [Link] import reverse

# def index(request):
# return HttpResponse("Hello world, You are at blog's index")
def index(request):
return render(request, 'blog/[Link]')

def detail(request, post_id):


return render(request, 'blog/[Link]')

Blog->[Link]
from [Link] import path
from . import views

app_name ='blog'

urlpatterns = [
path("", [Link], name="index" ),
# path("post/detail", [Link], name="detail"),
#[Link]
# Dynamic URL segment - [Link]
path("post/<int:post_id>", [Link], name="detail"),
#[Link]
# path("post/<str:post_id>", [Link], name="detail"),
#[Link]

Static Files

Blog->static->blog->[Link]

body {
background-color: #cccccc;
}

Before view page source

[Link] -> add this line


{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="[Link]
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'blog/[Link]' %}">

After view page source

Myapp-> [Link]

STATICFILES_DIRS = [
"/blog/static/blog/"
]

Creating Layout

1. Configure Template Directory


First, ensure Django knows where to find your templates.
In your project's main directory (where [Link] is located), create a
folder named templates.
Open your [Link] file and locate the TEMPLATES setting. Update the
DIRS list to include this folder:

2. Create the Base Template ([Link])


Create a file named [Link] inside your new templates folder. This will
be the main skeleton of your website.

Use {% block ... %} tags as placeholders for content that will change in
child templates

3. Create Child Templates


Now, create templates for specific pages (e.g., [Link], [Link])
that extend the [Link].
Use the {% extends "[Link]" %} tag at the very beginning of the file
to inherit from the base template.
Use {% block ... %} tags with matching names to fill the placeholders
defined in the base template.

Example: templates/[Link]

4. Configure Views and URLs


Ensure your views render these templates correctly and are mapped to a
URL.

In your app's [Link], use the render shortcut to load the template and
pass a context (if needed)

Blog-> template->blog->[Link]

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="[Link]
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'blog/[Link]' %}">
<link rel="stylesheet"
href="[Link]
</head>
<body >
<header class="p-3 bg-dark text-white">
<div class="row">
<div class="col">
<h3>Blog</h3>
</div>
<div class="col">
<div class="d-flex justify-content-center gap-3">
<a class="text-light text-decoration-none" href="">Home</a>
<a class="text-light text-decoration-none" href="">About</a>
<a class="text-light text-decoration-none" href="">Contact</a>
</div>
</div>
</div>
</header>

<!-- Dynamic Content -->

{% block content %}
{% endblock %}
<footer class="bg-dark text-light p-3">
<div class="col-4 d-flex justify-content-center align-items-center">
<span class="text-light">© 2021 Company, Inc</span>
</div>
</footer>
<script
src="[Link]
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>

[Link]

{% extends 'blog/[Link]' %}

{% block content %}
<div class="container-fluid ">
<div class="row my-2">
<div class="col">
<h2 >Latest Posts</h2>
</div>
<div class="col-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..."
aria-label="Search">
<button class="btn btn-outline-light btn-primary " type="button"
id="button-search">
<i class="bi bi-search"></i> <!-- Bootstrap Icons -->
</button>
</div>
</div>
</div>
<div class="row m-3">
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Sports</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Development</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Engineering</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Kids</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Design</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Movies</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 my-3">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="?page=1" aria-label="First">
<span aria-hidden="true">&laquo; first</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=1" aria-label="Previous">
<span aria-hidden="true">previous</span>
</a>
</li>
<li class="page-item"><span class="page-link">Page 3 of
20.</span></li>
<li class="page-item">
<a class="page-link" href="?page=4" aria-label="Next">
<span aria-hidden="true">next</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=20" aria-label="Last">
<span aria-hidden="true">last &raquo;</span>
</a>
</li>
</ul>
</nav>

</div>
</div>
<div class="row">

</div>

</div>
{% endblock %}

[Link]

{% extends 'blog/[Link]' %}

{% block content %}

<div class="container-fluid ">

<div class="row">
<div class="col-lg-8">
<h1 class="mb-4">Post Title</h1>
<p class="text-muted">Posted on January 1, 2024</p>
<img src="[Link] class="img-fluid mb-4"
alt="Blog Image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
consectetur tortor vel magna tincidunt tempus. Maecenas eget maximus eros. Vivamus id
nisl lacus. Donec et risus turpis. In nec efficitur purus, ac faucibus nulla. Aenean
nec malesuada velit. Quisque ac mauris ac turpis semper interdum.</p>
<p>Sed et lorem et lacus consequat suscipit. Vestibulum dapibus sapien
et eros aliquam, a dictum leo vehicula. Aliquam consequat turpis vitae lectus
tristique, quis efficitur orci fermentum. Phasellus a ligula pulvinar, blandit eros
at, euismod nisl. Nam pharetra urna id purus volutpat, a feugiat magna convallis.
Curabitur vestibulum velit sit amet nisl sollicitudin, eget rutrum enim fermentum.</p>
<p>Donec quis nisi vitae metus sodales fermentum ac eu eros. Nulla
facilisi. Fusce bibendum nisl et varius vehicula. Duis volutpat convallis justo nec
pharetra. Cras convallis dolor vitae hendrerit mollis. Curabitur ultrices odio vitae
sapien fringilla rhoncus. Ut feugiat condimentum ligula, vel faucibus neque
sollicitudin sed. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Nam eget mauris hendrerit, lobortis urna id, sollicitudin
est. Nam semper aliquam magna, non egestas orci elementum ac.</p>
</div>
<div class="col-lg-4">
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Related Posts</h5>
<ul class="list-unstyled">
<li><a href="./[Link]">Post 1</a></li>
<li><a href="./[Link]">Post 2</a></li>
<li><a href="./[Link]">Post 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

[Link] -> weight so much content. Cut the code


Combine files

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="[Link]
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'blog/[Link]' %}">
<link rel="stylesheet"
href="[Link]
</head>
<body >

<!-- Header -->

{% include 'blog/includes/[Link]' %}

<!-- Dynamic Content -->

<!-- template syntax -->


{% block content %}
{% endblock %}

<!-- Footer -->


{% include 'blog/includes/[Link]' %}

<script
src="[Link]
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>

Blog-> template->blog->includes->[Link], [Link]

[Link]
<header class="p-3 bg-dark text-white">
<div class="row">
<div class="col">
<h3>Blog</h3>
</div>
<div class="col">
<div class="d-flex justify-content-center gap-3">
<a class="text-light text-decoration-none" href="">Home</a>
<a class="text-light text-decoration-none" href="">About</a>
<a class="text-light text-decoration-none" href="">Contact</a>
</div>
</div>
</div>
</header>
[Link]
<footer class="bg-dark text-light p-3">
<div class="col-4 d-flex justify-content-center align-items-center">
<span class="text-light">© 2021 Company, Inc</span>
</div>
</footer>

Variable Interpolation
Blog->blog->[Link]

from [Link] import render, redirect


from [Link] import HttpResponse
# Create your views here.
from [Link] import reverse

# def index(request):
# return HttpResponse("Hello world, You are at blog's index")

# def index(request):
# return render(request, 'blog/[Link]')

def index(request):
blog_title = "Vaishu's Posts"
return render(request, 'blog/[Link]', {'blog_title': blog_title})

Blog-> template->blog->includes->[Link]

{% extends 'blog/[Link]' %}

{% block content %}
<div class="container-fluid ">
<div class="row my-2">
<div class="col">
<h2 >{{blog_title}}</h2>
</div>
<div class="col-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..."
aria-label="Search">
<button class="btn btn-outline-light btn-primary " type="button"
id="button-search">
<i class="bi bi-search"></i> <!-- Bootstrap Icons -->
</button>
</div>
</div>
</div>
<div class="row m-3">
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Sports</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Development</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Engineering</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Kids</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Design</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="[Link] class="img-
fluid" alt="...">
</div>
<div class="col-md-8">
<h5 class="card-title">Post title</h5>
<p class="card-text">Some quick example text for the
post's content.</p>
<div class="d-flex justify-content-between">
<a href="./[Link]">Read More</a>
<a class="text-decoration-none text-dark fw-bold"
href="#">Movies</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 my-3">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="?page=1" aria-label="First">
<span aria-hidden="true">&laquo; first</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=1" aria-label="Previous">
<span aria-hidden="true">previous</span>
</a>
</li>
<li class="page-item"><span class="page-link">Page 3 of
20.</span></li>
<li class="page-item">
<a class="page-link" href="?page=4" aria-label="Next">
<span aria-hidden="true">next</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=20" aria-label="Last">
<span aria-hidden="true">last &raquo;</span>
</a>
</li>
</ul>
</nav>

</div>
</div>
<div class="row">

</div>

</div>
{% endblock %}

[Link]
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{blog_title}}</title>
Filters

1. Template Filters: Used in Django templates to modify the display of


data before rendering in HTML.

[Link]
{% extends 'blog/[Link]' %}

{% block content %}
<div class="container-fluid ">
<div class="row my-2">
<div class="col">
<h2 >{{blog_title | upper}}</h2>

{% extends 'blog/[Link]' %}

{% block content %}
<div class="container-fluid ">
<div class="row my-2">
<div class="col">
<h2 >{{blog_title | length}}</h2>

{% extends 'blog/[Link]' %}

{% block content %}
<div class="container-fluid ">
<div class="row my-2">
<div class="col">
<h2 >{{blog_title | truncatewords:1}}</h2>
</div>

You might also like