mirror of
https://github.com/dillonzq/LoveIt.git
synced 2024-11-14 02:46:16 +01:00
feat(style): improve style shortcode to support nesting (#263)
This commit is contained in:
Dillon
GitHub
parent
f8b84de3f8
commit
fc46fba6aa
19 changed files with 90 additions and 63 deletions
|
|
@ -15,6 +15,7 @@
|
|||
padding: 30% 0 0;
|
||||
position: relative;
|
||||
margin: 0.6rem auto;
|
||||
@include transition(transform 0.4s ease);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
|
|
@ -24,6 +25,10 @@
|
|||
top: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include transform(scale(1.01));
|
||||
}
|
||||
}
|
||||
|
||||
.single-title {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -9,11 +9,13 @@ math:
|
|||
enable: true
|
||||
---
|
||||
|
||||
{{< style "img { height: 1.25rem; }" >}}
|
||||
[](https://github.com/dillonzq/LoveIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
|
||||
[](https://github.com/dillonzq/LoveIt)
|
||||
[](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).
|
||||
|
||||
|
|
|
|||
|
|
@ -9,11 +9,13 @@ math:
|
|||
enable: true
|
||||
---
|
||||
|
||||
{{< style "img { height: 1.25rem; }" >}}
|
||||
[](https://github.com/dillonzq/LoveIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
|
||||
[](https://github.com/dillonzq/LoveIt)
|
||||
[](https://github.com/dillonzq/LoveIt/fork)
|
||||
{{< /style >}}
|
||||
|
||||
{{< admonition warning >}}
|
||||
Sorry, this article has not been completely translated into **French**.
|
||||
|
|
|
|||
|
|
@ -9,11 +9,13 @@ math:
|
|||
enable: true
|
||||
---
|
||||
|
||||
{{< style "img { height: 1.25rem; }" >}}
|
||||
[](https://github.com/dillonzq/LoveIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
|
||||
[](https://github.com/dillonzq/LoveIt)
|
||||
[](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/) 博客主题。
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 >}} 搜索配置
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
{{- $cdn := .Scratch.Get "cdn" | default dict -}}
|
||||
{{- $fingerprint := .Scratch.Get "fingerprint" -}}
|
||||
|
||||
{{- if not $.Site.Params.app.noFavicon -}}
|
||||
{{- with $.Site.Params.app.svgFavicon -}}
|
||||
<link rel="icon" href="/{{ . }}">
|
||||
{{- if not .Site.Params.app.noFavicon -}}
|
||||
{{- with .Site.Params.app.svgFavicon -}}
|
||||
<link rel="icon" href="{{ . }}">
|
||||
{{- else -}}
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
{{- end -}}
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
{{- with $.Site.Params.app.iconColor -}}
|
||||
{{- with .Site.Params.app.iconColor -}}
|
||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="{{ . }}">
|
||||
{{- end -}}
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
{{- $content := .Inner | .Page.RenderString -}}
|
||||
{{- $id := partial "function/id.html" (dict "content" $content) -}}
|
||||
{{- $tag := .Get 1 | default "div" -}}
|
||||
{{- printf `<%s id="%s">%s</%s><style>#%s{%s}</style>` $tag $id $content $tag $id ($.Get 0) | safeHTML -}}
|
||||
{{- $style := .Get 0 | printf "#%s{%s}" $id -}}
|
||||
{{- $res := resources.FromString "css/shortcode/style.scss" $style -}}
|
||||
{{- $res = $res | toCSS (dict "targetPath" "css/shortcode/style.css" "outputStyle" "compressed") -}}
|
||||
{{- printf `<%s id="%s">%s</%s>` $tag $id $content $tag | safeHTML -}}
|
||||
<style>{{ $res.Content | safeCSS }}</style>
|
||||
|
|
@ -30,8 +30,7 @@
|
|||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run build && npm run copy && git add .",
|
||||
"pre-push": "npm run build && npm run copy && git add ."
|
||||
"pre-commit": "npm run build && npm run copy && git add ."
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
#id-27e8e4 img{height:1.25rem}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"Target":"css/shortcode/style.css","MediaType":"text/css","Data":{}}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue