Content: Blog

Tutorials

How to Build a Website and Blog with django CMS, Without Knowing Python/Django - Pt. 4

Christian Bertschy

Feb. 16, 2016

Index


Part 4: Getting to Know News & Blog

Our next goal is to setup our blog. Let’s do this by clicking on the “Blog" link in the navigation bar.

Click on the "Edit page" button in the navigation to change back to Edit Mode. Choose "Page" in the django CMS toolbar and then select "Advanced settings...”.

 

Django CMS allows you to add Django applications to your CMS. On the "Advanced Settings" page, scroll down to the dropdown called "Application" and select "NewsBlog." 

Then, click "Save" on the bottom right and publish the page.

 

You’ll notice that this page is pretty empty and not yet properly setup with our theme. 

Before we start editing the template, let’s add two example blog posts so we have some content to work with. 

  1. Click on the “Create” button in the CMS toolbar and choose “New news/blog article.” Then hit “Next.”
  2. Enter a title and some content of your choice, then hit “Create.”
  3. Repeat steps 1) and 2) to create a second blog post.

 

The last step is to publish your blog posts. Simply edit each entry and make sure the "Is published" checkbox is selected. You can open an overview of all your blog article by clicking on "News & Blog" in the toolbar followed by "Article List...". Scroll to the right and make sure all articles are published.


Adapting Your Blog-Templates 

Open the “index.html” file located in your 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.

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 behaviors 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='' %}">

'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, here:
http://docs.django-cms.org/en/latest/how_to/apphooks.html#attaching-an-application-multiple-times

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.

If you want to deploy your website to the live server, just click on "Deploy live” in the project Dashboard and follow the instructions. Of course, you can set a custom domain as well.

Jump to Index    Part 5: Fine-tuning the News & Blog Addon

 

blog comments powered by Disqus

Want to post your article here?

Contact us