This week we’re going to work on the blog.liquid template, where the articles that you write in the “Blog posts” page of the admin are listed.

Let’s dooo this!

1. Make some dummy blog articles

Before we get started with the coding, you will have to make some blog articles. If you’ve already got some blog articles written, you can go to step 2. Otherwise, go to the “Blog posts” page of your admin and click the green “Add blog post” link in the top right to make a new article.

You don’t really have to worry about the content of each article, what I did was just dropped some lorem ipsum on those badboys (if you’re feeling moderately badass, you can use gangsta ipsum). I’d say make about 4 to 5 dummy articles.

2. Add the for loop to output the articles

Open blog.liquid, and replace its contents with the code below:

{{ blog.title }}

{% for article in blog.articles %}

  
{{ article.title }} 
  

    {{ article.published_at | date: '%b %d, %Y' }}
    {% if blog.comments_enabled? %}
    - {{ article.comments_count }} {{ article.comments_count | pluralize: 'comment','comments' }}
    {% endif %}
  
  

    {{ article.excerpt_or_content }}
  
 

{% endfor %}

What we’re doing here is doing a for loop through the blog.articles array, and for each article we’re outputting its title, the date in which it was published, how many comments is has, and the excerpt/content of that article. To see a full list of what’s accessible through the ‘article’ object, see here.

The cool thing about the {{ article.excerpt_or_content }} tag is that it automatically checks if an article has an excerpt or not. If it does, it will output the excerpt; if it doesn’t, it will output the contents of the article. For example, if you look at Figure 7.1, it will output the excerpt because I’ve written something for it.

You should now see a list of the blog articles that you created in Step 1.

3. Add the blog tags and link to the article

Next, we’re going to add some code to output every article’s tags as well a link to the full article. Insert the code in red below.

  ...
  

    {{ article.excerpt_or_content }}
  

  

    {% if article.tags.size > 0 %}      
    

      tags:
      {% for tag in article.tags %} 
      {{ tag }}{% unless forloop.last %}, {% endunless %}
      {% endfor %}
    
    {% endif %}
    

      Read more →