Unique CSS class for Group pages?

Contribute UX

AI 生成的摘要

A discussion is underway about adding a unique CSS class for group pages in Discourse. downey initially asked if it’s possible to add a group-specific class on group pages, allowing for custom styling. downey mentions that without a dedicated class on the <body> tag, styling an individual group’s page is challenging.

Arkshine suggests using a CSS selector to target the group page, but downey notes that this might not be sufficient for their needs. Canapin proposes using JavaScript to set classes on upper HTML elements starting from .group.

srmtey provides an initial JavaScript solution that adds a groupname class to the main id, but notes that the class persists even after navigating away from the page. srmtey refines the solution using a cookie to store the current group name, allowing for automatic addition and removal of the class.

1

Any chance of a group-specific class on the group-specific pages for members, topics, posts, etc.?

e.g. /groups/FOO/topics

This would allow us to do custom styling for each group.

3 个赞
2

我想既然已经过了四年，我再次询问一下，看看这次是否会有更多兴趣。

确实，如果能对单个群组页面进行样式设计就好了，但如果没有像主群组列表页面（/g）上的 groups-page 那样在 <body> 标签上设置专用类，要做到这一点确实会有些困难，依我之见。

是否也有其他人一直渴望实现这一功能？或者，是否有人已经找到了对单个群组列表页面进行更详细 CSS 样式设计的方法？

3

您想找什么样的修改？

如果我的理解正确，您想针对某个群组页面——您可以加上以下前缀：

#main-outlet .container.group.FOO {
    //
}
6 个赞
4

谢谢，这可能会让我接近目标。通常这些选择器似乎都放在 <body> 上，所以我一直在查看那里。

我正试图创建一个与 @awesomerobot 制作的（精美的）Discourse 分类横幅主题组件更互补的东西，所以不确定能否根据输出的 HTML 实现，但我会尝试调整一下。

2 个赞
5

你可以使用 JavaScript 从 .group 开始为上层 HTML 元素设置类。

1 个赞
6

是的，这似乎就是 Discourse 分类横幅 中所采用的做法，以便在 #main-outlet 上方显示正确的内容。额外的 JavaScript 功能可能还会在我的愿望清单或待办事项中停留相当长一段时间，目前我只会尽量通过 CSS 来实现所需效果。

7

这是一种不太优雅的实现方式。添加类名很简单。这会将一个 groupname 添加到你的 main id 上，其中 groupname 是群组名称，例如 <section id="main" class="ember-application groupname">。

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                if (myObj.group.name) {
                    document.getElementById("main").classList.add(myObj.group.name);
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();			
    }
    api.onPageChange(() =>{
        getGroupInfo();
    });
</script>

问题在于，一旦你离开页面，这个类名就会一直保留。我们需要一种方法在离开页面时移除该类名。这可能有更简单的实现方式，但我不太懂 JavaScript，所以想不出更好的办法。希望你能找到更优雅的实现方式，不过这种“笨办法”是把脚本的结尾改为：

    api.onPageChange(() =>{
        document.getElementById("main").classList.remove("group1");
        document.getElementById("main").classList.remove("group2");
        document.getElementById("main").classList.remove("group3");
        getGroupInfo();
    });

这会移除所有可能添加的群组类名。但这看起来确实很笨拙，而且每当你添加新群组时，都需要修改代码。

1 个赞
8

问题在于我无法弄清楚如何将变量从 getGroupInfo() 传递到 api.onPageChange(() => {。

下面的代码通过 Cookie 实现了这一功能，并应自动为任意你所属的群组在 div ID main 上添加或移除类名 "name-of-current-group"。

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                var groupName = myObj.group.name;
                if (groupName) {
                    document.getElementById("main").classList.add(groupName);
                    $.cookie('groupCookie', groupName, { expires: 7, path: '/' });
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();			
    }
    api.onPageChange(() =>{
        var group = $.cookie('groupCookie');
        document.getElementById("main").classList.remove(group);
        $.cookie('groupCookie', 'false', { expires: -1, path: '/' })
        getGroupInfo();
    });
</script>