Supprimer les boutons de catégories et d'étiquettes

[Andrew_Rowe]

Existe un moyen simple de supprimer ces deux boutons ? La raison pour laquelle je pose la question est que j’ai lu (sur ce site) certains avis selon lesquels Discourse est un peu intimidant pour les nouveaux utilisateurs. J’ai juste l’impression que le bouton des catégories est un peu redondant puisque l’onglet des catégories est juste là et que si un utilisateur expérimenté veut rechercher par étiquette, il peut utiliser le menu latéral. J’aime la fonctionnalité, mais cela rend les choses un peu « encombrées » à mon humble avis.

Je me rends compte que je pourrais trouver les balises CSS et les masquer, mais je me demandais s’il existait une manière moins « bricolée » d’accomplir cette tâche. Je suppose qu’une bonne fonctionnalité serait de permettre aux utilisateurs de les activer eux-mêmes plus tard, lorsqu’ils seront à l’aise avec la plateforme.

[jahan_gagan]

Il n’existe aucun paramètre intégré, non lié au CSS, dans Discourse pour supprimer ou basculer globalement les boutons « Catégories » ou « Étiquettes » de l’interface utilisateur.

[stephtara (Stephanie Booth)]

@Andrew_Rowe

Je trouve que le bouton des catégories est un peu redondant puisque l’onglet des catégories est juste là et qu’un utilisateur expérimenté qui souhaite rechercher par étiquette peut utiliser le menu latéral.

@Andrew_Rowe

Je me rends compte que je pourrais trouver les balises CSS et les masquer

Je prends note de l’idée pour ma communauté, merci !

[ToddZ]

@Andrew_Rowe

Je trouve que le bouton des catégories est un peu redondant puisque l’onglet des catégories est juste là et si un utilisateur expérimenté veut rechercher par étiquette, il peut utiliser le menu latéral.

Il est à noter que ces boutons offrent une fonction de recherche – ce qui pourrait être agréable si vous avez beaucoup de catégories ou d’étiquettes :

(J’ai laissé les boutons tels quels et j’ai masqué la section des étiquettes du menu latéral. Elle devient soit longue et encombrante, soit vous devez spécifier quelles étiquettes par défaut afficher, et je ne voulais pas jouer les favoris )

CSS

// masquer la liste des étiquettes de la barre latérale pour simplifier l'apparence
.sidebar-section[data-section-name="tags"] {
 display: none
}

[Andrew_Rowe]

@ToddZ

Il est à noter que ces boutons offrent une fonction de recherche

Je ne le savais pas… merci

@ToddZ

masqué la section des tags du menu latéral

J’ai choisi de masquer complètement la barre latérale par défaut pour les utilisateurs anonymes (utilisateurs non connectés ou visiteurs) en utilisant un composant simple de Don pour faire l’affaire. trouvez-le ici (Merci Don)

J’ai estimé que tout le monde avec un téléphone sait chercher le bouton hamburger si vous voulez voir le menu ou les paramètres et pour moi, l’interface utilisateur semble beaucoup moins déroutante et effrayante sans la barre latérale (au moins au début). Finalement, une fois que les gens se familiarisent avec l’interface (ou deviennent membres), ils découvriront la barre latérale.

Donc, quoi qu’il en soit…

voici la sauce spéciale que j’ai trouvée pour faire disparaître les deux boutons :

.category-breadcrumb {
display: none
}

n’hésitez pas à me corriger si ce n’est pas ainsi que cela doit être fait

Selon moi, cela rend l’interface utilisateur un peu plus propre sans perte de fonctionnalité

Andy

édition pour ajouter :

J’ai remarqué que les deux boutons disparaissent par défaut sur mobile, donc manifestement les développeurs n’ont pas pensé que le monde allait s’arrêter si ces boutons n’apparaissaient pas

[Lilly]

@Andrew_Rowe

J’ai remarqué que les deux boutons disparaissent par défaut sur mobile, donc manifestement, les développeurs n’ont pas estimé que le monde allait s’écrouler si ces boutons n’apparaissaient pas.

les sélecteurs déroulants du fil d’Ariane apparaissent en haut des pages de catégorie sur mobile

et sur les pages de découverte mobile (/latest, etc.) dans certains thèmes, comme FKB Social.
Vous mentionnez les avoir supprimés parce que « l’onglet des catégories est juste là » - en supposant que vous parlez du bouton de la pilule de navigation, vous devez cliquer dessus pour aller à la page des catégories puis trouver la catégorie vers laquelle vous voulez aller - il est beaucoup plus intuitif de sélectionner dans le menu déroulant des catégories pour aller directement là où vous voulez aller, surtout si l’on cherche une sous-catégorie. De plus, comment un utilisateur navigue-t-il par balise sur votre site maintenant ?

[eisammy (Sammy)]

GitHub - discourse/Discourse-nav-links-component

Et ce script de merde que j’ai fait pour remplacer les chemins originaux

<script>
document.addEventListener('DOMContentLoaded', function() {
   
    const updateLinks = () => {
        document.querySelectorAll('a[href*="/l/latest"]').forEach(link => {
            link.href = 'https://segredin.com/';
        });
        document.querySelectorAll('a[href*="/l/hot"]').forEach(link => {
            link.href = 'https://segredin.com/hot';
        });
        document.querySelectorAll('a[href*="/latest"]').forEach(link => {
            link.href = 'https://segredin.com/';
        });
    };
    
    const ocultarElementos = () => {
        // Ajoutez le code ici pour masquer les éléments si nécessaire
    };

    const applyStylesToPosts = () => {
        // Ajoutez votre logique de style de publication ici
        // Exemple : document.querySelectorAll('.post').forEach(post => { ... });
    };
    
    const replaceTextNodes = (node) => {
        node.childNodes.forEach(child => {
            if (child.nodeType === Node.TEXT_NODE) {
                child.textContent = child.textContent
                    .replace(/-E-/gi, ' & ')
                    .replace(/-/g, ' ');
            } else {
                replaceTextNodes(child);
            }
        });
    };

    const processTags = () => {
        document.querySelectorAll('.discourse-tag.box').forEach(tag => {
            replaceTextNodes(tag);
        });
        document.querySelectorAll('#sidebar-section-content-tags .sidebar-section-link-content-text').forEach(tag => {
            replaceTextNodes(tag);
        });
    };
 
    const TITLES = {
    "home": "Segredin - Décharge Anonyme et Contes",
    "hot": "Segredin - Sujets Populaires"
};

const HOMEPAGE_URLS = [
    "https://segredin.com/", 
    "https://segredin.com"
];

const HOT_PAGE_URLS = [
    "https://segredin.com/hot",
    "https://segredin.com/hot/"
];

const getCurrentPageType = () => {
    const currentUrl = window.location.href;
    
    // Vérifie si c'est la page /hot
    if (HOT_PAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "hot";
    }
    
    // Vérifie si c'est la page d'accueil
    if (HOMEPAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "home";
    }
    
    return null;
};

const getDesiredTitle = () => {
    const pageType = getCurrentPageType();
    return pageType ? TITLES[pageType] : null;
};

const enforceTitle = () => {
    const desiredTitle = getDesiredTitle();
    if (!desiredTitle) return;
    
    if (document.title !== desiredTitle) {
        document.title = desiredTitle;
    }
};

const startTitleObserver = () => {
    const titleObserver = new MutationObserver(enforceTitle);
    const titleElement = document.querySelector('title');
    if (titleElement) {
        titleObserver.observe(titleElement, {
            childList: true,
            subtree: true,
            characterData: true
        });
    }
    return titleObserver;
};

const monitorUrlChanges = (titleObserver) => {
    let lastUrl = window.location.href;
    setInterval(() => {
        if (window.location.href !== lastUrl) {
            lastUrl = window.location.href;
            const pageType = getCurrentPageType();
            if (pageType) {
                enforceTitle();
                titleObserver.disconnect();
                startTitleObserver();
            } else {
                titleObserver.disconnect();
            }
        }
    }, 300);
};

const mainObserver = new MutationObserver(() => {
    applyStylesToPosts();
    updateLinks();
    ocultarElementos();
    processTags();
    enforceTitle();
});

    // Exécution initiale
    applyStylesToPosts();
    updateLinks();
    ocultarElementos();
    processTags();
    
    const titleObserver = startTitleObserver();
    monitorUrlChanges(titleObserver);
    
    mainObserver.observe(document.body, { 
        childList: true, 
        subtree: true 
    });

    document.addEventListener('page:changed', () => {
        processTags();
        enforceTitle();
    });
});
</script>

Je vais incrémenter ce code mais pour l’instant il fonctionne

[eisammy (Sammy)]

Soit dit en passant, voici le résultat :

[Andrew_Rowe]

@Lilly

Vous mentionnez que vous les avez supprimés parce que « l’onglet catégories est juste là » - en supposant que vous voulez dire le bouton de pilule de navigation,

si c’est un bouton de pilule de navigation, alors oui

Désolé, je ne savais pas comment l’appeler

@Lilly

il est beaucoup plus intuitif de sélectionner dans le menu déroulant des catégories pour aller directement là où l’on veut aller, surtout si l’on recherche une sous-catégorie

Je suis d’accord

mais… un nouvel utilisateur saurait-il où il veut aller ? Chercherait-il une sous-catégorie ?

@Lilly

comment un utilisateur navigue-t-il par balises sur votre site maintenant ?

menu de la barre latérale ?

un utilisateur pour la première fois saura-t-il chercher une balise spécifique ?

Peut-être que mon approche est erronée. J’essaie de regarder mon instance du point de vue d’un utilisateur pour la première fois, ce qui est difficile pour moi car j’ai utilisé un forum Discourse pendant plusieurs années avant de créer le mien.

Peut-être qu’une autre particularité de ma situation n’est pas typique de Discourse en général. Je couvre des événements en direct (couverture d’événements sportifs). Les gens viennent souvent à ces événements et veulent en savoir plus sur la façon de me trouver sur le web. Pendant les diffusions, j’encourage également les gens à trouver le forum. J’ai des panneaux et des autocollants avec des codes QR qui mènent au forum.

Certaines de ces personnes sont jeunes et utilisent bien leur téléphone. D’autres sont des personnes âgées qui possèdent un téléphone mais savent à peine l’utiliser pour répondre à un appel lorsqu’il sonne. Je me suis tenu et j’ai regardé les deux groupes fixer le forum et ne pas savoir quoi faire ensuite. Ce n’est pas spécifiquement un problème de Discourse, j’ai vu qu’ils faisaient la même chose sur ma chaîne YouTube.

[Andrew_Rowe]

Merci Sammy, j’étudie ton code.

Je suppose que je pourrais insérer quelque chose comme ceci dans la section head d’un thème si je le voulais (une fois que j’aurai compris comment ça fonctionne )

[Andrew_Rowe]

J’ai finalement décidé de ne pas supprimer les boutons Catégorie et Étiquettes en utilisant du CSS comme décrit ci-dessus car une fois qu’un utilisateur cliquait dans une catégorie, il n’y avait aucun moyen de revenir à la vue de la liste des catégories. J’ai récemment trouvé ce composant de thème qui pourrait fournir une solution

Breadcrumb Links

Summary Breadcrumb Links Preview README Repository GitHub - denvergeeks/discourse-breadcrumb-links: Breadcrumb Navigation for Discourse Install Guide How to install a theme or theme component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Basic Breadcrumb Links On all Topic pages: displays links back to the Subcategory (if any) and Category …