Удалить кнопки «Категории» и «Теги»

[Andrew_Rowe]

Есть ли простой способ убрать эти две кнопки? Причина моего вопроса в том, что я читал (на этом сайте) мнения некоторых людей о том, что Discourse может показаться немного перегруженным для новых пользователей. Мне кажется, что кнопка «Категории» немного избыточна, поскольку вкладка «Категории» находится прямо рядом, а опытный пользователь, желающий выполнить поиск по тегу, может воспользоваться боковым меню. Мне нравится эта функция, но, на мой взгляд, она немного «загромождает» интерфейс.

Я понимаю, что мог бы найти соответствующие CSS-стили и скрыть их, но меня интересует, существует ли менее «костыльный» способ решения этой задачи. Мне кажется, было бы здорово добавить возможность для пользователей самостоятельно включать эти элементы позже, когда они уже привыкнут к платформе.

[jahan_gagan]

В Discourse нет встроенной настройки, отличной от CSS, для глобального удаления или переключения кнопок «Категории» или «Теги» в интерфейсе.

[stephtara (Stephanie Booth)]

@Andrew_Rowe

Мне просто кажется, что кнопка «Категории» немного избыточна, поскольку вкладка «Категории» находится прямо рядом, а опытный пользователь, желающий выполнить поиск по тегу, может воспользоваться боковым меню.

@Andrew_Rowe

Я понимаю, что мог бы найти теги CSS и скрыть их.

Записываю эту идею для своего сообщества, спасибо!

[ToddZ]

@Andrew_Rowe

Мне просто кажется, что кнопка «Категории» немного избыточна, поскольку вкладка «Категории» уже есть, а опытный пользователь, желающий выполнить поиск по тегу, может воспользоваться боковым меню.

Стоит отметить, что эти кнопки предоставляют функцию поиска — что может быть удобно, если у вас множество категорий или тегов:

(Я оставил кнопки без изменений и скрыл раздел тегов из бокового меню. Он либо становится слишком длинным и неудобным, либо приходится указывать, какие теги по умолчанию показывать, а я не хотел отдавать предпочтение каким-то определённым )

CSS

// скрыть список тегов из боковой панели для упрощения внешнего вида
.sidebar-section[data-section-name="tags"] {
 display: none
}

[Andrew_Rowe]

@ToddZ

Стоит отметить, что эти кнопки предлагают функцию поиска

Я этого не знал… спасибо

@ToddZ

скрыл раздел тегов из бокового меню

Я решил полностью скрыть боковую панель по умолчанию для анонимных пользователей (неавторизованных пользователей или посетителей), используя простой компонент от Дона. Найти его можно здесь (Спасибо, Дон)

Мне казалось, что каждый, у кого есть телефон, знает, где искать кнопку «гамбургер», если нужно открыть меню или настройки. Для меня интерфейс выглядит гораздо менее запутанным и пугающим без боковой панели (по крайней мере, на первый взгляд). В конце концов, когда пользователи привыкнут к интерфейсу (или станут членами сообщества), они обнаружат боковую панель.

В общем и целом…

вот тот самый секретный ингредиент, который я придумал, чтобы скрыть эти две кнопки:

.category-breadcrumb {
display: none
}

Не стесняйтесь поправить меня, если это не самый правильный способ

По моему мнению, это делает интерфейс немного чище без потери функциональности

Энди

добавлено в редактировании:

Я заметил, что эти две кнопки по умолчанию скрываются на мобильных устройствах, так что разработчики явно не считают, что мир рухнет, если эти кнопки не будут отображаться

[Lilly (Lillian)]

@Andrew_Rowe

Я заметил, что на мобильных устройствах по умолчанию исчезают две кнопки, так что, очевидно, разработчики не считают, что мир рухнет, если эти кнопки не будут отображаться.

Выпадающие селекторы навигационной цепочки действительно отображаются в верхней части страниц категорий на мобильных устройствах.

А также на страницах «Обзор» (/latest и т.д.) на мобильных устройствах в некоторых темах, например, в FKB Social.

Вы упоминаете, что удалили их, потому что «вкладку категорий можно увидеть прямо там» — если вы имеете в виду кнопку-таблетку навигации, то вам нужно нажать на неё, чтобы перейти на страницу категорий, а затем найти нужную категорию. Гораздо интуитивнее выбрать категорию из выпадающего списка, чтобы сразу перейти туда, куда нужно, особенно если вы ищете подкатегорию. Кроме того, как пользователь может осуществлять навигацию по тегам на вашем сайте сейчас?

[eisammy (Sammy)]

GitHub - discourse/Discourse-nav-links-component

А вот этот дерьмовый скрипт, который я написал для замены оригинальных путей:

<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 = () => {
        // Добавьте сюда код для скрытия элементов, если необходимо
    };

    const applyStylesToPosts = () => {
        // Добавьте сюда логику стилизации постов
        // Пример: 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 - Анонимные жалобы и рассказы",
    "hot": "Segredin - Популярные темы"
};

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;
    
    // Проверяем, является ли страница /hot
    if (HOT_PAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\/$/, '') + '?') ||
        currentUrl === url.replace(/\/$/, '')
    )) {
        return "hot";
    }
    
    // Проверяем, является ли страница главной
    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();
});

    // Первичное выполнение
    applyStylesToPosts();
    updateLinks();
    ocultarElementos();
    processTags();
    
    const titleObserver = startTitleObserver();
    monitorUrlChanges(titleObserver);
    
    mainObserver.observe(document.body, { 
        childList: true, 
        subtree: true 
    });

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

Я дополню этот код, но пока он работает.

[eisammy (Sammy)]

Кстати, вот результат:

[Andrew_Rowe]

@Lilly

Вы упомянули, что убрали их, потому что «вкладка категорий прямо там» — предполагая, что вы имеете в виду кнопку навигационной вкладки,

Если это кнопка навигационной вкладки, то да

Извините, не знал, как это назвать

@Lilly

Гораздо интуитивнее выбирать из выпадающего списка категорий, чтобы сразу перейти туда, куда нужно, особенно если ищешь подкатегорию

Я согласен

но… будет ли новый пользователь знать, куда ему нужно? Будет ли он искать подкатегорию?

@Lilly

Как пользователь может осуществлять навигацию по тегам на вашем сайте сейчас?

Меню боковой панели?

Узнает ли пользователь впервые, что нужно искать конкретный тег?

Возможно, мой подход ошибочен. Я пытаюсь посмотреть на свой экземпляр с точки зрения нового пользователя, что для меня сложно, так как я использовал форум Discourse в течение нескольких лет, прежде чем создать свой собственный.

Возможно, другая уникальная особенность моей конкретной ситуации не является типичной для Discourse в целом. Я занимаюсь освещением живых событий (спортивные мероприятия). Люди часто подходят на этих мероприятиях и хотят узнать больше о том, как найти меня в интернете. Во время трансляций я также призываю людей найти форум. У меня есть вывески и наклейки с QR-кодами, ведущими на форум.

Некоторые из этих людей — молодые и продвинутые пользователи телефонов. Другие — пожилые люди, у которых есть телефон, но они едва могут использовать его для ответа на звонок, когда он звонит. Я стоял и наблюдал, как обе группы смотрят на форум и не знают, что делать дальше. Это не специфическая проблема Discourse; я видел, как они делают то же самое на моем канале YouTube.

[Andrew_Rowe]

Спасибо, Сэмми, я изучаю твой код.

Думаю, я мог бы вставить что-то подобное в секцию head темы, если захочу (как только разберусь, как это работает )

[Andrew_Rowe]

В итоге я решил не скрывать кнопки «Категории» и «Теги» с помощью CSS (как описано выше), так как после перехода в категорию у пользователя не было возможности вернуться к списку категорий. Недавно я обнаружил этот компонент темы, который может решить эту проблему:

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 …