Allow for multiple languages websites

[YoavRheims]

Add options for multiple languages websites and native hreflang support for the sitemap.

[dziudek]

It is a very big task which affects the whole application and without any ideas to simplify this case I afraid that it won't be realised in the nearest months :(

[YoavRheims]

No problem, priorities first 👍

[robokow]

Actually, there may be a really easy workaround.

In the SEO box in a post place a new box called "Other language". The idea is that I just add a url in that box and the language.

Publli would then add a new line in the head of that post like <link rel="alternate" hreflang="fr" href="https://given.url/in-the-box">

Like this I can connect multiple language-sites on the same domain.

[dziudek]

@robokow - in fact if you need - you can achieve it by yourself using custom post settings in your theme: https://getpublii.com/dev/theme-settings-api/ :)

[nekohayo]

In an "ideal" world, instead of the user having to manage each page's alternate URLs manually, Publii could handle the notion of posts/pages' alternate language versions like Polylang does, including a "language switcher" navbar item (and a switcher inside the editing interface too), and also being able to configure how the distinction between languages is made in the website's URLs:

• no distinction at all, everything sits in the root, just the post names and metadata being different, and I guess the feeds and posts listings showing language-specific versions (when available, or not at all)
• language as a subdirectory (ex: foo.com/fr/ze_post)
• language as a subdomain (ex: fr.foo.com/ze_post)
• completely separate domain names

There is also value in allowing to have a website where UI elements (menus, categories, tags, headers / footers / front page / sidebars) can be translated and the content (posts) left untranslated but displayed in all languages; one thing that is annoying with Polylang and many other multilingual systems is that they force you to have multilingual versions of the content "or they won't display the non-translated posts"; this is fine and desireable for corporate websites, but impractical for personal blogs that write "alternatingly" in different languages (not necessarily translated) but want a translated UI.

I know this is not the no1 priority, just sharing my wishes and some caveats for your future consideration ;) unfortunately, since I'm in an officially bilingual country, until there's support for multilingual websites, I can only use Publii for simple personal blogs, and cannot yet recommend it for businesses wanting to build their website.

[JOduMonT]

Since the begin this multi language option is planned by Publii Team, but then they always push it back, it is sad, Publii have many great advantage, but this one is killing my enthusiasm.

I'm sure by opening the code to the community the project would take off

Even the translation still lacking

[bobmitro]

Even the translation still lacking

The theme translation is available, but you have to translate the theme yourself. https://getpublii.com/dev/translations-api/#translatingapubliitheme

[JOduMonT]

lternate language versions like Polylang does

Polylang is great, but you can't have category and tag with the same name, such as a category called services in English and another services for French.

[YoavRheims]

@robokow - in fact if you need - you can achieve it by yourself using custom post settings in your theme: https://getpublii.com/dev/theme-settings-api/ :)

I wonder if somebody worked that out and could share an example here or in the forum.

[nawarian]

Hey @YoavRheims I just did a PoC on my own project using configs and got it working.

I'm using the technews theme and got it working with the following changes:

themes/technews/config.json

     "postConfig": [
+        {
+            "name": "altLink",
+            "label": "Alternate link",
+            "value": "",
+            "type": "text",
+            "group": "Alternate URL"
+        },
+        {
+            "name": "altLang",
+            "label": "Alternate link language",
+            "value": "",
+            "type": "text",
+            "group": "Alternate URL"
+        },
         {

technews/partials/head.hbs:

+    {{#if @config.post.altLink}}
+        <link rel="alternate" hreflang="{{@config.post.altLang}}" href="{{@config.post.altLink}}" />
+    {{/if}}

And the new settings appear in the post settings sidebar:

Hope it helps.

Ref:

• https://getpublii.com/dev/text-input/
• https://getpublii.com/dev/theme-settings-api/

Cheers!

[candideu]

Hey @YoavRheims I just did a PoC on my own project using configs and got it working.

I'm using the technews theme and got it working with the following changes:

themes/technews/config.json

     "postConfig": [
+        {
+            "name": "altLink",
+            "label": "Alternate link",
+            "value": "",
+            "type": "text",
+            "group": "Alternate URL"
+        },
+        {
+            "name": "altLang",
+            "label": "Alternate link language",
+            "value": "",
+            "type": "text",
+            "group": "Alternate URL"
+        },
         {

technews/partials/head.hbs:

+    {{#if @config.post.altLink}}
+        <link rel="alternate" hreflang="{{@config.post.altLang}}" href="{{@config.post.altLink}}" />
+    {{/if}}

And the new settings appear in the post settings sidebar:

Hope it helps.

Ref:

* https://getpublii.com/dev/text-input/

* https://getpublii.com/dev/theme-settings-api/

Cheers!

This fantastic, and a great short-term solution! Do you do the same for the post in the other language?

I hope that this year is the year that Publii offers multi-language support. Creating a separate site for each language is a little too cumbersome (especially when you're trying to write two articles simultaneously) -- unless Publii allows to have two instances of the app open at the same time.

Nawarian's method is amazing and a great starting point. That said, there's still the question of translating menus, tags, Publii-specific phrases, filtering through posts, etc.

The menu translation could be done by creating a post-template for each language, and creating two sets of menus. So for example: post-template English would have the English menu partial, and post-template Swahili would have the Swahili menu partial.

The next step is figuring out:

• tags,
• having two or more languages in the Publii interface,
• language switcher,
• filtering through posts (for the index page, next/previous posts, suggested posts),
• managing both languages, domain-wise
• etc'

[candideu]

Some projects that might be of interest/help for multilanguage:

• https://github.com/Demivan/fluent-vue
• https://inlang.dev/

[candideu]

I've stumbled upon this video today: https://www.youtube.com/watch?v=5meQKQhGBZg Although I don't understand the language, I was able to follow along and use the script to create a toolbar to display automatic translations on my Publii site. Although it isn't the manual translation solution we're looking for (especially in terms of SEO), it's a great short-term solution for me.

Here are the instructions for anyone interested...

I pasted the following code into Tools > Custom HTML > Footer:

<script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
<script>
    function loadGoogleTranslate() {
     new google.translate.TranslateElement ("google_element");
    }
</script>

I then pasted the following div where I wanted my widget to appear. I placed mine in the footer because it was less of a headache than the navbar, but it can be placed anywhere:

<div id="google_element"></div>

And that's it! I made some additional CSS changes as well to remove Google branding, style the select, and remove the top bar:

/* Remove google translate banner and branding */
.goog-te-banner-frame {
    display: none; /* Remove Google banner at the top */
}

body {
    position: unset !important; /* Remove space created by Google banner at the top */
}

.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
    display: none; /* Remove Google logo below language switcher dropdown */
}
.goog-te-gadget {
    font-size: 0px !important;
    color: transparent !important;
    /* Remove "Powered by" text below language switcher dropdown */
}
.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon * {
    font-family: var(--body-font) !important; /* change font of language switcher dropdown to match site */
    color: var(--light) !important; /* make text in dropdown white */
}

select.goog-te-combo {
    padding-right: 1.2rem !important; /* reduce padding obscuring language name */
    padding: .2rem .8rem; /* make lang switcher thinner */
}

select.goog-te-combo option {
    background: var(--dark) !important; /* make dropdown dark */
}

@media all and (max-width:37.4375em) {
 #google_element {
     padding: 2rem .4rem; /* add padding when screen becomes smaller and footer items are stacked */
 }

[Lavanderia-ponferrada]

Hey @YoavRheims I just did a PoC on my own project using configs and got it working.

I'm using the technews theme and got it working with the following changes:

themes/technews/config.json

     "postConfig": [
+        {
+            "name": "altLink",
+            "label": "Alternate link",
+            "value": "",
+            "type": "text",
+            "group": "Alternate URL"
+        },
+        {
+            "name": "altLang",
+            "label": "Alternate link language",
+            "value": "",
+            "type": "text",
+            "group": "Alternate URL"
+        },
         {

technews/partials/head.hbs:

+    {{#if @config.post.altLink}}
+        <link rel="alternate" hreflang="{{@config.post.altLang}}" href="{{@config.post.altLink}}" />
+    {{/if}}

And the new settings appear in the post settings sidebar:

Hope it helps.

Ref:

• https://getpublii.com/dev/text-input/
• https://getpublii.com/dev/theme-settings-api/

Cheers!

It seems a pretty good solution but I have a question, how do you change from one language to another?

[candideu]

It seems a pretty good solution but I have a question, how do you change from one language to another?

If I'm not mistaken, the content will be delivered to the user's language:

If you've got a website that's available in multiple languages, you want search engines to show the right content to the right audience. Use the hreflang attribute to communicate to search engines what your intended audience is for the content, and search engines are much more likely to show the right content to the right audience.

(source: https://www.contentkingapp.com/academy/link-rel/#hreflang)

[chrismarquardt]

Hey @YoavRheims I just did a PoC on my own project using configs and got it working. I'm using the technews theme and got it working with the following changes: [...]

The next step is figuring out:

• tags,
• having two or more languages in the Publii interface,
• language switcher,
• filtering through posts (for the index page, next/previous posts, suggested posts),
• managing both languages, domain-wise
• etc'

I've managed to modify the taste theme for posts and it works great and serves the purpose. Question: has anyone done the same for tag pages? I'm having a hard time finding where I'd even start. config.json doesn't seem to have any place like postConfig but for tags. Any help welcome.

[nawarian]

Inside the tag template you could probably fetch the first post's config to determine the language. But it already sounds too hacky for my taste.

[candideu]

I've managed to modify the taste theme for posts and it works great and serves the purpose. Question: has anyone done the same for tag pages? I'm having a hard time finding where I'd even start. config.json doesn't seem to have any place like postConfig but for tags. Any help welcome.

@chrismarquardt see this forum topic: https://forum.getpublii.com/topic/how-to-add-custom-tag-template/

Essentially:

In the old “Starter” theme (https://github.com/GetPublii/theme-Starter), there a section where you can declare custom tag and author templates in the config.json file.

"authorTemplates": {
    "alternative": "1 column layout"
},

"tagTemplates": {
    "alternative": "1 column layout"
},

Then create the respective author-alternative.hbs and tag-alternative.hbs files.

You can also find info in it here: https://getpublii.com/dev/how-to-create-custom-templates/

[osopolar]

So finally you managed to have multiple frontpages for different languages with different menus?

[vrusua]

@dziudek Hi there, just wondering the same, if there has been any progress made in terms of supporting multiple language sites since 2018? Thanks.

[rkyoku]

Same, no-go for Publii for me, I can't do without this feature as I have hundreds of pages and I cannot micro-manage rel URLs for all of them. It's very sad as Publii seems so promising as it is!

[giosueDelgado]

Hello! There are some updates about the multilanguage support?

I'm searching a WordPress replacement for my website but it seem the multilanguage is a feature missing from many Static Site Generator like publii (also ghost for example)

There is an idea of when this will be available or not? Agree with @rkyoku with hundreds of pages is impossible to manage the URLs manually....

Thanks for informations...

[sandrobilbeisi]

Hey @YoavRheims I just did a PoC on my own project using configs and got it working.

I'm using the technews theme and got it working with the following changes:

themes/technews/config.json

     "postConfig": [
+        {
+            "name": "altLink",
+            "label": "Alternate link",
+            "value": "",
+            "type": "text",
+            "group": "Alternate URL"
+        },
+        {
+            "name": "altLang",
+            "label": "Alternate link language",
+            "value": "",
+            "type": "text",
+            "group": "Alternate URL"
+        },
         {

technews/partials/head.hbs:

+    {{#if @config.post.altLink}}
+        <link rel="alternate" hreflang="{{@config.post.altLang}}" href="{{@config.post.altLink}}" />
+    {{/if}}

And the new settings appear in the post settings sidebar:

Hope it helps.

Ref:

• https://getpublii.com/dev/text-input/
• https://getpublii.com/dev/theme-settings-api/

Cheers!

This technique doesn't seem to work anymore ?

[candideu]

This technique doesn't seem to work anymore ?

@sandrobilbeisi How come?

[sandrobilbeisi]

I am using the 'Technews' theme (I also tried in vain with the 'Simple' theme)

I can't get the options to appear in the post page !

config.json

partials/head.hbs

[bobmitro]

I can't get the options to appear in the post page !

Your code looks okay, so I suppose you might have modified the theme files in the wrong location. The correct path is: Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME

[sandrobilbeisi]

Thanks !

[hubyhuby]

Hi there, Very interested in the mutiple language feature. I really like the fact that Publii integrates everything important like SEO , and more, where as on wordress you would need at least 10 plugins to make it work. Language is an important thing as I imagine that at around 30% of serious websites need it at one point.

Any news on this feature ?

Thks for this great framework

[giosueDelgado]

Agree with you @hubyhuby, in Publii is missing this important feature in a native way not using a plugin or some workaround as I read on internet...

I think with this feature Publii can be a very complete solution. Hope it will be implemented in the core.

[ghowen]

I can only second this again. This was the only dealbreaker for NOT using Publii on several projects. These days multilang is a must for a CMS.