better support shortcodes, some ui bug fix, exampleSite shortcodes post added
This commit is contained in:
zzossig
parent
4cc3bc5d64
commit
2f70d5c928
|
|
@ -1033,8 +1033,8 @@ libraries:
|
|||
### notice
|
||||
|
||||
```bash
|
||||
{{< notice note >}} # note, info, tip, warning
|
||||
A notice disclaimer
|
||||
{{< notice success >}} # success, info, warning, error
|
||||
success
|
||||
{{< /notice >}}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1026,8 +1026,8 @@ You can add some config option parameters at data/flowchartjs.json
|
|||
### notice
|
||||
|
||||
```bash
|
||||
{{< notice note >}} # note, info, tip, warning
|
||||
A notice disclaimer
|
||||
{{< notice success >}} # success, info, warning, error
|
||||
success
|
||||
{{< /notice >}}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,32 @@
|
|||
.alert {
|
||||
padding: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.125rem;
|
||||
|
||||
&-info {
|
||||
background-color: #d7eef9;
|
||||
border: 2px solid #b2def4;
|
||||
color: rgba(26, 128, 180, 0.9925);
|
||||
}
|
||||
@include themify($themes) {
|
||||
&-info {
|
||||
background-color: rgba(215, 238, 249, 0.4);
|
||||
border-left: 5px solid #bbdefb;
|
||||
color: themed('dropdown-item-color');
|
||||
}
|
||||
|
||||
&-success {
|
||||
background-color: #d9efd6;
|
||||
border: 2px solid #bce3b5;
|
||||
color: rgba(70, 149, 57, 0.9925);
|
||||
}
|
||||
&-success {
|
||||
background-color: rgba(217, 239, 214, 0.4);
|
||||
border-left: 5px solid #c8e6c9;
|
||||
color: themed('dropdown-item-color');
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: #fbf6e1;
|
||||
border: 2px solid #f6ecbe;
|
||||
color: rgba(180, 154, 26, 0.9925);
|
||||
}
|
||||
&-warning {
|
||||
background-color: rgba(255, 249, 196, 0.4);
|
||||
border-left: 5px solid #ffeb3b;
|
||||
color: themed('dropdown-item-color');
|
||||
}
|
||||
|
||||
&-danger {
|
||||
background-color: #f5dddd;
|
||||
border: 2px solid #ecbdbd;
|
||||
color: rgba(159, 46, 46, 0.9925);
|
||||
&-danger {
|
||||
background-color: rgba(245, 221, 221, 0.4);
|
||||
border-left: 5px solid #ffcdd2;
|
||||
color: themed('dropdown-item-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,9 @@
|
|||
position: relative;
|
||||
margin: 1.5rem 0;
|
||||
border-radius: 0.25rem;
|
||||
@include box-shadow(1px, 1px, 3px, 0, rgba(0, 0, 0, 0.125));
|
||||
|
||||
&__content {
|
||||
padding: 0 18px;
|
||||
padding: 0 1.125rem;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
|
|
@ -13,6 +12,7 @@
|
|||
|
||||
@include transition(all, 0.2s, ease);
|
||||
@include themify($themes) {
|
||||
border-top: 1px solid themed('content-box-border-color');
|
||||
background-color: themed('toc-body-background-color');
|
||||
}
|
||||
|
||||
|
|
@ -22,6 +22,10 @@
|
|||
margin: 0 0 0.525rem 2rem !important;
|
||||
list-style-type: '📂 ';
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0.25rem !important;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 14.4px;
|
||||
list-style-type: '📄 ';
|
||||
|
|
|
|||
|
|
@ -4,66 +4,65 @@
|
|||
border-radius: .125rem;
|
||||
color: #fff;
|
||||
padding: .3rem 0.5rem .3rem 2rem;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
|
||||
&:first-child {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -28.5px;
|
||||
color: #fff;
|
||||
content: '💡';
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -28.5px;
|
||||
color: #fff;
|
||||
left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
&.warning {
|
||||
border-top: 30px solid #f1b37e;
|
||||
background: #fefaf5;
|
||||
color: rgba(150, 90, 38, 0.995) !important;
|
||||
|
||||
&:first-child::after {
|
||||
content: 'Info';
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '⚠️ Warning';
|
||||
font-family: $title-font;
|
||||
top: -26.5px;
|
||||
left: 0.4rem;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
&.error {
|
||||
border-top: 30px solid #d58181;
|
||||
background: #fbeded;
|
||||
color: rgba(132, 56, 56, 0.995) !important;
|
||||
|
||||
&:first-child::after {
|
||||
content: 'Warning';
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '❌ Error';
|
||||
font-family: $title-font;
|
||||
top: -26.5px;
|
||||
left: 0.4rem;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.note {
|
||||
&.info {
|
||||
border-top: 30px solid #6bb1e0;
|
||||
background: #e6f3fb;
|
||||
color: rgba(47, 103, 141, 0.995) !important;
|
||||
|
||||
&:first-child::after {
|
||||
content: 'Note';
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: 'ℹ️ Info';
|
||||
font-family: $title-font;
|
||||
top: -26.5px;
|
||||
left: 0.4rem;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.tip {
|
||||
&.success {
|
||||
border-top: 30px solid #84c578;
|
||||
background: #e8f7e6;
|
||||
color: rgba(72, 125, 63, 0.995) !important;
|
||||
|
||||
&:first-child::after {
|
||||
content: 'Tip';
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '✔️ Success';
|
||||
font-family: $title-font;
|
||||
top: -26.5px;
|
||||
left: 0.4rem;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,11 @@
|
|||
}
|
||||
|
||||
&__slide-down {
|
||||
svg {
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('navbar-background-color');
|
||||
@include on-event {
|
||||
|
|
|
|||
|
|
@ -66,9 +66,9 @@ $dark: (
|
|||
toc-title-color: #90a4ae,
|
||||
toc-vertical-line: #727072,
|
||||
toc-vertical-line-active: #FF6188,
|
||||
toc-header-background-color: lighten(#2D2A2E, 6%),
|
||||
toc-header-background-color-hover: lighten(#2D2A2E, 4%),
|
||||
toc-body-background-color: lighten(#2D2A2E, 2%),
|
||||
toc-header-background-color: #403E41,
|
||||
toc-header-background-color-hover: #424242,
|
||||
toc-body-background-color: #403E41,
|
||||
search-placeholder-color: #727072,
|
||||
search-color: #FCFCFA,
|
||||
search-icon-color: #727072,
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ $hacker: (
|
|||
dropdown-item-active-background-color: lighten(#151715, 12%),
|
||||
dropdown-content-background-color: lighten(#151715, 5%),
|
||||
dropdown-item-hover-background-color: lighten(#151715, 20%),
|
||||
dropdown-item-hover-color: #FCFCFA,
|
||||
dropdown-item-color: #e3cd26,
|
||||
dropdown-item-hover-color: #E08C48,
|
||||
dropdown-item-color: #CDF5CC,
|
||||
navbar-border-bottom-color: #252526,
|
||||
navbar-background-color: #252526,
|
||||
navbar-mobile-background-color: #323232,
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
title: "Shortcodes"
|
||||
date: 2020-01-25T06:40:51+09:00
|
||||
description: tabs, code-tabs, expand, alert, notice, img, box
|
||||
description: tabs, code-tabs, expand, alert, warning, notice, img, box
|
||||
draft: false
|
||||
hideToc: false
|
||||
enableToc: true
|
||||
enableTocContent: false
|
||||
enableTocContent: true
|
||||
tocPosition: inner
|
||||
tags:
|
||||
- shortcode
|
||||
|
|
@ -16,23 +16,42 @@ categories:
|
|||
featured_image: feature3/code-file.png
|
||||
---
|
||||
|
||||
## Markdownify box
|
||||
|
||||
{{< boxmd >}}
|
||||
This is **boxmd** shortcode
|
||||
{{< /boxmd >}}
|
||||
|
||||
## Simple box
|
||||
|
||||
{{< box >}}
|
||||
Box
|
||||
This is **box** shortcode
|
||||
{{< /box >}}
|
||||
|
||||
## Code tabs
|
||||
|
||||
Make it easy to switch between different code
|
||||
|
||||
{{< codes java javascript >}}
|
||||
{{< code >}}
|
||||
|
||||
```java
|
||||
System.out.println('Hello World!');
|
||||
```
|
||||
|
||||
{{< /code >}}
|
||||
|
||||
{{< code >}}
|
||||
|
||||
```javascript
|
||||
console.log('Hello World!');
|
||||
```
|
||||
|
||||
{{< /code >}}
|
||||
{{< /codes >}}
|
||||
|
||||
## Tabs for general purpose
|
||||
|
||||
{{< tabs Windows MacOS Ubuntu >}}
|
||||
{{< tab >}}
|
||||
|
||||
|
|
@ -42,6 +61,8 @@ Box
|
|||
console.log('Hello World!');
|
||||
```
|
||||
|
||||
⚠️Becareful that the content in the tab should be different from each other. The tab makes unique id hashes depending on the tab contents. So, If you just copy-paste the tabs with multiple times, since it has the same contents, the tab will not work.
|
||||
|
||||
{{< /tab >}}
|
||||
{{< tab >}}
|
||||
|
||||
|
|
@ -57,6 +78,28 @@ Box
|
|||
{{< /tab >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
## Expand
|
||||
|
||||
{{< expand "Expand me" >}}
|
||||
|
||||
### Title
|
||||
|
||||
contents
|
||||
|
||||
{{< /expand >}}
|
||||
|
||||
{{< expand "Expand me2" >}}
|
||||
|
||||
### Title2
|
||||
|
||||
contents2
|
||||
|
||||
{{< /expand >}}
|
||||
|
||||
## Alert
|
||||
|
||||
Colored box
|
||||
|
||||
{{< alert theme="warning" >}}
|
||||
**this** is a text
|
||||
{{< /alert >}}
|
||||
|
|
@ -73,4 +116,26 @@ Box
|
|||
**this** is a text
|
||||
{{< /alert >}}
|
||||
|
||||
{{< img src="/images/whoami/avatar.jpg" title="title" caption="caption" alt="example avatar" width="400px" >}}
|
||||
## Image
|
||||
|
||||
Diaplay image with title and caption
|
||||
|
||||
{{< img src="/images/whoami/avatar.jpg" title="Title" caption="example caption" alt="example avatar" width="400px" >}}
|
||||
|
||||
## Notice
|
||||
|
||||
{{< notice success >}}
|
||||
success text
|
||||
{{< /notice >}}
|
||||
|
||||
{{< notice info >}}
|
||||
info text
|
||||
{{< /notice >}}
|
||||
|
||||
{{< notice warning >}}
|
||||
warning text
|
||||
{{< /notice >}}
|
||||
|
||||
{{< notice error >}}
|
||||
error text
|
||||
{{< /notice >}}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -194,8 +194,11 @@
|
|||
var navbar = document.querySelector('.navbar');
|
||||
var tocFlexbox = document.querySelector('.toc__flexbox');
|
||||
var tocFlexboxOuter = document.querySelector('.toc__flexbox--outer');
|
||||
var expandContents = document.querySelectorAll('.expand__content');
|
||||
var boxContents = document.querySelectorAll('.box');
|
||||
var notAllowedTitleIds = null;
|
||||
|
||||
// tab
|
||||
singleContentsElem && singleContentsElem.querySelectorAll(".tab") ?
|
||||
singleContentsElem.querySelectorAll(".tab").forEach(function (elem) {
|
||||
elem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function (element) {
|
||||
|
|
@ -205,6 +208,25 @@
|
|||
});
|
||||
}) : null;
|
||||
|
||||
// expand
|
||||
expandContents ? expandContents.forEach(function(elem) {
|
||||
elem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function (element) {
|
||||
notAllowedTitleIds = Array.isArray(notAllowedTitleIds) ?
|
||||
notAllowedTitleIds.concat(element.getAttribute('id')) :
|
||||
[element.getAttribute('id')];
|
||||
});
|
||||
}) : null;
|
||||
|
||||
// box
|
||||
boxContents ? boxContents.forEach(function(elem) {
|
||||
elem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function (element) {
|
||||
notAllowedTitleIds = Array.isArray(notAllowedTitleIds) ?
|
||||
notAllowedTitleIds.concat(element.getAttribute('id')) :
|
||||
[element.getAttribute('id')];
|
||||
});
|
||||
}) : null;
|
||||
|
||||
|
||||
window.onscroll = function () {
|
||||
scrollFunction();
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@
|
|||
{{ .Get 0 }}
|
||||
</button>
|
||||
<div class="expand__content">
|
||||
{{ .Inner | safeHTML }}
|
||||
{{ .Inner | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue