diff options
author | Dillon <dillonzq@outlook.com> | 2020-04-26 20:19:23 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-04-26 20:19:23 +0300 |
commit | fc46fba6aa1a747d19c9d0b37b0a26e944cfbba3 (patch) | |
tree | bcee7d77e75a6ac81252999afb64b4f13100a725 /exampleSite | |
parent | f8b84de3f852bfa04e973592fa5af8c5f00d2383 (diff) |
feat(style): improve style shortcode to support nesting (#263)
Diffstat (limited to 'exampleSite')
10 files changed, 70 insertions, 53 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 902d95b..1cd7788 100644 --- 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" 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 |