How I adjusted ready-to-use layout in my Django blog
July 26, 2019, 3:11 p.m.
First part of Django blog tutorial: How to start a Django project.
Second part of Django blog tutorial: First views in my Django blog project
Third part of Django blog tutorial: How I adjusted ready-to_use layout in my Django blog - part1
Last time I wrote about creating a folder called templates/blog with index.html and about.html pages and creating simple views.
Now I want to show how I adjusted a ready-to-use layout.
The layout I’m using in my blog is called Keep It Simple . I chose this one because it is minimalistic; I love subtle green and grey colours but what’s even more important; it hasn’t got many additional folders and files, only CSS, images, JS and a few HTML files.
Plan: 1. Creating a folder called static 2. Creating base.html file 3. Creating partials folder 4. Adding code to index.html, about.html. 5. Adding images to HTML templates in Django
1. Creating a folder called static
Before doing anything let’s make sure we are in a virtual environment.
I’m using pipenv so the command line instruction pipenv shell opens the virtual environment.
After downloading and extracting Keep It Simple theme on my computer, I put it on Desktop to have easy access to it.
But first things first and I need to create a special folder in my Django project to store static files.
mkdir static
This command will create a new folder at the same level as my main project - website and app - blog and templates folder.
To make it work, I need to add at the bottom of the settings.py file this line:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, ‘static’),
)
This line of code tells Django where to look for all static files such as CSS, images and JavaScript files. I have one main static folder, but I could have one inside my blog app and if I would like to add another app to my folder, for example, users, I could create the static files inside this app too.
In such a case I would have to tell Django to look for static files inside each app.
I’m also adding one more line of code to use it later.
STATIC_ROOT = os.path.join(BASE_DIR, ‘staticfiles’)
I will need this during deployment, but I’m adding it now not to forget about this.
In KeepItSimple folder there are three folders with static files: CSS, JS, images and now I’m moving these folders with all the code and images stored inside, into my static folder in my project. Obviously I can remove the images from the folder and add my own.
In KeepItSimple folder, there are also HTML files but I’m going only to copy and paste some of them.
2. Base.html file
Last time I finished creating my templates on very simple index.html and about.html.
Now in the templates folder, I’m creating another folder called blog
mkdir templates/blog
and moving index.html and about.html pages to this folder.
Now, in the templates folder, I’m creating a base.html file:
touch templates/base.html
This will be the main HTML file and all other files will extend this file. We could write in html everything connected with navigation, sidebar and footer here. But not this time.
But now I’m opening the index.html file in KeepItSimple folder and copying all the code from the very first line to the last one. And now I’m pasting it all to the base.html file in my Django project.
It’s time to look closer at the code inside this file. They divided the code into sections and it is a tremendous help. First of all we can’t change or remove (at least for now) anything above <head> tag as well as between <head> and </head> tags. When we scroll down to the bottom of the page we will see Java Script section, and this section also has to be untouched.
Now I can close the KeepItSimple index.html file and work only using base.html one.
3. Creating partials folder
Looking even closer into the code between body tags we can see such sections as Header, Content, Footer. But even in these parts, there are smaller sections.
I don’t want to have any or almost any HTML code between body tags in our base.html file. That’s why I’m going to put parts of this code into separate files.
Now inside the templates folder, I’m creating another folder called partials.
mkdir templates/partials
And there I will store all HTML code for header, navbar, sidebar, footer, comments and pagination in separate files. In the command line I’m writing:
touch templates/partials/_topbar.html
touch templates/partials/_navbar.html
touch templates/partials/_sidebar.html
touch templates/partials/_footer.html
As you can see now, I can divide the code from the base.html and put everything in appropriate files. While copying the code from base.html I pay attention to leave comments there. They will help us later on.
At the top of each file, I’m writing
{% load static %}
This line of code tells Django to look for CSS or JS in the static folder.
In base.html file there is a header tag with id="top” and I’m leaving this tag in the base.html and rest of the code from the header I divided into two files
partials/_topbar.html
{% load static %}
<div class="row">
<div class="header-content twelve columns">
<h1 id="logo-text"><a href="" title="">Coding Journal</a></h1>
<p id="intro">sample blog</p>
</div>
</div>
partials/_navbar.html
{% load static %}
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<div class="row">
<ul id="nav" class="nav">
some code .....
</ul> <!-- end #nav -->
</div>
</nav> <!-- end #nav-wrap -->
In base.html between the header tags of a body part I’m writing
{% include ‘partials/_topbar.html’ %}
{% include ‘partials/_navbar.html’ %}
Then I’m looking for the div with id="sidebar“ and copy everything to _sidebar.html file.
partials/_sidebar.html
{% load static %}
<div id="sidebar" class="four columns">
some code here
...........
some code
</div> <!-- end sidebar -->
But I’m not including this file in the base.html, yet.
At the end of this part, I’m copying footer part from base.html, pasting it into _footer.html.
partials/_footer.html
{% load static %}
<!-- Footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
some code here .....
<p class="copyright">© Copyright 2019. Design by <a title="Styleshout" href="http://www.styleshout.com/">Styleshout</a> implemented by M....</p>
</div> <!-- End row -->
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#top"><i class="fa fa-chevron-up"></i></a></div>
</footer> <!-- End Footer-->
And in the place of footer code in base.html I’m writing
{% include ‘partials/_footer’ %}
4. Adding code to index.html, about.html.
Now, what about content?
Now in my base.html file, I have a part called Main Content
I’m leaving first two lines with div id=”content-wrap" and div with class="row“ and their closing tags are almost at the bottom of the file, in base.html and the rest of the code I’m copying and pasting into the file between {% block content %} and {% endblock %} tags.
In base.html inside the div class=”row“ I’m writing
{% block content %}
{% endblock %}
These two lines of code show the Django where to display the content of the page.
Below I’m including the sidebar file writing:
<!-- Side bar -->
{% include ‘partials/_sidebar.html’ %}
My body of base.html file looks like this:
In the index.html file, I’m leaving only one article and removing the rest of the code.
templates/blog/index.html
{% extends 'base.html'%}
{% load static %}
{% block content %}
<!-- Content
================================================== -->
<div id="main" class="eight columns">
<article class="entry">
<header class="entry-header">
<h2 class="entry-title">
<a href="single.html" title="">Hey, We Love Open Sans!</a>
</h2>
<div class="entry-meta">
<ul>
<li>July 12, 2014</li>
<span class="meta-sep">•</span>
<li><a href="#" title="" rel="category tag">Ghost</a></li>
<span class="meta-sep">•</span>
<li>John Doe</li>
</ul>
</div>
</header>
<div class="entry-content">
<p>Duis ex ad cupidatat tempor Excepteur cillum cupidatat fugiat nostrud cupidatat dolor sunt sint sit nisi est eu exercitation incididunt adipisicing veniam velit id fugiat enim mollit amet anim veniam dolor dolor irure velit commodo cillum sit nulla ullamco magna amet magna cupidatat qui labore cillum sit in tempor veniam consequat non laborum adipisicing aliqua ea nisi sint ut quis proident ullamco ut dolore culpa occaecat ut laboris in sit minim cupidatat ut dolor voluptate enim veniam consequat occaecat fugiat in adipisicing in amet Ut nulla nisi non ut enim aliqua laborum mollit quis nostrud sed sed.</p>
</div>
</article> <!-- end entry -->
</div>
{% endblock %}
Now we can run our server
python manage.py runserver
and check if the page works. We should have navbar, the title of the page, main content with one post, sidebar and the footer.
Now it’s time to add code to about.html
I’m opening page.html from KeepItSimple folder and copying everything from the Content part not including sidebar code of course, and the two first lines with div id="content-wrap" and div class="row“ as I already have it in my base.html file.
I’m putting it inside the {% block content %} and {% endblock %} tags in about.html in templates/blog folder.
templates/blog/about.html
{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Content
================================================== -->
<div id="main" class="eight columns">
<section class="page">
<h2 class="entry-title">
About the author of the blog:
</h2>
some code
</section> <!-- End page -->
</div>
{% endblock %}
If we have still our server working, we can check if the about page works, adding /about at the end of the URL address
127.0.0.1.8000/about
It’s a good time to add our own content to the About page. There are some parts of the code I don’t need now so I decided not to remove it but only put them in comments. I decided to add the content of the About page in HTML with all the images and my own text.
5. How to add images to HTML templates in Django?
In this project, I’m using two ways of adding images to my content. Here I’m treating the About page as a static site and all the content I’m adding is written in HTML.
So, first, I’m adding all the photos I want to have on the About page to static/images folder.
And then I’m writing the path to each photo using jinja language like this:
<img src="{% static ‘images/example.jpg’ %}" alt="example text">
At this point, we can add some links to switch between pages and start adjusting detail_page.html but I’m going to write about it next time.
My code after this part on Github
written by
