Emojis Dynamiques : Personnaliser le thème Hugo Stack pour les Modes Sombre & Clair

Dans le thème Hugo Stack, un sélecteur de schéma de couleurs permet aux visiteurs de basculer entre les modes sombre et clair. Le thème dispose également d’un emoji personnalisable superposé à l’avatar de la barre latérale. Dans ce tutoriel, je vais vous montrer comment mettre à jour la configuration du thème pour changer automatiquement cet emoji en fonction du schéma de couleurs actif.

Avant-propos

Ce guide s’applique aux sites web construits avec Hugo utilisant le thème Stack. Je suppose que vous avez installé le thème en utilisant des sous-modules Git (Git submodules). Si vous utilisez des Modules Hugo, les chemins de fichiers peuvent différer légèrement.

Pour suivre, vous devez avoir la capacité de modifier les fichiers du thème. Cela implique que vous devriez avoir forké le thème. Si vous ne l’avez pas encore fait, je vous recommande de vous renseigner sur ce processus d’abord.

Comment ça marche

L’Emoji

Le thème Stack vous permet de définir un emoji qui apparaît dans le coin inférieur droit de votre avatar :

L’emoji affiché dans le coin inférieur droit du logo du site sur bureau

Actuellement, vous définissez cela dans la configuration de votre site (ex. hugo.toml ou config.toml) :

[params.sidebar]
    emoji = "🚜"

Si cette configuration est manquante, aucun emoji n’est affiché.

Le Mécanisme de Schéma de Couleurs

Le thème inclut un interrupteur (dans la barre latérale sur bureau, ou le menu hamburger sur mobile) pour basculer entre les modes sombre et clair.

L'interrupteur de schéma de couleurs sur bureau
L’interrupteur de schéma de couleurs sur bureau

L'interrupteur de schéma de couleurs sur mobile
L’interrupteur de schéma de couleurs sur mobile

Cette logique est gérée dans assets/ts/colorScheme.ts. Lorsqu’un utilisateur clique sur l’interrupteur, un événement personnalisé nommé onColorSchemeChange est dispatché :

    private dispatchEvent(colorScheme: colorScheme) {
        const event = new CustomEvent('onColorSchemeChange', {
            detail: colorScheme
        });
        window.dispatchEvent(event);
    }

Nous allons écouter cet événement pour déclencher notre mise à jour d’emoji.

Appliquer la Mise à jour

1. Modifier le Thème

La logique de la barre latérale gauche est située dans partials/sidebar/left.html. Ce fichier gère l’avatar, les icônes sociales, le menu et notre emoji.

Nous devons ajouter deux nouvelles clés de configuration : emojiLight (pour le mode clair) et emojiDark (pour le mode sombre). Pour assurer la rétrocompatibilité, nous nous replierons sur la clé emoji standard si l’une des clés spécifiques est manquante.

D’abord, nous devons assigner un ID au conteneur de l’avatar pour que notre JavaScript puisse le trouver facilement. Dans partials/sidebar/left.html, localisez la figure de l’avatar et ajoutez id="site-avatar" :

    {{ if (default true .enabled) }}
        <figure id="site-avatar" class="site-avatar">
        <a href="{{ .Site.BaseURL | relLangURL }}">

Ensuite, remplacez le bloc emoji existant par la logique suivante. Placez ce script juste avant la balise fermante </header> dans partials/sidebar/left.html :

<script>
    window.addEventListener('onColorSchemeChange', function (event) {
        // Determine which emoji to use based on the event detail (light/dark)
        let emoji = event.detail === 'light'
            ? "{{ $.Site.Params.sidebar.emojiLight }}"
            : "{{ $.Site.Params.sidebar.emojiDark }}";

        // Fallback to default emoji if specific one isn't set
        if (emoji.length === 0) {
            emoji = "{{ $.Site.Params.sidebar.emoji }}";
        }

        const emojiElt = document.getElementById("emoji-elt");
        const avatarElt = document.getElementById("site-avatar");

        // Logic to update, insert, or remove the emoji element
        if (emoji.length > 0 && emojiElt) {
            emojiElt.innerHTML = emoji;
        } else if (emoji.length > 0 && !emojiElt && avatarElt) {
            avatarElt.insertAdjacentHTML('beforeend', `<span id="emoji-elt" class="emoji">${emoji}</span>`);
        } else if (emoji.length === 0 && emojiElt) {
            emojiElt.remove();
        }
    });
</script>

Que fait ce code ?

Écouteur d’événement (Event Listener) : Nous écoutons onColorSchemeChange. Notez que cet événement est aussi émis lors du chargement initial de la page, nous permettant de définir l’état initial correct.
Logique de Sélection : Nous vérifions le détail de l’événement (light ou dark) et choisissons l’emoji correspondant depuis votre config. Si vide, il se replie sur l’emoji par défaut.
Manipulation du DOM :
- Si un emoji existe et que le span existe : Mettre à jour le contenu.
- Si un emoji existe mais que le span est manquant : Créer le span et l’ajouter à site-avatar.
- Si aucun emoji n’est nécessaire mais que le span existe : Le supprimer.

2. Mettre à jour la Configuration

Une fois le thème mis à jour, mettez à jour le fichier de configuration de votre site (ex. config.toml). Ajoutez les clés emojiLight et emojiDark. Vous devriez garder la clé emoji originale comme fallback.

[params.sidebar]
    emoji = "🚜"       # Fallback
    emojiLight = "🌾"  # Affiché en Mode Clair
    emojiDark = "🦉"   # Affiché en Mode Sombre

Redémarrez votre serveur Hugo, et l’emoji devrait maintenant réagir au schéma de couleurs !

Vidéo montrant l’emoji se mettant à jour lors du changement de schéma de couleurs