目录

主题文档 - 扩展 Shortcodes

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

1 style

LoveIt 更改 | 0.2.0
注意
Hugo extended 版本对于 style shortcode 是必需的.

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

呈现的输出效果如下:

This is a right-aligned paragraph.
LoveIt 新增 | 0.2.0

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

LoveIt 新增 | 0.2.10 支持本地资源引用的完整用法.

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:[email protected]" >}}

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

呈现的输出效果如下:

一个带有标题的 link 示例:

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

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

Upstage

3 image

LoveIt 更改 | 0.2.0

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

LoveIt 新增 | 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 示例:

1
{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}

呈现的输出效果如下:

/images/lighthouse.jpg
Lighthouse (image)

4 admonition

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

支持 Markdown 或者 HTML 格式.

注意
一个 注意 横幅
摘要
一个 摘要 横幅
信息
一个 信息 横幅
技巧
一个 技巧 横幅
成功
一个 成功 横幅
问题
一个 问题 横幅
警告
一个 警告 横幅
失败
一个 失败 横幅
危险
一个 危险 横幅
Bug
一个 Bug 横幅
示例
一个 示例 横幅
引用
一个 引用 横幅

admonition shortcode 有以下命名参数:

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

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

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

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

  • open [可选] (第三个位置参数) LoveIt 更改 | 0.2.0

    横幅内容是否默认展开, 默认值是 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 >}}

呈现的输出效果如下:

This is a tip
一个 技巧 横幅

5 mermaid

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

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

6 echarts

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

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

7 mapbox

LoveIt 新增 | 0.2.0

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

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

8 music

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

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

9 bilibili

LoveIt 更改 | 0.2.0

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

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

10 typeit

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

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

11 script

LoveIt 新增 | 0.2.8

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

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

一个 script 示例:

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

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

12 raw

LoveIt 新增 | 0.2.11

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

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

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

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

呈现的输出效果为 Dillon.