For the last step, switch back to edit-mode and click the “Content” button in the upper-right of the toolbar. You might notice that the spacing is incorrect or that we don’t have an “Older Posts ->” link.

To solve this, head back to your templates and open "latest_articles.html" inside “/templates/aldryn_newsblog/plugins/” in your editor. It should look like this:

{% load i18n %}

{% for article in article_list %}
    {% include "aldryn_newsblog/includes/article.html" with namespace=instance.app_config.namespace %}
{% empty %}
    <p>{% trans "No items available" %}</p>
{% endfor %}

This template currently renders our latest articles by looping through four articles and passing the information to "article.html".

We need to change this template a bit to be in sync with our theme. Now open “index.html” from the downloaded theme and look for this code:

<div class="post-preview">
    <a href="post.html">
        <h2 class="post-title">
            Man must explore, and this is exploration at its greatest
        </h2>
        <h3 class="post-subtitle">
            Problems look mighty small from 150 miles up
        </h3>
    </a>
    <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 24, 2014</p>
</div>
<hr>

...

<!-- Pager -->
<ul class="pager">
    <li class="next">
        <a href="#">Older Posts &rarr;</a>
    </li>
</ul>

To get our template working, head back to “latest_articles.html” and replace:

{% include "aldryn_newsblog/includes/article.html" with namespace=instance.app_config.namespace %}

with the following code:

<div class="post-preview">
    {% include "aldryn_newsblog/includes/article.html" with namespace=instance.app_config.namespace %}
</div>

Add the following code at the end of the file:

<!-- Pager -->
<ul class="pager">
    <li class="next">
        <a href="#">Older Posts &rarr;</a>
    </li>
</ul>

Save the template and go back to your browser.

Look at the home page and compare it with the “index.html” file of the Clean Blog theme. The spaces are now correct. 

Now open "article.html" inside “templates/aldryn_newsblog/includes” and adapt the following lines:

  • from
    {% render_model article "title" %}
    to
     {% render_model article "title" "" "" "striptags" %} 
  • from
     {% render_model article "lead_in" "" "" "truncatewords:'20'" %}
    to
     {% render_model article "lead_in" "" "" "truncatewords:'20'|striptags" %} 
  • from
     {% render_model article "lead_in" %}
    to
     {% render_model article "lead_in" "" "" "striptags" %} 
  • from
    {{ article.publishing_date|date }}
    to
    {{ article.publishing_date|date:"F d, Y" }} 
  • striptags will remove all defined HTML markup to render titles correctly, since they are already inside an <h2> or <h3>
  • date:"F d, Y" formats our date to be aligned with the theme

Save the file "article.html".

___

Configuring Date and Time
Django provides extensive configuration for date and time. In our “article.html” example, we used “date:"F d, Y"” to get the correct format for our article items “Posted by Start Bootstrap on February 2, 2016.” When just using “date” as a filter, Django will use the default configuration in your “settings.py” file.
___

The last thing left to do is change the “Older Posts” link. Head back to "latest_articles.html" inside “templates/aldryn_newsblog/plugins/” and replace the first line in "latest_articles.html" with:

{% load i18n apphooks_config_tags %}

then look for the following code:

<a href="#">Older Posts &rarr;</a>

and replace it with:

<a href="{% namespace_url "article-list" namespace=instance.app_config.namespace default='' %}">Older Posts &rarr;</a>

Save the file. The result should look like this:

Next we will have a look on how to make the blog detail header pretty.

Did this answer your question?