I have released a CLI tool. Using this you can auto-generate language json file.
As a Ghost theme developer, I always feel bored to copy pasting all translatable strings from all theme files to language json file.
Now i’ts easier. Once all translatable strings wrapped properly using {{t}} helper. This CLI tool can extract and generate a json file using just one command. Is not is fun?
Please try this with your theme and let me know what do you think.
BTW, this is my first ever npm package.
If you need information/guide about {{t}} helper you can find it at this Ghost documentation page.
Hi, I am trying to translate Dope free theme into french. I created locales with the translation file, but it says when trying to upload the translated theme :
Theme translations (located in locales/*.json ) need to be readable by the node JSON parser, or they will not be applied. ###### Affected files: * locales/fr.json : Unable to parse
Do you think your tool could help me ? Also, I do not find any plain text to wrap with the {{t}}, which I find suspect.
As far as I have checked the theme you have mentioned is not translation-ready.
By translation ready I mean the text which is there directly in the theme file are not wrapped with {{t}} helper.
For example, if you check the pagination.hbs file in the partials folder, the text “Load More” is hardcoded in the theme. To make this text translatable first you have to make it like this {{t "Load More"}} . You have to find all texts In the theme files and make those translatable.
After that this text can be translated using a language JSON file.
About this CLI tool, this tool only searches for texts in all files in the theme and makes a JSON file in locales folder. It only reduces the manual copy-paste task of the translatable text from various theme files into the JSON file.
Hope this will clarify things a little bit more. To know more about the {{t}} helper you can see this.
Yes for a non-developer it is a little bit difficult to find each text in so many files.
I am sharing a small tip, maybe it can help you to find the text in less time.
Without any translation done activate the theme and set the language you want to translate to as the site language in the General setting option. In your case, it is fr for french.
After that, check your site which texts are still showing in English (Other than, post title, post content, tag name, tag description menu items, etc. You don’t have to translate these things in the theme as these are added from the dashboard.)
Then search for each identified English text in the theme file and make them translatable.
Another tip for quick search, open the theme folder in the code editor ( I use VS code) and perform a global search for the text. It will show all occurrences of the text in all files in the folder.
Such a great help. One thing : Load More is not between " in my pagination file. Should I replace it with {{t “Load More”}} or just {{t Load More}} ?
and also : can I translate the phrase on the protected content card saying : «this post is for subscribers only» ? I do not find any trace of this sentence in my theme files
This should be {{t "Load More"}}. Also, use a proper code editor to avoid the wrong characters.
The protected content card uses a fallback that comes from inside Ghost. So as this is not coming from the theme directly you can not translate it directly.
But there is a way to show anything you want, in place of that card.
If you add a file named content-cta.hbs in partials folder in your theme. Then the content of that file will be shown. YOu can see the code for the default content cta card here.
Now you can translate the text in that file.
BTW, you may face accent color issues if you directly use the above mentioned code. In that case, replace {{accentColor}} with var(--ghost-accent-color)
Thank you ! By « now you can translate the text in that file », do you mean direct translation with the file or using the translation wrapper as for the previous cases ?
{{{html}}}
<aside class="gh-post-upgrade-cta">
<div class="gh-post-upgrade-cta-content" style="background-color: {{accentColor}}">
{{#has visibility="paid"}}
<h2>{{t "This post is for paying subscribers only"}}</h2>
{{/has}}
{{#has visibility="members"}}
<h2>{{t "This post is for subscribers only"}}</h2>
{{/has}}
{{#has visibility="filter"}}
<h2>{{t "This post is for subscribers on the {{products}} only"}}</h2>
{{/has}}
{{#if @member}}
<a class="gh-btn" data-portal="account/plans" style="color:{{accentColor}}">{{t "Upgrade your account"}}</a>
{{else}}
<a class="gh-btn" data-portal="signup" style="color:{{accentColor}}">{{t "Subscribe now"}}</a>
<p><small>{{t "Already have an account?"}} <a data-portal="signin">{{t "Sign in"}}</a></small></p>
{{/if}}
</div>
</aside>
Looks fine to me. but also change the accent color which I have mentioned previously.
Then the best way is to test the theme on your site and check if everything is working or is there any error.
Does this mean auto-translate for blogs? What languages does it support? I still need to implement and learn about the translate helper in my theme but I will save this post for later =). Great job
This does not auto-translate the theme. This CLI tool only does one thing to a small bit of manual work.
First, you need to prepare your theme as translatable by wrapping string/texts with translate helper {{t}}.
Then you have to create a JSON file containing all the strings which are translateable in your theme by copy-pasting one by one.
This tool only reduces the manual copy-paste work. It searches all the available translatable strings in the theme and then creates the JSON file containing all those strings.
After that, you can open that JSON file and translate the strings in it.
Awesome work and time-saving CLI. I love this 