i have done it to that extent,just need some codes to make some navbar(like menu,where I will place some other things in it)
On Thu, Oct 8, 2020, 4:11 PM Adithya Gowli <[email protected]> wrote: > <!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 > <https://groups.google.com/d/msgid/django-users/CADPiQZSCRHrfzpPFQFT_7paO53YZ19zx9Hz2sdZYpZxreDVWCQ%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/CALb%2BdgQnvnGsWNLx0ZaZQnhcdjz-pno3JZiN5zvQgSO6Xmjx-Q%40mail.gmail.com.
