cullmann/cullmann.io
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity
cullmann.io/themes/LoveIt/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md

11 KiB
Raw Blame History

weight title date lastmod draft author authorLink description images resources tags categories lightgallery math
4 主题文档 - 扩展 Shortcodes 2020-03-03T16:29:59+08:00 2020-06-12T10:10:13+03: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 示例:

{{</* 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

{{< version 0.2.11 >}}

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

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

呈现的输出效果为 {{< person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" >}}.

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

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

呈现的输出效果为 {{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}.