Lien vers un site externe depuis le logo principal de Discourse

Dev
1

:information_source: Discourse propose désormais un composant de thème official pour prendre en charge ce cas d’utilisation :

Contenu original

Je ne suis pas sûr qu’il soit judicieux que le logo principal de Discourse renvoie vers un site externe pour la plupart des sites, mais il existe des exceptions où il est logique d’envoyer les utilisateurs vers un site Web externe lorsqu’ils cliquent sur le logo principal de Discourse. Si vous souhaitez le faire, voici comment.

Créer un nouveau composant de thème

:warning: note, cette section du guide sera bientôt extraite dans un sujet dédié.

Cliquez sur le lien « Composants » dans la barre latérale de votre page Admin / Personnaliser / Thèmes. Ensuite, en bas de la barre latérale, cliquez sur le bouton « Installer » :

image
image1227×685 65.1 KB

Dans la fenêtre modale qui s’ouvre, cliquez sur le lien « Créer un nouveau » :

image
image840×1019 114 KB

Donnez un nom à votre composant de thème et assurez-vous que le type « Composant » est sélectionné. Cliquez ensuite sur le bouton « Créer » :

image
image862×394 28.6 KB

Vous serez ensuite dirigé vers la page principale du composant de thème.

Ajouter le code au composant de thème

Le code pour remplacer l’URL par défaut du logo principal doit être ajouté à la section HEAD de votre composant de thème. Pour accéder à l’éditeur du composant, cliquez sur le bouton « Modifier CSS/HTML » :

image
image1201×804 72.6 KB

Dans l’éditeur qui s’ouvre, cliquez sur le lien « Head » :

image
image1196×513 33.5 KB

Selon diverses conditions, ajoutez les extraits de code suivants à la section HEAD de l’éditeur pour modifier l’URL vers laquelle le logo d’accueil pointe. Notez que vous devez remplacer https://example.com dans le code par l’URL complète de la page d’accueil de votre site externe :

  • pour modifier le lien vers une URL statique :
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => "https://example.com")
</script>
  • pour renvoyer une URL dynamique basée sur l’utilisateur actuel :
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => {
      const currentUser = api.getCurrentUser();
      return `https://example.com/${currentUser.username}`;
    })
</script>
  • pour renvoyer une URL basée sur un paramètre de composant de thème :
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => {
      return settings.example_logo_url_setting;
    })
</script>

Cliquez sur le bouton « Enregistrer » pour sauvegarder vos modifications. Revenez à la page principale du composant de thème après cela, puis cliquez sur le lien « Ajouter à tous les thèmes » pour ajouter le nouveau composant à tous les thèmes de votre site :

image
image1192×530 53.6 KB

11 « J'aime »
3

:+1: merci beaucoup de partager !

5

image
image1816×312 30 KB

Je l’ai ajouté dans la balise d’en-tête mais cela n’a pas eu d’effet

6

Pour moi, cela fonctionne parfaitement.
Avez-vous fait un « actualisation forcée » de votre site avec Ctrl + F5 ?

7

image
image359×153 17.5 KB

J’ai utilisé Commande+R et j’ai même activé le mode incognito, mais cela n’a toujours pas fonctionné.

1 « J'aime »
8

Merci d’avoir partagé ce tutoriel ! Je dois changer le logo principal d’une communauté et cela fonctionne parfaitement en utilisant l’extrait de code.

Cependant, j’ai réalisé que cela changerait également le lien du petit logo qui remplace le logo complet lorsqu’un titre de sujet est affiché dans l’en-tête. Par exemple, l’icône uniquement ici sur meta :

image

Cela semble assez peu intuitif. Est-il possible d’ajouter un argument supplémentaire à la fonction afin qu’elle n’affecte pas le petit logo ?

9

En raison de Upcoming Header Changes - Preparing Themes and Plugins, je pense que cela doit être changé en

\u003cscript type="text/discourse-plugin" version="1.34.0"\u003e
    api.registerValueTransformer("home-logo-href", () =\u003e "\u003cfull_url_of_your_website_homepage\u003e");
\u003c/script\u003e
2 « J'aime »