主题文档 - 扩展 Shortcodes
LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.
1 style
style
shortcode 是必需的.style
shortcode 用来在你的文章中插入自定义样式.
style
shortcode 有两个位置参数.
第一个参数是自定义样式的内容. 它支持 SASS 中的嵌套语法,
并且 &
指代这个父元素.
第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 div
.
一个 style
示例:
{{< 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
示例:
{{< 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
示例:
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
或者
{{< link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" >}}
呈现的输出效果如下 (将鼠标悬停在链接上,会有一行提示):
Upstage3 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
示例:
{{< 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 参数的值. -
横幅内容是否默认展开, 默认值是
true
.
一个 admonition
示例:
{{< 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
示例:
{{< script >}}
console.log('Hello LoveIt!');
{{< /script >}}
你可以在开发者工具的控制台中看到输出.
12 raw
raw
shortcode 用来在你的文章中插入原始 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 >}}
呈现的输出效果如下:
行内公式:
公式块:
原始的带有 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
示例:
{{< 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
示例:
{{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}
呈现的输出效果为 Dillon.