In the previous post, we created our first "Hello World". However, In this post we are going to be creating a new django template within which we will render our HTML page. We would need to refactor our previous code a bit to achieve this.
First we are going to create a new folder called 'templates' within our root directory which is our date_project. In order to remember this, just know that templates should be created in the same directory as our "manage.py" file. Within this, we will create our new "index.html" file.
Now we need to inform django that we are going to be using templates and let django know about the location of our templates.
Go to "settings.py" and under "TEMPLATES", add this within the DIRS,
'DIRS': [os.path.join(BASE_DIR, 'templates')],
Next, we will insert the content of our index.html, which I'll be copying and pasting from my original site.
It contains a lot of CDN links used for animations and as such, we need to change some of the code.
But first, we need to edit our views to indicate that we have a new HTML file we want to render. Delete these lines:
from django.http import HttpResponse
return HttpResponse('Hello world')
replace the views.py with:
from django.shortcuts import render
# Create your views here.
def index (request):
return render(request, 'index.html')
Your HTML page should display nicely now. This is what i have now. However, my CSS file and images are not displaying. This is because we also need to render the static files.
First we create a new folder called 'static' within our date_app. Create another folder named "css" within which, we put our css files and another folder named "images" containing our image. For emphasis, always remember that the “templates” folder is created within the same directory as our “manage.py” file while the “static” folder is created within our date_app.
Next,within our HTML page, we need to refactor the link to our stylesheet
<link rel = "stylesheet" href = "{% static 'css/style.css' %}" />
and also edit the path to our images:
<img src="{% static 'images/amy-shamblen-pJ_DCj9KswI-unsplash.jpg' %}" alt="" >
Lastly, we need to remember to inform Django to load static files at the top of the page.
This is what my final HTML page looks like:
{%load static%}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doctors' Connect</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
crossorigin="anonymous"/>
<!-- scroll reveal -->
<script src="https://unpkg.com/scrollreveal"></script>
<!-- animate css -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
<!-- poppins font -->
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<!-- Animate on scroll -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- Css files -->
<link rel = "stylesheet" href = "{% static 'css/style.css' %}" />
</head>
<body>
<div class="navbar">
<span class="navbar-brand mb-0 h1">
<h2 class = "text-danger font-weight-bold">Doctors' Connect</h2>
</span>
</div>
<section>
<div class="container-fluid container intro">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 intro-text" >
<h2>Finding love can be really difficult...</h2>
<h3>However, we try to make it easier</h3>
<h4>Want to find out more?</h4><br>
<a class="btn btn-danger btn-lg" href="main/main.html" role="button">GET STARTED</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 intro-img" >
<img src="{% static 'images/amy-shamblen-pJ_DCj9KswI-unsplash.jpg' %}" alt="" data-aos="flip-left" data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
</div>
</div>
</div>
</section><br><br><br><br><br><br><br><br>
<div class = "text-center" data-aos="zoom-out-up" data-aos-duration="2000">
<h6>Designed and built by Dr Yahaya H.K</h6>
<h6>All rights reserved, 2020.</h6>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
window.sr = ScrollReveal();
sr.reveal('.intro-text', {
duration: 2500,
origin: 'bottom',
distance: "300px",
viewFactor: 0.3,
});
</script>
<!-- animate on scroll js -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!-- Animate on scroll init -->
<script>
AOS.init();
</script>
<script src = "script.js"></script>
</body>
</html>
Now run your server again with
python manage.py runserver
Congratulations, we have now fully rendered the page and our website should display nicely now.
Top comments (0)