Comment afficher le contenu en fonction de la langue du site

Comment ça marche

Segmentez le contenu et affichez des blocs particuliers uniquement aux utilisateurs qui consultent la page dans certaines langues via un code HTML personnalisé. Pour ce faire, utilisez une solution existante ou ajoutez votre propre code.

Comment configurer

Utiliser une solution existante

1. Ouvrez votre projet dans le Compte éditeur.
2. Dans la barre latérale, cliquez sur Site Builder.
3. Cliquez sur Open Site Builder.
4. Dans le bloc Header, configurez le composant Translations.
5. Sélectionnez la langue pour laquelle vous souhaitez masquer des blocs spécifiques.
6. Insérez le code suivant dans le bloc Custom code :

<script>
  (function () {
    var blockArray = [
      {
        blockName: '.block--packs',
        blockNumber: 0
      },
      {
        blockName: '.block--description',
        blockNumber: 0
      }
    ];

    function removeBlock() {
      setTimeout(function () {
        blockArray.map(function (block) {
          return document.querySelectorAll(block.blockName)[block.blockNumber];
        })
          .forEach(function (element) {
            element && element.remove();
          });
      }, 0);
    }

    removeBlock();
  })();
</script>

7. Dans le tableau blockArray, modifiez les paramètres ci-dessous pour chaque bloc que vous souhaitez masquer aux utilisateurs pour la langue choisie :
   • blockName — nom de la classe CSS du bloc. Les options possibles sont :
     • .block--header (bloc Header) ;
     • .block--hero (bloc Call-to-action) ;
     • .block--html (bloc Custom code) ;
     • .block--packs (bloc Packs) ;
     • .block--description (bloc Description) ;
     • .block--gallery (bloc Gallery) ;
     • .block--requirements (bloc System requirements) ;
     • .block--faq (bloc FAQs) ;
     • .block--embed (bloc Social media widgets) ;
     • .block--news (bloc News) ;
     • .block--footer (bloc Footer).
   • blockNumber — numéro de séquence du bloc. La valeur minimale est0.
8. Cliquez sur Preview pour voir vos modifications.

Regardez le tutoriel vidéo pour ces instructions :

Ajouter votre propre code

1. Dans le constructeur, cliquez sur Add block et sélectionnez Custom code.

2. Insérez votre propre code dans le bloc.

Liens utiles