Quitar botones de categorías y etiquetas

[Andrew_Rowe]

¿Hay alguna manera fácil de eliminar estos dos botones? La razón por la que pregunto es que he estado leyendo (en este sitio) algunas opiniones de que Discourse es un poco abrumador para los nuevos usuarios. Simplemente siento que el botón de categorías es un poco redundante ya que la pestaña de categorías está justo ahí y si un usuario experimentado quiere buscar por etiqueta, puede usar el menú lateral. Me gusta la función, pero hace que las cosas estén un poco “desordenadas” en mi humilde opinión.

Me doy cuenta de que podría encontrar las etiquetas CSS y ocultarlas, pero me preguntaba si había una forma menos “chapucera” de lograr esta tarea. Supongo que una buena característica sería permitir a los usuarios activarlas más tarde cuando se sientan cómodos con la plataforma.

[jahan_gagan]

No hay una configuración integrada que no sea CSS en Discourse para eliminar o alternar globalmente los botones “Categorías” o “Etiquetas” de la interfaz de usuario.

[stephtara (Stephanie Booth)]

@Andrew_Rowe

Simplemente siento que el botón de categorías es un poco redundante ya que la pestaña de categorías está justo ahí y si un usuario experimentado quiere buscar por etiqueta puede usar el menú lateral.

@Andrew_Rowe

Me doy cuenta de que podría encontrar las etiquetas CSS y ocultarlas

¡Tomando nota de la idea para mi comunidad, gracias!

[ToddZ]

@Andrew_Rowe

Simplemente siento que el botón de categorías es un poco redundante ya que la pestaña de categorías está justo ahí y si un usuario experimentado quiere buscar por etiqueta puede usar el menú lateral.

Vale la pena señalar que estos botones ofrecen una función de búsqueda, lo que podría ser útil si tienes muchísimas categorías o etiquetas:

(Dejé los botones como están y oculté la sección de etiquetas del menú lateral. O se vuelve larga e incómoda, o tienes que especificar qué etiquetas predeterminadas mostrar, y no quería mostrar favoritismos )

CSS

// suprimir la lista de etiquetas de la barra lateral para simplificar la apariencia
.sidebar-section[data-section-name="tags"] {
 display: none
}

[Andrew_Rowe]

@ToddZ

Vale la pena señalar que estos botones ofrecen una función de búsqueda

No lo sabía… gracias

@ToddZ

ocultó la sección de etiquetas del menú lateral

He optado por ocultar completamente la barra lateral por defecto para los usuarios anónimos (usuarios no registrados o visitantes) utilizando un componente simple de Don para hacer el truco. encuéntralo aquí (Gracias Don)

Sentí que todo el mundo con un teléfono sabe buscar el botón de hamburguesa si quiere ver el menú o la configuración y para mí la interfaz se ve mucho menos confusa y aterradora sin la barra lateral (al menos al principio). Finalmente, una vez que la gente se familiarice con la interfaz (o se convierta en miembro), descubrirán la barra lateral.

Así que de todos modos…

Aquí está la salsa especial que descubrí para hacer desaparecer los dos botones:

.category-breadcrumb {
display: none
}

siéntete libre de corregirme si esta no es la forma en que debe hacerse

En mi humilde opinión, hace que la interfaz de usuario sea un poco más limpia sin pérdida de funcionalidad

Andy

editar para añadir:

Noté que los dos botones desaparecen en el móvil por defecto, así que obviamente los desarrolladores no sintieron que el mundo se acabaría si estos botones no se mostraban

[Lilly]

@Andrew_Rowe

Noté que los dos botones desaparecen en el móvil por defecto, así que obviamente los desarrolladores no sintieron que el mundo se acabaría si estos botones no se mostraban

los selectores desplegables de la ruta de navegación sí aparecen en la parte superior de las páginas de categoría en el móvil

y en las páginas de descubrimiento móvil (/latest, etc.) en algunos temas, como FKB Social.
Mencionas que los eliminaste porque “la pestaña de categorías está justo ahí” - asumiendo que te refieres al botón de píldora de navegación, tienes que hacer clic en él para ir a la página de categorías y luego encontrar la categoría a la que quieres ir; es mucho más intuitivo seleccionar desde el menú desplegable de categorías para ir directamente a donde quieres ir, especialmente si uno busca una subcategoría. Además, ¿cómo navega un usuario por etiquetas en tu sitio ahora?

[eisammy (Sammy)]

GitHub - discourse/Discourse-nav-links-component

Y este script de mierda que hice para reemplazar las rutas originales

<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 = () => {
        // Agregue el código aquí para ocultar elementos si es necesario
    };

    const applyStylesToPosts = () => {
        // Agregue su lógica de estilo de publicación aquí
        // Ejemplo: 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 - Desahogo Anónimo y Cuentos",
    "hot": "Segredin - Temas 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 si es página /hot
    if (HOT_PAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "hot";
    }
    
    // Verifica si es página de inicio
    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();
});

    // Ejecución 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>

Incrementaré ese código pero por ahora funciona

[eisammy (Sammy)]

Por cierto, este es el resultado:

[Andrew_Rowe]

@Lilly

Mencionas que los eliminaste porque “la pestaña de categorías está justo ahí”, asumiendo que te refieres al botón de píldora de navegación,

si se trata de un botón de píldora de navegación, entonces sí

Lo siento, no sabía cómo llamarlo

@Lilly

es mucho más intuitivo seleccionar del menú desplegable de categorías para ir directamente a donde se quiere ir, especialmente si uno busca una subcategoría

Estoy de acuerdo

pero… ¿un usuario nuevo sabría a dónde quiere ir? ¿Estaría buscando una subcategoría?

@Lilly

¿cómo navega un usuario por etiquetas en tu sitio ahora?

¿menú de la barra lateral?

¿un usuario que entra por primera vez sabrá que debe buscar una etiqueta específica?

Quizás mi enfoque esté equivocado. Estoy tratando de ver mi instancia desde el punto de vista de un usuario primerizo, lo cual es difícil para mí porque usé un foro de Discourse durante varios años antes de empezar el mío.

Quizás otra cosa única de mi situación particular no sea típica de Discourse en general. Hago eventos en vivo (cobertura de eventos deportivos). La gente a menudo se acerca en estos eventos y quiere saber más sobre cómo encontrarme en la web. Durante las transmisiones, también animo a la gente a encontrar el foro. Tengo carteles y pegatinas con códigos QR que enlazan al foro.

Algunas de estas personas son jóvenes y usuarios de teléfonos expertos. Otras son personas mayores que tienen un teléfono pero apenas saben usarlo para contestar una llamada cuando suena. Me he parado y he visto a ambos grupos mirar fijamente el foro y no saber qué hacer a continuación. Esto no es un problema específico de Discourse, he visto que hacen lo mismo en mi canal de YouTube.

[Andrew_Rowe]

Gracias Sammy, estoy estudiando tu código.

Supongo que podría insertar algo como esto en la sección head de un tema si quisiera (una vez que descubra cómo funciona )

[Andrew_Rowe]

Finalmente decidí no eliminar los botones de Categoría y Etiquetas usando css como se describió anteriormente porque una vez que un usuario hacía clic en una categoría, no había forma de volver a la vista de lista de categorías. Recientemente encontré este componente de tema que puede proporcionar una solución

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 …