Unique CSS class for Group pages?

贡献 用户体验
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>