Understanding our Pretty Homepage
From our previous module, we had a beautiful news homepage, showcasing some headlines, it included other sections that described the homepage and Nounews basically. Now, let's dive into how all of this was done.
Static Files
If you open up the static folder, you will see that there are folders of stylesheets, js, images,fonts and others. All these files, define the colors, shape, size,animation and responsiveness (making the page adjust well to different devices: mobile, tablets and desktops) of the page, you may not have to worry about these file unless you want to make some changes like color theme changes or add some other custom styles.
templates in accounts folder
The files we have to actually look at are located in the templates folder we copied. Within this templates folder, there is another folder called accounts and in this accounts folder, we have base.html and index.html. Now please, pay particular attention to this part as this is where our presentation to users of our site is done, the first page our users will see when they visit so mistakes will not be overlooked.
base.html
Looking carefully through this file, you should notice three things.
The first one is that, we have the head tag, called all css files and also brought the header. This first part defines all the css files that we are going to be using, the head tag gives descriptive data about the site to search engines and the header defined the navigation bar located at the top of our Nounews homepage.
The second thing you should notice is the django template tags:
{% block content %}
{% endblock content %}The above template tag is used to hold down a place for the actual body html that will be coming from other pages. You will fully understand this part soon, please hold on.
The third part you should have noticed is footer and js files. The footer defines the bottom of the homepage.
Let me fulfill my promise: Now, in Django, we use base html to define parts of our pages that won't be changing even if other parts do change. You will notice most website have the same navigation bar (the top part of the page) when you browse from page to page and also that they have the same footer (the bottom part of the page). So, in order not to be rewriting these parts of the page for example when we want to write a registration and login page for our users, we write one base.html page, and then import it or in other words extend it when we want to write other pages.
index.html
The index.html page actually defines the content of our homepage, but I'm sure the first weird thing (that is if you are new to Django) you saw was the extension part. What we are doing on the first two lines of this page is to tell the system that we want this page to be added to our base.html page. So, all that we write in index.html will just be inserted at base.html, but where does base.html insert this so that our page isn't messed up, since HTML is highly structured? Well remember the second thing in base.html?
I'm referring to the above, so we basically tell the system, by putting the same thing above around all the content we want to be inserted from index.html into base.html. If you get this right, this is the kind of image you may have of the whole process:
We defined head and bottom in base.html because they are piratically static, and then our other pages are used to define the body which is then inserted in-between the head and bottom defined in base.html.
We then call on the index.html from our index view found in views.py:
from django.shortcuts import render
# Create your views here.
def index(request):
template_name = "accounts/index.html"
args = {}
return render(request,template_name,args)The call to display our index.html page is what you see on line 5 of the views.py and this index view is called in urls.py of accounts.py as below:
from django.conf.urls import url, include from . import views urlpatterns = [ url(r'^$', views.index,name="home"), ]
Which is saying that if our user goes to our homepage, we should call the index views which will also render the index.html page which also calls on base.html for help with navigation bar and the footer. Isn't it beautiful. If this was helpful, give it a 5 star rating. Rating helps to improve upon the lesson, please leave your comments as well if you know rating won't help us get your message.
That is all about what we did to make our homepage beautiful instead of the one we wrote in the beginning.
Comments