移除分类和标签按钮

有没有一种简单的方法可以移除这两个按钮?我问这个问题的原因是,我(在这个网站上)读到一些人认为 Discourse 对新用户来说有点不知所措。我只是觉得“分类”按钮有点多余,因为“分类”标签就在那里,而且如果经验丰富的用户想按标签搜索,他们可以使用侧边菜单。我喜欢这个功能,但恕我直言,它让界面有点“杂乱”。

我意识到我可以找到 CSS 标签并隐藏它们,但我一直在想是否有不那么“黑客”的方法来完成这项任务。我想一个很好的功能是允许用户在他们对平台感到舒适后自己打开它们。

2 个赞

在 Discourse 中,没有内置的、非 CSS 的设置可以全局地从用户界面中移除或切换“分类”或“标签”按钮。

1 个赞

记下这个想法供我的社区参考,谢谢!

1 个赞

值得注意的是,这些按钮提供了搜索功能——如果你有大量的分类或标签,这可能会很方便:

(我保留了这些按钮,并隐藏了侧边菜单中的标签部分。它要么变得冗长且笨拙,要么你需要指定显示哪些默认标签,我不想偏袒任何一方 :sweat_smile:

CSS
// 抑制侧边栏中的标签列表以简化外观
.sidebar-section[data-section-name="tags"] {
 display: none
}
2 个赞

我不知道……谢谢

我选择默认情况下对匿名用户(未登录用户或访客)完全隐藏侧边栏,使用了一个由 Don 制作的简单组件来实现这个效果。在此处查找(感谢 Don)

我觉得每个使用手机的人都知道要寻找汉堡菜单按钮才能看到菜单或设置,对我来说,没有侧边栏的界面看起来不那么混乱和吓人(至少一开始是这样)。最终,一旦人们熟悉了界面(或成为会员),他们就会发现侧边栏。

所以,无论如何……。

这是我发现的让两个按钮消失的秘诀:

.category-breadcrumb {
display: none
}

如果这不是应该做的方式,请随时纠正我

在我看来,这让用户界面更简洁,而没有损失任何功能

安迪

编辑添加:

我注意到在移动设备上这两个按钮默认是隐藏的,所以很明显开发者不认为不显示这些按钮世界末日就会来临

2 个赞

面包屑下拉选择器确实会出现在移动设备上分类页面的顶部

并且在某些主题(例如 FKB Social)的移动设备发现(/latest 等)页面上也会出现。

您提到您移除了它们是因为“分类标签就在那里”——假设您指的是导航药丸按钮,您必须点击它才能进入分类页面,然后找到您想去的分类——从分类下拉菜单中选择可以直接去您想去的地方要直观得多,特别是当有人寻找子分类时。另外,您的网站现在如何进行标签导航?

2 个赞

以及我为替换原始路径所做的这个垃圾脚本

<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>

我将继续完善这段代码,但目前它能工作

顺便说一下,这是结果:

如果这是一个导航药丸按钮,那么是的

抱歉,我不知道该怎么称呼它

我同意

但是……新用户会知道他们想去哪里吗?他们会寻找子类别吗?

侧边栏菜单?

首次用户会知道去寻找特定的标签吗?

也许我的方法是错误的。我正试图从首次用户的角度来看待我的实例,但这对我来说很难,因为在创建我自己的 Discourse 论坛之前,我已经使用 Discourse 论坛好几年了。

也许我个人情况的另一个独特之处可能不具有 Discourse 的普遍性。我举办现场活动(体育赛事报道)。在这些活动中,人们经常走过来想了解更多关于如何在网络上找到我的信息。在直播期间,我也会鼓励人们访问论坛。我张贴了带有二维码的标牌和贴纸,这些二维码链接到论坛。

这些人中有些是年轻且精通手机的用户。另一些是老年人,他们有手机但几乎不知道如何接听电话。我曾站着观察这两组人盯着论坛却不知道下一步该做什么。这并不是 Discourse 特有的问题,我看到他们在我的 YouTube 频道上也做同样的事情。

谢谢 Sammy,我正在研究你的代码。

我猜如果我想(在我弄清楚它是如何工作之后 :thinking: :face_with_monocle: :confused: :joy: ),我可以在主题的 head 部分插入类似这样的内容。

1 个赞

我最终决定不使用 CSS 删除“分类”和“标签”按钮(如上文所述),因为一旦用户点击进入某个分类,就没有返回到分类列表视图的方法了。我最近发现了这个主题组件,它可能提供了一个解决方案:

1 个赞