<!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.
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 Thursday, October 8, 2020 at 7:01:21 PM UTC+5:30 [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/ee0778d3-7bec-4a70-9541-ab14868e1ccbn%40googlegroups.com.
