Salla Docs
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
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 %}