Templates and Bootstrap¶
Now, we will use Django’s built in templating to style our home page.
Django will look within each app for templates or for a base folder call
templates
. We will create a folder in the main project to house our
templates, and a file called home
to place our styling in.
mkdir templates
touch templates/home.html
Now, we will use the settings.py
file to establish our template and
tell Django where it is located. Adding the line:
TEMPLATES = [
{
'DIRS': [os.path.join(BASE_DIR, 'templates')],
},
]
Let’s add some HTML to our home.html file as well.
<h1>Hello again.</h1>
Updating Views¶
There is a built-in TemplateView method that we will use in the
views.py
file. Here, we follow a similar approach to our last
example in terms of mapping urls. In our views.py
file we will add
from django.views.generic import TemplateView
class HomePageView(TemplateView):
template_name = 'home.html'
In the app level urls.py
, we just need to change the line in our
urlpatterns
list:
path('', views.HomePageView.as_view(), name = 'home')
Now, if we restart the server we will have our new home page rendered.
Adding a Page¶
To add a page, we will create a new template, view, and url route just as above. We can call this page our about page.
touch templates/about.html
Add HTML to the about page.
<h1>This is about me.</h1>
We create a view in our views.py
file, we will create an
aboutpageview class.
class aboutpageview(TemplateView):
template_name = 'about.html'
In our urls.py
file, we add a line to our urlpatterns to direct
visitors to the about page.
path('about/', views.aboutpageview.as_view(), name = 'about'),
Extending the Template¶
Now, we will create a base file that we can use to extend a style across multiple pages. To do so, we will create a base file, and then use the Django minimal templating language to pull the formatting in to the additional pages.
touch templates/base.html
Here, we can add a minimal header to see how this can be applied to all
pages. In the new base.html
file, write the following:
<header>
<a href="{% url 'home' %}">Home</a> | <a href="{% url 'about' %}">About</a>
</header>
{% block content %}
{% endblock %}
Now, we alter the home.html
and about.html
files to extend the
base.html
file. In each, we will add the line
{% extends 'base.html' %}
Finally, we wrap the content of both pages with
{% block content %}{% endblock %}
. Thus, in our home.html
file,
we have:
{% extends 'base.html' %}
{% block content %}
<h1>Welcome Home Jacob.</h1>
{% endblock %}
Same thing in our about.html
file. Restart the server and you should
see the header appear.
Using Bootstrap¶
The bootstrap framework is a way around developing all our own CSS. We can either directly download the files, or use the CDN link. We will follow this approach by copying the CDN information from the Bootstrap getting started page.
https://getbootstrap.com/docs/3.3/getting-started/
Go to our base.html
file, and add the link in a <head></head>
tag.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
Fire up the server and you should notice a slight formatting change.
Tests¶
A major part of development in Django is the use of tests to assure
everything is working. While our page is extremely simple, we still want
to make sure that our home and about pages are functioning to return
responses. In the tests.py
file, we will place two simple tests that
verify these pages are returning a 200 response code.
from django.test import TestCase
# Create your tests here.
from django.test import SimpleTestCase
class SimpleTests(SimpleTestCase):
def test_home_page_status_code(self):
response = self.client.get('/')
self.assertEqual(response.status_code, 200)
def test_about_page_status_code(self):
response = self.client.get('/about/')
self.assertEqual(response.status_code, 200)
Problem¶
Remember that our goal is to put together a website to share our Python Data projects that we’ve been making in Jupyter notebooks. To do so, let’s consider taking a notebook, converting it to an HTML file, and adding this file to a a page called Projects where users can see our different projects for visitors to see.
To create the HTML files of the notebooks, we will use Jupyter’s
nbconvert
functionality. To start, navigate to the directory where
your notebooks are housed with the terminal and cd
command. Now,
whatever notebook you would like to convert, enter
jupyter nbconvert notebook.ipynb
and you will have a new HTML file in the same folder. If you want, you can enter a directory to place this new file, for example
jupyter nbconvert notebook.ipynb htmls/
assuming we have an htmls directory.
Your goal is to play around with the different bootstrap features to style your home and about pages, and to add a projects page that contains your first Python projects from the Jupyter notebooks. You should explore a nicer navbar that includes a logo image.