自定义 CSS 嵌入帖子/添加自定义类

开发
1

是否可以在帖子内的 <div> 上应用自定义样式？

我注意到 有资料 提到，任何未被白名单允许的 class 都会被移除。我也尝试过在 <div> 和 <span> 中添加 style= 属性，但都没有成功。请问有人知道是否有办法实现这一点吗？

基本上，我有一个从内部工具发布消息的机器人，我希望它能以类似该工具的外观发布内容，以便明显区分这不是普通的 Discourse 帖子。例如像这样：

image
image794×305 22.2 KB

它包含了几层嵌套的 <div> 和 <span> 来美化外观，并且每个元素都有自己对应的 CSS 样式。

理想情况下，如果机器人可以发布类似这样的内容：

<div class="mytool">
  <div class="item">
    <div class="name">Machine64</div>
    <div class="message">Top Secret operation has executed sucessfully</div>
  </div>
  <div class="item">
    <div class="name">Device 08</div>
    <div class="message">Test operation failed at 16:22</div>
  </div>
</div>

那么这些额外的 class 可以在全局 Discourse CSS 中定义。但即使我能将所有样式合并到 style 标签中，也能解决我的问题。

有没有什么建议可以实现这一点？谢谢！

2 个赞
2

这可能不太适合 dev，但我不确定该放在哪里，因为它既不是主题也不是插件！如果放错了地方，请帮忙移动一下 :slight_smile:

3

样式/类会被移除，但你可以使用 data-theme-* 属性来定位帖子中的元素：

<div data-theme-bot>
   这里的内容
</div>
例如，此段落被包裹在 data-theme-bot div 中

然后在主题中，可以这样定位它：

div[data-theme-bot] {
  background-color: red;
}
15 个赞
4

这太完美了，非常感谢！

4 个赞
5

谢谢 @david！

不过，我该如何更改此 div 内标签（如 <a> 或 <span>）的样式呢？

6

在 SCSS 中：

div[data-theme-bot] {
  a {
    background-color: red;
  }
}

或在普通 CSS 中：

div[data-theme-bot] a {
  background-color: red;
}
4 个赞
7

谢谢你 @david！这就解决了。

2 个赞
8

@david 我把你确切的 div 放到了一个主题帖中，并在主题组件里添加了以下 CSS：

div[data-theme-bot] {
  color: red;
}

检查器显示 div data-theme-bot（被 < > 包围），但计算出的颜色是 var(--primary) html。

我需要添加额外的选择器，还是更改某个管理员设置？谢谢。

9

我刚刚试了同样的代码，对我来说运行正常。你可以试试：

div[data-theme-bot] {
  color: red !important;
}

如果这能生效，那就说明其他地方（某个主题、组件或插件）的 CSS 优先级更高，导致该样式被覆盖了。

3 个赞
10

你说得对。我想是我的浏览器缓存出了问题。

这个技巧是将我的 WordPress 帖子发布到 Discourse 并保持与 WordPress 版本外观相似的关键要素。

感谢大家。

1 个赞