feat(shortcode): add script shortcode (#359)
This commit is contained in:
@@ -34,7 +34,7 @@ Hugo **extended** version is necessary for `style` shortcode.
|
||||
The `style` shortcode has two positional parameters.
|
||||
|
||||
The **first** one is the custom style content,
|
||||
which supports nesting syntax in [SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
|
||||
which supports nesting syntax in [:(fab fa-sass fa-fw): SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
|
||||
and `&` referring to this parent HTML element.
|
||||
|
||||
And the **second** one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is `div`.
|
||||
@@ -1265,3 +1265,27 @@ The rendered output looks like this:
|
||||
{{< typeit group=paragraph >}}
|
||||
**Then** this paragraph begins
|
||||
{{< /typeit >}}
|
||||
|
||||
## 11 script
|
||||
|
||||
{{< version 0.2.8 >}}
|
||||
|
||||
`script` is a shortcode to insert custom **:(fab fa-js fa-fw): Javascript** in your post.
|
||||
|
||||
{{< admonition >}}
|
||||
The script content can be guaranteed to be executed in order after all third-party libraries are loaded. So you are free to use third-party libraries.
|
||||
{{< /admonition >}}
|
||||
|
||||
Example `script` input:
|
||||
|
||||
```markdown
|
||||
{{</* script */>}}
|
||||
console.log('Hello LoveIt!');
|
||||
{{</* /script */>}}
|
||||
```
|
||||
|
||||
You can see the output in the console of the developer tool.
|
||||
|
||||
{{< script >}}
|
||||
console.log('Hello LoveIt!');
|
||||
{{< /script >}}
|
||||
|
||||
@@ -39,7 +39,7 @@ Hugo **extended** version is necessary for `style` shortcode.
|
||||
The `style` shortcode has two positional parameters.
|
||||
|
||||
The **first** one is the custom style content,
|
||||
which supports nesting syntax in [SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
|
||||
which supports nesting syntax in [:(fab fa-sass fa-fw): SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
|
||||
and `&` referring to this parent HTML element.
|
||||
|
||||
And the **second** one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is `div`.
|
||||
@@ -1270,3 +1270,27 @@ The rendered output looks like this:
|
||||
{{< typeit group=paragraph >}}
|
||||
**Then** this paragraph begins
|
||||
{{< /typeit >}}
|
||||
|
||||
## 11 script
|
||||
|
||||
{{< version 0.2.8 >}}
|
||||
|
||||
`script` is a shortcode to insert custom **:(fab fa-js fa-fw): Javascript** in your post.
|
||||
|
||||
{{< admonition >}}
|
||||
The script content can be guaranteed to be executed in order after all third-party libraries are loaded. So you are free to use third-party libraries.
|
||||
{{< /admonition >}}
|
||||
|
||||
Example `script` input:
|
||||
|
||||
```markdown
|
||||
{{</* script */>}}
|
||||
console.log('Hello LoveIt!');
|
||||
{{</* /script */>}}
|
||||
```
|
||||
|
||||
You can see the output in the console of the developer tool.
|
||||
|
||||
{{< script >}}
|
||||
console.log('Hello LoveIt!');
|
||||
{{< /script >}}
|
||||
|
||||
@@ -36,7 +36,7 @@ Hugo **extended** 版本对于 `style` shortcode 是必需的.
|
||||
|
||||
`style` shortcode 有两个位置参数.
|
||||
|
||||
第一个参数是自定义样式的内容. 它支持 [SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting) 中的嵌套语法,
|
||||
第一个参数是自定义样式的内容. 它支持 [:(fab fa-sass fa-fw): SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting) 中的嵌套语法,
|
||||
并且 `&` 指代这个父元素.
|
||||
|
||||
第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 `div`.
|
||||
@@ -1266,3 +1266,28 @@ public class HelloWorld {
|
||||
{{< typeit group=paragraph >}}
|
||||
**然后**, 这个段落开始
|
||||
{{< /typeit >}}
|
||||
|
||||
## 11 script
|
||||
|
||||
{{< version 0.2.8 >}}
|
||||
|
||||
`script` shortcode 用来在你的文章中插入 **:(fab fa-js fa-fw): Javascript** 脚本.
|
||||
|
||||
{{< admonition >}}
|
||||
脚本内容可以保证在所有的第三方库加载之后按顺序执行.
|
||||
所以你可以自由地使用第三方库.
|
||||
{{< /admonition >}}
|
||||
|
||||
一个 `script` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* script */>}}
|
||||
console.log('Hello LoveIt!');
|
||||
{{</* /script */>}}
|
||||
```
|
||||
|
||||
你可以在开发者工具的控制台中看到输出.
|
||||
|
||||
{{< script >}}
|
||||
console.log('Hello LoveIt!');
|
||||
{{< /script >}}
|
||||
|
||||
Reference in New Issue
Block a user