<!DOCTYPE html><html>
<head>
<title>Django Central</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700";
rel="stylesheet">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
</head>
<body>
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
background-color: #fdfdfd;
}
.shadow {
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}
.btn-danger {
color: #fff;
background-color: #f00000;
border-color: #dc281e;
}
.masthead {
background: #3398E1;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
</style>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light
shadow" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">Django
central</a>
<button class="navbar-toggler navbar-toggler-right"
type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item text-black">
<a class="nav-link text-black
font-weight-bold" href="#">About</a>
</li>
<li class="nav-item text-black">
<a class="nav-link text-black
font-weight-bold" href="#">Policy</a>
</li>
<li class="nav-item text-black">
<a class="nav-link text-black
font-weight-bold" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
{% block content %}
<!-- Content Goes here -->
{% endblock content %}
<!-- Footer -->
<footer class="py-3 bg-grey">
<p class="m-0 text-dark text-center ">Copyright ©
Django Central</p>
</footer>
</body></html>
This is a regular HTML file except for the tags inside curly braces { } these
are called template tags.
The {% url 'home' %} Returns an absolute path reference, it generates a
link to the home view which is also the List view for posts.
The {% block content %} Defines a block that can be overridden by child
templates, this is where the content from the other HTML file will get
injected.
Next, we will make a small sidebar widget which will be inherited by all
the pages across the site. Notice sidebar is also being injected in the
base.html file this makes it globally available for pages inheriting the
base file.
{% block sidebar %}
<style>
.card{
box-shadow: 0 16px 48px #E3E7EB;
}
</style>
<!-- Sidebar Widgets Column --><div class="col-md-4 float-right "><div
class="card my-4">
<h5 class="card-header">About Us</h5>
<div class="card-body">
<p class="card-text"> This awesome blog is made on the top of
our Favourite full stack Framework 'Django', follow up the tutorial to
learn how we made it..!</p>
<a
href="https://djangocentral.com/building-a-blog-application-with-django";
class="btn btn-danger">Know more!</a>
</div></div></div>
{% endblock sidebar %}
Next, create the index.html file of our blog that’s the homepage.
{% extends "base.html" %}
{% block content %}<style>
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
background-color: #fdfdfd;
}
.head_text {
color: white;
}
.card {
box-shadow: 0 16px 48px #E3E7EB;
}</style>
<header class="masthead">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class=" col-md-8 col-md-10 mx-auto">
<div class="site-heading">
<h3 class=" site-heading my-4 mt-3 text-white">
Welcome to my awesome Blog </h3>
<p class="text-light">We Love Django As much as
you do..!  
</p>
</div>
</div>
</div>
</div></header><div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8 mt-3 left">
{% for post in post_list %}
<div class="card mb-4">
<div class="card-body">
<h2 class="card-title">{{ post.title }}</h2>
<p class="card-text text-muted h6">{{ post.author
}} | {{ post.created_on}} </p>
<p class="card-text">{{post.content|slice:":200" }}</p>
<a href="{% url 'post_detail' post.slug %}"
class="btn btn-primary">Read More →</a>
</div>
</div>
{% endfor %}
</div>
{% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
</div></div>
{%endblock%}
With the {% extends %} template tag, we tell Django to inherit from the
base.html template. Then, we are filling the content blocks of the base
template with content.
Notice we are using for loop
<https://djangocentral.com/while-loops-in-python/> in HTML that’s the power
of Django templates it makes HTML Dynamic. The loop is iterating through
the posts and displaying their title, date, author, and body, including a
link in the title to the canonical URL of the post.
In the body of the post, we are also using template filters to limit the
words on the excerpts to 200 characters. Template filters allow you to
modify variables for display and look like {{ variable | filter }}.
Now run the server and visit http://127.0.0.1:8000/ you will see the
homepage of our blog.
[image: blog made with django]
Looks good..!
You might have noticed I have imported some dummy content to fill the page
you can do the same using this lorem ipsum generator tools.
Now let’s make an HTML template for the detailed view of our posts.
Next, Create a file post_detail.html and paste the below HTML there.
{% extends 'base.html' %} {% block content %}
<div class="container">
<div class="row">
<div class="col-md-8 card mb-4 mt-3 left top">
<div class="card-body">
<h1>{% block title %} {{ object.title }} {% endblock title %}</h1>
<p class=" text-muted">{{ post.author }} | {{ post.created_on }}</p>
<p class="card-text ">{{ object.content | safe }}</p>
</div>
</div>
{% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
</div></div>
{% endblock content %}
On Thu, Oct 8, 2020 at 6:59 PM Odedele Temitayo <[email protected]>
wrote:
> What do i need to do?,thanks.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/CALb%2BdgR%2Bpri78ihS2oNe%3Djw2kRKZ3pdOmEnNR%3Dehg8TBLoMzow%40mail.gmail.com
> <https://groups.google.com/d/msgid/django-users/CALb%2BdgR%2Bpri78ihS2oNe%3Djw2kRKZ3pdOmEnNR%3Dehg8TBLoMzow%40mail.gmail.com?utm_medium=email&utm_source=footer>
> .
>
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/CADPiQZSCRHrfzpPFQFT_7paO53YZ19zx9Hz2sdZYpZxreDVWCQ%40mail.gmail.com.
