feat(shortcode): add script shortcode (#359)

README.md

@@ -110,6 +110,7 @@ I hope you will LoveIt ❤️!
 * **Bilibili player** shortcode
 * Kinds of **admonitions** shortcode
 * **Custom style** shortcode
+* **Custom script** shortcode
 * **Animated typing** supported by [TypeIt](https://typeitjs.com/)
 * **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)

README.zh-cn.md

@@ -105,6 +105,7 @@
 * 支持 **Bilibili 视频** shortcode
 * 支持多种**注释**的 shortcode
 * 支持**自定义样式**的 shortcode
+* 支持**自定义脚本**的 shortcode
 * 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
 * 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的**滚动动画**
 * 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**

exampleSite/content/about/index.en.md

@@ -77,6 +77,7 @@ math:
 * :(fas fa-video fa-fw): **Bilibili player** shortcode
 * :(far fa-bell fa-fw): Kinds of **admonitions** shortcode
 * :(fas fa-align-left fa-fw): **Custom style** shortcode
+* :(fab fa-js-square fa-fw): **Custom script** shortcode
 * :(fas fa-i-cursor fa-fw): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
 * :(fas fa-arrow-down fa-fw): **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * :(fas fa-cookie-bite fa-fw): **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)

exampleSite/content/about/index.fr.md

@@ -82,6 +82,7 @@ Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw
 * :(fas fa-video fa-fw): **Bilibili player** shortcode
 * :(far fa-bell fa-fw): Kinds of **admonitions** shortcode
 * :(fas fa-align-left fa-fw): **Custom style** shortcode
+* :(fab fa-js-square fa-fw): **Custom script** shortcode
 * :(fas fa-i-cursor fa-fw): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
 * :(fas fa-arrow-down fa-fw): **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * :(fas fa-cookie-bite fa-fw): **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)

exampleSite/content/about/index.zh-cn.md

@@ -77,6 +77,7 @@ math:
 * :(fas fa-video fa-fw): 支持 **Bilibili 视频** shortcode
 * :(far fa-bell fa-fw): 支持多种**注释**的 shortcode
 * :(fas fa-align-left fa-fw): 支持**自定义样式**的 shortcode
+* :(fab fa-js-square fa-fw): 支持**自定义脚本**的 shortcode
 * :(fas fa-i-cursor fa-fw): 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
 * :(fas fa-arrow-down fa-fw): 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的**滚动动画**
 * :(fas fa-cookie-bite fa-fw): 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md

@@ -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 >}}

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md

@@ -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 >}}

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md

@@ -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 >}}

layouts/partials/assets.html

@@ -48,7 +48,7 @@
 {{- /* lightgallery.js */ -}}
 {{- if $params.lightgallery -}}
     {{- $source := $cdn.lightgalleryCSS | default "lib/lightgallery/lightgallery.min.css" -}}
-    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/stylesheet.html" -}}
+    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/style.html" -}}
     {{- $source := $cdn.lightgalleryJS | default "lib/lightgallery/lightgallery.min.js" -}}
     {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
     {{- $source := $cdn.lightgalleryThumbnailJS | default "lib/lightgallery/lg-thumbnail.min.js" -}}
@@ -93,14 +93,14 @@
 {{- end -}}
 {{- if $math.enable -}}
     {{- $source := $cdn.katexCSS | default "lib/katex/katex.min.css" -}}
-    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/stylesheet.html" -}}
+    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/style.html" -}}
     {{- $source := $cdn.katexJS | default "lib/katex/katex.min.js" -}}
     {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
     {{- $source := $cdn.katexAutoRenderJS | default "lib/katex/auto-render.min.js" -}}
     {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
     {{- if $math.copyTex -}}
         {{- $source := $cdn.katexCopyTexCSS | default "lib/katex/copy-tex.min.css" -}}
-        {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/stylesheet.html" -}}
+        {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/style.html" -}}
         {{- $source := $cdn.katexCopyTexJS | default "lib/katex/copy-tex.min.js" -}}
         {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
     {{- end -}}
@@ -124,7 +124,7 @@
     {{- $source := $cdn.mermaidJS | default "lib/mermaid/mermaid.min.js" -}}
     {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
     {{- $options := dict "targetPath" "lib/mermaid/mermaid.min.css" "enableSourceMap" true -}}
-    {{- dict "source" "lib/mermaid/mermaid.scss" "toCSS" $options "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/stylesheet.html" -}}
+    {{- dict "source" "lib/mermaid/mermaid.scss" "toCSS" $options "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/style.html" -}}
 {{- end -}}
 
 {{- /* ECharts */ -}}
@@ -138,7 +138,7 @@
 {{- /* Mapbox GL */ -}}
 {{- if (.Scratch.Get "this").mapbox -}}
     {{- $source := $cdn.mapboxGLCSS | default "lib/mapbox-gl/mapbox-gl.min.css" -}}
-    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/stylesheet.html" -}}
+    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/style.html" -}}
     {{- $source := $cdn.mapboxGLJS | default "lib/mapbox-gl/mapbox-gl.min.js" -}}
     {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
     {{- dict "source" "lib/mapbox-gl/mapbox-gl-language.js" "minify" true "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
@@ -149,9 +149,9 @@
 {{- if (.Scratch.Get "this").music -}}
     {{- /* APlayer */ -}}
     {{- $source := $cdn.aplayerCSS | default "lib/aplayer/APlayer.min.css" -}}
-    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/stylesheet.html" -}}
+    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/style.html" -}}
     {{- $options := dict "targetPath" "lib/aplayer/dark.min.css" "enableSourceMap" true -}}
-    {{- dict "source" "lib/aplayer/dark.scss" "toCSS" $options "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/stylesheet.html" -}}
+    {{- dict "source" "lib/aplayer/dark.scss" "toCSS" $options "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/style.html" -}}
     {{- $source := $cdn.aplayerJS | default "lib/aplayer/APlayer.min.js" -}}
     {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
 
@@ -163,7 +163,7 @@
 {{- /* Cookie Consent */ -}}
 {{- if .Site.Params.cookieconsent | and .Site.Params.cookieconsent.enable -}}
     {{- $source := $cdn.cookieconsentCSS | default "lib/cookieconsent/cookieconsent.min.css" -}}
-    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/stylesheet.html" -}}
+    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/style.html" -}}
     {{- $source := $cdn.cookieconsentJS | default "lib/cookieconsent/cookieconsent.min.js" -}}
     {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
     {{- $cookieconsentConfig := dict "popup" (dict "background" "#1aa3ff") "button" (dict "background" "#f0f0f0") | dict "theme" "edgeless" "palette" -}}
@@ -173,29 +173,32 @@
 {{- end -}}
 
 {{- range $params.library.css -}}
-    {{- dict "source" . "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/stylesheet.html" -}}
+    {{- dict "source" . "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/style.html" -}}
 {{- end -}}
 
 {{- range $params.library.js -}}
     {{- dict "source" . "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
 {{- end -}}
 
+{{- with (.Scratch.Get "this").styleArr -}}
+    {{- delimit . "" | dict "content" | dict "scratch" $.Scratch "data" | partial "scratch/style.html" -}}
+{{- end -}}
+
+{{- /* Config script */ -}}
+{{- $config | jsonify | printf "window.config=%s;" | dict "content" | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
+
 {{- /* Theme script */ -}}
 {{- dict "source" "js/theme.min.js" "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
 {{- $_ := (resources.Get "js/theme.min.js.map").RelPermalink -}}
 
-{{- range (.Scratch.Get "this").stylesheet -}}
-    {{- partial "plugin/stylesheet.html" . -}}
+{{- with (.Scratch.Get "this").scriptArr -}}
+    {{- delimit . "\n" | dict "content" | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
 {{- end -}}
 
-{{- with (.Scratch.Get "this").styleArr -}}
-    <style>{{ delimit . "" | safeCSS }}</style>
+{{- range (.Scratch.Get "this").style -}}
+    {{- partial "plugin/style.html" . -}}
 {{- end -}}
 
-<script type="text/javascript">
-    window.config = {{ $config | jsonify | safeJS }};
-</script>
-
 {{- range (.Scratch.Get "this").script -}}
     {{- partial "plugin/script.html" . -}}
 {{- end -}}

layouts/partials/comment.html

@@ -21,7 +21,7 @@
         {{- if $gitalk.enable -}}
             <div id="gitalk" class="comment"></div>
             {{- $source := $cdn.gitalkCSS | default "lib/gitalk/gitalk.css" -}}
-            {{- dict "source" $source "minify" true "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/stylesheet.html" -}}
+            {{- dict "source" $source "minify" true "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/style.html" -}}
             {{- $source := $cdn.gitalkJS | default "lib/gitalk/gitalk.min.js" -}}
             {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
             {{- $commentConfig = dict "id" .Date "title" .Title "clientID" $gitalk.clientId "clientSecret" $gitalk.clientSecret "repo" $gitalk.repo "owner" $gitalk.owner "admin" (slice $gitalk.owner) | dict "gitalk" | merge $commentConfig -}}
@@ -35,7 +35,7 @@
         {{- if $valine.enable -}}
             <div id="valine" class="comment"></div>
             {{- $options := dict "targetPath" "lib/valine/valine.min.css" -}}
-            {{- dict "source" "lib/valine/valine.scss" "toCSS" $options | dict "scratch" .Scratch "data" | partial "scratch/stylesheet.html" -}}
+            {{- dict "source" "lib/valine/valine.scss" "toCSS" $options | dict "scratch" .Scratch "data" | partial "scratch/style.html" -}}
             {{- $source := $cdn.valineJS | default "lib/valine/Valine.min.js" -}}
             {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
             {{- $commentConfig = dict "el" "#valine" "appId" $valine.appId "appKey" $valine.appKey "lang" ($valine.lang | default (T "valineLang")) "visitor" $valine.visitor "recordIP" $valine.recordIP "placeholder" ($valine.placeholder | default (T "valinePlaceholder")) "highlight" (ne $valine.highlight false) "enableQQ" $valine.enableQQ | dict "valine" | merge $commentConfig -}}

layouts/partials/function/id.html

@@ -2,5 +2,7 @@
 {{- $count := (.scratch.Get "this").count | default 1 -}}
 {{- $id := printf "id-%d" $count -}}
 {{- $count | add 1 | .scratch.SetInMap "this" "count" -}}
-{{- dict $id .content | dict "data" | dict "config" | merge (.scratch.Get "this") | .scratch.Set "this" -}}
+{{- with .content -}}
+    {{- dict $id . | dict "data" | dict "config" | merge ($.scratch.Get "this") | $.scratch.Set "this" -}}
+{{- end -}}
 {{- return $id -}}

layouts/partials/head/link.html

@@ -31,21 +31,21 @@
 
 {{- /* normalize.css */ -}}
 {{- $source := $cdn.normalizeCSS | default "lib/normalize/normalize.min.css" -}}
-{{- $stylesheet := dict "source" $source "fingerprint" $fingerprint -}}
-{{- partial "plugin/stylesheet.html" $stylesheet -}}
+{{- $style := dict "source" $source "fingerprint" $fingerprint -}}
+{{- partial "plugin/style.html" $style -}}
 
 {{- /* style.min.css */ -}}
-{{- $stylesheet := dict "source" "css/style.template.scss" "fingerprint" $fingerprint -}}
+{{- $style := dict "source" "css/style.template.scss" "fingerprint" $fingerprint -}}
 {{- $options := dict "targetPath" "css/style.min.css" "includePaths" (slice "config/css") "enableSourceMap" true -}}
-{{- $stylesheet = dict "template" "style.scss" "context" . "toCSS" $options | merge $stylesheet -}}
-{{- partial "plugin/stylesheet.html" $stylesheet -}}
+{{- $style = dict "template" "style.scss" "context" . "toCSS" $options | merge $style -}}
+{{- partial "plugin/style.html" $style -}}
 
 {{- /* Font Awesome */ -}}
 {{- $source := $cdn.fontawesomeFreeCSS | default "lib/fontawesome-free/all.min.css" -}}
-{{- $stylesheet := dict "source" $source "fingerprint" $fingerprint -}}
-{{- partial "plugin/stylesheet.html" $stylesheet -}}
+{{- $style := dict "source" $source "fingerprint" $fingerprint -}}
+{{- partial "plugin/style.html" $style -}}
 
 {{- /* Animate.css */ -}}
 {{- $source := $cdn.animateCSS | default "lib/animate/animate.min.css" -}}
-{{- $stylesheet := dict "source" $source "fingerprint" $fingerprint -}}
-{{- partial "plugin/stylesheet.html" $stylesheet -}}
+{{- $style := dict "source" $source "fingerprint" $fingerprint -}}
+{{- partial "plugin/style.html" $style -}}

layouts/partials/plugin/script.html

@@ -1,4 +1,8 @@
-{{- if strings.HasPrefix .source "<script" -}}
+{{- if .content -}}
+    <script type="text/javascript">
+        {{- .content | safeJS -}}
+    </script>
+{{- else if strings.HasPrefix .source "<script" -}}
     {{- safeHTML .source -}}
 {{- else -}}
     {{- $src := .source -}}

layouts/partials/plugin/stylesheet.html → layouts/partials/plugin/style.html

@@ -1,4 +1,8 @@
-{{- if strings.HasPrefix .source "<link" -}}
+{{- if .content -}}
+    <style>
+        {{- .content | safeCSS -}}
+    </style>
+{{- else if strings.HasPrefix .source "<link" -}}
     {{- safeHTML .source -}}
 {{- else -}}
     {{- $href := .source -}}

layouts/partials/scratch/style.html

@@ -0,0 +1,4 @@
+{{- $this := .scratch.Get "this" -}}
+{{- $style := $this.style | default slice -}}
+{{- $style = $style | append (slice .data) -}}
+{{- .scratch.SetInMap "this" "style" $style -}}

layouts/shortcodes/script.html

@@ -0,0 +1,2 @@
+{{- $scriptArr := (.Page.Scratch.Get "this").scriptArr | default slice -}}
+{{- $scriptArr | append (trim .Inner "\n") | .Page.Scratch.SetInMap "this" "scriptArr" -}}

layouts/shortcodes/style.html

@@ -1,5 +1,5 @@
 {{- $content := .Inner | .Page.RenderString -}}
-{{- $id := dict "content" $content "scratch" .Page.Scratch | partial "function/id.html" -}}
+{{- $id := dict "scratch" .Page.Scratch | partial "function/id.html" -}}
 {{- $tag := .Get 1 | default "div" -}}
 {{- printf `<%s id="%s">%s</%s>` $tag $id $content $tag | safeHTML -}}