主题文档 - 扩展 Shortcodes
Lruihao
FixIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.
1 style
style shortcode 是必需的。style shortcode 用来在你的文章中插入自定义样式。
style shortcode 有两个位置参数。
第一个参数是自定义样式的内容。它支持 SASS 中的嵌套语法，
并且 & 指代这个父元素。
第二个参数是包裹你要更改样式的内容的 HTML 标签，默认值是 div。
一个 style 示例：
|
|
呈现的输出效果如下：
2 link
link shortcode 是 Markdown 链接语法 的替代。
link shortcode 可以提供一些其它的功能并且可以在代码块中使用。
支持 本地资源引用 的完整用法。
link shortcode 有以下命名参数：
-
href [必需]（第一个位置参数）
链接的目标。
-
content [可选]（第二个位置参数）
链接的内容，默认值是 href 参数的值。
支持 Markdown 或者 HTML 格式。
-
title [可选]（第三个位置参数）
HTML
a标签 的title属性，当悬停在链接上会显示的提示。 -
card [可选]（第四个位置参数）
是否显示为卡片式链接，默认值
false。 -
download [可选]
HTML
a标签 的download属性。 -
class [可选]
HTML
a标签 的class属性。 -
rel [可选]
HTML
a标签 的rel补充属性。 -
external-icon [可选]
是否自动显示外链图标。
-
noreferrer [可选]
rel属性是否添加noreferrer, 默认：true。
一个 link 示例：
|
|
呈现的输出效果如下：
一个带有标题的 link 示例：
|
|
呈现的输出效果如下 （将鼠标悬停在链接上，会有一行提示）:
Upstage一个卡片式 link 示例：
|
|
呈现的输出效果如下：
FixIt Theme一个可下载的 link 示例：
|
|
呈现的输出效果如下：
Wavelength.mp3 Wavelength.mp33 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)4 admonition
admonition shortcode 支持 12 种 帮助你在页面中插入提示的横幅。
支持 Markdown 或者 HTML 格式。
admonition shortcode 有以下命名参数：
-
type [必需]（第一个位置参数）
admonition横幅的类型，默认值是note。 -
title [可选]（第二个位置参数）
admonition横幅的标题，默认值是 type 参数的值。（支持 markdown） -
open [可选]（第三个位置参数）
横幅内容是否默认展开，默认值是
true。
一个 admonition 示例：
|
|
呈现的输出效果如下：
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 基于 APlayer 和 MetingJS 库提供了一个内嵌的响应式音乐播放器。
完整文档请查看页面 扩展 Shortcode - music。
9 bilibili
bilibili shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器。
完整文档请查看页面 扩展 Shortcode - bilibili。
10 typeit
typeit shortcode 基于 TypeIt 提供了打字动画。
完整文档请查看页面 扩展 Shortcode - typeit。
11 script
script shortcode 用来在你的文章中插入 Javascript 脚本。
一个 script 示例：
|
|
你可以在开发者工具的控制台中看到输出。
12 details
details shortcode 用来在你的文章中插入 HTML5 标签 details 和 summary。
details shortcode 只有一个参数：
-
summary [可选] (第一个位置参数）
summary 标签的内容（支持 markdown）
一个 details 示例：
|
|
呈现的输出效果如下：
Copyright 2022.
All pages and graphics on this web site are the property of FixIt.13 center-quote
center-quote shortcode 用来在你的文章中插入文本居中的 blockquote 标签。
一个 center-quote 示例：
|
|
呈现的输出效果如下：
hello world
this is a center-quote shortcode example.
14 fixit-encryptor
您可以使用 fixit-encryptor shortcode 来加密部分内容。
完整文档请查看页面 主题文档 - 内容加密。
15 raw
raw shortcode 用来在你的文章中插入原始 HTML 内容。
raw shortcode 只有一个参数：
-
tag [可选] (第一个位置参数）
原始内容的父级元素 HTML 标签，默认值是
div。
一个 raw 示例:
|
|
呈现的输出效果如下:
原始的带有 Markdown 和 HTML 语法的内容：**Hello** FixIt
v0.2.10 版本之前的内容，感谢原作者 Dillon 编写修订。