扩展 Shortcodes 总览

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

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

script

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

一个 script 示例：

1
2
3

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

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

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

呈现的输出效果如下：

auto-dark

auto-dark shortcode 会包裹内容，并在深色模式下自动进行颜色/色相反转，方便适配浅色素材。

一个 auto-dark 示例：

1
2
3

{{< auto-dark >}}
<img src="/images/logo.svg" alt="logo" />
{{< /auto-dark >}}

你可以将上面的示例粘贴到自己的站点内容中查看实际效果。

link

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

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

link shortcode 有以下具名参数：

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

  链接的目标。

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

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

  支持 Markdown 或者 HTML 格式。

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

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

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

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

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

  卡片式链接的图标，支持图片链接和 Font Awesome 图标。如果未指定，则尝试从链接中获取 favicon。

• 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 >}}
{{< 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 github.com/hugo-fixit/FixIt Lruihao Blog lruihao.cn Lruihao Blog 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 属性。

• height [可选]

  图片的 height 属性。

• width [可选]

  图片的 width 属性。

• linked [可选]

  图片是否需要被链接，默认值是 true。

• rel [可选]

  HTML a 标签 的 rel 补充属性，仅在 linked 属性设置成 true 时有效。

• loading [可选]

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

• optimise [可选]

  图片是否需要被优化，覆盖全局配置。

• cacheRemote [可选]

  是否缓存远程图片，覆盖全局配置。

一个 image 示例：

1

{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" >}}

呈现的输出效果如下：

details

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

details shortcode 有以下具名参数：

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

  从 Markdown 渲染到 HTML 的子 summary 元素的内容。默认值是 Details。

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

  是否初始显示 details 元素的内容，默认值是 false。

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

  元素的 class 属性的值。

• name [可选]

  元素的 name 属性的值。

• title [可选]

  元素的 title 属性的值。

一个 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 标签。

1
2

> [!center]
> 这是一个 **居中对齐** 的段落。

1
2

> 这是一个 **居中对齐** 的段落。
> {.blockquote-center}

1
2
3

{{< center-quote >}}
这是一个 **居中对齐** 的段落。
{{< /center-quote >}}

以上三种写法都可以达到相同的输出效果：

这是一个 居中对齐 的段落。

raw

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

raw shortcode 只有一个参数：

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

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

一个 raw 示例：

1

原始的带有 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="给作者买杯卡布奇诺～" >}}

呈现的输出效果如下：

给作者买杯卡布奇诺～

赞赏

支付宝

微信

version

version shortcode 有以下位置参数：

• 第一个位置参数 [必选] 版本号
• 第二个位置参数 [可选] 类型，可选值：[“new”, “changed”, “deleted”, “deprecated”]，默认：new
• 第三个位置参数 [可选] 发行标签的 URL 前缀，默认：https://github.com/hugo-fixit/FixIt/releases/tag/v
• 第四个位置参数 [可选] 项目名称，默认：FixIt

一个 version 示例：

1
2
3
4

{{< version 0.3.15 >}}
{{< version 0.3.15 changed >}}
{{< version 0.3.15 deleted >}}
{{< version 0.3.15 deprecated >}}

呈现的输出效果如下：

env

env shortcode 用来根据当前的 Hugo 环境变量来有条件地渲染内容。

在网络受限地区，本地加载 YouTube、Twitter 等服务会拖慢开发；可配置成只在生产环境渲染，开发环境直接跳过，提速调试。

一个 env 示例：

1
2
3
4

{{< env "production" >}}
This content is only rendered in the production environment.
里面的内容只会在生产环境中渲染。
{{< /env >}}

呈现的输出效果如下：

admonition

admonition shortcode 允许你在内容中添加各种类型的标注。

完整文档请查看页面 扩展 Shortcode - 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.js 和 MetingJS 库提供了一个内嵌的响应式音乐播放器。

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

aplayer 和 audio

如果你需要针对音乐播放器的更多自定义选项（如自定义歌单，迷你模式，自定义音乐类型以及更多…），你可以使用 aplayer shortcode 配合 audio shortcode 以发挥 APlayer.js 的全部功能。

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

spotify

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

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

bilibili

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

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

douyin

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

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

typeit

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

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

timeline

timeline shortcode 用于创建时间轴。

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

fixit-encryptor

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

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

bluesky

bluesky shortcode 用于嵌入 Bluesky 帖子。

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

gist

gist shortcode 用于在你的内容中嵌入 GitHub Gist。

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

tabs 和 tab

tabs 和 tab shortcode 允许你创建具有各种样式和布局的标签页内容。

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

file-tree

file-tree shortcode 用于渲染一个交互式的文件树结构。

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