Light Mode

Single blog

This single blog page template is to display the content of a single article from the store's blog. The content can be a mix of text and images. This is part of the internal marketing tool for the store owner to draw the customer's attention to specific products or ideas. Each article is displayed along with its tags, in the event of having tags. This template may also show any related articles to the current single article.

Following is the page location and url:

└── src 
  ├── views
    ├── pages
    |   ├── blog
    |   |   ├── single.twig
    |   ...
    ...

Example

Sigle blog

Variables

Components

The category page includes the Breadcrumbs component. Breadcrumbs are a set of links that indicate the current page and its "ancestors" leading back to the site's homepage.

{% component 'header.breadcrumbs' %}

Hooks

The single blog page template may call the following hooks in order to inject more information:

{% hook 'blog:single.items.start' %}
{% hook 'blog:single.items.end' %}

Usage

This page receives the object article, which contains the full content details of that single article. For example, article.name, article.created_at, article.author.name, and so on. The developer has complete control over how these elements can be displayed.

<p>{{ article.title }}</p>
<p>{{ article.created_at|date }}</p>
<p>{{ article.author.name }}</p>

{% if article.has_image %} 
  <img src="{{ article.image.url }}" alt="{{ article.image.alt }}" />
{% endif %}

<p>{{ article.body|raw }}</p>

The variable article.tags can be used to display the article's attached tags. Below is an example of that.

{% if article.tags|length %}
  {% for tag in article.tags %} 
    {{ tag.name }} 
  {% endfor %}
{% endif %}

In addition, the variable article.related retrieves an array of any related articles, which can be listed using a for-loop statement.

{% if related|length %}
    <h2>Related Articles</h2>

    {% for article in article.related %}
        {{ article.name }}
        {% if article.has_image %}
            <img src="{{ article.image.url }}" alt="{{ article.image.alt }}"/>
        {% else %}
            <img src="{{ asset('images/placeholder.png') }}" alt="placeholder">
        {% endif %}
        {{ article.created_at|date }}
        {{ article.title }}
    {% endfor %}
{% endif %}

Last modified: 9 months ago