Remover botões de categorias e tags

Suporte
1

Existe uma maneira fácil de remover estes dois botões? O motivo de eu perguntar é que tenho lido (neste site) algumas opiniões de que o Discourse é um pouco opressor para novos usuários. Eu sinto que o botão de categorias é um pouco redundante, já que a aba de categorias está bem ali, e se um usuário experiente quiser pesquisar por tag, ele pode usar o menu lateral. Eu gosto do recurso, mas ele deixa as coisas um pouco ‘poluídas’ na minha humilde opinião.

Eu percebo que poderia encontrar as tags de CSS e escondê-las, mas eu estava me perguntando se havia uma maneira menos “gambiarra” de realizar esta tarefa. Acho que um bom recurso seria permitir que os usuários os ativem mais tarde, quando estiverem confortáveis com a plataforma.

image
image803×160 8.35 KB

2 curtidas
Breadcrumb Links
2

Não há uma configuração integrada, que não seja CSS, no Discourse para remover ou alternar globalmente os botões “Categorias” ou “Tags” da interface do usuário.

1 curtida
3

Anotando a ideia para minha comunidade, obrigado!

1 curtida
4

Vale a pena notar que esses botões oferecem uma função de pesquisa – o que pode ser bom se você tiver muitas categorias ou tags:

image
image273×174 7.27 KB

(Eu deixei os botões como estão e ocultei a seção de tags do menu lateral. Ela fica longa e desajeitada, ou você precisa especificar quais tags padrão mostrar, e eu não queria tomar partido :sweat_smile: )

CSS 
// suprimir a lista de tags da barra lateral para simplificar a aparência
.sidebar-section[data-section-name="tags"] {
 display: none
}
2 curtidas
5

Eu não sabia… obrigado

Eu optei por ocultar completamente a barra lateral por padrão para usuários anônimos (usuários não logados ou visitantes) usando um componente simples do Don para fazer o truque. encontre aqui (Obrigado Don)

Eu senti que todo mundo com um telefone sabe procurar o botão hambúrguer se quiser ver o menu ou configurações e, para mim, a interface parece muito menos confusa e assustadora sem a barra lateral (pelo menos no início). Eventualmente, quando as pessoas se familiarizarem com a interface (ou se tornarem membros), elas descobrirão a barra lateral.

Então, de qualquer forma…

aqui está o molho especial que descobri para fazer os dois botões desaparecerem:

.category-breadcrumb {
display: none
}

sinta-se à vontade para me corrigir se não for assim que isso deve ser feito

Na minha opinião, isso torna a interface um pouco mais limpa, sem perda de funcionalidade

Andy

edição para adicionar:

Notei que os dois botões desaparecem no celular por padrão, então, obviamente, os desenvolvedores não acharam que o mundo acabaria se esses botões não aparecessem

2 curtidas
6

os seletores suspensos de trilha de navegação (breadcrumb) aparecem no topo das páginas de categoria no celular

IMG_4897
IMG_48971290×2235 245 KB

e nas páginas de descoberta (discovery) no celular (/latest, etc.) em alguns temas, como o FKB Social.

Você menciona que os removeu porque “a aba de categorias está bem ali” - supondo que você queira dizer o botão de pílula de navegação (nav pill), você tem que clicar nele para ir para a página de categorias e então encontrar a categoria para a qual deseja ir - é muito mais intuitivo selecionar no menu suspenso de categorias para ir direto para onde você quer ir, especialmente se alguém estiver procurando por uma subcategoria. Além disso, como um usuário faz navegação por tags no seu site agora?

2 curtidas
7

E este script de merda que eu fiz para substituir os caminhos originais

<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 = () => {
        // Adicione o código aqui para ocultar elementos, se necessário
    };

    const applyStylesToPosts = () => {
        // Adicione sua lógica de estilização de posts aqui
        // Exemplo: 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 é página /hot
    if (HOT_PAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "hot";
    }
    
    // Verifica se é página inicial
    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();
});

    // Execução inicial
    applyStylesToPosts();
    updateLinks();
    ocultarElementos();
    processTags();
    
    const titleObserver = startTitleObserver();
    monitorUrlChanges(titleObserver);
    
    mainObserver.observe(document.body, { 
        childList: true, 
        subtree: true 
    });

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

Vou incrementar esse código, mas por enquanto ele funciona

8

A propósito, este é o resultado:

image
image1068×466 56.5 KB

image
image788×414 30.2 KB

9

se for um botão de pílula de navegação, então sim

image
image803×160 7.87 KB

Desculpe, eu não sabia como chamar

Eu concordo

mas… um novo usuário saberia para onde quer ir? Ele estaria procurando por uma subcategoria?

menu da barra lateral?

um usuário de primeira viagem saberá procurar por uma tag específica?

Talvez minha abordagem esteja equivocada. Estou tentando olhar para a minha instância do ponto de vista de um usuário de primeira viagem, o que é difícil para mim porque usei um fórum Discourse por vários anos antes de começar o meu.

Talvez outra coisa única sobre a minha situação em particular não seja típica do Discourse em geral. Eu faço eventos ao vivo (cobertura de eventos esportivos). As pessoas costumam aparecer nesses eventos e querem saber mais sobre como me encontrar na web. Durante as transmissões, também incentivo as pessoas a encontrar o fórum. Eu tenho sinalização e adesivos com códigos QR que levam ao fórum.

Algumas dessas pessoas são jovens e usuárias experientes de celular. Outras são pessoas mais velhas que possuem um celular, mas mal sabem usá-lo para atender uma chamada quando toca. Eu já fiquei e observei ambos os grupos olhando para o fórum e não sabendo o que fazer em seguida. Isso não é um problema específico do Discourse, eu os vi fazerem o mesmo no meu canal do YouTube.

10

Obrigado Sammy, estou estudando seu código.

Acho que eu poderia inserir algo assim na seção head de um tema se eu quisesse (assim que eu descobrir como funciona :thinking: :face_with_monocle: :confused: :joy: )

1 curtida
11

Acabei por não remover os botões de Categoria e Tags usando css como descrito acima porque, uma vez que um usuário clicava em uma categoria, não havia como retornar à visualização da lista de categorias. Recentemente, encontrei este componente de tema que pode fornecer uma solução

1 curtida