Head back to your editor of choice and open the index.html file located in your downloaded Clean Blog bootstrap-theme and copy the HTML for a single blog-post:

<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, 2018</p>
</div>
<hr>

Open the article.html file located at templates/aldryn_newsblog/includes/ and replace the code between these tags:

{% if not article.published %} unpublished{% endif %}">

and

{% if detail_view %}

with the copied HTML from the bootstrap theme.

Check your blog in the browser and you’ll see that it’s been replaced with the content from our copied html.

Now we’ll fill in the correct template tags to make this page dynamic. First, we start with the titles.

Replace:

<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>

with:

<h2 class="post-title">
    {% render_model article "title" %}
</h2>
{% if article.lead_in %}
<h3 class="post-subtitle">
    {% if not detail_view %}
        {% render_model article "lead_in" "" "" "truncatewords:'20'" %}
    {% else %}
        {% render_model article "lead_in" %}
    {% endif %}
</h3>
{% endif %}

Lead

Additionally each blog post can have a «Lead» text (think of it as an introduction to your blog post), that will be rendered after the blog post title. To set the lead, double-click on the title of the blog post and scroll down to the advanced section and add your text in the «Lead» textarea.

___

Django Filters

To show a shortened version of your lead-in to 20 words outside of the detail view (i.e. list view), we add truncatewords: '20' in the “if condition”: {% if not detail_view %}. Feel free to change this to any number. A Django model is the single, definitive source of information for your data. In this case, our blog posts. It contains the essential fields and behaviours of the data we’re storing. Django CMS offers the template tag “render_model,” which allows you to directly edit the content of certain fields in frontend applications , by double-clicking on it.

Learn more about this template tag, in the documentation.
___

Next, let’s change the static links with template tags and variables that it will show the appropriate blog-post information.

Replace the link to the blog post detail in:

<div class="post-preview">
    <a href="post.html">

with:

<div class="post-preview">
    <a href="{% namespace_url 'article-detail' article.slug namespace=namespace default='' %}">

___

Django URLs

'article-detail' article.slug define the link to the detail page of each blog post. Namespaces allow for multiple uses of an application on the same website. If you only use the tag once, it automatically configures itself. So for this tutorial, everything is already as it should be.

Learn more about Namespaces
___

To make the meta information fully dynamic, replace:

<p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 24, 2018</p>

With:

<p class="post-meta">Posted by 
    {% include "aldryn_newsblog/includes/author.html" with author=article.author %}
    on {{ article.publishing_date|date }}
</p>

If you’ve set all the template tags correctly, your template should now look like this:

{% load i18n staticfiles thumbnail cms_tags apphooks_config_tags %}

<article class="article
    {% if article.is_featured %} featured{% endif %}
    {% if not article.published %} unpublished{% endif %}">

    <div class="post-preview">
      <a href="{% namespace_url 'article-detail' article.slug namespace=namespace default='' %}">
        <h2 class="post-title">
            {% render_model article "title" %}
        </h2>
        {% if article.lead_in %}
        <h3 class="post-subtitle">
            {% if not detail_view %}
                {% render_model article "lead_in" "" "" "truncatewords:'20'|striptags" %}
            {% else %}
                {% render_model article "lead_in" %}
            {% endif %}
        </h3>
        {% endif %}
      </a>
      <p class="post-meta">Posted by
        {% include "aldryn_newsblog/includes/author.html" with author=article.author %}
        on {{ article.publishing_date|date }}
      </p>
    </div>
    <hr>

    {% if detail_view %}
        {% render_placeholder article.content language placeholder_language %}
    {% endif %}
</article>

We need to make some adjustments to the author.html template at templates/aldryn_newsblog/includes/.

Replace:

{% load i18n staticfiles thumbnail apphooks_config_tags %}

{% if author %}
    <p>
        <a href="{% namespace_url "article-list-by-author" author.slug namespace=namespace default='' %}">
            {% if author.visual %}
                {% thumbnail author.visual "50x50" crop upscale subject_location=author.visual.subject_location as author_image %}
                <img src="{{ author_image.url }}" width="50" height="50" alt="{{ author.name }}">
            {% endif %}
            {{ author.name }}
        </a>
    </p>
    {% if author.function %}<p>{{ author.function }}</p>{% endif %}
    {% if author.article_count %}<p>{{ author.article_count }}</p>{% endif %}
{% endif %}

With:

{% load i18n staticfiles thumbnail apphooks_config_tags %}

{% if author %}
    <a href="{% namespace_url 'article-list-by-author' author.slug namespace=namespace default='' %}">
        {{ author.name }}
    </a>
{% endif %}

Check the page in your browser to confirm that everything is working correctly.

Pagination

Our next step is to fix the pagination. 

Open the pagination.html file at templates/aldryn_newsblog/includes/ and add the pagination class to the <ul> HTML element near the top.

Replace <ul>:

{% load i18n %}

{% if is_paginated %}
    <ul>

with:

{% load i18n %}

{% if is_paginated %}
    <ul class="pagination">

Afterwards add the following class to every <li> :
page-item
and the following class to every <a>  or <span> element:
page-link 

It will look quite plain because you only have one page, but after you’ve added more than five blog posts, the pagination will look like this:

Detail View

Now let’s adapt the template for the actual blog post, which is referred to as detail_view

Click on one of your blog posts so we can watch the changes. Then, locate the article_detail.html file inside templates/aldryn_newsblog/ and open it. 

Since Detail View takes the styles from the overview page (the article.html file we updated before), the only thing left is to fix the bottom navigation. 

For this, repeat the same process as for the pagination. The final result would be:

<ul class="pagination">
    {% if prev_article %}
        <li class="page-item"><a class="page-link" href="{{ prev_article.get_absolute_url }}">{% trans "Previous Article" %}</a></li>
    {% endif %}
    <li class="page-item"><a class="page-link" href="{% namespace_url "article-list" %}">{% trans "Back to Overview" %}</a></li>
    {% if next_article %}
        <li class="page-item"><a class="page-link" href="{{ next_article.get_absolute_url }}">{% trans "Next Article" %}</a></li>
    {% endif %}
</ul>

Adding Content

Navigate to one of the blog posts you created earlier. It should only consist of a title and your lead text. 

To add the actual content, we have to switch to Edit Mode in the CMS again (by clicking Edit in the CMS toolbar) and then toggling the Structure Mode.

Then, add an Image Plugin to the Content section of your blog post by clicking the “+” button. Upload the picture post-sample-image.jpg located in static/img/ in the themes folder (you don't need to change any settings) and confirm by clicking the Save button. 

Change from Structure Mode back to Content Mode and you should see the content you added on the actual blog post page.

You should now have a working blog post, a nice header representing your name, a visual of your choice and a home page.

Did this answer your question?