Simple Blog Using Django 1.9 — Make the blog looks nicer

This article is continuation from this article https://medium.com/@gerrysabar/simple-blog-using-django-1-9-ea3c5336bc9c ,makesure you have read this article before proceed to this article and you also have completed or clone the code from previous series. In this article we’ll cover how to layouting the web to make it looks nicer by implementing bootstrap & also using one bootstrap theme. If you take a look to the code you can see the blog page doesn’t contain correct html structure.

Our plan now is creating a main template page then the html of each template will be rendered to the main template. The reason we’re doing this is practicing a good DRY (Don’t Repeat Yourself) approach. We’re going to use this bootstrap blog tempate:

The picture above is the reason why we need to develop main template then render each template from each method in views.py into main template. We will use Bootstrap Clean Blog theme. Let’s create a file named base.html inside templates directory. This file will be our main template page and add this code

Basically this code is a html copy code from https://blackrockdigital.github.io/startbootstrap-clean-blog/ but we modify CSS & Javascript links from the code. In templates/index.html we add code at line 1 to render page index.html into main template

{% extends "base.html" %}
{% for article in articles %}
<h2> {{article.title}} </h2>
<p>
    {{article.content|truncatechars:60}}
</p>
<hr/>
{% endfor %}

Now at localhost:8000/articles you can see bootstrap is implemented but we are missing the picture. We are going to handle asset management in Django now to put css, js, images and other kind of files. Let’s create a directory named static in root project directory and inside static directory we create another directory named images. We also need to download the image home-bg.jpg from here https://blackrockdigital.github.io/startbootstrap-clean-blog/img/home-bg.jpg and put into images directory we just created before. So my file structure will be like this now:

At templates/index.html we need to add one line code at the first line:

{% extends “base.html” %}

The code above tells Django to render template from index.html to be rendered to main template. If you access localhost:8000/articles you can see we have cloned the layout just like from https://blackrockdigital.github.io/startbootstrap-clean-blog/ but we’re missing the image. We need to add this line at the bottom of myblog/settings.py

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, “static”),
]

This will tell Django that our static files is located at static directory inside root project directory. We also need to add the code below at the first line in templates/base.html to load static files

{% load staticfiles %}

Then search this code inside base.html

<header class=”masthead” style=”background-image: url(‘img/home-bg.jpg’)”>

And replace it with

<header class=”masthead” style=”background-image: url(‘{% static “images/home-bg.jpg”%}’)”>

Now you can see the missing header image at localhost:8000/articles. However, the content is still the content from html code we copied and our articles from database is missing. Please remove all html codes between <div class=”container”> and its closing tag then replaced with this code

<div class=”container”>
{% block content %}
{% endblock content %}
</div>

Block content is used to inject html code from articles/index.html and at articles/index.html modify the code as follow:

{% extends "base.html" %}

{% block content %}

<div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
        {% for article in articles %}
        <div class="post-preview">
            <a href="{{article.id}}">
                <h2 class="post-title">
                    {{ article.title }}
                </h2>
                <h3 class="post-subtitle">
                    {{article.content|truncatechars:60}}
                </h3>
            </a>
            <p class="post-meta">Posted by
                <a href="#">Start Bootstrap</a>
                on September 24, 2019</p>
        </div>
        <hr>

        {% endfor %}
        <div class="clearfix">
            <a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
        </div>

    </div>
</div>

{% endblock content %}

The code above is a little modification from the html code for clean blog to show each article title & content excerpt. Our article index page is looking nice now. However when we click the title our page that display the article detail still only showing plain text. We need to render template from articles/detail.html to our main template as well

{% extends "base.html" %}

{% block content %}

<div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">

        <h1>{{article.title}}</h1>

        <p>
            {{article.content}}
        </p>


    </div>
</div>

{% endblock content %}

Cool, we have make the layout for article index & detail looks nice. Let’s implement the same for articles/create.html page by modifying the code as follow:

{% extends "base.html" %}

{% block content %}

<div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">

        <h1>Form </h1>

        <form method="POST" action="">
            {% csrf_token %}  <!-- implementing csrf token for security -->
            {{ form.as_p }}  <!-- parsing form into html -->
            <input type="submit" value="Create Post"/>
        </form>

    </div>
</div>
{% endblock content %}

Alright, we have created a nice layout blog now. There are many things you can try by your own to improve your skill such as:

• Moving css & js files into static files
• Adding author & datetime for article creation (hint: you create new field at models & run migration then for datetime field you can see this documentation https://docs.djangoproject.com/en/1.9/topics/db/models/#using-models

On the next article we will cover how to adjust admin page a bit, adding pagination and slug. Stay tune!