为帖子正文中的链接添加类以进行样式设置

开发
1

有没有办法绕过 Discourse 对锚点的重新格式化，使其按我们希望的样式显示为按钮？

帖子是通过 .raw 属性发布的（我尝试过使用 .cooked，但尽管 API 文档声称支持，这似乎并不可行）。

我发送的是：
<a aria-label="homepage-link" href="http://blablabla...">View Homepage</a>

但在 Discourse 帖子或分类描述中，它显示为：
<div class="cooked"><a>View Homepage</a></div>

我也尝试过：

[View this page][http://blablabla]

结果被转换为：
<div class="cooked"><a href="http://blablabla" class="onebox" target="_blank">http://blablabla</a></div>

但如果我能直接得到：
<div class="cooked"><a href="http://blablabla" class="onebox" target="_blank">View this page</a></div>

我就可以通过 CSS 从 body 元素对其进行定位，以应用我们所需的 CSS 按钮样式。

2

Resolved I think…

[view this page](http://blablabla)

Target CSS using:

body.<insert name of top category here>-* div.cooked a

However

If someone has a solution for the above it would be a little cleaner and easier to add our own classes to the <a> link and avoid top Category.

Thanks in advance.

3

The way to do that is to use something like

For example

[wrap=link-button][Link Text](http://meta.discourse.org)[/wrap]

renders as

Link Text

and the markup is

<div class="d-wrap" data-wrap="link-button">
  <p>
    <a href="http://meta.discourse.org">Link Text</a>
  </p>
</div>

and you can then style it in CSS using

[data-wrap="link-button"] {
  a {
    // styles for the link
  }
}

You can change [wrap=link-button] to any value you want like

[wrap=custom-button]
or
[wrap=home-link]
or
[wrap=foobar]

and then use that to target the link like the example above.

8 个赞
4

@Johani Very interesting!!! Thanks for your work on this, we will look into this option, it would be great to have in the API docs on Post raw property settings in the future. Or a central doc that groups/defines all possibilities with Post’s UPDATE:/POST: property