Rimuovi i pulsanti categorie e tag

[Andrew_Rowe]

C’è un modo semplice per rimuovere questi due pulsanti? Il motivo per cui lo chiedo è che ho letto (su questo sito) alcune opinioni secondo cui Discourse è un po’ opprimente per i nuovi utenti. Trovo che il pulsante delle categorie sia un po’ ridondante dato che la scheda delle categorie è proprio lì e se un utente esperto vuole cercare per tag può usare il menu laterale. Mi piace la funzionalità, ma la rende un po’ “disordinata” secondo me.

Mi rendo conto che potrei trovare i tag CSS e nasconderli, ma mi chiedevo se ci fosse un modo meno “hacker” per realizzare questo compito. Immagino che una bella funzionalità sarebbe quella di consentire agli utenti di attivarli in seguito, quando si sentiranno a proprio agio con la piattaforma.

[jahan_gagan]

Non esiste un’impostazione integrata, non basata su CSS, in Discourse per rimuovere o disattivare globalmente dalla UI i pulsanti “Categories” (Categorie) o “Tags” (Tag).

[stephtara (Stephanie Booth)]

@Andrew_Rowe

Sento solo che il pulsante delle categorie è un po’ ridondante dato che la scheda delle categorie è proprio lì e se un utente esperto vuole cercare per tag può usare il menu laterale.

@Andrew_Rowe

Mi rendo conto che potrei trovare i tag CSS e nasconderli

Prendo nota dell’idea per la mia community, grazie!

[ToddZ]

@Andrew_Rowe

Sento solo che il pulsante delle categorie è un po’ ridondante dato che la scheda delle categorie è proprio lì e se un utente esperto vuole cercare per tag può usare il menu laterale.

Vale la pena notare che questi pulsanti offrono una funzione di ricerca, che potrebbe essere utile se si hanno tantissime categorie o tag:

(Ho lasciato i pulsanti invariati e ho nascosto la sezione dei tag dal menu laterale. Diventa lunga e difficile da gestire, oppure devi specificare quali tag predefiniti mostrare, e non volevo fare favoritismi )

CSS

// sopprime l'elenco dei tag dalla barra laterale per semplificare l'aspetto
.sidebar-section[data-section-name="tags"] {
 display: none
}

[Andrew_Rowe]

@ToddZ

Vale la pena notare che questi pulsanti offrono una funzione di ricerca

Non lo sapevo… grazie

@ToddZ

nascosto la sezione dei tag dal menu laterale

Ho scelto di nascondere completamente la barra laterale per impostazione predefinita per gli utenti anonimi (utenti non registrati o visitatori) utilizzando un semplice componente di Don per fare il trucco. trovalo qui (Grazie Don)

Ho pensato che tutti quelli che hanno un telefono sanno cercare il pulsante hamburger se vogliono vedere il menu o le impostazioni e per me l’interfaccia utente sembra molto meno confusa e spaventosa senza la barra laterale (almeno all’inizio). Alla fine, una volta che le persone si familiarizzano con l’interfaccia (o diventano membri), scopriranno la barra laterale.

Comunque…

ecco la salsa speciale che ho scoperto per far sparire i due pulsanti:

.category-breadcrumb {
display: none
}

sentitevi liberi di correggermi se non è così che dovrebbe essere fatto

IMHO rende l’interfaccia utente un po’ più pulita senza perdita di funzionalità

Andy

modifica per aggiungere:

Ho notato che i due pulsanti scompaiono su dispositivi mobili per impostazione predefinita, quindi ovviamente gli sviluppatori non pensavano che il mondo sarebbe finito se questi pulsanti non fossero stati mostrati

[Lilly]

@Andrew_Rowe

Ho notato che i due pulsanti scompaiono su dispositivi mobili per impostazione predefinita, quindi ovviamente gli sviluppatori non pensavano che il mondo sarebbe finito se questi pulsanti non fossero stati visualizzati

i selettori a discesa del breadcrumb appaiono nella parte superiore delle pagine di categoria su dispositivi mobili

e sulle pagine di scoperta mobile (/latest, ecc.) in alcuni temi, come FKB Social.
Menzioni di averli rimossi perché “la scheda categorie è proprio lì” - supponendo che tu intenda il pulsante della pillola di navigazione, devi cliccarci sopra per andare alla pagina delle categorie e poi trovare la categoria in cui vuoi andare - è molto più intuitivo selezionare dal menu a discesa delle categorie per andare direttamente dove vuoi andare, specialmente se si sta cercando una sottocategoria. Inoltre, come fa un utente a navigare per tag sul tuo sito ora?

[eisammy (Sammy)]

GitHub - discourse/Discourse-nav-links-component

E questo script di merda che ho fatto per sostituire i percorsi originali

<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 = () => {
        // Aggiungi qui il codice per nascondere gli elementi se necessario
    };

    const applyStylesToPosts = () => {
        // Aggiungi qui la tua logica di stile dei post
        // Esempio: 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 - Desabafo Anônimo e Contos",
    "hot": "Segredin - Tópicos Populares"
};

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;
    
    // Verifica se è pagina /hot
    if (HOT_PAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "hot";
    }
    
    // Verifica se è pagina iniziale
    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();
});

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

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

Lo incrementerò ma per ora funziona

[eisammy (Sammy)]

A proposito, questo è il risultato:

[Andrew_Rowe]

@Lilly

Menzioni di averli rimossi perché “la scheda delle categorie è proprio lì” - supponendo che tu intenda il pulsante pillola di navigazione,

se si tratta di un pulsante pillola di navigazione, allora sì

Scusa, non sapevo come chiamarlo

@Lilly

è molto più intuitivo selezionare dal menu a discesa delle categorie per andare direttamente dove si vuole andare, specialmente se si sta cercando una sottocategoria

Sono d’accordo

ma… un nuovo utente saprebbe dove vuole andare? Cercherebbe una sottocategoria?

@Lilly

come fa un utente a navigare per tag sul tuo sito ora?

menu laterale?

un utente che visita per la prima volta saprà cercare un tag specifico?

Forse il mio approccio è sbagliato. Sto cercando di guardare la mia istanza dal punto di vista di un utente alle prime armi, il che è difficile per me perché ho usato un forum Discourse per diversi anni prima di avviare il mio.

Forse un’altra cosa unica della mia particolare situazione potrebbe non essere tipica di Discourse in generale. Faccio eventi dal vivo (copertura di eventi sportivi). Le persone spesso si avvicinano a questi eventi e vogliono saperne di più su come trovarmi sul web. Durante le trasmissioni incoraggio anche le persone a trovare il forum. Ho segnaletica e adesivi con codici QR che rimandano al forum.

Alcune di queste persone sono giovani e utenti esperti di telefoni. Altri sono anziani che possiedono un telefono ma riescono a malapena a usarlo per rispondere a una chiamata quando squilla. Sono rimasto a guardare entrambi i gruppi fissare il forum e non sapere cosa fare dopo. Questo non è un problema specifico di Discourse, li ho visti fare la stessa cosa sul mio canale YouTube.

[Andrew_Rowe]

Grazie Sammy, sto studiando il tuo codice.

Immagino di poter inserire qualcosa di simile nella sezione head di un tema se volessi (una volta capito come funziona )

[Andrew_Rowe]

Alla fine ho deciso di non eliminare i pulsanti Categoria e Tag usando il css come descritto sopra perché una volta che un utente cliccava su una categoria, non c’era modo di tornare alla vista elenco delle categorie. Di recente ho trovato questo componente tema che potrebbe fornire una soluzione

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 …