Building responsive multi-language website with blog and static pages using October CMS — part 2

  • Blog page — contains a list of blog posts and categories.
  • Blog post page.
  • Blog category page.
  • Add a link to the homepage to show the latest post.

Creating the blog page

The blog home page should display a list of published blog posts (including pagination) and a category list. The Flat UI theme already contains a blog post page with some demo contents which is going to be replaced with real posts.

<div class=”col-sm-9">
{% component ‘blogPosts’ %}

<div class=”clearfix”></div>
</div>
url = “/blog/:page?”

Creating the category list

The blog home page refers to the blog/sidebar partial, which displays the category list. Initially it outputs some demo contents that should be removed first.

<div class=”panel panel-default”>
<div class=”panel-heading”>
Categories
</div>
{% component ‘blogCategories’ %}
</div>

Creating the category page

There is no blog category page in the Flat theme so we’re going to create it from scratch. The category page is not very different from the blog home page. It displays a list of blog posts with pagination, but blog posts belong to a specific category.

<h3>Blog</h3>
{% if not category %}
<h3>Category not found</h3>
{% else %}
<h3>{{ category.name }}</h3>
{% endif %}

Creating the blog post page

The blog post page already exists in the theme. Click blog/post page in the CMS page list and remove the demo content under the Blog Post #1 and Pagination comments.

<h3>Blog Post</h3>
<h3>{{ post.title }}</h3>
{% if post %}
Normal blog post markup
{% else %}
Post not found message
{% endif %}

Displaying the latest blog post on the home page

In order to display the latest post on the home page we will use the same Post List component with a simple trick. The component allows you to limit the number of posts it outputs using the postsPerPage property, which should be set to 1 to show exactly one post.

<! — Latest blog post →
<h3>Latest from the blog</h3>
{% component ‘blogPosts’ %}
.page-home {
.pagination {
display: none;
}
}

Translating blog posts

Now that we have all the blog pages, would it take long to make them translatable? It won’t take any time at all! The Translate plugin works in such a way that no special coding is required in the CMS templates. Just provide your posts’ content in different languages and October will do the rest.

--

--

A minimalistic PHP CMS platform that gets back to basics.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store