12 files changed, 33 insertions, 17 deletions
diff --git a/.gitignore b/.gitignore
index 3b172dc..51ffa86 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,6 @@
 # Hugo default output directory
 public/
 /exampleSite/resources/
-/resources/_gen/assets/scss/temp
 
 node_modules/
 build/
diff --git a/exampleSite/content/posts/theme-documentation-basics.en.md b/exampleSite/content/posts/theme-documentation-basics.en.md
index 32db5b6..94df5f0 100644
--- a/exampleSite/content/posts/theme-documentation-basics.en.md
+++ b/exampleSite/content/posts/theme-documentation-basics.en.md
@@ -26,14 +26,14 @@ Discover what the Hugo - **LoveIt** theme is all about and the core-concepts beh
 
 Thanks to the simplicity of Hugo, [Hugo](https://gohugo.io/) is the only dependency of this theme.
 
-Just install latest version of [:(far fa-file-archive fa-fw): Hugo extended (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (**Windows**, **Linux**, **macOS**).
+Just install latest version of [:(far fa-file-archive fa-fw): Hugo (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (**Windows**, **Linux**, **macOS**).
 
 {{< admonition note "Why not support earlier versions of Hugo?" >}}
 Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above **0.62.0**.
 {{< /admonition >}}
 
-{{< admonition note "Why need the Hugo extended version?" >}}
-Since the theme processes SCSS to CSS, Hugo needs to be the **extended** version.
+{{< admonition tip "Hugo extended version is recommended" >}}
+Since some features of this theme need to processes :(fab fa-sass fa-fw): SCSS to :(fab fa-css3 fa-fw): CSS, it is recommended to use Hugo **extended** version for better experience.
 {{< /admonition >}}
 
 ## 2 Installation
diff --git a/exampleSite/content/posts/theme-documentation-basics.fr.md b/exampleSite/content/posts/theme-documentation-basics.fr.md
index a166798..517c07d 100644
--- a/exampleSite/content/posts/theme-documentation-basics.fr.md
+++ b/exampleSite/content/posts/theme-documentation-basics.fr.md
@@ -31,14 +31,14 @@ Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw
 
 Thanks to the simplicity of Hugo, [Hugo](https://gohugo.io/) is the only dependency of this theme.
 
-Just install latest version of [:(far fa-file-archive fa-fw): Hugo extended (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (**Windows**, **Linux**, **macOS**).
+Just install latest version of [:(far fa-file-archive fa-fw): Hugo (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (**Windows**, **Linux**, **macOS**).
 
 {{< admonition note "Why not support earlier versions of Hugo?" >}}
 Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above **0.62.0**.
 {{< /admonition >}}
 
-{{< admonition note "Why need the Hugo extended version?" >}}
-Since the theme processes SCSS to CSS, Hugo needs to be the **extended** version.
+{{< admonition tip "Hugo extended version is recommended" >}}
+Since some features of this theme need to processes :(fab fa-sass fa-fw): SCSS to :(fab fa-css3 fa-fw): CSS, it is recommended to use Hugo **extended** version for better experience.
 {{< /admonition >}}
 
 ## 2 Installation
diff --git a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
index 60e7f5d..d2afa2c 100644
--- a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
@@ -26,7 +26,7 @@ toc:
 
 由于 Hugo 提供的便利性, [Hugo](https://gohugo.io/) 本身是这个主题唯一的依赖.
 
-直接安装满足你操作系统 (**Windows**, **Linux**, **macOS**) 的最新版本 [:(far fa-file-archive fa-fw): Hugo extended (> 0.62.0)](https://gohugo.io/getting-started/installing/).
+直接安装满足你操作系统 (**Windows**, **Linux**, **macOS**) 的最新版本 [:(far fa-file-archive fa-fw): Hugo (> 0.62.0)](https://gohugo.io/getting-started/installing/).
 
 {{< admonition note "为什么不支持早期版本的 Hugo?" >}}
 由于 [Markdown 渲染钩子函数](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks) 在 [Hugo 圣诞节版本](https://gohugo.io/news/0.62.0-relnotes/) 中被引入, 本主题只支持高于 **0.62.0** 的 Hugo 版本.
@@ -36,6 +36,10 @@ toc:
 由于本主题需要转换 SCSS 文件为 CSS 文件, Hugo **extended** 版本是必要的.
 {{< /admonition >}}
 
+{{< admonition tip "推荐使用 Hugo extended 版本" >}}
+由于这个主题的一些特性需要将 :(fab fa-sass fa-fw): SCSS 转换为 :(fab fa-css3 fa-fw): CSS, 推荐使用 Hugo **extended** 版本来获得更好的使用体验.
+{{< /admonition >}}
+
 ## 2 安装
 
 以下步骤可帮助你初始化新网站. 如果你根本不了解 Hugo, 我们强烈建议你按照此 [快速入门文档](https://gohugo.io/getting-started/quick-start/) 进一步了解它.
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
index a6260cf..61244b6 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
@@ -24,6 +24,10 @@ lightgallery: true
 
 {{< version 0.2.0 changed >}}
 
+{{< admonition >}}
+Hugo **extended** version is necessary for `style` shortcode.
+{{< /admonition >}}
+
 `style` is a shortcode to insert custom style in your post.
 
 The `style` shortcode has two positional parameters.
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
index 9d58cfb..11706b2 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
@@ -29,6 +29,10 @@ Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw
 
 {{< version 0.2.0 changed >}}
 
+{{< admonition >}}
+Hugo **extended** version is necessary for `style` shortcode.
+{{< /admonition >}}
+
 `style` is a shortcode to insert custom style in your post.
 
 The `style` shortcode has two positional parameters.
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
index f0ffe0a..b0e852e 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
@@ -27,6 +27,10 @@ mapbox:
 
 {{< version 0.2.0 changed >}}
 
+{{< admonition >}}
+Hugo **extended** 版本对于 `style` shortcode 是必需的.
+{{< /admonition >}}
+
 `style` shortcode 用来在你的文章中插入自定义样式.
 
 `style` shortcode 有两个位置参数.
diff --git a/images/tn.png b/images/tn.png
index 29be289..4918730 100644
--- a/images/tn.png
+++ b/images/tn.png
diff --git a/layouts/partials/function/id.html b/layouts/partials/function/id.html
index 4adeb70..cff12fc 100644
--- a/layouts/partials/function/id.html
+++ b/layouts/partials/function/id.html
@@ -1,8 +1,6 @@
 {{- /* ID */ -}}
-{{- /* Content -> unique ID */ -}}
-{{- /* shuffle md5 as id */ -}}
-{{- $id := delimit (split (md5 now.Unix) "" | shuffle | first 6) "" | printf "id-%s" -}}
-{{- with .scratch -}}
-    {{- dict $id $.content | dict "data" | dict "config" | merge (.Get "this") | .Set "this" -}}
-{{- end -}}
+{{- $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" -}}
 {{- return $id -}}
diff --git a/layouts/shortcodes/style.html b/layouts/shortcodes/style.html
index f73d46c..3e1e999 100644
--- a/layouts/shortcodes/style.html
+++ b/layouts/shortcodes/style.html
@@ -1,10 +1,10 @@
 {{- $content := .Inner | .Page.RenderString -}}
-{{- $id := dict "content" $content | partial "function/id.html" -}}
+{{- $id := dict "content" $content "scratch" .Page.Scratch | partial "function/id.html" -}}
 {{- $tag := .Get 1 | default "div" -}}
 {{- printf `<%s id="%s">%s</%s>` $tag $id $content $tag | safeHTML -}}
 
 {{- $style := .Get 0 | printf "#%s{%s}" $id -}}
-{{- $res := resources.FromString (printf "temp/%s.scss" $id) $style -}}
-{{- $res = $res | toCSS (dict "targetPath" (printf "temp/%s.css" $id)) -}}
+{{- $res := resources.FromString (printf "stype/%s.scss" $id) $style -}}
+{{- $res = $res | toCSS (dict "targetPath" (printf "stype/%s.css" $id)) -}}
 {{- $styleArr := (.Page.Scratch.Get "this").styleArr | default slice -}}
 {{- $styleArr | append $res.Content | .Page.Scratch.SetInMap "this" "styleArr" -}}
diff --git a/resources/_gen/assets/scss/stype/id-1.scss_ff2a8d7d59c25f259218399bceecc7ea.content b/resources/_gen/assets/scss/stype/id-1.scss_ff2a8d7d59c25f259218399bceecc7ea.content
new file mode 100644
index 0000000..4705b8a
--- /dev/null
+++ b/resources/_gen/assets/scss/stype/id-1.scss_ff2a8d7d59c25f259218399bceecc7ea.content
@@ -0,0 +1,2 @@
+#id-1 img {
+  height: 1.25rem; }
diff --git a/resources/_gen/assets/scss/stype/id-1.scss_ff2a8d7d59c25f259218399bceecc7ea.json b/resources/_gen/assets/scss/stype/id-1.scss_ff2a8d7d59c25f259218399bceecc7ea.json
new file mode 100644
index 0000000..57e277f
--- /dev/null
+++ b/resources/_gen/assets/scss/stype/id-1.scss_ff2a8d7d59c25f259218399bceecc7ea.json
@@ -0,0 +1 @@
+{"Target":"stype/id-1.css","MediaType":"text/css","Data":{}}
+\ No newline at end of file