用于按当前用户分离帖子的 CSS 选择器

开发
1

我正在寻找一种简单的方法，让 CSS 选择器能够匹配当前用户发布的帖子（而不是其他用户的帖子）。据我所知，目前并没有为这类帖子添加可用的 CSS 类。但也许我漏掉了什么？

如果目前确实没有这样的类，我将非常感激如果能添加一个！

我的建议是，为 topic-post 元素添加一个类，类似于当前已存在的与发帖用户相关的类，例如 topic-owner。新类可以是 current-user 或 my-post，或者其他符合现有 Discourse 命名规范的名称。

点击此处查看我为什么想这样做...

不久前，我的论坛用户抱怨自己沉迷于查看帖子获得了多少点赞。他们反复回到帖子页面检查点赞数，这种行为让他们想起了主流社交媒体平台上一些更负面的方面。

我的解决方案是为他们创建一个主题，在其中简单地添加一条 CSS 规则，以隐藏他们自己帖子的点赞计数器。当前用户创建的帖子上的点赞按钮有一个名为 .my-likes 的类，因此很容易用 CSS 选中。这个方法效果很好，用户也对解决方案感到满意。

然而，今天早些时候有人指出，如果点击帖子上的“…”按钮（即“显示更多”），会列出给该帖子点赞的用户。一位用户报告说，他因此又回到了“多巴胺成瘾”的状态，反复点击“…”来绕过这个特殊主题，查看自己的点赞数。

但与上述点赞按钮的情况不同，我找不到能够实现这一目标的 CSS 选择器。目前我能找到的唯一解决方案是隐藏所有帖子的点赞者列表，也就是说，使用该主题的用户将无法看到任何帖子的点赞者列表。

我现在能做到的是：

.who-liked { display: none; }

我原本希望做到的是类似这样：

.topic-post.current-user .who-liked { display: none; }

（但这不起作用，因为 .current-user 类并不存在。）

2

或许你可以在 .topic-post article 标签中使用 data-user-id 属性？

3

你可以这样做：在主题列表中查找当前用户是发帖人的主题，这可以通过 jQuery 实现。如果是，则对该行应用样式。缺点可能是用户可能被识别为原始帖子（OP）的发帖人。

另一种方法是完全覆盖主题列表组件，并在那里实现所需的功能。有关覆盖模板的更多信息，请查看：

4

抱歉，您的意思是想在主题列表中装饰用户帖子，还是在实际的主题内容中装饰？
在这种情况下，您可以挂钩到当前用户的头像，找到父帖子的根元素，并使用 jQuery 为其添加一个类。

5

感谢大家的回复！

我清楚知道可以用 JavaScript 实现这一功能，本应一开始就提及。但我的发帖重点在于，希望用更简单的方式来实现，只需极少量的 CSS（参见我原帖中可展开的部分）。

这不仅是一个更简洁、更自然的解决方案，还能让我利用主题和主题组件的优秀内置系统进行管理。

而且，这并非什么怪异或生僻的做法。正如我最初提到的，Discourse 已经在同一元素（主题页上的帖子）上使用了类属性，用于标识发帖用户的属性（如主题作者、信任等级、群组归属等）。而在该元素的子元素（点赞按钮）中，也已存在一个类属性，用于标识该帖子是否由当前访问页面的用户发布。

基于这些原因，我认为在主题帖子元素上添加该单一属性，远比使用某种 JavaScript 技巧更为可取。

6

哦，我正好是来发布这个 JavaScript 解决方案的。我创建了一个名为 hidelikes 的群组，这段 JavaScript 代码会为该群组的所有成员隐藏他们自己帖子的“谁点了赞”信息。

<script type="text/discourse-plugin" version="0.8">
    $( document ).ready(function() {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        var userID = currentUser.id;
        const hidelikes = groups.some(g => g.name === 'hidelikes');
        if (hidelikes) { 
               $('<style>').text('.boxed.onscreen-post[data-user-id="' + userID + '"] .who-liked{display: none;}').appendTo(document.head)
         }
    });
</script>

显然，如果你希望为所有用户实现此功能，只需去掉群组相关的部分即可。

7

非常感谢您贴出实际代码，这确实很有帮助！

8

在深入研究 plugin-api 后，我认为我找到了解决您问题的方法，以及实现您所建议功能的正确方式：

<script type="text/discourse-plugin" version="0.8">
  api.addPostClassesCallback((attrs) => {
    const user = api.getCurrentUser();
    if (attrs.user_id === user.id)  {
      return ['current-user-post']
    }
  });
</script>

请查看此处：
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js#L712

这将为当前登录用户发布的每一篇帖子添加 current-user-post 类。

9

太棒了，非常感谢！

10

这段代码应该加在哪里？我把它加到了 </body> 标签里，但运行不正常。