Permalink
Browse files

feat: add shortcode notice

  • Loading branch information...
xianmin committed Jul 23, 2018
1 parent 6671970 commit 585a9a7e5ae19cd5240e285ad0a539301230d9a5
@@ -0,0 +1,73 @@
---
title: "Shortcodes Notice Preview"
date: 2018-03-03T16:01:23+08:00
lastmod: 2018-03-04T16:01:23+08:00
draft: false
tags: ["preview", "shortcodes", "tag-6"]
categories: ["docs", "shortcodes", "index"]
---
## normal use
`Note` example:
```shortcode
{{%/* notice note */%}}
A notice disclaimer
{{%/* /notice */%}}
```
**Result:**
{{% notice note %}}
A notice disclaimer
{{% /notice %}}
You could **custom title** :
```shortcode
{{%/* notice note 笔记 */%}}
A notice disclaimer
{{%/* /notice */%}}
```
{{% notice note 笔记 %}}
A notice disclaimer
{{% /notice %}}
## tip
```shortcode
{{%/* notice tip */%}}
A tip disclaimer
{{%/* /tip */%}}
```
{{% notice tip %}}
A tip disclaimer
{{% /notice %}}
## info
```shortcode
{{%/* notice info */%}}
A info disclaimer
{{%/* /notice */%}}
```
{{% notice info %}}
An information disclaimer
{{% /notice %}}
## warning
```shortcode
{{%/* notice warning */%}}
A warning disclaimer
{{%/* /notice */%}}
```
{{% notice warning %}}
An warning disclaimer
{{% /notice %}}
@@ -0,0 +1,10 @@
<div class="shortcode-notice {{ .Get 0 }}">
<div class="shortcode-notice-title {{ .Get 0 }}">
{{ if len .Params | eq 2 }}
{{ .Get 1 }}
{{ else }}
{{ .Get 0 }}
{{ end }}
</div>
{{ .Inner }}
</div>
@@ -14,6 +14,7 @@
@import '_post/footer';
@import '_post/utteranc';
@import '_post/footnote';
@import '_post/shortcode_notice';
}
.disqus-comment {
@@ -0,0 +1,55 @@
// ==============================
// Shortcode Notice
// ==============================
.shortcode-notice p {
padding: 0.6em 1em;
display: block;
font-size: 1em;
margin-top: 0;
margin-bottom: 0;
color: #666;
}
.shortcode-notice-title {
color: #fff;
padding-left: 1em;
font-weight: bold;
text-transform: capitalize;
}
// note color
.shortcode-notice-title.note {
background-color: #6AB0DE;
}
.shortcode-notice.note p {
background: #E7F2FA;
}
// tip color
.shortcode-notice-title.tip{
background-color: rgba(92, 184, 92, 0.8);
}
.shortcode-notice.tip p {
background: #E6F9E6;
}
// info color
.shortcode-notice-title.info {
background-color: #F0B37E;
}
.shortcode-notice.info p {
background: #FFF2DB;
}
// warning color
.shortcode-notice-title.warning {
background-color: rgba(217, 83, 79, 0.8);
}
.shortcode-notice.warning p {
background: #FAE2E2;
}

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit 585a9a7

Please sign in to comment.