主题文档 - 扩展 Shortcodes

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

1 style

FixIt 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.
FixIt 0.2.0 | 新增

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

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

link shortcode 有以下命名参数:

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

    链接的目标。

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

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

    支持 Markdown 或者 HTML 格式。

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

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

  • card [可选]第四个位置参数)FixIt 0.2.12 | 新增

    是否显示为卡片式链接,默认值 false

  • download [可选] FixIt 0.2.12 | 新增

    HTML a 标签 的 download 属性。

  • class [可选]

    HTML a 标签 的 class 属性。

  • rel [可选]

    HTML a 标签 的 rel 补充属性。

  • external-icon [可选] FixIt 0.2.14 | 新增

    是否自动显示外链图标

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

呈现的输出效果如下:

一个带有标题的 link 示例:

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

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

Upstage

一个卡片式 link 示例:

1
2
3
{{< link "https://github.com/hugo-fixit/FixIt" "FixIt Theme" "source of FixIt Theme" true >}}
或者
{{< link href="https://github.com/hugo-fixit/FixIt" content="FixIt Theme" title="source of FixIt Theme" card=true >}}

呈现的输出效果如下:

FixIt Theme https://github.com/hugo-fixit/FixIt

一个可下载的 link 示例:

1
2
3
{{< link href="/music/Wavelength.mp3" content="Wavelength" title="Download Wavelength.mp3" download="Wavelength.mp3" >}}

{{< link href="/music/Wavelength.mp3" content="Wavelength.mp3" title="Download Wavelength.mp3" download="Wavelength.mp3" card=true >}}

呈现的输出效果如下:

Wavelength.mp3 Wavelength.mp3 /music/Wavelength.mp3

3 image

FixIt 0.2.0 | 更改

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

FixIt 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 参数的值。(支持 markdown)FixIt 0.2.14 | 更改

  • open [可选]第三个位置参数) FixIt 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 库提供绘制图表和流程图的功能。

完整文档请查看页面 扩展 Shortcode - mermaid

6 echarts

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

完整文档请查看页面 扩展 Shortcode - echarts

7 mapbox

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

完整文档请查看页面 扩展 Shortcode - mapbox

8 music

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

完整文档请查看页面 扩展 Shortcode - music

9 bilibili

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

完整文档请查看页面 扩展 Shortcode - bilibili

10 typeit

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

完整文档请查看页面 扩展 Shortcode - typeit

11 script

FixIt 0.2.8 | 新增

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

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

一个 script 示例:

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

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

12 details

FixIt 0.2.13 | 新增 FixIt 0.2.14 | 更改

details shortcode 用来在你的文章中插入  HTML5 标签 details 和 summary。

details shortcode 只有一个参数:

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

    summary 标签的内容(支持 markdown)

一个 details 示例:

1
2
3
4
5
6
7
{{< details "**Copyright** 2022." >}}
*All pages and graphics on this web site are the property of FixIt.*
{{< /details >}}
或者
{{< details summary="**Copyright** 2022." >}}
*All pages and graphics on this web site are the property of FixIt.*
{{< /details >}}

呈现的输出效果如下:

Copyright 2022. All pages and graphics on this web site are the property of FixIt.

13 center-quote

FixIt 0.2.13 | 新增 FixIt 0.2.14 | 更改

center-quote shortcode 用来在你的文章中插入文本居中的 blockquote 标签。

一个 center-quote 示例:

1
2
3
4
{{% center-quote %}}
**hello** *world*  
this is a center-quote shortcode example.
{{% /center-quote %}}

呈现的输出效果如下:

hello world
this is a center-quote shortcode example.

14 fixit-encryptor

FixIt 0.2.15 | 新增

您可以使用 fixit-encryptor shortcode 来加密部分内容。

完整文档请查看页面 主题文档 - 内容加密


感谢
本文档中 v0.2.10 版本之前的内容,感谢原作者 Dillon 编写修订。