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, 2014</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, 2014</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'" %}
                {% 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">

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:

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, also called “pager” elements. 

For this, add the “pager” class to the  <ul> HTML element.

Replace <ul>:

{% block newsblog_content %}
    {% include "aldryn_newsblog/includes/article.html" with detail_view="true" %}

    {% static_placeholder "newsblog_social" %}

    <ul>

with:

{% block newsblog_content %}
    {% include "aldryn_newsblog/includes/article.html" with detail_view="true" %}

    {% static_placeholder "newsblog_social" %}

    <ul class="pager">

This will now render the component like this:

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 page” 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/" (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?