feat(style): improve style shortcode to support nesting (#263)

9 files changed, 52 insertions, 35 deletions

diff --git a/exampleSite/content/about.en.md b/exampleSite/content/about.en.md
index fc672da..3c224c6 100644
--- a/exampleSite/content/about.en.md
+++ b/exampleSite/content/about.en.md
@@ -9,11 +9,13 @@ math:
   enable: true
 ---
 
+{{< style "img { height: 1.25rem; }" >}}
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases)
 [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt)
 [![GitHub forks](https://img.shields.io/github/forks/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt/fork)
+{{< /style >}}
 
 [:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
 
diff --git a/exampleSite/content/about.fr.md b/exampleSite/content/about.fr.md
index 4fc7459..b4a21b4 100644
--- a/exampleSite/content/about.fr.md
+++ b/exampleSite/content/about.fr.md
@@ -9,11 +9,13 @@ math:
   enable: true
 ---
 
+{{< style "img { height: 1.25rem; }" >}}
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases)
 [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt)
 [![GitHub forks](https://img.shields.io/github/forks/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt/fork)
+{{< /style >}}
 
 {{< admonition warning >}}
 Sorry, this article has not been completely translated into **French**.
diff --git a/exampleSite/content/about.zh-cn.md b/exampleSite/content/about.zh-cn.md
index e27181d..d0f1bd4 100644
--- a/exampleSite/content/about.zh-cn.md
+++ b/exampleSite/content/about.zh-cn.md
@@ -9,11 +9,13 @@ math:
   enable: true
 ---
 
+{{< style "img { height: 1.25rem; }" >}}
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases)
 [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt)
 [![GitHub forks](https://img.shields.io/github/forks/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt/fork)
+{{< /style >}}
 
 [:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) 是一个由 [Dillon](https://dillonzq.com) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
 
diff --git a/exampleSite/content/posts/theme-documentation-basics.en.md b/exampleSite/content/posts/theme-documentation-basics.en.md
index f98cb5f..5100e72 100644
--- a/exampleSite/content/posts/theme-documentation-basics.en.md
+++ b/exampleSite/content/posts/theme-documentation-basics.en.md
@@ -206,12 +206,12 @@ Note that some of these parameters are explained in details in other sections of
   # {{< version 0.2.0 >}} App icon config
   [params.app]
     # optional site title override for the app when added to an iOS home screen or Android launcher
-    title = "LoveIt App"
+    title = "LoveIt"
     # whether to omit favicon resource links
-    noFavicon = true
+    noFavicon = false
     # modern SVG favicon to use in place of older style .png and .ico files
-    svgFavicon = 'favicon.svg'
-    # Android browser color theming
+    svgFavicon = ""
+    # Android browser theme color
     themeColor = "#ffffff"
     # Safari mask icon color
     iconColor = "#5bbad5"
diff --git a/exampleSite/content/posts/theme-documentation-basics.fr.md b/exampleSite/content/posts/theme-documentation-basics.fr.md
index 6c09870..dbdf19a 100644
--- a/exampleSite/content/posts/theme-documentation-basics.fr.md
+++ b/exampleSite/content/posts/theme-documentation-basics.fr.md
@@ -211,12 +211,12 @@ Note that some of these parameters are explained in details in other sections of
   # {{< version 0.2.0 >}} App icon config
   [params.app]
     # optional site title override for the app when added to an iOS home screen or Android launcher
-    title = "LoveIt App"
+    title = "LoveIt"
     # whether to omit favicon resource links
-    noFavicon = true
+    noFavicon = false
     # modern SVG favicon to use in place of older style .png and .ico files
-    svgFavicon = 'favicon.svg'
-    # Android browser color theming
+    svgFavicon = ""
+    # Android browser theme color
     themeColor = "#ffffff"
     # Safari mask icon color
     iconColor = "#5bbad5"
diff --git a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
index c889c74..f07a0c4 100644
--- a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
@@ -206,19 +206,19 @@ hugo
   # {{< version 0.2.0 >}} 日期格式
   dateFormat = "2006-01-02"
 
-  # {{< version 0.2.0 >}} App icon config
+  # {{< version 0.2.0 >}} 应用图标配置
   [params.app]
-    # optional site title override for the app when added to an iOS home screen or Android launcher
-    title = "LoveIt App"
-    # whether to omit favicon resource links
-    noFavicon = true
-    # modern SVG favicon to use in place of older style .png and .ico files
-    svgFavicon = 'favicon.svg'
-    # Android browser color theming
+    # 当添加到 iOS 主屏幕或者 Android 启动器时的标题, 覆盖默认标题
+    title = "LoveIt"
+    # 是否隐藏网站图标资源链接
+    noFavicon = false
+    # 更现代的 SVG 网站图标, 可替代旧的 .png 和 .ico 文件
+    svgFavicon = ""
+    # Android 浏览器主题色
     themeColor = "#ffffff"
-    # Safari mask icon color
+    # Safari 图标颜色
     iconColor = "#5bbad5"
-    # Windows v8-10 tile color
+    # Windows v8-10磁贴颜色
     tileColor = "#da532c"
 
   # {{< version 0.2.0 >}} 搜索配置
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
index ed67738..932a40f 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
@@ -22,26 +22,30 @@ lightgallery: true
 
 ## style
 
+{{< version 0.2.0 changed >}}
+
 `style` is a shortcode to insert custom style in your post.
 
 The `style` shortcode has two positional parameters.
 
-The **first** one is the custom style content.
+The **first** one is the custom style content,
+which supports nesting syntax in [SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
+and `&` referring to this parent HTML element.
 
-And the **second** one is the HTML tag around the content you want to change style, and whose default value is `div`.
+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`.
 
 Example `style` input:
 
 ```markdown
-{{</* style "text-align: right;" */>}}
-This is a right-aligned paragraph.
+{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
+This is a **right-aligned** paragraph.
 {{</* /style */>}}
 ```
 
 The rendered output looks like this:
 
-{{< style "text-align: right;" >}}
-This is a right-aligned paragraph.
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
 {{< /style >}}
 
 ## link
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
index bcb1c81..3758584 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
@@ -27,26 +27,30 @@ Welcome to take the time to propose a translation by [making a PR](https://githu
 
 ## style
 
+{{< version 0.2.0 changed >}}
+
 `style` is a shortcode to insert custom style in your post.
 
 The `style` shortcode has two positional parameters.
 
-The **first** one is the custom style content.
+The **first** one is the custom style content,
+which supports nesting syntax in [SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
+and `&` referring to this parent HTML element.
 
-And the **second** one is the HTML tag around the content you want to change style, and whose default value is `div`.
+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`.
 
 Example `style` input:
 
 ```markdown
-{{</* style "text-align: right;" */>}}
-This is a right-aligned paragraph.
+{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
+This is a **right-aligned** paragraph.
 {{</* /style */>}}
 ```
 
 The rendered output looks like this:
 
-{{< style "text-align: right;" >}}
-This is a right-aligned paragraph.
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
 {{< /style >}}
 
 ## link
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 b3b4f54..74e09a1 100644
--- a/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
@@ -25,26 +25,29 @@ mapbox:
 
 ## style
 
+{{< version 0.2.0 changed >}}
+
 `style` shortcode 用来在你的文章中插入自定义样式.
 
 `style` shortcode 有两个位置参数.
 
-第一个参数是自定义样式的内容.
+第一个参数是自定义样式的内容. 它支持 [SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting) 中的嵌套语法,
+并且 `&` 指代这个父元素.
 
 第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 `div`.
 
 一个 `style` 示例:
 
 ```markdown
-{{</* style "text-align: right;" */>}}
-This is a right-aligned paragraph.
+{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
+This is a **right-aligned** paragraph.
 {{</* /style */>}}
 ```
 
 呈现的输出效果如下:
 
-{{< style "text-align: right;" >}}
-This is a right-aligned paragraph.
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
 {{< /style >}}
 
 ## link