경고, 성공 및 정보 블록

지원
1

안녕하세요,

알림 블록을 위한 플러그인이나 마크다운 확장 기능을 찾고 있습니다. Bootstrap에는 이와 유사한 기능이 있습니다.

image
image950×363 11 KB

혹시 그런 플러그인이 있다면 알려주시면 감사하겠습니다.

2

일반적인 BBCode 래퍼 지원 기능(generic bbcode wrapper support)을 사용할 수 있으며, 다음과 같은 형태로 사용할 수 있습니다:

[wrap=success]
**성공!** 메시지가 성공적으로 전송되었습니다
[/wrap]

…이는 다음과 같은 HTML로 변환됩니다:

<div class="d-wrap" data-wrap="success" dir="ltr">
  <p><strong>성공!</strong> Your message has been sent successfully</p>
</div>

.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
image709×222 24.3 KB

3

천재시네요, 정말 감사합니다!

4

그래서 이것을 추가해 보았는데, 제가 놓친 부분이 있을까요?

brave_uouSOtwXW2
brave_uouSOtwXW21177×482 20.9 KB

4i2Mw7HkNO
4i2Mw7HkNO859×706 22.4 KB

5

제 CSS에는 info, warning, danger 스타일만 추가되어 있습니다. [wrap=success]를 [wrap=warning]으로 변경해 보세요.

sucess 스타일은 직접 정의해야 합니다.

6

아, 그래. 플러그 앤 플레이로 만들어졌다고 생각했거든.

완벽하게 작동해.