LoveIt/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md

weight	title	date	lastmod	draft	author	authorLink	description	images	resources	tags	categories	lightgallery	math
4	主题文档 - 扩展 Shortcodes	2020-03-03T16:29:59+08:00	2020-03-03T16:29:59+08:00	false	Dillon	https://dillonzq.com	LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.		name src featured-image featured-image.jpg name src featured-image-preview featured-image-preview.jpg	shortcodes	documentation	true	enable true

LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.

1 style

{{< version 0.2.0 changed >}}

{{< admonition >}} Hugo extended 版本对于 style shortcode 是必需的. {{< /admonition >}}

style shortcode 用来在你的文章中插入自定义样式.

style shortcode 有两个位置参数.

第一个参数是自定义样式的内容. 它支持 :(fab fa-sass fa-fw): SASS 中的嵌套语法, 并且 & 指代这个父元素.

第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 div.

一个 style 示例:

{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
This is a **right-aligned** paragraph.
{{</* /style */>}}

呈现的输出效果如下:

{{< style "text-align:right; strong{color:#00b1ff;}" >}} This is a right-aligned paragraph. {{< /style >}}

2 link

{{< version 0.2.0 >}}

link shortcode 是 Markdown 链接语法 的替代. link shortcode 可以提供一些其它的功能并且可以在代码块中使用.

{{< version 0.2.10 >}} 支持本地资源引用的完整用法.

link shortcode 有以下命名参数:

• href [必需] (第一个位置参数)

  链接的目标.

• content [可选] (第二个位置参数)

  链接的内容, 默认值是 href 参数的值.

  支持 Markdown 或者 HTML 格式.

• title [可选] (第三个位置参数)

  HTML a 标签 的 title 属性, 当悬停在链接上会显示的提示.

• rel [可选]

  HTML a 标签 的 rel 补充属性.

• class [可选]

  HTML a 标签 的 class 属性.

一个 link 示例:

{{</* link "https://assemble.io" */>}}
或者
{{</* link href="https://assemble.io" */>}}

{{</* link "mailto:contact@revolunet.com" */>}}
或者
{{</* link href="mailto:contact@revolunet.com" */>}}

{{</* link "https://assemble.io" Assemble */>}}
或者
{{</* link href="https://assemble.io" content=Assemble */>}}

呈现的输出效果如下:

• {{< link "https://assemble.io" >}}
• {{< link "mailto:contact@revolunet.com" >}}
• {{< link "https://assemble.io" Assemble >}}

一个带有标题的 link 示例:

{{</* link "https://github.com/upstage/" Upstage "Visit Upstage!" */>}}
或者
{{</* link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" */>}}

呈现的输出效果如下 (将鼠标悬停在链接上，会有一行提示):

{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}

3 image

{{< version 0.2.0 changed >}}

image shortcode 是 figure shortcode 的替代. image shortcode 可以充分利用 lazysizes 和 lightGallery 两个依赖库.

{{< version 0.2.10 >}} 支持本地资源引用的完整用法.

image shortcode 有以下命名参数:

• src [必需] (第一个位置参数)

  图片的 URL.

• alt [可选] (第二个位置参数)

  图片无法显示时的替代文本, 默认值是 src 参数的值.

  支持 Markdown 或者 HTML 格式.

• caption [可选] (第三个位置参数)

  图片标题.

  支持 Markdown 或者 HTML 格式.

• title [可选]

  当悬停在图片上会显示的提示.

• class [可选]

  HTML figure 标签的 class 属性.

• src_s [可选]

  图片缩略图的 URL, 用在画廊模式中, 默认值是 src 参数的值.

• src_l [可选]

  高清图片的 URL, 用在画廊模式中, 默认值是 src 参数的值.

• height [可选]

  图片的 height 属性.

• width [可选]

  图片的 width 属性.

• linked [可选]

  图片是否需要被链接, 默认值是 true.

• rel [可选]

  HTML a 标签 的 rel 补充属性, 仅在 linked 属性设置成 true 时有效.

一个 image 示例:

{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/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

admonition shortcode 支持 12 种 帮助你在页面中插入提示的横幅.

支持 Markdown 或者 HTML 格式.

{{< admonition >}} 一个 注意 横幅 {{< /admonition >}}

{{< admonition abstract >}} 一个 摘要 横幅 {{< /admonition >}}

{{< admonition info >}} 一个 信息 横幅 {{< /admonition >}}

{{< admonition tip >}} 一个 技巧 横幅 {{< /admonition >}}

{{< admonition success >}} 一个 成功 横幅 {{< /admonition >}}

{{< admonition question >}} 一个 问题 横幅 {{< /admonition >}}

{{< admonition warning >}} 一个 警告 横幅 {{< /admonition >}}

{{< admonition failure >}} 一个 失败 横幅 {{< /admonition >}}

{{< admonition danger >}} 一个 危险 横幅 {{< /admonition >}}

{{< admonition bug >}} 一个 Bug 横幅 {{< /admonition >}}

{{< admonition example >}} 一个 示例 横幅 {{< /admonition >}}

{{< admonition quote >}} 一个 引用 横幅 {{< /admonition >}}

admonition shortcode 有以下命名参数:

• type [必需] (第一个位置参数)

  admonition 横幅的类型, 默认值是 note.

• title [可选] (第二个位置参数)

  admonition 横幅的标题, 默认值是 type 参数的值.

• open [可选] (第三个位置参数) {{< version 0.2.0 changed >}}

  横幅内容是否默认展开, 默认值是 true.

一个 admonition 示例:

{{</* admonition type=tip title="This is a tip" open=false */>}}
一个 **技巧** 横幅
{{</* /admonition */>}}
或者
{{</* admonition tip "This is a tip" false */>}}
一个 **技巧** 横幅
{{</* /admonition */>}}

呈现的输出效果如下:

{{< admonition tip "This is a tip" false >}} 一个 技巧 横幅 {{< /admonition >}}

5 mermaid

mermaid shortcode 使用 Mermaid 库提供绘制图表和流程图的功能.

完整文档请查看页面 主题文档 - mermaid Shortcode.

6 echarts

echarts shortcode 使用 ECharts 库提供数据可视化的功能.

完整文档请查看页面 主题文档 - echarts Shortcode.

7 mapbox

{{< version 0.2.0 >}}

mapbox shortcode 使用 Mapbox GL JS 库提供互动式地图的功能.

完整文档请查看页面 主题文档 - mapbox Shortcode.

8 music

music shortcode 基于 APlayer 和 MetingJS 库提供了一个内嵌的响应式音乐播放器.

完整文档请查看页面 主题文档 - music Shortcode.

9 bilibili

{{< version 0.2.0 changed >}}

bilibili shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.

完整文档请查看页面 主题文档 - bilibili Shortcode.

10 typeit

typeit shortcode 基于 TypeIt 库提供了打字动画.

完整文档请查看页面 主题文档 - typeit Shortcode.

11 script

{{< version 0.2.8 >}}

script shortcode 用来在你的文章中插入 :(fab fa-js fa-fw): Javascript 脚本.

{{< admonition >}} 脚本内容可以保证在所有的第三方库加载之后按顺序执行. 所以你可以自由地使用第三方库. {{< /admonition >}}

一个 script 示例:

{{</* script */>}}
console.log('Hello LoveIt!');
{{</* /script */>}}

你可以在开发者工具的控制台中看到输出.

{{< script >}} console.log('Hello LoveIt!'); {{< /script >}}

12 raw

raw shortcode 用来在你的文章中插入原始 :(fab fa-html5 fa-fw): HTML 内容.

一个 raw 示例:

行内公式: {{</* raw */>}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{</* /raw */>}}

公式块:

{{</* raw */>}}
\[ a=b+c \\ d+e=f \]
{{</* /raw */>}}

原始的带有 Markdown 语法的内容: {{</* raw */>}}**Hello**{{</* /raw */>}}

呈现的输出效果如下:

行内公式: {{< raw >}}(\mathbf{E}=\sum_{i} \mathbf{E}{i}=\mathbf{E}{1}+\mathbf{E}{2}+\mathbf{E}{3}+\cdots){{< /raw >}}

公式块:

{{< raw>}}

 a=b+c \\ d+e=f 

{{< /raw >}}

原始的带有 Markdown 语法的内容: {{< raw >}}Hello{{< /raw >}}