Traduções manuais

Bom depois de atualizar toda a navbar para ela não quebrar mais no mobile, revisei todas minhas traduções, como não vou usar uma API paga para traduzir meu site vamos programar.

Meu script de tradução ficou desta forma

OBS: aqui terá as minhas variáveis mas se quiser usar o código, cada variável criada no JS é a mesma variável que recebe o texto em todas as linguas no arquivo JSON, e é o mesmo nome da classe que você deve criar na tag onde irá inserir o texto.

//const { doc } = require("prettier");

document.addEventListener('DOMContentLoaded', function(){

  // Carrega o arquivo JSON com as traduções

  fetch('translate.json')

    .then(response => response.json())

    .then(translations => {

      //const btnTranslate = document.querySelector('#btn-translate');

      var title = document.querySelector('#title');

      var message = document.querySelector('#message');

      var about = document.querySelector('.about');

      var langSelect = document.querySelector('.lang-select');

      var contact = document.querySelector('.contact');

      var portfolio = document.querySelector('.portfolio');

      var services = document.querySelector('.services');

      var tellButton = document.querySelector('.tellButton');

      var services2 = document.querySelector('.services2');

      var problems = document.querySelector('.problems');

      var CloudMachine = document.querySelector('.CloudMachine');

      var MachineText = document.querySelector('.MachineText');

      var DataBase  = document.querySelector('.DataBase');

      var DataBaseText = document.querySelector('.DataBaseText');

      var WebSec  = document.querySelector('.WebSec');

      var WebSecText = document.querySelector('.WebSecText');

      var ProvidersTitle = document.querySelector('.ProvidersTitle');

      var ProvidersText = document.querySelector('.ProvidersText');

      var IntroModal1 = document.querySelector('.IntroModal1');

      var ContinueModal1  = document.querySelector('.ContinueModal1');

      //var CloseModal1 = document.querySelector('.CloseModal1');

      var IntroModal2 = document.querySelector('.IntroModal2');

      var ContinueModal2  = document.querySelector('.ContinueModal2');

      //var CloseModal2 = document.querySelector('.CloseModal2');

      var IntroModal3 = document.querySelector('.IntroModal3');

      var ContinueModal3 =  document.querySelector('.ContinueModal3');

      var IntroModal4 = document.querySelector('.IntroModal4');

      var ContinueModal4  = document.querySelector('.ContinueModal4');

      var IntroModal5 = document.querySelector('.IntroModal5');

      var ContinueModal5  = document.querySelector('.ContinueModal5');

      var IntroModal6 = document.querySelector('.IntroModal6');

      var ContinueModal6  = document.querySelector('.ContinueModal6');

      var aboutSection  = document.querySelector('.aboutSection');

      var AboutResume = document.querySelector('.AboutResume');

      var AboutTitle1 = document.querySelector('.AboutTitle1');

      var AboutText1  = document.querySelector('.AboutText1');

      var AboutTitle2 = document.querySelector('.AboutTitle2');

      var AboutText2  = document.querySelector('.AboutText2');

      var AboutDate2  = document.querySelector('.AboutDate2');

      var AboutDate3  = document.querySelector('.AboutDate3');

      var AboutTitle3 = document.querySelector('.AboutTitle3');

      var AboutText3  = document.querySelector('.AboutText3');

      var AboutDate4  = document.querySelector('.AboutDate4');

      var AboutTitle4 = document.querySelector('.AboutTitle4');

      var AboutText4  = document.querySelector('.AboutText4');

      var AboutDate5  = document.querySelector('.AboutDate5');

      var AboutTitle5 = document.querySelector('.AboutTitle5');

      var AboutText5  = document.querySelector('.AboutText5');

      var ContactUs = document.querySelector('.ContactUs');

      var EmailAdvise = document.querySelector('.EmailAdvise');

      var JivoSiteMessage = document.querySelector('.JivoSiteMessage');

      var SubmitButton  = document.querySelector('.SubmitButton');

      var ModalDesc1  = document.querySelector('.ModalDesc1');

      var ModalDesc2  = document.querySelector('.ModalDesc2');

      var ModalDesc3  = document.querySelector('.ModalDesc3');

      var ModalDesc4  = document.querySelector('.ModalDesc4');

      var ModalDesc5  = document.querySelector('.ModalDesc5');

      var ModalDesc6  = document.querySelector('.ModalDesc6');

      var PartnersTitle = document.querySelector('.PartnersTitle');

      var PartnersSubTitle  = document.querySelector('.PartnersSubTitle');

      langSelect.addEventListener('change', function() {

     

        // Obtém o idioma selecionado pelo usuário

        const selectedLang = langSelect.value;

        // Obtém as traduções para o idioma selecionado

        const selectedTranslations = translations[selectedLang];

        // Atualiza o conteúdo dos elementos HTML

        about.innerText = selectedTranslations.about;

        title.innerText = selectedTranslations.title;

        message.innerText = selectedTranslations.message;

        contact.innerText = selectedTranslations.contact;

        portfolio.innerText = selectedTranslations.portfolio;

        services.innerText  = selectedTranslations.services;

        tellButton.innerText  = selectedTranslations.tellButton;

        services2.innerText = selectedTranslations.services2;

        problems.innerText  = selectedTranslations.problems;

        CloudMachine.innerText  = selectedTranslations.CloudMachine;

        MachineText.innerText = selectedTranslations.MachineText;

        DataBase.innerText  = selectedTranslations.DataBase;

        DataBaseText.innerText  = selectedTranslations.DataBaseText;

        WebSec.innerText  = selectedTranslations.WebSec;

        WebSecText.innerText  = selectedTranslations.WebSecText;

        ProvidersTitle.innerText = selectedTranslations.ProvidersTitle;

        ProvidersText.innerText = selectedTranslations.ProvidersText;

        IntroModal1.innerText = selectedTranslations.IntroModal1;

        ContinueModal1.innerText  = selectedTranslations.ContinueModal1;

        //CloseModal1.innerText = selectedTranslations.CloseModal1;

        IntroModal2.innerText = selectedTranslations.IntroModal2;

        ContinueModal2.innerText  = selectedTranslations.ContinueModal2;

        //CloseModal2.innerText = selectedTranslations.CloseModal2;

        IntroModal3.innerText = selectedTranslations.IntroModal3;

        ContinueModal3.innerText  = selectedTranslations.ContinueModal3;

        IntroModal4.innerText = selectedTranslations.IntroModal4;

        ContinueModal4.innerText  = selectedTranslations.ContinueModal4;

        IntroModal5.innerText = selectedTranslations.IntroModal5;

        ContinueModal5.innerText  = selectedTranslations.ContinueModal5;

        IntroModal6.innerText = selectedTranslations.IntroModal6;

        ContinueModal6.innerText  = selectedTranslations.ContinueModal6;

        aboutSection.innerText  = selectedTranslations.aboutSection;

        AboutResume.innerText = selectedTranslations.AboutResume;

        AboutTitle1.innerText = selectedTranslations.AboutTitle1;

        AboutText1.innerText  = selectedTranslations.AboutText1;

        AboutTitle2.innerText = selectedTranslations.AboutTitle2;

        AboutText2.innerText  = selectedTranslations.AboutText2;

        AboutDate2.innerText  = selectedTranslations.AboutDate2;

        AboutDate3.innerText  = selectedTranslations.AboutDate3;

        AboutTitle3.innerText = selectedTranslations.AboutTitle3;

        AboutText3.innerText  = selectedTranslations.AboutText3;

        AboutDate4.innerText  = selectedTranslations.AboutDate4;

        AboutTitle4.innerText = selectedTranslations.AboutTitle4;

        AboutText4.innerText  = selectedTranslations.AboutText4;

        AboutDate5.innerText  = selectedTranslations.AboutDate5;

        AboutTitle5.innerText = selectedTranslations.AboutTitle5;

        AboutText5.innerText  = selectedTranslations.AboutText5;

        ContactUs.innerText = selectedTranslations.ContactUs;

        EmailAdvise.innerText = selectedTranslations.EmailAdvise;

        JivoSiteMessage.innerText = selectedTranslations.JivoSiteMessage;

        SubmitButton.innerText  = selectedTranslations.SubmitButton;

        ModalDesc1.innerText  = selectedTranslations.ModalDesc1;

        ModalDesc2.innerText  = selectedTranslations.ModalDesc2;

        ModalDesc3.innerText  = selectedTranslations.ModalDesc3;

        ModalDesc4.innerText  = selectedTranslations.ModalDesc4;

        ModalDesc5.innerText  = selectedTranslations.ModalDesc5;

        ModalDesc6.innerHTML  = selectedTranslations.ModalDesc6;

        PartnersTitle.innerText = selectedTranslations.PartnersTitle;

        PartnersSubTitle.innerText  = selectedTranslations.PartnersSubTitle;

       

        // Altera o atributo "lang" da página para o idioma selecionado

        document.documentElement.lang = selectedLang;

      });

    })

    .catch(error => console.error(error));

});

//btnTranslate.addEventListener('click', function() {

Como mostro as traduções sendo feita vou mostrar a seleção do meu site e como eu traduzo

de um texto para o outro.

Para isso além do JS acima você precisa criar seu seletor de idiomas, como meu gatilho no

JS é o evento change, eu não preciso criar um botão somente um seletor ja me serve para

começar.

Meu seletor de idiomas ficou assim:

li.nav-item

                            select.lang-select

                                option(value="en") English

                                option(value="pt-BR") Português

                                option(value="es") Español

                        //button#btn-translate.value traduzir

                        script(src='js/translate.js')

Comoo podem perceber logo a baixo do meu seletor eu chamo o script de tradução que vai

ler a tag que o seletor carrega e faz a tradução dinamica do meu site sendo:

en: Ingles Americano

es: Espanhol

pt-BR: Português Brasil

Agora precisamos que nosso JS saiba qual texto vai colocar em cada parte do site como

viram eu usei o innerText para não sofrer alteração no objeto HTML e somente no texto

que eu quero mudar, eu não vou colocar o JSON inteiro aqui que fica massiva a leitura,

e lendo as linhas que eu vou colocar ja fica bem intuitivo em como continuar montando

seu JSON de instruções.

Ok vamos para o JSON de instruções:

{

    "en": {

         "title": "Welcome to my page!",

         "message": "Nice to Meet You",

         "about": "About me",

         "contact": "Contact"

    },

    "pt-BR": {

         "title": "Bem-vindo ao meu site!",

         "message": "Prazer em recebe-lo!",

         "about": "Sobre Mim",

         "contact": "Contato"

    },

     "es": {

          "title": "¡Bienvenido a mi sitio web!",

          "message": "¡Encantado de conocerte!",

          "about": "Sobre mí",

          "contact": "Contacto"

    }

}

Show JSON de instrução criado, agora precisamos colocar classes para o JS saber onde vai

fazer o innerText.

Essas variáveis ja estão com nomes sendo elas as mesmas do JSON e JS, agora implementando

no PUG.

                .masthead-subheading#title Welcome To My Page!

                .masthead-heading.text-uppercase#message Nice To Meet You

Com isso ele consegue traduzir o #title e o #message, agora vou colocar o about e o contato

para ver que qualquer classe que criar o script vai funcionar se configurar a classe certa

no JS na hora de fazer a declaração para passar pelo innerText

                        li.nav-item

                            a.nav-link(href='#about')

                                span.about

                                    nav-link About

                        li.nav-item

                            a.nav-link(href='#footer')

                                span.contact

                                    nav-link Contact

Nesse caso eu preferi estar criando um SPAN no HTML onde ele vai separar o href do link

do texto exibido no nav-link com a classe .about e .contact fazendo com que o innerText

modifique essas palafras pelas que estão no JSON sem mexer na estrutura HTML e garante

que o link não vai quebrar, aqui são link simples que redireciona para o mesmo site mas

partes diferentes do site, fazendo com que não seja tão facil de quebrar o href, porém

ao utlizar em outras partes do código a criação do SPAN se mostrou crucial.