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

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}