防止上次访问栏弄乱颜色

支持
1

我们

2

试试这样做。

.small-action.topic-post-visited {
  height: 0;
}
3

虽然这确实让它变薄了，但这并不是真正的问题——我给出的理想示例是通过编辑 CSS 完成的，这基本上是微不足道的——问题在于我们的帖子背景着色是通过 nth-child 选择器完成的，而 .small-action.topic-post-visited 元素被计为一个子元素，因此会在我们不希望它发生时切换 nth-child。

视觉上，这会产生如下效果：

image
image918×564 40.6 KB

其中浅色用作最后一个访问元素的背景，导致其上方和下方的帖子都显示为较深的颜色。

与我们的理想效果形成对比，颜色交替会忽略这个新元素：

image
image950×495 30.5 KB

4

当滚动足够远导致条形图卸载时，我们还会遇到一些有趣的现象——当“上次访问”条形图消失时，帖子会来回闪烁颜色，因为网站会重新决定哪些应该被着色。

这非常不理想，考虑到交替的颜色对我们来说比上次访问指示器更有价值，我们非常希望有一种方法可以妥善处理这个问题，或者完全禁用该功能。

5

好的，鉴于没有回复，我假设这是不可能的。

我们如何完全禁用该功能？

不值得让我们的所有帖子都闪烁彩色条。

6

这无法与 :nth-child 或 :nth-of-type 配合使用。它们只是计算子元素，不区分类，也无法按类进行过滤。

你实际上需要的是 :nth-child(2n of .topic-post)，但这目前仅 Safari 支持。

但你可以尝试类似这样的方法。

Header
它将为第二个帖子添加类 .every-second，排除小型操作，因此只针对主题帖子。然后你可以轻松地用 CSS 定位它。

<script type="0.8 discourse-plugin">
  api.addPostClassesCallback((attrs) => {
    const postNum = attrs.post_number;
    if (postNum % 2 === 0) {
      return ['every-second']
    }
  });
</script>

CSS

.topic-post {
  background: var(--primary-very-low);
  &.every-second {
    background: var(--primary-low);
  }
}

.small-action.topic-post-visited {
  height: 0;
}

主题帖子已读线

滚动

1 个赞
7

能否在此处使用更具体的选择器来实现纯 CSS 解决方案？

可以分享您当前 CSS 规则的代码片段吗？

1 个赞
8

使用纯 CSS 也可以实现相同效果，但有点取巧，而且只在帖子流中有效。在主题列表中无效。需要使用 Javascript，因为只有 Safari 支持 :nth-child( of <selector syntax>) 选择器，据我所知，没有可以用来应用此效果的属性。

@orangeandblack5，你需要定位帖子中的 article 元素。请注意，id 属性遵循 id=post_N 模式，其中 N 是帖子在流中的编号。

image
image647×295 44 KB

所以你可以用类似下面的 CSS 来只定位偶数帖子：

.topic-post {
    article[id$="0"], article[id$="2"], article[id$="4"], article[id$="6"], article[id$="8"] {
        background-color: peachpuff;
    }
}

10

可以尝试一下，但本周包含一些小操作——如果可能的话，我希望有一个纯 CSS 解决方案，但我们在这方面也没有成功。

11

有趣的事实——并非所有的小动作都一视同仁！

我想尝试纯 CSS 的方法，但不幸的是，虽然一些小动作（例如锁定、解锁或置顶帖子）被算作一个完整的帖子并拥有自己的唯一 ID 以供我们着色，但并非所有的小动作都如此。

请注意，这也影响了 @Don 提供的 JS 修复——我会看看是否能找到解决办法，但我对 JS 的了解远不如 CSS。