Hi, I need to do my site in English and German. How to best do this?
Using sub-domains like de.mydomain.com and en.mydomain.com and just make two projects?
Create separate pages for EN and DE locales? How to interlink them so that a language can be switched?
How to ensure that everything stays the same and only visible text changes? I would like to avoid having to do layout changes multiple times. Not sure if this is possible with components?
I'd try to use BSS as a prototyping tool only, and create a template for a modern, easy flatfile CMS that already has that functionality built in. I'd say GRAV could be a good candidate for your needs.
If you decide to use a sort of 2 separate sites setup, you don't really "need" to create 2 separate projects. Create one project and do it all in there (providing it will allow you to do 2 languagues in one project that is.
If it will then do this:
Create a landing page so people can choose their language. That would be your index page
Create a page for one language and then duplicate that page to alter it for the other language.
Setup the Links to components in each of those pages that you want to have the same on all pages for each language. This way the areas you want to be the same can be the same on each languages setup.
Now create the next page and use the link to that page's components to be the same (or duplicate the original page which works just as well). Rinse and repeat.
This would allow you to have 2 separate component links for each of the areas you want to be the same on all pages for each language. This would also give you the way to create all pages in one project which would keep the "redoing" of areas more minimal than if they were separate projects.
The other way would be to create the project in one language, then duplicate the project and create the other language in that one. Either way all pages would be created and you'd just need to alter the language. Either way this would allow all areas that would mimic a php include type of setup to be already set to go for you within each languages pages. That's the beauty of this apps setup for Component Linking, works awesome, I just don't know if it works for putting 2 languages in one project. If so though that's how I'd do it. This gives you the ability to setup separate menu links as well so that the site flows correctly for each language's pages and so on.
Bout all I can think of if you're not wanting to involve a CMS that has language translation capabilities built in. Sounds to me like it would work well, I just haven't tried it so I'm talking out of my head here lol.
I guess you could also just create buttons for switching between languages and then using JavaScript to Ajax in predefined content in the elements for each language based on the button that's clicked.
Maybe this will work for you. https://weglot.com/
I've not done a multi-language site before so I'm not sure.
A short update on how I'm going to deal with this now:
I use the webserver capability to serve a page fitting the language. This is done by using page names like index.html.en / index.html.de - pretty simple. With this, all pages would be kept in one project and every language would get an own page. The problem here is, that BSS doesn't allow to name pages with such a scheme as it's hard coded to .html, this sounds like a job for the post-export script. However, this all feels a bit hackish to me but I will give it a try.
Would be to put all language things into one page and show/hide them using some JS. Shouldn't be hard to do, but since BSS doesn't support editing/switching between visible/hidden parts very convenient this might become pretty daunting to edit. I would like to have a show/hide feature, where I can specify an ID pattern, or class etc. to toggle things visible/hidden.
If 1 & (2) fail, I would go for 2 separate projects and use a rewrite rule to launch the specific language page with links to the other languages. Need to think how I can manage the links but JS with some path rules would make sense I think.
I went with option 1 using an export script that renames page file names to the ...html.<lang> structure.
Now the question is, is there a simple way to add per-page links that will switch between the different language versions of a page? I don't want to add this manually. There might be pages in 2 languages, and some in 3.
const lang = document.documentElement.getAttribute('lang') || 'en';
function Init() {
new google.translate.TranslateElement({ pageLanguage: `${lang}` });
}
const usrlang = navigator.language.substring(0, 2) || navigator.userLanguage.substring(0, 2);
if (usrlang !== `${lang}`) {
document.cookie = `googtrans=/${lang}/${usrlang}; Expires=Session; SameSite=None; Secure`;
const google = document.createElement('script');
google.type = 'text/javascript';
google.src = 'https://translate.google.com/translate_a/element.js?cb=Init';
document.body.append(google);
setTimeout(removePreloader, 1200);
} else removePreloader();
function removePreloader() {
const preloader = document.querySelector('#preloader');
if (preloader) preloader.remove();
}
If the visitors browser language is different from the page language,
the google translate script will be injected into the page and the page will be translated to the visitors browser language and the preloader will be removed from the page
If the visitor has the same browser language as the page the preloader will be removed and no google script will be injected on the page
Back with this topic. For some strange reason, Google Translate isn’t that good. When using the real translator manually, it does a better job than when setting up automatic translation. So make sure you add a disclaimer at the end of the translation, so people know it’s a machine translation.