主题文档 - 扩展 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 [可选]
是否自动显示外链图标
一个 link 示例：
|
|
呈现的输出效果如下：
一个带有标题的 link 示例：
|
|
呈现的输出效果如下 （将鼠标悬停在链接上，会有一行提示）:
Upstage一个卡片式 link 示例：
|
|
呈现的输出效果如下：
FixIt Theme一个可下载的 link 示例：
|
|
呈现的输出效果如下：
Wavelength.mp3 Wavelength.mp33 image
image shortcode 是 figure shortcode 的替代。image shortcode 可以充分利用 lazysizes 和 lightgallery.js 两个依赖库。
支持 本地资源引用 的完整用法。
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 是一个帮助你生成交互式数据可视化的库。
ECharts 提供了常规的 折线图, 柱状图, 散点图, 饼图, K 线图, 用于统计的 盒形图, 用于地理数据可视化的 地图, 热力图, 线图, 用于关系数据可视化的 关系图, treemap, 旭日图, 多维数据可视化的 平行坐标, 还有用于 BI 的 漏斗图, 仪表盘, 并且支持图与图之间的混搭。
只需在 echarts shortcode 中以 JSON/YAML/TOML格式插入 ECharts 选项即可。
一个 JSON 格式的 echarts 示例：
|
|
一个 YAML 格式的 echarts 示例：
|
|
一个 TOML 格式的 echarts 示例：
|
|
呈现的输出效果如下：
echarts shortcode 还有以下命名参数：
-
width [可选]（第一个位置参数）
数据可视化的宽度，默认值是 100%。 -
height [可选]（第二个位置参数）
数据可视化的高度，默认值是 30rem。
7 mapbox
Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL, 以 vector tiles 和 Mapbox styles 为来源，将它们渲染成互动式地图。
mapbox shortcode 有以下命名参数来使用 Mapbox GL JS:
-
lng [必需]（第一个位置参数）
地图初始中心点的经度，以度为单位。
-
lat [必需]（第二个位置参数）
地图初始中心点的纬度，以度为单位。
-
zoom [可选]（第三个位置参数）
地图的初始缩放级别，默认值是
10。 -
marked [可选]（第四个位置参数）
是否在地图的初始中心点添加图钉，默认值是
true。 -
light-style [可选]（第五个位置参数）
-
dark-style [可选]（第六个位置参数）
-
navigation [可选]
是否添加 NavigationControl, 默认值是 前置参数 或者 网站配置 中设置的值。
-
geolocate [可选]
是否添加 GeolocateControl, 默认值是 前置参数 或者 网站配置 中设置的值。
-
scale [可选]
是否添加 ScaleControl, 默认值是 前置参数 或者 网站配置 中设置的值。
-
fullscreen [可选]
是否添加 FullscreenControl, 默认值是 前置参数 或者 网站配置 中设置的值。
-
width [可选]
地图的宽度，默认值是
100%。 -
height [可选]
地图的高度，默认值是
20rem。
一个简单的 mapbox 示例：
|
|
呈现的输出效果如下：
一个带有自定义样式的 mapbox 示例：
|
|
呈现的输出效果如下：
8 music
music shortcode 基于 APlayer 和 MetingJS 提供了一个内嵌的响应式音乐播放器。
有三种方式使用 music shortcode.
8.1 自定义音乐 URL
支持 本地资源引用 的完整用法。
music shortcode 有以下命名参数来使用自定义音乐 URL:
-
server [必需]
音乐的链接。
-
type [可选]
音乐的名称。
-
artist [可选]
音乐的创作者。
-
cover [可选]
音乐的封面链接。
一个使用自定义音乐 URL 的 music 示例：
|
|
呈现的输出效果如下：
8.2 音乐平台 URL 的自动识别
music shortcode 有一个命名参数来使用音乐平台 URL 的自动识别：
-
auto [必需]]（第一个位置参数）
用来自动识别的音乐平台 URL, 支持
netease,tencent和xiami平台。
一个使用音乐平台 URL 的自动识别的 music 示例：
|
|
呈现的输出效果如下：
8.3 自定义音乐平台，类型和 ID
music shortcode 有以下命名参数来使用自定义音乐平台：
-
server [必需]（第一个位置参数）
[
netease,tencent,kugou,xiami,baidu]音乐平台。
-
type [必需]（第二个位置参数）
[
song,playlist,album,search,artist]音乐类型。
-
id [必需]（第三个位置参数）
歌曲 ID, 或者播放列表 ID, 或者专辑 ID, 或者搜索关键词，或者创作者 ID.
一个使用自定义音乐平台的 music 示例：
|
|
呈现的输出效果如下：
8.4 其它参数
music shortcode 有一些可以应用于以上三种方式的其它命名参数：
-
theme [可选]
音乐播放器的主题色，默认值是 #448aff。 -
fixed [可选]
是否开启固定模式，默认值是
false。 -
mini [可选]
是否开启迷你模式，默认值是
false。 -
autoplay [可选]
是否自动播放音乐，默认值是
false。 -
volume [可选]
第一次打开播放器时的默认音量，会被保存在浏览器缓存中，默认值是
0.7。 -
mutex [可选]
是否自动暂停其它播放器，默认值是
true。
music shortcode 还有一些只适用于音乐列表方式的其它命名参数：
-
loop [可选]
[
all,one,none]音乐列表的循环模式，默认值是
none。 -
order [可选]
[
list,random]音乐列表的播放顺序，默认值是
list。 -
list-folded [可选]
初次打开的时候音乐列表是否折叠，默认值是
false。 -
list-max-height [可选]
音乐列表的最大高度，默认值是
340px。
9 bilibili
bilibili shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器。
如果视频只有一个部分，则仅需要视频的 BV id, 例如：
|
|
一个 bilibili 示例：
|
|
呈现的输出效果如下：
如果视频包含多个部分，则除了视频的 BV id 之外，还需要 p, 默认值为 1, 例如：
|
|
一个带有 p 参数的 bilibili 示例：
|
|
呈现的输出效果如下：
10 typeit
typeit shortcode 基于 TypeIt 提供了打字动画。
只需将你需要打字动画的内容插入 typeit shortcode 中即可。
10.1 简单内容
允许使用 Markdown 格式的简单内容，并且 不包含 富文本的块内容，例如图像等等 …
一个 typeit 示例：
|
|
呈现的输出效果如下：
另外，你也可以自定义 HTML 标签.
一个带有 h4 标签的 typeit 示例：
|
|
呈现的输出效果如下：
10.2 代码内容
代码内容也是允许的，并且通过使用参数 code 指定语言类型可以实习语法高亮。
一个带有 code 参数的 typeit 示例：
|
|
呈现的输出效果如下：
10.3 分组内容
默认情况下，所有打字动画都是同时开始的。
但是有时你可能需要按顺序开始一组 typeit 内容的打字动画。
一组具有相同 group 参数值的 typeit 内容将按顺序开始打字动画。
一个带有 group 参数的 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.
fixit-encryptor
您可以使用 fixit-encryptor shortcode 来加密部分内容。
完整文档请查看页面 主题文档 - 内容加密.
v0.2.10 版本之前的内容，感谢原作者 Dillon 编写修订。