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

2020-04-27 01:19:23 +08:00
parent f8b84de3f8
commit fc46fba6aa
19 changed files with 90 additions and 63 deletions
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -98,12 +98,12 @@ enableEmoji = true
      # App icon config
      [languages.en.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"
@@ -284,19 +284,19 @@ enableEmoji = true
      description = "关于 LoveIt 主题"
      # 网站关键词
      keywords = ["Theme", "Hugo"]
-      # App icon config
+      # 应用图标配置
      [languages.zh-cn.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"
      # 搜索配置
      [languages.zh-cn.params.search]
@@ -472,12 +472,12 @@ enableEmoji = true
      # App icon config
      [languages.fr.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"
--- 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).

--- 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**.
--- 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/) 博客主题。

--- 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"
--- 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"
--- 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 >}} 搜索配置
--- 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
--- 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
--- 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