类别特定 CSS 除非按 F5 才刷新

错误
1

嘿，各位，

我有这个特定的 CSS

body[class^="category-documentation"] {
        .topic-list .topic-list-header .posts,
        .topic-list .topic-list-header .views,
        .topic-list .topic-list-body .posts,
        .topic-list .topic-list-body .views,
        .topic-list .topic-list-body .posters,
        .topic-list .topic-list-header .posters
        {
            display: none !important;
        }

        .topic-list .topic-list-body .main-link,
        .topic-list .topic-list-header .topic-list-data
        {
            width: 90% !important;
        }

        .topic-list .topic-list-header .activity, .full-width .contents .topic-list .topic-list-body .activity {
            width: 10% !important;
        }

        .topic-list .topic-excerpt {
            display: none !important;
        }
    }

这对于隐藏“文档”类别中的大量元素效果很好（是的，我知道有一个文档插件，但我更喜欢原生布局），我的问题是当我从例如“Ford”点击到“Documentation”时，CSS 没有刷新，因此我的内容没有被隐藏，除非我使用 f5 / ctrl + R 刷新整个页面。

有什么我遗漏的可以实现这个功能吗？
反之亦然。

您可以访问 https://community.cyanlabs.net 上的任何类别，然后转到文档，您将看到隐藏的 CSS 元素仍然显示。

1 个赞
2

您似乎正在使用 Air 主题，其中包含 Discourse Loading Slider 主题组件。

如果您从 admin > customize > themes > components 中禁用该组件，然后重试……这会改变什么吗？有时该组件会导致类在页面之间停留，直到您刷新。

4 个赞
3

感谢您的回复，

我刚测试了一下，但遗憾的是，这次没有任何改变。

如果没有简单的解决方法，我将使用 api.onPageChange() 在 JavaScript 中检查 body class，但这似乎有点奇怪。

1 个赞
4

好的……仔细一看，似乎有一个动态类被主题添加到 body 标签中，例如 category-documentation-21 和 category-ford-5……在页面过渡时，这些类似乎没有被正确移除。

1 个赞
5

编辑，我现在明白了你的意思，不知何故它将该类保留在 body 元素中 :thinking:

编辑2：我复制了一个没有组件的主题，同样的问题仍然存在，所以一定是插件或核心的问题。

image
image722×1191 108 KB

最糟糕的解决方案奖颁给我 :smiley:

<script type="text/discourse-plugin" version="0.8.19">
  api.onPageChange((url) => {
        if (url.indexOf("/c/documentation/") >= 0) {
            $("<style id='documentationworkaround'>.topic-list .topic-list-body .posters,.topic-list .topic-list-body .posts,.topic-list .topic-list-body .views,.topic-list .topic-list-header .posters,.topic-list .topic-list-header .posts,.topic-list .topic-list-header .views{display:none!important}.topic-list .topic-list-body .main-link,.topic-list .topic-list-header .topic-list-data{width:90%!important}.full-width .contents .topic-list .topic-list-body .activity,.topic-list .topic-list-header .activity{width:10%!important}.topic-list .topic-excerpt{display:none!important}</style>").appendTo( "head" )
        } else {
            $("#documentationworkaround").remove();
        }

    });
</script>

但如果有人知道是什么原因造成的，请告诉我 :slight_smile:

1 个赞
6

这似乎是核心中的一个错误，因此我将重新分类。

重现步骤：

  1. 访问一个类别，例如 Support - Discourse meta
  2. 刷新页面
  3. 切换到另一个类别
  4. 查看 body 标签上的类，前一个类仍然存在

Screen Shot 2022-05-10 at 2.31.33 PM

似乎是服务器端添加的，我请了一位工程师协助排查，更具体地说，它似乎来自：

3 个赞
7

谢谢更新，目前我的蹩脚 JavaScript 暂时解决了这个问题，我该如何跟踪此错误的进度？

8

修复后，我们会更新此主题（或相关内容）。如果您将主题底部的下拉菜单中的跟踪级别更改为“Watching”，您将收到新帖子的通知。

Screen Shot 2022-05-10 at 2.53.53 PM
Screen Shot 2022-05-10 at 2.53.53 PM390×136 10.3 KB

9

太好了，我不知道是否有 GitHub 问题或其他什么，我已经关注了这个话题，所以会保持更新。

再次感谢你的帮助。

13

此提交应已修复此问题，因此下次更新 Discourse 时，分类类应按预期添加/删除。

4 个赞
14

谢谢，现在类已正确更新，但切换类别时 CSS 仍未应用

body[class^="category-documentation"] {
        .topic-list .topic-excerpt, .topic-list .topic-list-body .posts, .topic-list .topic-list-header .posts {
            display: none !important
        }
    }

在类别之间移动，它将无法正常工作。

1 个赞
15

哦，嗯，这出乎意料……这是用 JS 添加的 CSS 吗？

16

不，只在 common 或 desktop.css 文件中规划 css，我已尝试两者。

19

啊，我明白了…… class^= 检查的是类名的开头，而 category 并不总是列表中的第一个类名。

如果你更新到 body[class*="category-documentation"]，它应该就能工作了，这个会检查类名在列表中的任何位置。

5 个赞
20

这 + 核心修复似乎奏效了。谢谢

3 个赞