diff --git a/README.md b/README.md index 68ae6e9e..3784b970 100644 --- a/README.md +++ b/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) diff --git a/README.zh-cn.md b/README.zh-cn.md index bd7d97fd..2c27295f 100644 --- a/README.zh-cn.md +++ b/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 许可横幅** diff --git a/exampleSite/content/about/index.en.md b/exampleSite/content/about/index.en.md index 2f6002d3..6d4b15fc 100644 --- a/exampleSite/content/about/index.en.md +++ b/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) diff --git a/exampleSite/content/about/index.fr.md b/exampleSite/content/about/index.fr.md index 637c9968..58013fea 100644 --- a/exampleSite/content/about/index.fr.md +++ b/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) diff --git a/exampleSite/content/about/index.zh-cn.md b/exampleSite/content/about/index.zh-cn.md index 4ae36025..6a830a6b 100644 --- a/exampleSite/content/about/index.zh-cn.md +++ b/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 许可横幅** diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md index dfbd86f9..7325f528 100644 --- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md +++ b/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 +{{}} +console.log('Hello LoveIt!'); +{{}} +``` + +You can see the output in the console of the developer tool. + +{{< script >}} +console.log('Hello LoveIt!'); +{{< /script >}} diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md index 8bbbd3e3..8b26bed3 100644 --- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md +++ b/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 +{{}} +console.log('Hello LoveIt!'); +{{}} +``` + +You can see the output in the console of the developer tool. + +{{< script >}} +console.log('Hello LoveIt!'); +{{< /script >}} diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md index dd5a9fc6..75c7cad5 100644 --- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md +++ b/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 +{{}} +console.log('Hello LoveIt!'); +{{}} +``` + +你可以在开发者工具的控制台中看到输出. + +{{< script >}} +console.log('Hello LoveIt!'); +{{< /script >}} diff --git a/layouts/partials/assets.html b/layouts/partials/assets.html index d0568fdf..96b27b36 100644 --- a/layouts/partials/assets.html +++ b/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 -}} - +{{- range (.Scratch.Get "this").style -}} + {{- partial "plugin/style.html" . -}} {{- end -}} - - {{- range (.Scratch.Get "this").script -}} {{- partial "plugin/script.html" . -}} {{- end -}} diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html index f5644b76..901026bc 100644 --- a/layouts/partials/comment.html +++ b/layouts/partials/comment.html @@ -21,7 +21,7 @@ {{- if $gitalk.enable -}}
{{- $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 -}}
{{- $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 -}} diff --git a/layouts/partials/function/id.html b/layouts/partials/function/id.html index cff12fcc..7e0d0f96 100644 --- a/layouts/partials/function/id.html +++ b/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 -}} diff --git a/layouts/partials/head/link.html b/layouts/partials/head/link.html index 0e3fd731..fbf09419 100644 --- a/layouts/partials/head/link.html +++ b/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 -}} diff --git a/layouts/partials/plugin/script.html b/layouts/partials/plugin/script.html index 45a72ca2..5820e926 100644 --- a/layouts/partials/plugin/script.html +++ b/layouts/partials/plugin/script.html @@ -1,4 +1,8 @@ -{{- if strings.HasPrefix .source " + {{- .content | safeJS -}} + +{{- else if strings.HasPrefix .source " + {{- .content | safeCSS -}} + +{{- else if strings.HasPrefix .source "%s` $tag $id $content $tag | safeHTML -}}