Theme language translation

Themes
1

Hi, I want to make a certain theme translated into Indonesian language.

I’ve already read a tutorial posted here

Here’s what I’ve done

  1. Create a locales folder and add language files :white_check_mark:

I’ve made a folder named ‘locales’ inside the theme folder.

  1. (Manually) translate included sentences on the left side into target language

I’ve manually translated it all.

{
    "Back": "Kembali",
    "Newer Posts": "Artikel selanjutnya",
    "Older Posts": "Artikel sebelumnya",
    "Page {page} of {pages}": "Halaman {page} dari {pages}",
    "Subscribe": "Langganan",
    "Subscribe to {blogtitle}": "Langganan ke {blogtitle}",
    "Subscribed!": "Berhasil berlangganan!",
    "with the email address": "dengan alamat email",
    "Your email address": "Alamat email Anda",
    "You’ve successfully subscribed to": "Anda telah berlangganan ke",
    "A collection of posts": "Koleksi artikel-artikel",
    "A collection of 1 post": "Koleksi berisi 1 artikel",
    "A collection of % posts": "Koleksi berisi % artikel",
    "Get the latest posts delivered right to your inbox": "Langganan via email",
    "Go to the front page": "Ke halaman depan",
    "Latest Posts": "Artikel terbaru",
    "Message:": "Pesan:",
    "<a href='{url}'>More posts</a> by {name}": "<a href='{url}'>Artikel</a> oleh {name}",
    "No posts": "Tidak ada artikel",
    " (Page %)": " (Halaman %)",
    "Read More": "Selengkapnya",
    "Read <a href='{url}'>more posts</a> by this author": "Baca <a href='{url}'>artikel lainnya</a> oleh penulis ini",
    "Ref:": "Ref:",
    "See all % posts": "Lihat % artikel seluruhnya",
    "Share this": "Bagikan",
    "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox": "Dapatkan artikel terbaru yang dikirim ke email Anda",
    "This post was a collaboration between": "Artikel hasil kolaborasi antara",
    "youremail@example.com": "alamat.email.anda@domain.com",
    "1 post": "1 artikel",
    "% posts": "% artikel",
    "1 min read": "Bacaan 1 menit",
    "% min read": "Bacaan % menit"
}
  1. Enable blog language

image
image2012×344 39.1 KB

I’ve enabled the blog language on the general settings of the blog.

  1. Ensure templates exist

I’ve made sure that the pagination.hbs - exists in content/themes/mytheme/partials according to the template and the navigation.hbs - exists in content/themes/mytheme/partials according to the template

<ul class="nav">
    {{#foreach navigation}}
    <li class="{{link_class for=(url) class=(concat "nav-" slug)}}"><a href="{{url absolute="true"}}">{{label}}</a></li>
   {{/foreach}}
</ul>

and

<nav class="pagination">
    {{#if prev}}
        <a class="newer-posts" href="{{page_url prev}}"><span aria-hidden="true">&larr;</span> Newer Posts</a>
    {{/if}}
    <span class="page-number">Page {{page}} of {{pages}}</span>
    {{#if next}}
        <a class="older-posts" href="{{page_url next}}">Older Posts <span aria-hidden="true">&rarr;</span></a>
    {{/if}}
</nav>

However, I can’t comprehend the next steps on the tutorial. It is said that I have to

  1. Use the translation helper
    Any plain text in your theme must be wrapped in the {{t}} translation helper, with {{t to the left of the text and }} to the right.

Look for any plain text in all of your theme’s .hbs template files and ensure the translation helper is present.

  1. Declare language in HTML

It’s advisable to add the HTML lang attribute to the <html> tag at the start of the theme’s default.hbs template, using Ghost’s {{@site.locale}} helper: <html lang="{{@site.locale}}"> . {{@site.locale}} will automatically be replaced on the site with the corresponding language locale tag set in Ghost Admin.

My question is

  1. How to wrap the plain text using {{t}} translation? I mean, how to do it correctly? It is said that I have to put {{t}} into every plain text (or any file inside the theme folder with .hbs format). I’ve done that but when I upload the theme on the Ghost admin, it failed.

  2. Where do I put the html lang attribute on the default.hbs template? I mean, where on the line of the code? I’m really clueless. It was said that the default.hbs also became one the source of error when I uploaded it but I have no idea where it failed.

p.s I have no experience in coding and so on. so, please educate me step by step.

Thank you so much.

2

For the translation helper, I will try to give an example.
You might have a link like this:

<a href="{{url}}">Read More</a>

To use the translation helper you have to change that to:

<a href="{{url}}">{{t "Read More"}}</a>

As for the lang attribute, you should have a <HTML> tag in the default.hbs, there you can add the locale:

<html lang="{{@site.locale}}">
4

Hi! Thank you for the answer!

I’ll try to implement that and come back again if I face another difficulties.

5

Hi ! Please, come back anyway to tell us if it worked, and explain the all process, step by step, if you can. It would be much appreciated

Because I have the same problem to translate my Theme (Ghost) and have no knowledge of coding.

Thank you !

6

Hi there,

I´m having the same problem. Following the Ghost tutorial here, trying out without sucess to translate to pt.

I´m following “religiously” the steps, yet not working, even after restarting Ghost in the shell.
Let´s see, following the bullet points of the Ghost tutorial:
1- the folder locales (presumably not “locale” as it is shown in html) is created, not in the theme folder, but under the main branch.
2-3 - I have created the en.json and the pt.json files. After restarting Ghost the result is inexistent, having the General settings of Ghost admin language (pt) being changed for a long time now, in production and locally. In regard to this, and checking the .json files I see translation between commas, and not quite within the {{t}} helpers. What is exactly the difference?
4 - Also in relation with pagination.hbs and navigation.hbs I have created the files accordingly pulled from GitHub, still with no sucess.
6 - Also in the default.hbs I can see the <html lang="{{@site.locale}}">. but still with no results.
7 - All of this was tested after ghost restart in the prompt Shell of Visual Code.

Can I get clarification of what might be wrong in and about each one of these steps, please?

Further Note: I have copied the locales folder to the theme folder, after reading this forum thread, and still without results. Also, I edited in the the default.hbs file in the theme (London) folder an instance of {{t}} translation, and also it did not work. I was very careful in making sure I had the same instance coded in the corresponding pt.json file, which in the case was “Published with”. Still with no results.

7

Hello !

In another tread in the forum, someone says it has created a tool :stuck_out_tongue_winking_eye: GitHub - biswajit-saha/ghost-theme-translator: CLI tool for automatically parse translatable strings in Ghost theme and generate language file.
I haven’t tested it yet

I have a newbie question : when you write your code, in which file/aplication do you write it in ? Textedit (I’m on Mac) ? Or do you use a code editor like VisualStudio code ???

Thanks ! Have a good day all

8

@velocipta , do you reach some solution? I’ve had the same behavior.