Translating the Ghost Source Theme
by
The official themes for the Ghost blogging platform usually come with some English texts hard-coded. To fully translate the theme to another language some changes are necessary. Fortunately Ghost comes with a built-in translation system. Let’s take the official default theme “Source” and translate it to German. You can find the open-source theme at Github.
First of all we create the locales folder at the root of the repository. In that folder we create a file named de.json - the name being the ISO 639-1 language code.
Now we have to find all hard-coded strings and wrap them in the translate helper syntax. Ghost is using Handlebars and the helper function can be used with {{t}}. For example, the file partials/components/navigation.hbs contains the hard-coded string Sign in.
- <a href="#/portal/signin" data-portal="signin">Sign in</a>
+ <a href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
The parameter of the t function ("Sign in") will be the key of the locales/de.json map. Here are all hard-coded strings that I could find translated into German.
{
"Subscribe": "Abonnieren",
"Sign in": "Anmelden",
"Account": "Account",
"Upgrade": "Upgrade",
"Recommendations": "Empfehlungen",
"See all": "Alle ansehen",
"Read more": "Ähnliche Artikel",
"Latest": "Neu",
"By": "Von",
"Close": "Schließen",
"Share": "Teilen",
"Toggle fullscreen": "Vollbild",
"Zoom in/out": "Vergrößern/Verkleinern",
"Previous (arrow left)": "Vorheriges (Pfeiltaste links)",
"Next (arrow right)": "Nächstes (Pfeiltaste rechts)",
"Featured": "Ausgewählte Artikel"
}
As you can see, it’s not much. The theme is very minimal. After replacing all the strings in the theme files with the translate helper syntax we can upload the theme.
This part depends on the kind of Ghost setup we’re using. If it’s a custom installation, we’d usually symlink the theme folder to our Ghost folder. If it’s a managed https://gost.org installation, we can create a zip file with yarn zip and upload that.
The last step is to set the Publication Language setting in our Ghost admin dashboard to de. Now we should have a fully translated theme.