mirror of
https://github.com/dillonzq/LoveIt.git
synced 2024-11-14 02:46:16 +01:00
feat(shortcode): refactor and improve image shortcode (#187)
This commit is contained in:
Dillon
GitHub
parent
84d48f37dc
commit
774e831a21
17 changed files with 651 additions and 280 deletions
|
|
@ -48,6 +48,38 @@
|
|||
@import "../_partial/_single/toc";
|
||||
|
||||
.content {
|
||||
> h2 {
|
||||
font-size: 1.5rem;
|
||||
|
||||
& code {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
> h3 {
|
||||
font-size: 1.375rem;
|
||||
|
||||
& code {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
> h4 {
|
||||
font-size: 1.25rem;
|
||||
|
||||
& code {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
> h5 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
> h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<svg width="69" height="69" viewBox="-31 -31 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
|
||||
<stop stop-color="#fff" stop-opacity="0" offset="0%"/>
|
||||
<stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
|
||||
<stop stop-color="#fff" offset="100%"/>
|
||||
<stop stop-color="#a5a5a5" stop-opacity="0" offset="0%"/>
|
||||
<stop stop-color="#a5a5a5" stop-opacity=".631" offset="63.146%"/>
|
||||
<stop stop-color="#a5a5a5" offset="100%"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
dur="0.9s"
|
||||
repeatCount="indefinite" />
|
||||
</path>
|
||||
<circle fill="#fff" cx="36" cy="18" r="1">
|
||||
<circle fill="#a5a5a5" cx="36" cy="18" r="1">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
|
@ -44,7 +44,7 @@ enableEmoji = true
|
|||
[languages.en.menu]
|
||||
[[languages.en.menu.main]]
|
||||
identifier = "posts"
|
||||
# you can add extra information before the name (HTML format is allowed), such as icons
|
||||
# you can add extra information before the name (HTML format is supported), such as icons
|
||||
pre = ""
|
||||
name = "Posts"
|
||||
url = "/posts/"
|
||||
|
|
@ -108,7 +108,7 @@ enableEmoji = true
|
|||
typeit = true
|
||||
# whether to show social links
|
||||
social = true
|
||||
# disclaimer (HTML format is allowed)
|
||||
# disclaimer (HTML format is supported)
|
||||
disclaimer = ""
|
||||
# Home Page Posts
|
||||
[languages.en.params.home.posts]
|
||||
|
|
@ -342,7 +342,7 @@ enableEmoji = true
|
|||
typeit = true
|
||||
# 是否显示社交账号
|
||||
social = true
|
||||
# 免责声明 (允许使用 HTML 格式)
|
||||
# 免责声明 (支持 HTML 格式)
|
||||
disclaimer = ""
|
||||
# 主页文章列表
|
||||
[languages.zh-cn.params.home.posts]
|
||||
|
|
@ -576,7 +576,7 @@ enableEmoji = true
|
|||
typeit = true
|
||||
# whether to show social links
|
||||
social = true
|
||||
# disclaimer (HTML format is allowed)
|
||||
# disclaimer (HTML format is supported)
|
||||
disclaimer = ""
|
||||
# Home Page Posts
|
||||
[languages.fr.params.home.posts]
|
||||
|
|
@ -753,11 +753,11 @@ enableEmoji = true
|
|||
# Site creation time
|
||||
# 网站创立年份
|
||||
since = 2019
|
||||
# ICP info only in China (HTML format is allowed)
|
||||
# ICP 备案信息，仅在中国使用 (允许使用 HTML 格式)
|
||||
# ICP info only in China (HTML format is supported)
|
||||
# ICP 备案信息，仅在中国使用 (支持 HTML 格式)
|
||||
icp = ""
|
||||
# license info (HTML format is allowed)
|
||||
# 许可协议信息 (允许使用 HTML 格式)
|
||||
# license info (HTML format is supported)
|
||||
# 许可协议信息 (支持 HTML 格式)
|
||||
license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
|
||||
# Page config
|
||||
# 文章页面配置
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-ma
|
|||
{{< /admonition >}}
|
||||
|
||||
{{< admonition note "Why need the Hugo extended version?" >}}
|
||||
Since this theme processes SCSS to CSS, the Hugo extended version is needed.
|
||||
Since this theme processes SCSS to CSS, Hugo needs to be the extended version.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 2 Installation
|
||||
|
|
@ -99,7 +99,7 @@ theme = "LoveIt"
|
|||
[menu]
|
||||
[[menu.main]]
|
||||
identifier = "posts"
|
||||
# you can add extra information before the name (HTML format is allowed), such as icons
|
||||
# you can add extra information before the name (HTML format is supported), such as icons
|
||||
pre = ""
|
||||
name = "Posts"
|
||||
url = "/posts/"
|
||||
|
|
@ -206,9 +206,9 @@ Note that some of these parameters are explained in details in other sections of
|
|||
[params.footer]
|
||||
# Site creation time
|
||||
since = 2019
|
||||
# ICP info only in China (HTML format is allowed)
|
||||
# ICP info only in China (HTML format is supported)
|
||||
icp = ""
|
||||
# license info (HTML format is allowed)
|
||||
# license info (HTML format is supported)
|
||||
license = '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
|
||||
# Home Page Info
|
||||
[params.home]
|
||||
|
|
@ -226,7 +226,7 @@ Note that some of these parameters are explained in details in other sections of
|
|||
# whether to show social links
|
||||
social = true
|
||||
# {{< version 0.2.0 >}}
|
||||
# disclaimer (HTML format is allowed)
|
||||
# disclaimer (HTML format is supported)
|
||||
disclaimer = ""
|
||||
# Home Page Posts
|
||||
[params.home.posts]
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-ma
|
|||
{{< /admonition >}}
|
||||
|
||||
{{< admonition note "Why need the Hugo extended version?" >}}
|
||||
Since this theme processes SCSS to CSS, the Hugo extended version is needed.
|
||||
Since this theme processes SCSS to CSS, Hugo needs to be the extended version.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 2 Installation
|
||||
|
|
@ -104,7 +104,7 @@ theme = "LoveIt"
|
|||
[menu]
|
||||
[[menu.main]]
|
||||
identifier = "posts"
|
||||
# you can add extra information before the name (HTML format is allowed), such as icons
|
||||
# you can add extra information before the name (HTML format is supported), such as icons
|
||||
pre = ""
|
||||
name = "Posts"
|
||||
url = "/posts/"
|
||||
|
|
@ -211,9 +211,9 @@ Note that some of these parameters are explained in details in other sections of
|
|||
[params.footer]
|
||||
# Site creation time
|
||||
since = 2019
|
||||
# ICP info only in China (HTML format is allowed)
|
||||
# ICP info only in China (HTML format is supported)
|
||||
icp = ""
|
||||
# license info (HTML format is allowed)
|
||||
# license info (HTML format is supported)
|
||||
license = '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
|
||||
# Home Page Info
|
||||
[params.home]
|
||||
|
|
@ -231,7 +231,7 @@ Note that some of these parameters are explained in details in other sections of
|
|||
# whether to show social links
|
||||
social = true
|
||||
# {{< version 0.2.0 >}}
|
||||
# disclaimer (HTML format is allowed)
|
||||
# disclaimer (HTML format is supported)
|
||||
disclaimer = ""
|
||||
# Home Page Posts
|
||||
[params.home.posts]
|
||||
|
|
|
|||
|
|
@ -209,9 +209,9 @@ hugo
|
|||
[params.footer]
|
||||
# 网站创立年份
|
||||
since = 2019
|
||||
# ICP 备案信息，仅在中国使用 (允许使用 HTML 格式)
|
||||
# ICP 备案信息，仅在中国使用 (支持 HTML 格式)
|
||||
icp = ""
|
||||
# 许可协议信息 (允许使用 HTML 格式)
|
||||
# 许可协议信息 (支持 HTML 格式)
|
||||
license = '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
|
||||
# 文章页面配置
|
||||
[params.home]
|
||||
|
|
@ -229,7 +229,7 @@ hugo
|
|||
# 是否显示社交账号
|
||||
social = true
|
||||
# {{< version 0.2.0 >}}
|
||||
# 免责声明 (允许使用 HTML 格式)
|
||||
# 免责声明 (支持 HTML 格式)
|
||||
disclaimer = ""
|
||||
# 主页文章列表
|
||||
[params.home.posts]
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ Hugo ships with a set of predefined shortcodes that represent very common usage.
|
|||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
Example `figure` Input:
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
|
|
@ -71,7 +71,7 @@ The HTML looks like this:
|
|||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
Example `gist` Input:
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
|
|
@ -91,7 +91,7 @@ The HTML looks like this:
|
|||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `highlight` Input:
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
|
|
@ -123,7 +123,7 @@ The rendered output looks like this:
|
|||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `instagram` Input:
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
|
|
@ -137,7 +137,7 @@ The rendered output looks like this:
|
|||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
Example `param` Input:
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
|
|
@ -155,7 +155,7 @@ The rendered output looks like this:
|
|||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
Example `tweet` Input:
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
|
|
@ -169,7 +169,7 @@ The rendered output looks like this:
|
|||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
Example `vimeo` Input:
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
|
|
@ -183,7 +183,7 @@ The rendered output looks like this:
|
|||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
Example `youtube` Input:
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
|
|
@ -201,9 +201,13 @@ The rendered output looks like this:
|
|||
|
||||
`style` is a shortcode to insert custom style in your post.
|
||||
|
||||
The `style` shortcode can use two parameters. The first is the custom style content and the second is the HTML tag around the content you want to change style, and whose default value is `p`.
|
||||
The `style` shortcode has two positional parameters.
|
||||
|
||||
Example `style` Input:
|
||||
The **first** one is the custom style content.
|
||||
|
||||
And the **second** one is the HTML tag around the content you want to change style, and whose default value is `p`.
|
||||
|
||||
Example `style` input:
|
||||
|
||||
```markdown
|
||||
{{</* style "text-align: right" */>}}
|
||||
|
|
@ -225,31 +229,31 @@ This is a right-aligned paragraph.
|
|||
|
||||
`link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax/#links). `link` shortcode can provide some other features and can be used in code blocks.
|
||||
|
||||
The `link` shortcode can use the following named parameters:
|
||||
The `link` shortcode has the following named parameters:
|
||||
|
||||
* **href**
|
||||
* **href** *[required]* (**first** positional parameter)
|
||||
|
||||
Destination of the link.
|
||||
|
||||
* **content**
|
||||
* **content** *[optional]* (**second** positional parameter)
|
||||
|
||||
Content of the link (HTML format is allowed).
|
||||
Content of the link, default is the value of **href** parameter.
|
||||
|
||||
* **title**
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
* **title** *[optional]* (**third** positional parameter)
|
||||
|
||||
`title` attribute of the HTML `a` tag, which will be shown when hovering on the link.
|
||||
|
||||
* **rel**
|
||||
|
||||
Additional `rel` attributes of the HTML `a` tag.
|
||||
|
||||
* **class**
|
||||
* **class** *[optional]*
|
||||
|
||||
`class` attribute of the HTML `a` tag.
|
||||
|
||||
#### Basic `link`
|
||||
* **rel** *[optional]*
|
||||
|
||||
Example basic `link` Input:
|
||||
Additional `rel` attributes of the HTML `a` tag.
|
||||
|
||||
Example `link` input:
|
||||
|
||||
```markdown
|
||||
{{</* link "https://assemble.io" */>}}
|
||||
|
|
@ -271,7 +275,7 @@ The rendered output looks like this:
|
|||
* {{< link "mailto:contact@revolunet.com" >}}
|
||||
* {{< link "https://assemble.io" Assemble >}}
|
||||
|
||||
#### Add a Title
|
||||
Example `link` input with a title:
|
||||
|
||||
```markdown
|
||||
{{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
|
||||
|
|
@ -287,45 +291,75 @@ The rendered output looks like this (hover over the link, there should be a tool
|
|||
|
||||
`image` shortcode is an alternative to [`figure` shortcode](#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
|
||||
|
||||
The `image` shortcode can use the following named parameters:
|
||||
The `image` shortcode has the following named parameters:
|
||||
|
||||
* **src**
|
||||
* **src** *[required]* (**first** positional parameter)
|
||||
|
||||
URL of the image to be displayed.
|
||||
|
||||
* **description**
|
||||
* **alt** *[optional]* (**second** positional parameter)
|
||||
|
||||
Image description.
|
||||
Alternate text for the image if the image cannot be displayed, default is the value of **src** parameter.
|
||||
|
||||
* **title**
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
Image title.
|
||||
* **caption** *[optional]* (**third** positional parameter)
|
||||
|
||||
* **class**
|
||||
Image caption.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
* **title** *[optional]*
|
||||
|
||||
Image title that will be shown when hovering on the image.
|
||||
|
||||
* **class** *[optional]*
|
||||
|
||||
`class` attribute of the HTML `figure` tag.
|
||||
|
||||
* **src_s**
|
||||
* **src_s** *[optional]*
|
||||
|
||||
URL of the image thumbnail, used for lightgallery.
|
||||
URL of the image thumbnail, used for lightgallery, default is the value of **src** parameter.
|
||||
|
||||
* **src_l**
|
||||
* **src_l** *[optional]*
|
||||
|
||||
URL of the HD image, used for lightgallery.
|
||||
URL of the HD image, used for lightgallery, default is the value of **src** parameter.
|
||||
|
||||
Example `image` Input:
|
||||
* **height** *[optional]*
|
||||
|
||||
`height` attribute of the image.
|
||||
|
||||
* **width** *[optional]*
|
||||
|
||||
`width` attribute of the image.
|
||||
|
||||
* **linked** *[optional]*
|
||||
|
||||
Whether the image needs to be hyperlinked, default is `true`.
|
||||
|
||||
* **rel** *[optional]*
|
||||
|
||||
Additional `rel` attributes of the HTML `a` tag, if **linked** parameter is set to `true`.
|
||||
|
||||
* **large** *[optional]*
|
||||
|
||||
Whether the image is large used for loading animation, if **linked** parameter is set to `false`.
|
||||
|
||||
Example `image` input:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
### `admonition`
|
||||
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page and `Markdown` format is supported.
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
|
||||
|
||||
*Markdown or HTML format in the content is supported.*
|
||||
|
||||
{{< admonition >}}
|
||||
A **note** banner
|
||||
|
|
@ -375,23 +409,21 @@ An **example** banner
|
|||
A **quote** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
The `admonition` shortcode can use the following named parameters:
|
||||
The `admonition` shortcode has the following named parameters:
|
||||
|
||||
* **type**
|
||||
* **type** *[optional]* (**first** positional parameter)
|
||||
|
||||
Type of the `admonition` banner, default is **note**
|
||||
Type of the `admonition` banner, default is `note`.
|
||||
|
||||
* **title**
|
||||
* **title** *[optional]* (**second** positional parameter)
|
||||
|
||||
Title of the `admonition` banner, default is the type name of the banner
|
||||
Title of the `admonition` banner, default is the value of **type** parameter.
|
||||
|
||||
* **details**
|
||||
* **details** *[optional]* (**third** positional parameter)
|
||||
|
||||
if `true`, the content will be expandable/collapsible.
|
||||
Whether the content will be expandable/collapsible, default is `false`.
|
||||
|
||||
You can also use the positional parameters in the order of **type**, **title** and **details**.
|
||||
|
||||
Example `admonition` Input:
|
||||
Example `admonition` input:
|
||||
|
||||
```markdown
|
||||
{{</* admonition type=tip title="This is a tip" details=true */>}}
|
||||
|
|
@ -417,7 +449,7 @@ Just insert your mermaid code in the `mermaid` shortcode and that’s it.
|
|||
|
||||
#### Flowchart {#flowchart}
|
||||
|
||||
Example **flowchart** `mermaid` Input:
|
||||
Example **flowchart** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -441,7 +473,7 @@ graph LR;
|
|||
|
||||
#### Sequence Diagram {#sequence-diagram}
|
||||
|
||||
Example **sequence diagram** `mermaid` Input:
|
||||
Example **sequence diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -477,7 +509,7 @@ sequenceDiagram
|
|||
|
||||
#### GANTT {#gantt}
|
||||
|
||||
Example **GANTT** `mermaid` Input:
|
||||
Example **GANTT** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -521,7 +553,7 @@ gantt
|
|||
|
||||
#### Class Diagram {#class-diagram}
|
||||
|
||||
Example **class diagram** `mermaid` Input:
|
||||
Example **class diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -563,7 +595,7 @@ classDiagram
|
|||
|
||||
#### State Diagram {#state-diagram}
|
||||
|
||||
Example **state diagram** `mermaid` Input:
|
||||
Example **state diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -591,7 +623,7 @@ stateDiagram
|
|||
|
||||
#### Git Graph {#git-graph}
|
||||
|
||||
Example **git graph** `mermaid` Input:
|
||||
Example **git graph** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -637,7 +669,7 @@ end
|
|||
|
||||
#### Pie {#pie}
|
||||
|
||||
Example **pie** `mermaid` Input:
|
||||
Example **pie** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -665,7 +697,7 @@ The basic chart types ECharts supports include [line series](https://echarts.apa
|
|||
|
||||
Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it.
|
||||
|
||||
Example `echarts` Input in `JSON` format:
|
||||
Example `echarts` input in `JSON` format:
|
||||
|
||||
```json
|
||||
{{</* echarts */>}}
|
||||
|
|
@ -1039,32 +1071,29 @@ The rendered output looks like this:
|
|||
|
||||
The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
|
||||
|
||||
The `music` shortcode can use the following named parameters:
|
||||
|
||||
|parameter |default |description|
|
||||
|:---------------|:------------:|:----------|
|
||||
|url |**require** |music URL|
|
||||
|name |options |music name|
|
||||
|artist |options |music artist|
|
||||
|cover |options |music cover URL|
|
||||
|server |**require** |music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`|
|
||||
|type |**require** |`song`, `playlist`, `album`, `search`, `artist`|
|
||||
|id |**require** |song id / playlist id / album id / search keyword|
|
||||
|auto |options |music link, support: `netease`, `tencent`, `xiami`|
|
||||
|fixed |`false` |enable fixed mode|
|
||||
|mini |`false` |enable mini mode|
|
||||
|autoplay |`false` |audio autoplay|
|
||||
|theme |`#a9a9b3` |main color|
|
||||
|loop |`all` |player loop play, values: 'all', 'one', 'none'|
|
||||
|order |`list` |player play order, values: 'list', 'random'|
|
||||
|volume |`0.7` |default volume, notice that player will remember user setting, default volume will not work after user set volume themselves|
|
||||
|mutex |`true` |prevent to play multiple player at the same time, pause other players when this player start play|
|
||||
|list-folded |`false` |indicate whether list should folded at first|
|
||||
|list-max-height |`340px` |list max height|
|
||||
There are three ways to use it the `music` shortcode.
|
||||
|
||||
#### Custom Music URL {#custom-music-url}
|
||||
|
||||
Example `music` Input:
|
||||
The `music` shortcode has the following named parameters by custom music URL:
|
||||
|
||||
* **server** *[required]*
|
||||
|
||||
URL of the custom music.
|
||||
|
||||
* **name** *[optional]*
|
||||
|
||||
Name of the custom music.
|
||||
|
||||
* **artist** *[optional]*
|
||||
|
||||
Artist of the custom music.
|
||||
|
||||
* **cover** *[required]*
|
||||
|
||||
URL of the custom music cover.
|
||||
|
||||
Example `music` input by custom music URL:
|
||||
|
||||
```markdown
|
||||
{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}}
|
||||
|
|
@ -1076,7 +1105,14 @@ The rendered output looks like this:
|
|||
|
||||
#### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
|
||||
Example `music` Input:
|
||||
The `music` shortcode has one named parameter by music platform URL automatic identification:
|
||||
|
||||
* **auto** *[required]* (**first** positional parameter)
|
||||
|
||||
URL of the music platform URL for automatic identification,
|
||||
which supports `netease`, `tencent` and `xiami` music platform.
|
||||
|
||||
Example `music` input by music platform URL automatic identification:
|
||||
|
||||
```markdown
|
||||
{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
|
||||
|
|
@ -1090,7 +1126,25 @@ The rendered output looks like this:
|
|||
|
||||
#### Custom Server, Type and ID {#custom-server}
|
||||
|
||||
Example `music` Input:
|
||||
The `music` shortcode has the following named parameters by custom music platform:
|
||||
|
||||
* **server** *[required]* (**first** positional parameter)
|
||||
|
||||
[`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
|
||||
|
||||
Music platform.
|
||||
|
||||
* **type** *[required]* (**second** positional parameter)
|
||||
|
||||
[`song`, `playlist`, `album`, `search`, `artist`]
|
||||
|
||||
Type of the music.
|
||||
|
||||
* **id** *[required]* (**third** positional parameter)
|
||||
|
||||
Song ID, or playlist ID, or album ID, or search keyword, or artist ID.
|
||||
|
||||
Example `music` input by custom music platform:
|
||||
|
||||
```markdown
|
||||
{{</* music server="netease" type="song" id="1868553" */>}}
|
||||
|
|
@ -1102,6 +1156,56 @@ The rendered output looks like this:
|
|||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
#### Other Parameters
|
||||
|
||||
The `music` shortcode has other named parameters applying to the above three ways:
|
||||
|
||||
* **theme** *[optional]*
|
||||
|
||||
Main color of the music player, default is `#a9a9b3`.
|
||||
|
||||
* **fixed** *[optional]*
|
||||
|
||||
Whether to enable fixed mode, default is `false`.
|
||||
|
||||
* **mini** *[optional]*
|
||||
|
||||
Whether to enable mini mode, default is `false`.
|
||||
|
||||
* **autoplay** *[optional]*
|
||||
|
||||
Whether to autoplay music, default is `false`.
|
||||
|
||||
* **volume** *[optional]*
|
||||
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default is `0.7`.
|
||||
|
||||
* **mutex** *[optional]*
|
||||
|
||||
Whether to pause other players when this player starts playing, default is `true`.
|
||||
|
||||
The `music` shortcode has the following named parameters only applying to the type of music list:
|
||||
|
||||
* **loop** *[optional]*
|
||||
|
||||
[`all`, `one`, `none`]
|
||||
|
||||
Loop mode of the music list, default is `none`.
|
||||
|
||||
* **order** *[optional]*
|
||||
|
||||
[`list`, `random`]
|
||||
|
||||
Play order of the music list, default is `list`.
|
||||
|
||||
* **list-folded** *[optional]*
|
||||
|
||||
Whether the music list should be folded at first, default is `false`.
|
||||
|
||||
* **list-max-height** *[optional]*
|
||||
|
||||
Max height of the music list, default is `340px`.
|
||||
|
||||
### `bilibili`
|
||||
|
||||
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
|
||||
|
|
@ -1112,7 +1216,7 @@ When the video only has one part, only the `av` ID of the video is required, e.g
|
|||
https://www.bilibili.com/video/av47027633
|
||||
```
|
||||
|
||||
Example `bilibili` Input:
|
||||
Example `bilibili` input:
|
||||
|
||||
```markdown
|
||||
{{</* bilibili 47027633 */>}}
|
||||
|
|
@ -1131,7 +1235,7 @@ When the video has multiple parts, in addition to the `av` ID of the video,
|
|||
https://www.bilibili.com/video/av36570401?p=3
|
||||
```
|
||||
|
||||
Example `bilibili` Input with `p`:
|
||||
Example `bilibili` input with `p`:
|
||||
|
||||
```markdown
|
||||
{{</* bilibili 36570401 3 */>}}
|
||||
|
|
@ -1153,7 +1257,7 @@ Just insert your content in the `typeit` shortcode and that’s it.
|
|||
|
||||
Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
|
||||
|
||||
Example `typeit` Input:
|
||||
Example `typeit` input:
|
||||
|
||||
```markdown
|
||||
{{</* typeit */>}}
|
||||
|
|
@ -1169,7 +1273,7 @@ This is a *paragraph* with **typing animation** based on [TypeIt](https://typeit
|
|||
|
||||
Alternatively, you can use custom **HTML tags**.
|
||||
|
||||
Example `typeit` Input with `h4` tag:
|
||||
Example `typeit` input with `h4` tag:
|
||||
|
||||
```markdown
|
||||
{{</* typeit tag=h4 */>}}
|
||||
|
|
@ -1187,7 +1291,7 @@ This is a *paragraph* with **typing animation** based on [TypeIt](https://typeit
|
|||
|
||||
Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
|
||||
|
||||
Example `typeit` Input with `code`:
|
||||
Example `typeit` input with `code`:
|
||||
|
||||
```markdown
|
||||
{{</* typeit code=java */>}}
|
||||
|
|
@ -1216,7 +1320,7 @@ But sometimes you may want to start a set of `typeit` contents in order.
|
|||
|
||||
A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence.
|
||||
|
||||
Example `typeit` Input with `group`:
|
||||
Example `typeit` input with `group`:
|
||||
|
||||
```markdown
|
||||
{{</* typeit group=paragraph */>}}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ Hugo ships with a set of predefined shortcodes that represent very common usage.
|
|||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure)
|
||||
|
||||
Example `figure` Input:
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
|
|
@ -76,7 +76,7 @@ The HTML looks like this:
|
|||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes/#gist)
|
||||
|
||||
Example `gist` Input:
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
|
|
@ -96,7 +96,7 @@ The HTML looks like this:
|
|||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `highlight` Input:
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
|
|
@ -128,7 +128,7 @@ The rendered output looks like this:
|
|||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes/#instagram)
|
||||
|
||||
Example `instagram` Input:
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
|
|
@ -142,7 +142,7 @@ The rendered output looks like this:
|
|||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes/#param)
|
||||
|
||||
Example `param` Input:
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
|
|
@ -160,7 +160,7 @@ The rendered output looks like this:
|
|||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes/#tweet)
|
||||
|
||||
Example `tweet` Input:
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
|
|
@ -174,7 +174,7 @@ The rendered output looks like this:
|
|||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes/#vimeo)
|
||||
|
||||
Example `vimeo` Input:
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
|
|
@ -188,7 +188,7 @@ The rendered output looks like this:
|
|||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes/#youtube)
|
||||
|
||||
Example `youtube` Input:
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
|
|
@ -206,9 +206,13 @@ The rendered output looks like this:
|
|||
|
||||
`style` is a shortcode to insert custom style in your post.
|
||||
|
||||
The `style` shortcode can use two parameters. The first is the custom style content and the second is the HTML tag around the content you want to change style, and whose default value is `p`.
|
||||
The `style` shortcode has two positional parameters.
|
||||
|
||||
Example `style` Input:
|
||||
The **first** one is the custom style content.
|
||||
|
||||
And the **second** one is the HTML tag around the content you want to change style, and whose default value is `p`.
|
||||
|
||||
Example `style` input:
|
||||
|
||||
```markdown
|
||||
{{</* style "text-align: right" */>}}
|
||||
|
|
@ -225,36 +229,36 @@ This is a right-aligned paragraph.
|
|||
### `link`
|
||||
|
||||
{{< admonition warning >}}
|
||||
{{< version 2.2.0 >}}
|
||||
{{< version 0.2.0 >}}
|
||||
{{< /admonition >}}
|
||||
|
||||
`link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax/#links). `link` shortcode can provide some other features and can be used in code blocks.
|
||||
|
||||
The `link` shortcode can use the following named parameters:
|
||||
The `link` shortcode has the following named parameters:
|
||||
|
||||
* **href**
|
||||
* **href** *[required]* (**first** positional parameter)
|
||||
|
||||
Destination of the link.
|
||||
|
||||
* **content**
|
||||
* **content** *[optional]* (**second** positional parameter)
|
||||
|
||||
Content of the link (HTML format is allowed).
|
||||
Content of the link, default is the value of **href** parameter.
|
||||
|
||||
* **title**
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
* **title** *[optional]* (**third** positional parameter)
|
||||
|
||||
`title` attribute of the HTML `a` tag, which will be shown when hovering on the link.
|
||||
|
||||
* **rel**
|
||||
|
||||
Additional `rel` attributes of the HTML `a` tag.
|
||||
|
||||
* **class**
|
||||
* **class** *[optional]*
|
||||
|
||||
`class` attribute of the HTML `a` tag.
|
||||
|
||||
#### Basic `link`
|
||||
* **rel** *[optional]*
|
||||
|
||||
Example basic `link` Input:
|
||||
Additional `rel` attributes of the HTML `a` tag.
|
||||
|
||||
Example `link` input:
|
||||
|
||||
```markdown
|
||||
{{</* link "https://assemble.io" */>}}
|
||||
|
|
@ -276,7 +280,7 @@ The rendered output looks like this:
|
|||
* {{< link "mailto:contact@revolunet.com" >}}
|
||||
* {{< link "https://assemble.io" Assemble >}}
|
||||
|
||||
#### Add a Title
|
||||
Example `link` input with a title:
|
||||
|
||||
```markdown
|
||||
{{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
|
||||
|
|
@ -292,45 +296,75 @@ The rendered output looks like this (hover over the link, there should be a tool
|
|||
|
||||
`image` shortcode is an alternative to [`figure` shortcode](#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
|
||||
|
||||
The `image` shortcode can use the following named parameters:
|
||||
The `image` shortcode has the following named parameters:
|
||||
|
||||
* **src**
|
||||
* **src** *[required]* (**first** positional parameter)
|
||||
|
||||
URL of the image to be displayed.
|
||||
|
||||
* **description**
|
||||
* **alt** *[optional]* (**second** positional parameter)
|
||||
|
||||
Image description.
|
||||
Alternate text for the image if the image cannot be displayed, default is the value of **src** parameter.
|
||||
|
||||
* **title**
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
Image title.
|
||||
* **caption** *[optional]* (**third** positional parameter)
|
||||
|
||||
* **class**
|
||||
Image caption.
|
||||
|
||||
*Markdown or HTML format is supported.*
|
||||
|
||||
* **title** *[optional]*
|
||||
|
||||
Image title that will be shown when hovering on the image.
|
||||
|
||||
* **class** *[optional]*
|
||||
|
||||
`class` attribute of the HTML `figure` tag.
|
||||
|
||||
* **src_s**
|
||||
* **src_s** *[optional]*
|
||||
|
||||
URL of the image thumbnail, used for lightgallery.
|
||||
URL of the image thumbnail, used for lightgallery, default is the value of **src** parameter.
|
||||
|
||||
* **src_l**
|
||||
* **src_l** *[optional]*
|
||||
|
||||
URL of the HD image, used for lightgallery.
|
||||
URL of the HD image, used for lightgallery, default is the value of **src** parameter.
|
||||
|
||||
Example `image` Input:
|
||||
* **height** *[optional]*
|
||||
|
||||
`height` attribute of the image.
|
||||
|
||||
* **width** *[optional]*
|
||||
|
||||
`width` attribute of the image.
|
||||
|
||||
* **linked** *[optional]*
|
||||
|
||||
Whether the image needs to be hyperlinked, default is `true`.
|
||||
|
||||
* **rel** *[optional]*
|
||||
|
||||
Additional `rel` attributes of the HTML `a` tag, if **linked** parameter is set to `true`.
|
||||
|
||||
* **large** *[optional]*
|
||||
|
||||
Whether the image is large used for loading animation, if **linked** parameter is set to `false`.
|
||||
|
||||
Example `image` input:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
### `admonition`
|
||||
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page and `Markdown` format is supported.
|
||||
The `admonition` shortcode supports **12** types of banners to help you put notice in your page.
|
||||
|
||||
*Markdown or HTML format in the content is supported.*
|
||||
|
||||
{{< admonition >}}
|
||||
A **note** banner
|
||||
|
|
@ -380,23 +414,21 @@ An **example** banner
|
|||
A **quote** banner
|
||||
{{< /admonition >}}
|
||||
|
||||
The `admonition` shortcode can use the following named parameters:
|
||||
The `admonition` shortcode has the following named parameters:
|
||||
|
||||
* **type**
|
||||
* **type** *[optional]* (**first** positional parameter)
|
||||
|
||||
Type of the `admonition` banner, default is **note**
|
||||
Type of the `admonition` banner, default is `note`.
|
||||
|
||||
* **title**
|
||||
* **title** *[optional]* (**second** positional parameter)
|
||||
|
||||
Title of the `admonition` banner, default is the type name of the banner
|
||||
Title of the `admonition` banner, default is the value of **type** parameter.
|
||||
|
||||
* **details**
|
||||
* **details** *[optional]* (**third** positional parameter)
|
||||
|
||||
if `true`, the content will be expandable/collapsible.
|
||||
Whether the content will be expandable/collapsible, default is `false`.
|
||||
|
||||
You can also use the positional parameters in the order of **type**, **title** and **details**.
|
||||
|
||||
Example `admonition` Input:
|
||||
Example `admonition` input:
|
||||
|
||||
```markdown
|
||||
{{</* admonition type=tip title="This is a tip" details=true */>}}
|
||||
|
|
@ -422,7 +454,7 @@ Just insert your mermaid code in the `mermaid` shortcode and that’s it.
|
|||
|
||||
#### Flowchart {#flowchart}
|
||||
|
||||
Example **flowchart** `mermaid` Input:
|
||||
Example **flowchart** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -446,7 +478,7 @@ graph LR;
|
|||
|
||||
#### Sequence Diagram {#sequence-diagram}
|
||||
|
||||
Example **sequence diagram** `mermaid` Input:
|
||||
Example **sequence diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -482,7 +514,7 @@ sequenceDiagram
|
|||
|
||||
#### GANTT {#gantt}
|
||||
|
||||
Example **GANTT** `mermaid` Input:
|
||||
Example **GANTT** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -526,7 +558,7 @@ gantt
|
|||
|
||||
#### Class Diagram {#class-diagram}
|
||||
|
||||
Example **class diagram** `mermaid` Input:
|
||||
Example **class diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -568,7 +600,7 @@ classDiagram
|
|||
|
||||
#### State Diagram {#state-diagram}
|
||||
|
||||
Example **state diagram** `mermaid` Input:
|
||||
Example **state diagram** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -596,7 +628,7 @@ stateDiagram
|
|||
|
||||
#### Git Graph {#git-graph}
|
||||
|
||||
Example **git graph** `mermaid` Input:
|
||||
Example **git graph** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -642,7 +674,7 @@ end
|
|||
|
||||
#### Pie {#pie}
|
||||
|
||||
Example **pie** `mermaid` Input:
|
||||
Example **pie** `mermaid` input:
|
||||
|
||||
```markdown
|
||||
{{</* mermaid */>}}
|
||||
|
|
@ -670,7 +702,7 @@ The basic chart types ECharts supports include [line series](https://echarts.apa
|
|||
|
||||
Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it.
|
||||
|
||||
Example `echarts` Input in `JSON` format:
|
||||
Example `echarts` input in `JSON` format:
|
||||
|
||||
```json
|
||||
{{</* echarts */>}}
|
||||
|
|
@ -1044,32 +1076,29 @@ The rendered output looks like this:
|
|||
|
||||
The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS).
|
||||
|
||||
The `music` shortcode can use the following named parameters:
|
||||
|
||||
|parameter |default |description|
|
||||
|:---------------|:------------:|:----------|
|
||||
|url |**require** |music URL|
|
||||
|name |options |music name|
|
||||
|artist |options |music artist|
|
||||
|cover |options |music cover URL|
|
||||
|server |**require** |music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`|
|
||||
|type |**require** |`song`, `playlist`, `album`, `search`, `artist`|
|
||||
|id |**require** |song id / playlist id / album id / search keyword|
|
||||
|auto |options |music link, support: `netease`, `tencent`, `xiami`|
|
||||
|fixed |`false` |enable fixed mode|
|
||||
|mini |`false` |enable mini mode|
|
||||
|autoplay |`false` |audio autoplay|
|
||||
|theme |`#a9a9b3` |main color|
|
||||
|loop |`all` |player loop play, values: 'all', 'one', 'none'|
|
||||
|order |`list` |player play order, values: 'list', 'random'|
|
||||
|volume |`0.7` |default volume, notice that player will remember user setting, default volume will not work after user set volume themselves|
|
||||
|mutex |`true` |prevent to play multiple player at the same time, pause other players when this player start play|
|
||||
|list-folded |`false` |indicate whether list should folded at first|
|
||||
|list-max-height |`340px` |list max height|
|
||||
There are three ways to use it the `music` shortcode.
|
||||
|
||||
#### Custom Music URL {#custom-music-url}
|
||||
|
||||
Example `music` Input:
|
||||
The `music` shortcode has the following named parameters by custom music URL:
|
||||
|
||||
* **server** *[required]*
|
||||
|
||||
URL of the custom music.
|
||||
|
||||
* **name** *[optional]*
|
||||
|
||||
Name of the custom music.
|
||||
|
||||
* **artist** *[optional]*
|
||||
|
||||
Artist of the custom music.
|
||||
|
||||
* **cover** *[required]*
|
||||
|
||||
URL of the custom music cover.
|
||||
|
||||
Example `music` input by custom music URL:
|
||||
|
||||
```markdown
|
||||
{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}}
|
||||
|
|
@ -1081,7 +1110,14 @@ The rendered output looks like this:
|
|||
|
||||
#### Music Platform URL Automatic Identification {#automatic-identification}
|
||||
|
||||
Example `music` Input:
|
||||
The `music` shortcode has one named parameter by music platform URL automatic identification:
|
||||
|
||||
* **auto** *[required]* (**first** positional parameter)
|
||||
|
||||
URL of the music platform URL for automatic identification,
|
||||
which supports `netease`, `tencent` and `xiami` music platform.
|
||||
|
||||
Example `music` input by music platform URL automatic identification:
|
||||
|
||||
```markdown
|
||||
{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
|
||||
|
|
@ -1095,7 +1131,25 @@ The rendered output looks like this:
|
|||
|
||||
#### Custom Server, Type and ID {#custom-server}
|
||||
|
||||
Example `music` Input:
|
||||
The `music` shortcode has the following named parameters by custom music platform:
|
||||
|
||||
* **server** *[required]* (**first** positional parameter)
|
||||
|
||||
[`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
|
||||
|
||||
Music platform.
|
||||
|
||||
* **type** *[required]* (**second** positional parameter)
|
||||
|
||||
[`song`, `playlist`, `album`, `search`, `artist`]
|
||||
|
||||
Type of the music.
|
||||
|
||||
* **id** *[required]* (**third** positional parameter)
|
||||
|
||||
Song ID, or playlist ID, or album ID, or search keyword, or artist ID.
|
||||
|
||||
Example `music` input by custom music platform:
|
||||
|
||||
```markdown
|
||||
{{</* music server="netease" type="song" id="1868553" */>}}
|
||||
|
|
@ -1107,6 +1161,56 @@ The rendered output looks like this:
|
|||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
#### Other Parameters
|
||||
|
||||
The `music` shortcode has other named parameters applying to the above three ways:
|
||||
|
||||
* **theme** *[optional]*
|
||||
|
||||
Main color of the music player, default is `#a9a9b3`.
|
||||
|
||||
* **fixed** *[optional]*
|
||||
|
||||
Whether to enable fixed mode, default is `false`.
|
||||
|
||||
* **mini** *[optional]*
|
||||
|
||||
Whether to enable mini mode, default is `false`.
|
||||
|
||||
* **autoplay** *[optional]*
|
||||
|
||||
Whether to autoplay music, default is `false`.
|
||||
|
||||
* **volume** *[optional]*
|
||||
|
||||
Default volume when the player is first opened, which will be remembered in the browser, default is `0.7`.
|
||||
|
||||
* **mutex** *[optional]*
|
||||
|
||||
Whether to pause other players when this player starts playing, default is `true`.
|
||||
|
||||
The `music` shortcode has the following named parameters only applying to the type of music list:
|
||||
|
||||
* **loop** *[optional]*
|
||||
|
||||
[`all`, `one`, `none`]
|
||||
|
||||
Loop mode of the music list, default is `none`.
|
||||
|
||||
* **order** *[optional]*
|
||||
|
||||
[`list`, `random`]
|
||||
|
||||
Play order of the music list, default is `list`.
|
||||
|
||||
* **list-folded** *[optional]*
|
||||
|
||||
Whether the music list should be folded at first, default is `false`.
|
||||
|
||||
* **list-max-height** *[optional]*
|
||||
|
||||
Max height of the music list, default is `340px`.
|
||||
|
||||
### `bilibili`
|
||||
|
||||
The `bilibili` shortcode embeds a responsive video player for bilibili videos.
|
||||
|
|
@ -1117,7 +1221,7 @@ When the video only has one part, only the `av` ID of the video is required, e.g
|
|||
https://www.bilibili.com/video/av47027633
|
||||
```
|
||||
|
||||
Example `bilibili` Input:
|
||||
Example `bilibili` input:
|
||||
|
||||
```markdown
|
||||
{{</* bilibili 47027633 */>}}
|
||||
|
|
@ -1136,7 +1240,7 @@ When the video has multiple parts, in addition to the `av` ID of the video,
|
|||
https://www.bilibili.com/video/av36570401?p=3
|
||||
```
|
||||
|
||||
Example `bilibili` Input with `p`:
|
||||
Example `bilibili` input with `p`:
|
||||
|
||||
```markdown
|
||||
{{</* bilibili 36570401 3 */>}}
|
||||
|
|
@ -1158,7 +1262,7 @@ Just insert your content in the `typeit` shortcode and that’s it.
|
|||
|
||||
Simple content is allowed in `Markdown` format and **without** rich block content such as images and more...
|
||||
|
||||
Example `typeit` Input:
|
||||
Example `typeit` input:
|
||||
|
||||
```markdown
|
||||
{{</* typeit */>}}
|
||||
|
|
@ -1174,7 +1278,7 @@ This is a *paragraph* with **typing animation** based on [TypeIt](https://typeit
|
|||
|
||||
Alternatively, you can use custom **HTML tags**.
|
||||
|
||||
Example `typeit` Input with `h4` tag:
|
||||
Example `typeit` input with `h4` tag:
|
||||
|
||||
```markdown
|
||||
{{</* typeit tag=h4 */>}}
|
||||
|
|
@ -1192,7 +1296,7 @@ This is a *paragraph* with **typing animation** based on [TypeIt](https://typeit
|
|||
|
||||
Code content is allowed and will be highlighted by named parameter `code` for the type of code language.
|
||||
|
||||
Example `typeit` Input with `code`:
|
||||
Example `typeit` input with `code`:
|
||||
|
||||
```markdown
|
||||
{{</* typeit code=java */>}}
|
||||
|
|
@ -1221,7 +1325,7 @@ But sometimes you may want to start a set of `typeit` contents in order.
|
|||
|
||||
A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence.
|
||||
|
||||
Example `typeit` Input with `group`:
|
||||
Example `typeit` input with `group`:
|
||||
|
||||
```markdown
|
||||
{{</* typeit group=paragraph */>}}
|
||||
|
|
|
|||
|
|
@ -202,8 +202,11 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
|
|||
|
||||
`style` shortcode 用来在你的文章中插入自定义样式.
|
||||
|
||||
`style` shortcode 使用两个参数.
|
||||
第一个是自定义样式的内容, 第二个是包裹你要更改样式的内容的 HTML 标签, 默认值是 `p`.
|
||||
`style` shortcode 有两个位置参数.
|
||||
|
||||
第一个参数是自定义样式的内容.
|
||||
|
||||
第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 `p`.
|
||||
|
||||
一个 `style` 示例:
|
||||
|
||||
|
|
@ -228,31 +231,31 @@ This is a right-aligned paragraph.
|
|||
`link` shortcode 是 [Markdown 链接语法](../basic-markdown-syntax/#links) 的替代.
|
||||
`link` shortcode 可以提供一些其它的功能并且可以在代码块中使用.
|
||||
|
||||
`link` shortcode 可以使用以下命名参数:
|
||||
`link` shortcode 有以下命名参数:
|
||||
|
||||
* **href**
|
||||
* **href** *[必需]* (**第一个**位置参数)
|
||||
|
||||
链接的目标.
|
||||
|
||||
* **content**
|
||||
* **content** *[可选]* (**第二个**位置参数)
|
||||
|
||||
链接的内容 (允许 HTML 格式).
|
||||
链接的内容, 默认值是 **href** 参数的值.
|
||||
|
||||
* **title**
|
||||
*支持 Markdown 或者 HTML 格式.*
|
||||
|
||||
* **title** *[可选]* (**第三个**位置参数)
|
||||
|
||||
HTML `a` 标签 的 `title` 属性, 当悬停在链接上会显示的提示.
|
||||
|
||||
* **rel**
|
||||
* **rel** *[可选]*
|
||||
|
||||
HTML `a` 标签 的 `rel` 补充属性.
|
||||
|
||||
* **class**
|
||||
* **class** *[可选]*
|
||||
|
||||
HTML `a` 标签 的 `class` 属性.
|
||||
|
||||
#### 基本 `link`
|
||||
|
||||
一个基本的 `link` 示例:
|
||||
一个 `link` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* link "https://assemble.io" */>}}
|
||||
|
|
@ -274,7 +277,7 @@ This is a right-aligned paragraph.
|
|||
* {{< link "mailto:contact@revolunet.com" >}}
|
||||
* {{< link "https://assemble.io" Assemble >}}
|
||||
|
||||
#### 添加一个标题
|
||||
一个带有标题的 `link` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
|
||||
|
|
@ -290,45 +293,75 @@ This is a right-aligned paragraph.
|
|||
|
||||
`image` shortcode 是 [`figure` shortcode](#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.
|
||||
|
||||
`image` shortcode 可以使用以下命名参数:
|
||||
`image` shortcode 有以下命名参数:
|
||||
|
||||
* **src**
|
||||
* **src** *[必需]* (**第一个**位置参数)
|
||||
|
||||
图片的 URL.
|
||||
|
||||
* **description**
|
||||
* **alt** *[可选]* (**第二个**位置参数)
|
||||
|
||||
图片描述.
|
||||
图片无法显示时的替代文本, 默认值是 **src** 参数的值.
|
||||
|
||||
* **title**
|
||||
*支持 Markdown 或者 HTML 格式.*
|
||||
|
||||
* **caption** *[可选]* (**第三个**位置参数)
|
||||
|
||||
图片标题.
|
||||
|
||||
* **class**
|
||||
*支持 Markdown 或者 HTML 格式.*
|
||||
|
||||
* **title** *[可选]*
|
||||
|
||||
当悬停在图片上会显示的提示.
|
||||
|
||||
* **class** *[可选]*
|
||||
|
||||
HTML `figure` 标签的 `class` 属性.
|
||||
|
||||
* **src_s**
|
||||
* **src_s** *[可选]*
|
||||
|
||||
图片缩略图的 URL, 用在画廊模式中.
|
||||
图片缩略图的 URL, 用在画廊模式中, 默认值是 **src** 参数的值.
|
||||
|
||||
* **src_l**
|
||||
* **src_l** *[可选]*
|
||||
|
||||
高清图片的 URL, 用在画廊模式中.
|
||||
高清图片的 URL, 用在画廊模式中, 默认值是 **src** 参数的值.
|
||||
|
||||
* **height** *[可选]*
|
||||
|
||||
图片的 `height` 属性.
|
||||
|
||||
* **width** *[可选]*
|
||||
|
||||
图片的 `width` 属性.
|
||||
|
||||
* **linked** *[可选]*
|
||||
|
||||
图片是否需要被链接, 默认值是 `true`.
|
||||
|
||||
* **rel** *[可选]*
|
||||
|
||||
HTML `a` 标签 的 `rel` 补充属性, 仅在 **linked** 属性设置成 `true` 时有效.
|
||||
|
||||
* **large** *[可选]*
|
||||
|
||||
图片是否是大尺寸的, 用来加载动画, 仅在 **linked** 属性设置成 `false` 时有效.
|
||||
|
||||
一个 `image` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}}
|
||||
|
||||
### `admonition`
|
||||
|
||||
`admonition` shortcode 支持 **12** 种 帮助你在页面中插入提示的横幅. 同时, `Markdown` 格式文本是支持的.
|
||||
`admonition` shortcode 支持 **12** 种 帮助你在页面中插入提示的横幅.
|
||||
|
||||
*支持 Markdown 或者 HTML 格式.*
|
||||
|
||||
{{< admonition >}}
|
||||
一个 **注意** 横幅
|
||||
|
|
@ -378,21 +411,19 @@ This is a right-aligned paragraph.
|
|||
一个 **引用** 横幅
|
||||
{{< /admonition >}}
|
||||
|
||||
`admonition` shortcode 可以使用以下命名参数:
|
||||
`admonition` shortcode 有以下命名参数:
|
||||
|
||||
* **type**
|
||||
* **type** *[必需]* (**第一个**位置参数)
|
||||
|
||||
`admonition` 横幅的类型, 默认值是 **note**
|
||||
`admonition` 横幅的类型, 默认值是 `note`.
|
||||
|
||||
* **title**
|
||||
* **title** *[可选]* (**第二个**位置参数)
|
||||
|
||||
`admonition` 横幅的标题, 默认值是横幅的类型名称
|
||||
`admonition` 横幅的标题, 默认值是 **type** 参数的值.
|
||||
|
||||
* **details**
|
||||
* **details** *[可选]* (**第三个**位置参数)
|
||||
|
||||
如果设为 `true`, 横幅内容将是可展开/可折叠.
|
||||
|
||||
你还可以按 **type**, **title** 和 **details** 的顺序使用位置参数.
|
||||
横幅内容是否可展开/可折叠, 默认值是 `false`.
|
||||
|
||||
一个 `admonition` 示例:
|
||||
|
||||
|
|
@ -1042,6 +1073,8 @@ data = [
|
|||
|
||||
`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 提供了一个内嵌的响应式音乐播放器.
|
||||
|
||||
有三种方式使用 `music` shortcode.
|
||||
|
||||
`music` shortcode 可以使用以下命名参数:
|
||||
|
||||
|参数 |默认值 |描述|
|
||||
|
|
@ -1067,7 +1100,25 @@ data = [
|
|||
|
||||
#### 自定义音乐 URL {#custom-music-url}
|
||||
|
||||
一个 `music` 示例:
|
||||
`music` shortcode 有以下命名参数来使用自定义音乐 URL:
|
||||
|
||||
* **server** *[必需]*
|
||||
|
||||
音乐的链接.
|
||||
|
||||
* **type** *[可选]*
|
||||
|
||||
音乐的名称.
|
||||
|
||||
* **artist** *[可选]*
|
||||
|
||||
音乐的创作者.
|
||||
|
||||
* **cover** *[可选]*
|
||||
|
||||
音乐的封面链接.
|
||||
|
||||
一个使用自定义音乐 URL 的 `music` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}}
|
||||
|
|
@ -1077,9 +1128,15 @@ data = [
|
|||
|
||||
{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}}
|
||||
|
||||
#### 来自音乐平台的 URL 自动识别 {#automatic-identification}
|
||||
#### 音乐平台 URL 的自动识别 {#automatic-identification}
|
||||
|
||||
一个 `music` 示例:
|
||||
`music` shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:
|
||||
|
||||
* **auto** *[必需]]* (**第一个**位置参数)
|
||||
|
||||
用来自动识别的音乐平台 URL, 支持 `netease`, `tencent` 和 `xiami` 平台.
|
||||
|
||||
一个使用音乐平台 URL 的自动识别的 `music` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
|
||||
|
|
@ -1091,9 +1148,27 @@ data = [
|
|||
|
||||
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
|
||||
|
||||
#### 自定义平台, 类型和 ID {#custom-server}
|
||||
#### 自定义音乐平台, 类型和 ID {#custom-server}
|
||||
|
||||
一个 `music` 示例:
|
||||
`music` shortcode 有以下命名参数来使用自定义音乐平台:
|
||||
|
||||
* **server** *[必需]* (**第一个**位置参数)
|
||||
|
||||
[`netease`, `tencent`, `kugou`, `xiami`, `baidu`]
|
||||
|
||||
音乐平台.
|
||||
|
||||
* **type** *[必需]* (**第二个**位置参数)
|
||||
|
||||
[`song`, `playlist`, `album`, `search`, `artist`]
|
||||
|
||||
音乐类型.
|
||||
|
||||
* **id** *[必需]* (**第三个**位置参数)
|
||||
|
||||
歌曲 ID, 或者播放列表 ID, 或者专辑 ID, 或者搜索关键词, 或者创作者 ID.
|
||||
|
||||
一个使用自定义音乐平台的 `music` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* music server="netease" type="song" id="1868553" */>}}
|
||||
|
|
@ -1105,6 +1180,56 @@ data = [
|
|||
|
||||
{{< music netease song 1868553 >}}
|
||||
|
||||
#### 其它参数
|
||||
|
||||
`music` shortcode 有一些可以应用于以上三种方式的其它命名参数:
|
||||
|
||||
* **theme** *[可选]*
|
||||
|
||||
音乐播放器的主题色, 默认值是 `#a9a9b3`.
|
||||
|
||||
* **fixed** *[可选]*
|
||||
|
||||
是否开启固定模式, 默认值是 `false`.
|
||||
|
||||
* **mini** *[可选]*
|
||||
|
||||
是否开启迷你模式, 默认值是 `false`.
|
||||
|
||||
* **autoplay** *[可选]*
|
||||
|
||||
是否自动播放音乐, 默认值是 `false`.
|
||||
|
||||
* **volume** *[可选]*
|
||||
|
||||
第一次打开播放器时的默认音量, 会被保存在浏览器缓存中, 默认值是 `0.7`.
|
||||
|
||||
* **mutex** *[可选]*
|
||||
|
||||
是否自动暂停其它播放器, 默认值是 `true`.
|
||||
|
||||
`music` shortcode 还有一些只适用于音乐列表方式的其它命名参数:
|
||||
|
||||
* **loop** *[可选]*
|
||||
|
||||
[`all`, `one`, `none`]
|
||||
|
||||
音乐列表的循环模式, 默认值是 `none`.
|
||||
|
||||
* **order** *[可选]*
|
||||
|
||||
[`list`, `random`]
|
||||
|
||||
音乐列表的播放顺序, 默认值是 `list`.
|
||||
|
||||
* **list-folded** *[可选]*
|
||||
|
||||
初次打开的时候音乐列表是否折叠, 默认值是 `false`.
|
||||
|
||||
* **list-max-height** *[可选]*
|
||||
|
||||
音乐列表的最大高度, 默认值是 `340px`.
|
||||
|
||||
### `bilibili`
|
||||
|
||||
`bilibili` shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
{{- with .Title -}}
|
||||
<figure>
|
||||
{{- partial "plugin/image.html" (dict "src" $.Destination "title" $.Title "description" $.Text "lightgallery" true "scratch" ($.Page.Scratch.Get "scratch")) -}}
|
||||
{{- partial "plugin/image.html" (dict "src" $.Destination "alt" $.Text "caption" . "linked" true) -}}
|
||||
<figcaption class="image-caption">
|
||||
{{- . | safeHTML -}}
|
||||
</figcaption>
|
||||
</figure>
|
||||
{{- else -}}
|
||||
{{- partial "plugin/image.html" (dict "src_s" .Destination "title" .Title "description" .Text "lightgallery" false "scratch" (.Page.Scratch.Get "scratch")) -}}
|
||||
{{- partial "plugin/image.html" (dict "src" .Destination "alt" .Text) -}}
|
||||
{{- end -}}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
{{- with .Params.featuredImage -}}
|
||||
<div class="featured-image-preview">
|
||||
{{- $image := $.Params.featuredImagePreview | default . -}}
|
||||
{{- partial "plugin/image.html" (dict "src" $image "description" $.Description "scratch" $scratch) -}}
|
||||
{{- partial "plugin/image.html" (dict "src" $image "alt" $.Description "large" true) -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
{{- end -}}
|
||||
{{- with $avatar -}}
|
||||
<div class="home-avatar">
|
||||
<a href="/posts">
|
||||
{{- partial "plugin/image.html" (dict "src_s" . "title" "avatar" "description" (T "home") "scratch" $scratch) -}}
|
||||
<a href="/posts" title="{{ T `home` }}">
|
||||
{{- partial "plugin/image.html" (dict "src" . "alt" (T "home")) -}}
|
||||
</a>
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,28 @@
|
|||
{{- /* lazysizes and lightgallery.js */ -}}
|
||||
{{- $loading := resources.Get "svg/loading.svg" | minify -}}
|
||||
{{- $small := .src_s | default .src -}}
|
||||
{{- $large := .src_l | default .src -}}
|
||||
{{- $loading := resources.Get "svg/loading.svg" | minify -}}
|
||||
{{- if not .src | and .src_s -}}
|
||||
{{- $loading = resources.Get "svg/loading.small.svg" | minify -}}
|
||||
{{- end -}}
|
||||
{{- if .lightgallery -}}
|
||||
<a class="lightgallery" href="{{ $large | safeURL }}" title="{{ .description }}" data-thumbnail="{{ $small | safeURL }}"{{ if .title }} data-sub-html="<h2>{{ .title }}</h2><p>{{ .description }}</p>"{{ end }}>
|
||||
{{- $alt := .alt | default .src -}}
|
||||
{{- if .linked -}}
|
||||
<a class="lightgallery" href="{{ $large | safeURL }}" title="{{ .title | default $alt }}" data-thumbnail="{{ $small | safeURL }}"{{ with .caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.alt }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .rel }} rel="{{ . }}"{{ end }}>
|
||||
<img
|
||||
class="lazyload"
|
||||
src="{{ $loading.RelPermalink | safeURL }}"
|
||||
data-sizes="auto"
|
||||
data-srcset="{{ $small | safeURL }}, {{ .src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
|
||||
data-src="{{ .src | safeURL }}"
|
||||
alt="{{ .title | default .description }}" />
|
||||
alt="{{ $alt }}"{{ with .height }} height="{{ . }}"{{ end }}{{ with .width }} width="{{ . }}"{{ end }} />
|
||||
</a>
|
||||
{{- with .scratch -}}
|
||||
{{- .Set "lightgallery" true -}}
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
{{- if not .large -}}
|
||||
{{- $loading = resources.Get "svg/loading.small.svg" | minify -}}
|
||||
{{- end -}}
|
||||
<img
|
||||
class="lazyload"
|
||||
src="{{ $loading.RelPermalink | safeURL }}"
|
||||
data-sizes="auto"
|
||||
data-srcset="{{ $small | safeURL }}, {{ .src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
|
||||
data-src="{{ .src | safeURL }}"
|
||||
alt="{{ .title | default .description }}"
|
||||
title="{{ .description }}" />
|
||||
alt="{{ $alt }}"
|
||||
title="{{ .title | default $alt }}"{{ with .height }} height="{{ . }}"{{ end }}{{ with .width }} width="{{ . }}"{{ end }} />
|
||||
{{- end -}}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
{{- /* Featured image */ -}}
|
||||
{{- with .Params.featuredImage -}}
|
||||
<div class="featured-image">
|
||||
{{- partial "plugin/image.html" (dict "src" . "description" $.Description "scratch" $scratch) -}}
|
||||
{{- partial "plugin/image.html" (dict "src" . "alt" $.Description "large" true) -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,28 @@
|
|||
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
|
||||
{{- $options := .Get "src" | dict "src" -}}
|
||||
{{- $options = .Get "src_s" | dict "src_s" | merge $options -}}
|
||||
{{- $options = .Get "src_l" | dict "src_l" | merge $options -}}
|
||||
{{- $title := .Get "title" | $.Page.RenderString -}}
|
||||
{{- $options = $title | dict "title" | merge $options -}}
|
||||
{{- $description := .Get "description" | $.Page.RenderString -}}
|
||||
{{- $options = $description | dict "description" | merge $options -}}
|
||||
{{- $lightgallery := ne .Page.Site.Params.page.lightgallery false | and (ne .Page.Params.lightgallery false) -}}
|
||||
{{- $options = $lightgallery | dict "lightgallery" | merge $options -}}
|
||||
{{- $options = .Page.Scratch.Get "scratch" | dict "scratch" | merge $options -}}
|
||||
{{- partial "plugin/image.html" $options -}}
|
||||
{{- with $title | default $description -}}
|
||||
{{- $options := cond .IsNamedParams (.Get "src") (.Get 0) | dict "src" -}}
|
||||
{{- $options = cond .IsNamedParams (.Get "alt") (.Get 1) | .Page.RenderString | dict "alt" | merge $options -}}
|
||||
{{- $caption := cond .IsNamedParams (.Get "caption") (.Get 2) | .Page.RenderString -}}
|
||||
{{- $options = dict "caption" $caption | merge $options -}}
|
||||
|
||||
{{- if .IsNamedParams -}}
|
||||
{{- $options = dict "title" (.Get "title") | merge $options -}}
|
||||
{{- $options = dict "src_s" (.Get "src_s") | merge $options -}}
|
||||
{{- $options = dict "src_l" (.Get "src_l") | merge $options -}}
|
||||
{{- $options = dict "height" (.Get "height") | merge $options -}}
|
||||
{{- $options = dict "width" (.Get "width") | merge $options -}}
|
||||
{{- $options = dict "large" (.Get "large") | merge $options -}}
|
||||
{{- $options = .Get "linked" | ne false | dict "linked" | merge $options -}}
|
||||
{{- $options = dict "rel" (.Get "rel") | merge $options -}}
|
||||
{{- else -}}
|
||||
{{- $options = cond $caption true false | dict "linked" | merge $options -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- with $caption -}}
|
||||
<figure{{ with cond $.IsNamedParams ($.Get "class") "" }} class="{{ . }}"{{ end }}>
|
||||
{{- partial "plugin/image.html" $options -}}
|
||||
<figcaption class="image-caption">
|
||||
{{- . | safeHTML -}}
|
||||
</figcaption>
|
||||
{{- end -}}
|
||||
</figure>
|
||||
</figure>
|
||||
{{- else -}}
|
||||
{{- partial "plugin/image.html" $options -}}
|
||||
{{- end -}}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
{{- $options := dict -}}
|
||||
{{- $options := cond .IsNamedParams (.Get "href") (.Get 0) | dict "href" -}}
|
||||
{{- if .IsNamedParams -}}
|
||||
{{- $options = dict "href" (.Get "href") | merge $options -}}
|
||||
{{- $options = dict "title" (.Get "title") | merge $options -}}
|
||||
{{- $options = dict "rel" (.Get "rel") | merge $options -}}
|
||||
{{- $options = dict "class" (.Get "class") | merge $options -}}
|
||||
{{- $options = dict "content" (.Get "content") | merge $options -}}
|
||||
{{- $options = dict "title" (.Get "title") | merge $options -}}
|
||||
{{- $options = dict "class" (.Get "class") | merge $options -}}
|
||||
{{- $options = dict "rel" (.Get "rel") | merge $options -}}
|
||||
{{- else -}}
|
||||
{{- $options = dict "href" (.Get 0) | merge $options -}}
|
||||
{{- $options = dict "content" (.Get 1 | default (.Get 0)) | merge $options -}}
|
||||
{{- $options = dict "title" (.Get 2) | merge $options -}}
|
||||
{{- end -}}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue