扩展 Shortcodes 概述

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

FixIt 主题内置

根据需要使用这些 FixIt 主题扩展的 Shortcodes。

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

呈现的输出效果如下：

Link

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

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

link shortcode 有以下命名参数：

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

  链接的目标。

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

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

  支持 Markdown 或者 HTML 格式。

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

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

• card [可选]（第四个位置参数）

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

• card-icon [可选] (第五个位置参数)

  卡片式链接的图标，支持图片链接和 Font Awesome 图标。设置为 true，自动从链接获取缩略图。

• download [可选]

  HTML a 标签 的 download 属性。

• class [可选]

  HTML a 标签 的 class 属性。

• rel [可选]

  HTML a 标签 的 rel 补充属性。

• external-icon [可选]

  是否自动显示外链图标。

• noreferrer [可选]

  rel 属性是否添加 noreferrer, 默认：true。

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

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

一个卡片式 link 示例：

1
2
3

{{< link "https://github.com/hugo-fixit/FixIt" "FixIt Theme" "source of FixIt Theme" true true >}}
{{< link "https://lruihao.cn" "Lruihao Blog" "Lruihao Blog" true "https://lruihao.cn/images/avatar.jpg" >}}
{{< link "https://lruihao.cn" "Lruihao Blog" "Lruihao Blog" true "fa-solid fa-blog" >}}

呈现的输出效果如下：

FixIt Theme https://github.com/hugo-fixit/FixIt Lruihao Blog https://lruihao.cn Lruihao Blog https://lruihao.cn

一个可下载的 link 示例：

1
2

{{< link href="/music/Wavelength.mp3" content="Wavelength.mp3" 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

Image

image shortcode 是 [figure shortcode][figure] 的替代。image shortcode 可以充分利用 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 时有效。

• loading [可选]

  HTML a 标签 的 loading 补充属性，可选值：eager、lazy，默认值是 lazy。

一个 image 示例：

1

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

呈现的输出效果如下：

Admonition

admonition shortcode 有以下命名参数：

• type [可选]（第一个位置参数）

  admonition 横幅的类型，默认值是 note。（共 12 种类型，见 完整示例）

• title [可选]（第二个位置参数）

  admonition 横幅的标题，默认值是 type 参数的值。（支持 Markdown 和 HTML 格式）

• open [可选]（第三个位置参数）

  横幅内容是否默认展开，默认值是 true。（支持 Markdown 和 HTML 格式）

一个 admonition 示例：

1
2
3
4
5
6
7

{{< admonition type=quote title="[FixIt](https://github.com/hugo-fixit/FixIt)" open=true >}}
一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
{{< /admonition >}}
或者
{{< admonition quote "[FixIt](https://github.com/hugo-fixit/FixIt)" true >}}
一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
{{< /admonition >}}

呈现的输出效果如下：

admonition shortcode 支持 12 种类型的横幅，完整示例如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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

Mermaid

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

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

Echarts

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

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

Mapbox

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

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

Music

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

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

Spotify

spotify shortcode 提供了一个内嵌的用来播放 Spotify 音乐的响应式播放器。

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

Bilibili

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

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

Douyin

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

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

Typeit

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

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

Script

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

一个 script 示例：

1
2
3

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

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

Details

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

details shortcode 有以下命名参数：

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

  summary 标签的内容。

  支持 Markdown 或者 HTML 格式。

• open [可选] (第二个位置参数）

  是否默认展开 details 标签，默认值是 false。

• center [可选] (第三个位置参数）

  是否居中显示 summary 标签的内容，默认值是 false。

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

呈现的输出效果如下：

Center-Quote

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

一个 center-quote 示例：

1
2
3

{{< center-quote >}}
this is a **center-quote** _shortcode_ example.
{{< /center-quote >}}

呈现的输出效果如下：

this is a center-quote shortcode example.

Fixit-Encryptor

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

完整文档请查看页面 内容加密。

Raw

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

raw shortcode 只有一个参数：

• tag [可选] (第一个位置参数）

  原始内容的父级元素 HTML 标签，默认值是 div。

一个 raw 示例：

1
2
3
4
5
6
7
8

{{< 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 和 HTML 语法的内容：{{< raw "span" >}}**Hello** <strong>FixIt</strong>{{< /raw >}}

呈现的输出效果如下：

原始的带有 Markdown 和 HTML 语法的内容：**Hello** FixIt

Reward

reward shortcode 有以下命名参数：

• wechatpay [可选]（第一个位置参数）

• alipay [可选]（第二个位置参数）

• paypal [可选]（第三个位置参数）

• bitcoin [可选]（第四个位置参数）

• author [可选]（第五个位置参数）

• comment [可选]（第六个位置参数）

• mode [可选]（第七个位置参数）

  二维码图片展示模式，可选值：[“static”, “fixed”]，默认：static

一个 reward 示例：

1

{{< reward wechatpay="/images/wechatpay.gif" alipay="/images/alipay.gif" comment="给作者买杯卡布奇诺～" >}}

呈现的输出效果如下：

给作者买杯卡布奇诺～

赞赏

支付宝

微信

额外的主题组件

FixIt 主题旨在 简洁性 和 可扩展性 之间取得平衡。为此，我们开发了一系列额外的 Hugo 主题组件供用户选择。

访问 此页面 浏览由 Hugo FixIt 社区创建的主题组件合集。