在用户名下方插入文本？

开发
1

有没有办法在用户名下方插入一行文字？理想情况下，我希望这能显示在每个人的用户名下方。

usernamebelow
usernamebelow453×121 23.6 KB

我用来实现这一点的 CSS 是：

.username::after {
    content: 'website.com';
    font-size: 14px;
}

但显然我希望它显示在下方。谢谢！

1 个赞
2

这可以吗？

image
image1536×266 36.8 KB

.topic-meta-data .names {
  flex-wrap: wrap;
}

.names::after {
  display: block;
  content: "hello world";
  font-size: 14px;
  width: 100%;
  flex: 1 0 100%;
  order: 4;
}

编辑：添加了 order 属性以适应移动设备

3 个赞
3

谢谢！它在桌面端运行完美，但不知何故，在移动端它显示在用户名上方。

4

哦。有意思。他们在移动端有一个额外的 order 属性。

你可以在 after 伪元素中添加 order: 4，这样就可以解决了。

1 个赞
5

您可以使用组默认标题来实现此目的。

组可以拥有显示在用户名旁边的默认标题。

这样，您就可以为每个组设置不同的标题。

您还可以使用 CSS 来设置它们的样式，使其显示在下方。

2 个赞
6

完美运行，谢谢！

7

您也可以使用 API 以编程方式调整内容（例如，检查用户、帖子等）。

例如：

api.decorateWidget("poster-name:after", (dec) => {
    // "dec.attrs" 用于访问帖子的属性
    return dec.h("div", "meta.discourse.org");
  });

.topic-meta-data .trigger-user-card {
    flex-direction: column;
    align-items: flex-start;
}

image

2 个赞
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.