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

**URL:** https://meta.discourse.org/t/adding-classes-to-links-in-post-body-for-styling/131027
**Category:** Development
**Created:** [2019年十月15日 10:13 UTC](https://meta.discourse.org/t/adding-classes-to-links-in-post-body-for-styling/131027 "2019-10-15T10:13:17Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [2019年十月15日 13:17 UTC](https://meta.discourse.org/t/adding-classes-to-links-in-post-body-for-styling/131027/3 "2019-10-15T13:17:17Z")

</div>

实现这一点的做法是使用类似以下内容：

> [@Generic bbcode wrapper for theme components](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516):
>
> I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

例如

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

将渲染为

[Link Text](http://meta.discourse.org)

其标记为

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

```

然后您可以在 CSS 中使用以下代码对其进行样式设置：

```scss
[data-wrap="link-button"] {
  a {
    // 链接的样式
  }
}

```

您可以将 `[wrap=link-button]` 更改为任意您想要的值，例如

`[wrap=custom-button]`  
或  
`[wrap=home-link]`  
或  
`[wrap=foobar]`

然后像上面的示例一样使用该值来定位链接。

---

_[View the full topic](https://meta.discourse.org/t/adding-classes-to-links-in-post-body-for-styling/131027)._