主题文档 - 扩展 Shortcodes

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

1 style

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

style shortcode 有两个位置参数.

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

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

一个 style 示例:

1
2
3

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

呈现的输出效果如下:

2 link

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

支持本地资源引用的完整用法.

link shortcode 有以下命名参数:

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

  链接的目标.

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

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

  支持 Markdown 或者 HTML 格式.

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

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

• rel [可选]

  HTML a 标签 的 rel 补充属性.

• class [可选]

  HTML a 标签 的 class 属性.

一个 link 示例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{< 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 >}}

呈现的输出效果如下:

• https://assemble.io
• mailto:contact@revolunet.com
• Assemble

一个带有标题的 link 示例:

1
2
3

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

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

3 image

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

支持本地资源引用的完整用法.

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 示例:

1

{{< 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 shortcode 有以下命名参数:

• type [可选] (第一个位置参数)

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

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

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

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

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

一个 admonition 示例:

1
2
3
4
5
6
7

{{< admonition type=tip title="This is a tip" open=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

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

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

8 music

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

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

9 bilibili

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

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

10 typeit

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

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

11 script

script shortcode 用来在你的文章中插入  Javascript 脚本.

一个 script 示例:

1
2
3

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

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

12 raw

raw shortcode 用来在你的文章中插入原始  HTML 内容.

一个 raw 示例:

1
2
3
4
5
6
7
8
9

行内公式: {{< 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 >}}

呈现的输出效果如下:

行内公式:

公式块:

原始的带有 Markdown 语法的内容:

13 person

person shortcode 用来在你的文章中以 h-card 的格式插入个人网站链接.

person shortcode 有以下命名参数:

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

  URL of the personal page.

• name [必需] (第二个位置参数)

  Name of the person.

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

  Text to display as hover tooltip of the link.

• picture [可选] (第四个位置参数)

  A picture to use as person’s avatar.

• nick [可选]

  Nickame of the person.

一个 person 示例:

1

{{< person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" >}}

呈现的输出效果为  Evgeny Kuznetsov (nekr0z).

一个使用通用图标的 person 示例:

1

{{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}

呈现的输出效果为  Dillon.