How to do multi language sites?

Bootstrap Studio Help
1

Hi, I need to do my site in English and German. How to best do this?

  1. Using sub-domains like de.mydomain.com and en.mydomain.com and just make two projects?
  2. 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?

Any feedback welcome.

2

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.

3

Cheers for the link to GRAV Marrco will take a look at that.

4

Thanks, but I don't want to use a CSM or any other tool. I like the purity of BSS and use some advanced codings too.

5

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.

6

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.

Saj

7

A short update on how I'm going to deal with this now:

  1. 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.

  2. 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.

  3. 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.

8

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.

9

Hello

is it arabic language available ?

10

Hi. I recently came up with solution. It looks so simple but it works.

  • I created a website in my primary language.
  • created a nested menu ( link) with several language selections
  • I went to google translation / option website and creatred direct link to my site in another language.
  • copied that link into the menu link.
    That’s it.
    If you want, you can visit my site as example. https://agermagi.com
2 Likes
11

Hello,
Good solution the only problem is the Navbar hidden by Google translate.

navbarhidden
navbarhidden2824×416 51.1 KB

12

If you want google to automatically translate your website to the visitors language you can do it like this

13

if you click the > < in the Google bar, it goes away and then you see your menu. It’s not the best I know but it worked for me.

14

Ho [kuligaposten], this looks great. Can you please explain how did you make it?
Thanks

15

This also uses google translate with a script. I also have the google bar at the top.

16

@pauiprou

I did it like this

add a div to your page like this <div id="preloader"></div>
can be anywhere on the page

add this inline style to the head section

<style>
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--bs-tertiary-bg);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:after {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

#preloader:before, #preloader:after {
  content: "";
  position: absolute;
  border: 4px solid #59bec5;
  border-radius: 50%;
  -webkit-animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }
  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

.skiptranslate {
  opacity: 0;
  display: none;
  position: absolute !important;
  top: -5000px;
}
</style>

add this to a js-file

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

1 Like
17

This is magic!
Thanks kuligaposten for sharing it