feat(content): support complete local resource references (#388)

This commit is contained in:
Dillon
2020-05-28 17:05:37 +08:00
committed by GitHub
parent 0c1f7d0ef8
commit aa48df5edd
93 changed files with 872 additions and 714 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

View File

@@ -7,12 +7,14 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo."
images: ["/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
- name: "featured-image-preview"
src: "featured-image-preview.jpg"
tags: ["shortcodes"]
categories: ["documentation"]
featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
lightgallery: true
---
@@ -59,6 +61,8 @@ 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.
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
The `link` shortcode has the following named parameters:
* **href** *[required]* (**first** positional parameter)
@@ -123,6 +127,8 @@ The rendered output looks like this (hover over the link, there should be a tool
`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes#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).
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
The `image` shortcode has the following named parameters:
* **src** *[required]* (**first** positional parameter)
@@ -173,19 +179,15 @@ The `image` shortcode has the following named parameters:
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-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
```
The rendered output looks like this:
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
## 4 admonition
@@ -997,6 +999,8 @@ There are three ways to use it the `music` shortcode.
### 8.1 Custom Music URL {#custom-music-url}
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
The `music` shortcode has the following named parameters by custom music URL:
* **server** *[required]*
@@ -1018,12 +1022,12 @@ The `music` shortcode has the following named parameters by custom music URL:
Example `music` input by custom music URL:
```markdown
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
```
The rendered output looks like this:
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
### 8.2 Music Platform URL Automatic Identification {#automatic-identification}

View File

@@ -7,12 +7,14 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "Le thème LoveIt fournit plusieurs shortcodes en plus de ceux intégrés dans Hugo."
images: ["/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
- name: "featured-image-preview"
src: "featured-image-preview.jpg"
tags: ["shortcodes"]
categories: ["documentation"]
featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
lightgallery: true
---
@@ -64,6 +66,8 @@ 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.
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
The `link` shortcode has the following named parameters:
* **href** *[required]* (**first** positional parameter)
@@ -128,6 +132,8 @@ The rendered output looks like this (hover over the link, there should be a tool
`image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes#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).
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
The `image` shortcode has the following named parameters:
* **src** *[required]* (**first** positional parameter)
@@ -178,19 +184,15 @@ The `image` shortcode has the following named parameters:
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-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
```
The rendered output looks like this:
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
## 4 admonition
@@ -1002,6 +1004,8 @@ There are three ways to use it the `music` shortcode.
### 8.1 Custom Music URL {#custom-music-url}
{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
The `music` shortcode has the following named parameters by custom music URL:
* **server** *[required]*
@@ -1023,12 +1027,12 @@ The `music` shortcode has the following named parameters by custom music URL:
Example `music` input by custom music URL:
```markdown
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
```
The rendered output looks like this:
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
### 8.2 Music Platform URL Automatic Identification {#automatic-identification}

View File

@@ -7,12 +7,14 @@ draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode."
images: ["/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"]
resources:
- name: "featured-image"
src: "featured-image.jpg"
- name: "featured-image-preview"
src: "featured-image-preview.jpg"
tags: ["shortcodes"]
categories: ["documentation"]
featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
lightgallery: true
mapbox:
@@ -62,6 +64,8 @@ This is a **right-aligned** paragraph.
`link` shortcode 是 [Markdown 链接语法](../basic-markdown-syntax#links) 的替代.
`link` shortcode 可以提供一些其它的功能并且可以在代码块中使用.
{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
`link` shortcode 有以下命名参数:
* **href** *[必需]* (**第一个**位置参数)
@@ -126,6 +130,8 @@ This is a **right-aligned** paragraph.
`image` shortcode 是 [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.
{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
`image` shortcode 有以下命名参数:
* **src** *[必需]* (**第一个**位置参数)
@@ -176,19 +182,15 @@ This is a **right-aligned** paragraph.
HTML `a` 标签 的 `rel` 补充属性, 仅在 **linked** 属性设置成 `true` 时有效.
* **large** *[可选]*
图片是否是大尺寸的, 用来加载动画, 仅在 **linked** 属性设置成 `false` 时有效.
一个 `image` 示例:
```markdown
{{</* image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
```
呈现的输出效果如下:
{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
## 4 admonition
@@ -1000,6 +1002,8 @@ data = [
### 8.1 自定义音乐 URL {#custom-music-url}
{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
`music` shortcode 有以下命名参数来使用自定义音乐 URL:
* **server** *[必需]*
@@ -1021,12 +1025,12 @@ data = [
一个使用自定义音乐 URL 的 `music` 示例:
```markdown
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
```
呈现的输出效果如下:
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
### 8.2 音乐平台 URL 的自动识别 {#automatic-identification}