# 警告、成功和信息块

**URL:** <https://meta.discourse.org/t/warning-success-info-blocks/234753>\
**Category:** Support\
**Created:** [2022年八月2日 02:03 UTC](https://meta.discourse.org/t/warning-success-info-blocks/234753 "2022-08-02T02:03:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![2TapPrince](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/2tapprince/32/269051_2.png) [@2TapPrince](https://meta.discourse.org/u/2TapPrince)\
**Post date:** [2022年八月2日 02:03 UTC](https://meta.discourse.org/t/warning-success-info-blocks/234753/1 "2022-08-02T02:03:23Z")

</div>

您好，

我正在寻找一个用于通知块的插件或 Markdown 扩展。Bootstrap 有类似的功能

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/c/4/dc48eef60feec846d9b69c79566c41a1241460b4.png)

如果有一个插件，我将不胜感激。

---

<div class="post-metadata">

**Author:** ![simonk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simonk/32/247950_2.png) [@simonk](https://meta.discourse.org/u/simonk)\
**Post date:** [2022年八月2日 09:26 UTC](https://meta.discourse.org/t/warning-success-info-blocks/234753/2 "2022-08-02T09:26:32Z")

</div>

您可以使用 [通用 bbcode 包装器支持](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516)，类似这样：

```plaintext
[wrap=success]
**成功！** 您的消息已成功发送
[/wrap]

```

…它将变成这个 HTML：

```html
<div class="d-wrap" data-wrap="success" dir="ltr">
  <p><strong>成功！</strong> 您的消息已成功发送</p>
</div>

```

您可以添加 CSS 来定位 `.d-wrap[data-wrap="success"]` 来对其进行样式设置。

我使用了这个：

```css
@mixin admonition($color, $bgcolor, $bordercolor, $iconurl) {
    padding: 8px;
    padding-left: 4em;
    padding-right: 2em;
    color: $color;
    border-left: 5px solid $bordercolor;
    background-color: $bgcolor;
    background-image: url($iconurl);
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: 1em 1.25em;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 1em;
}

.d-wrap[data-wrap="info"] {
    @include admonition(#084298, #cfe2ff, #b6d4fe, "/images/emoji/google/information_source.png");
}

.d-wrap[data-wrap="warning"] {
    @include admonition(#664d03, #fff3cd, #ffecb5, "/images/emoji/google/warning.png");
}

.d-wrap[data-wrap="danger"] {
    @include admonition(#842029, #f8d7da, #f5c2c7, "/images/emoji/google/stop_sign.png");
}

```

…这使我能够创建类似这样的内容：

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/7/f/f7f689fc9b0170559d4b0e34a57bb90abf0c8a9a.png)

---

<div class="post-metadata">

**Author:** ![2TapPrince](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/2tapprince/32/269051_2.png) [@2TapPrince](https://meta.discourse.org/u/2TapPrince)\
**Post date:** [2022年八月2日 11:06 UTC](https://meta.discourse.org/t/warning-success-info-blocks/234753/3 "2022-08-02T11:06:28Z")

</div>

太棒了，非常感谢！

---

<div class="post-metadata">

**Author:** ![2TapPrince](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/2tapprince/32/269051_2.png) [@2TapPrince](https://meta.discourse.org/u/2TapPrince)\
**Post date:** [2022年八月2日 13:05 UTC](https://meta.discourse.org/t/warning-success-info-blocks/234753/4 "2022-08-02T13:05:30Z")

</div>

我尝试添加了这个，我遗漏了什么吗？

 ![brave_uouSOtwXW2](https://global.discourse-cdn.com/meta/original/4X/c/6/3/c63f9365cda9010934364b888af2ee7f8a33aff7.png)

 ![4i2Mw7HkNO](https://global.discourse-cdn.com/meta/original/4X/3/1/f/31f66708f10cfc56a49641d24060de36279912af.png)

---

<div class="post-metadata">

**Author:** ![simonk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simonk/32/247950_2.png) [@simonk](https://meta.discourse.org/u/simonk)\
**Post date:** [2022年八月2日 13:07 UTC](https://meta.discourse.org/t/warning-success-info-blocks/234753/5 "2022-08-02T13:07:37Z")

</div>

我的 CSS 只为 `info`、`warning` 和 `danger` 添加了样式。尝试将 `[wrap=success]` 更改为 `[wrap=warning]`。

您必须为 `success` 定义自己的样式。

---

<div class="post-metadata">

**Author:** ![2TapPrince](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/2tapprince/32/269051_2.png) [@2TapPrince](https://meta.discourse.org/u/2TapPrince)\
**Post date:** [2022年八月2日 16:59 UTC](https://meta.discourse.org/t/warning-success-info-blocks/234753/6 "2022-08-02T16:59:49Z")

</div>

哦，对了，我以为你把它写成了即插即用。

完美运行。

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2022年九月1日 17:00 UTC](https://meta.discourse.org/t/warning-success-info-blocks/234753/7 "2022-09-01T17:00:01Z")

</div>

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