Create a multilanguage blog using OctoberCMS

This first part of a series of articles on how to create a multilingual blog using OctoberCMS.

• Part 1
• Part 2

Support for multiple languages ​​on the site can be a serious problem. If you don’t use the right tools, development will take you a lot longer than developing a regular website.

In the series of these tutorials I will tell you how to use OctoberCMS to develop such a site.

As a result, we get a fairly simple site, which will contain:

• Homepage, with static content and latest blog posts.
• Different pages with static content
• Blog - includes blog posts and categories.
• Page to view full blog post
• Category View Page

For the finished site framework, we will take the theme and plugins from the OctoberCMS store:

• Flat UI theme - Flat UI theme that uses Twitter Bootstrap as a base. This is currently the most downloaded theme in the store.
• Translate plugin - provides multilingual features for the site and plug-ins.
• Static Pages plugin - content management, navigation, site pages. "Masthev" for customers who do not know how to program

Preparing the working environment

The easiest way to install plugins and themes from the OctoberCMS store is to create an account at octobercms.com . Any plugin or theme that you add to yourself on octobercms.com will be automatically installed in your application during the update. How to install the CMS itself - you can read here .

Translate plugin

With this plugin you can translate blog posts, text in templates, in general, any text on your site. A full description of the possibilities of plug-ins deserves a separate post, in this article I will talk about the basic features.

To switch the language on the site there are several solutions:

1. The desired language can be part of the URL (i.e. http://example.com/fr )
2. Visitors can select a language using the controls on the site.

We will use the second option.

All strings that you output using the Twig _ (underscore) filter will automatically become "multilanguage." You can translate them in the admin panel, in the Settings -> Translate Messages page . Example:

<title>{{ ' '|_ }}</title> 

When the page is updated, the line automatically added to the Translate table of the Translate plugin, where you can translate the line into different languages.

If you want to publish or write something in another language, be it a blog post or just a text, then select the desired language directly in the editor.

Clean the topic of excess (optional)

Despite the fact that you can write a topic yourself, it makes sense to take a finished topic as a basis, since it defines the basic structure of the site and helps you understand how OctoberCMS themes work. Flat UI is a very flexible theme but contains many pages that are not needed for our project. It can be fixed.

Let's go to the catalog pages our topic. From there, you can delete the shop and portfolio directories, the ui-elements.htm file, and all files in the samples directory, except about.htm . Next, go to partials and delete the catalog shop which we also do not need.

Menu creation

There are several tools with which we can make a menu. For example, you can use the Static Pages plugin, which has a visual tool for creating menus. This is ideal for large sites where the navigation structure will evolve rapidly.

Another option is to write the menu code manually right in the templates, as is done in our theme. The main menu is defined in the partials/nav.htm .

Open partials/nav.html in a text editor and delete everything above <nav id="layout-nav" ... Also remove {{ nav.render_menu(links) }} and the Sign in button.

We cleaned the file from unnecessary, let's add menu items. The menu uses bootstrap markup with October chips. The filter page returns the url in the file path. Of course, it is not necessary to use it, but it will be easier with it.

 <ul class="nav navbar-nav navbar-right"> <li class="{{ 'blog' == currentPage ? 'active' }}"> <a href="{{ 'blog/blog'|page }}">Blog</a> </li> <li class="{{ 'about' == currentPage ? 'active' }}"> <a href="{{ 'samples/about'|page }}">About</a> </li> </ul> 

Have we forgotten something? Of course, you need to add more translations to the menu. We will use the twig filter already familiar to us:

 <a href="{{ 'blog/blog'|page }}">{{ 'Blog'|_ }}</a> ... <a href="{{ 'samples/about'|page }}">{{ 'About'|_ }}</a>. 

Is done. Refresh the page and you will see your menu in English, and the Translate plugin has already added your lines to the list of translations.

home page of the site

The Flat UI theme contains a main page for itself, on which there is a lot of superfluous: registration form, recent tweets, many unnecessary blocks.

registration form, recent tweets, many unnecessary blocks.

To simplify its appearance, we will remove the excess from there. Open home.htm in your text editor and delete the entire block with the home-title class and the div element with the recent-tweets .

Now we will replace the What we do block with a block with content that we can change in the admin panel. This opportunity gives us a plugin Static Pages . Go to the Pages section in the October admin panel and select the Content item in the sidebar. Click on the Add button and enter home-intro in the file name field. Add any text to its contents and save the file. We will return to it later.

Go back to home.htm and replace all the content inside the div with the class col-sm-12 with a code with the content tag:

 {% content "home-intro.htm" %} 

Save the file and go to the main page of the site. There you should see what we wrote in the file home-intro.htm .

Pages "About us" and "404"

These pages will contain only static translatable content, so the process of creating them essentially repeats our previous manipulations with the home page. Create new files in Pages , remove unnecessary content from samples/about.htm and 404.htm and replace it with the content construct with your newly created files.

Language switch

Now you need to make it possible to switch the language for site visitors. Translate plugin contains language switch component and we can easily add it to our site. Place it in the footer, right under the menu.

Components can be added simply by manually registering them in the desired file, but it is much easier to do this with the help of drag and drop in the OctoberCMS admin area. Open default.htm in admin panel. Click on the Components tab in the sidebar, find the Transalte section, take it and move it to the footer in the HTML editor. Is done. Of course, you can add a style component to the component, but it works without it.

Adding new languages ​​and translatable strings

If we go to the site now, we will see that there is only one language in the switch. You can add more by going to Settings → Translate → Manage Languages in the admin panel. After adding languages, open the Translate Messages page.

The left part displays all the translatable strings that the Translate plugin found on your site. Also, there will be some standard lines from the Flat UI theme that can be removed.

On the settings page, you can translate all strings that have been defined in the templates; but what about content blocks? It is very simple. The content editor in the Pages plugin has a language switch in the upper right corner. Select the desired language and enter text in another language.

Conclusion

Of course, the site still contains text that has not been translated, but now you know what to do with it.

Translated strings and content are just the tip of the iceberg. Using the Pages plugin, you can create menus and multilingual pages that your customers can edit in WYSIWYG mode. This will be covered in future articles.

Here are a few articles and lessons where some plug-ins and features of October are discussed in more detail.

• Simple Website Management Video Tutorial for Your Customers
• Static Pages Plugin Article
• And another one

In the second part of the article, we will add a multilingual blog to our site.