Pre Multilanguage

[cristian-milea]

Hi.

Proudly using Publii since march and I am very happy with it. Thanks for all the hard work. I have around 60 posts in Publii and now I need to make the site multilanguage, but this feature is still on the roadmap. This leads to my question. What is the best approach to have my website multilanguage before this feature rolls out?

My options are:

1. Duplicate the whole website, translate my posts and separate deploys for each language in theirs subfolders ( /en, /es, etc)
2. Duplicate each post and try to make some httacces redirects (seems bad), but maybe can link posts together after the feature comes out?
3. Implement a JS on-the-fly translation workaround but this will affect my SEO for foreign languages..
4. have a post contain all the languages in the html, and hide the others based on the language selected...

So, is there any "good way" to go for multilanguage before it's ready? Maybe you guys have some feature logic ready and can share with us so we know in which direction to start?

Thank you so much!

[bitlab-code]

I'm evaluating Publii, and I'm very interested in this feature. @cristian-milea option n.1 seem the right choose for SEO, but it's not easy for maintenance.

Any eta for this feat.? can you anticipate how a multilingual site has been designed and will be managed?

Thank you so much!

edit: I just found out that this issue is a duplicate: https://github.com/GetPublii/Publii/issues/60

[cristian-milea]

Not exactly duplicate, but close.

My problem with option 1 is the sitemap. I was considering a folder watcher (inotify?) that could somehow trigger (on server) a merge for all the sitemaps to include all the posts with alternate languages.

[cristian-milea]

Any advice for how to tackle this the Publii way?

[JOduMonT]

The best way I found is to make 3publii, 2 is fine too

1. yourdomain.tld/ as a landing page which offer to choose a language (screw your SEO here)
2. es.yourdomain.tld/ as one language
3. en.yourdomain.tld/ as a second language

[candideu]

Any advice for how to tackle this the Publii way?

In case anyone is still looking, this video has been a huge help: 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 */
 }