XOlDKING
发布于 2023/10/07FixIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode。
style
style shortcode 是必需的。style shortcode 用来在你的文章中插入自定义样式。
style shortcode 有两个位置参数。
-
第一个参数是自定义样式的内容。它支持 SASS 中的嵌套语法，并且
&指代这个父元素。 -
第二个参数是包裹你要更改样式的内容的 HTML 标签，默认值是
div。
一个 style 示例：
|
|
呈现的效果：
link
link shortcode 是 Markdown 链接语法的替代。
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。
-
【新增】avatar [可选]
替换卡片式链接显示的图片。
一个 link 示例：
|
|
呈现的效果：
一个带有标题的 link 示例：
|
|
呈现的效果（将鼠标悬停在链接上，会有一行提示）：
Upstage一个卡片式 link 示例：
|
|
呈现的效果：
FixIt Theme FixIt Theme
一个可下载的 link 示例：
|
|
呈现的效果：
Wavelength.mp3 Wavelength.mp3image
image shortcode 是 figure shortcode 的替代。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 示例：
|
|
呈现的效果：
image)admonition
admonition shortcode 支持 12 种 帮助你在页面中插入提示的横幅。支持 Markdown 或者 HTML 格式。
admonition shortcode 有以下命名参数：
-
type [必需]（第一个位置参数）
admonition横幅的类型，默认值是note。 -
title [可选]（第二个位置参数）
admonition横幅的标题，默认值是 type 参数的值。支持 Markdown 或者 HTML 格式。 -
open [可选]（第三个位置参数） 横幅内容是否默认展开，默认值是
true。
一个 admonition 示例：
|
|
呈现的效果：
echarts
ECharts 是一个帮助你生成交互式数据可视化的库.
ECharts 提供了常规的 折线图，柱状图，散点图，饼图，K线图，用于统计的 盒形图，用于地理数据可视化的 地图，热力图，线图，用于关系数据可视化的 关系图，treemap，旭日图，多维数据可视化的 平行坐标，还有用于 BI 的 漏斗图，仪表盘，并且支持图与图之间的混搭.
只需在 echarts shortcode 中以 JSON/YAML/TOML格式插入 ECharts 选项即可。
echarts shortcode 有以下命名参数：
-
width [可选]（第一个位置参数）
数据可视化的宽度，默认值是
100%。 -
height [可选]（第二个位置参数）
数据可视化的高度，默认值是
30rem。
一个 JSON 格式的 echarts 示例：
|
|
一个 YAML 格式的 echarts 示例：
|
|
一个 TOML 格式的 echarts 示例：
|
|
呈现的效果：
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 示例：
|
|
呈现的效果：
hugo.toml 设置好获取的 accessToken。一个带有自定义样式的 mapbox 示例：
|
|
呈现的效果：
hugo.toml 设置好获取的 accessToken。music
music shortcode 基于 APlayer 和 MetingJS 提供了一个内嵌的响应式音乐播放器。
有三种方式使用 music shortcode。
自定义音乐 URL
music shortcode 有以下命名参数来使用自定义音乐 URL：
-
server [必需]
音乐的链接。
-
type [可选]
音乐的名称。
-
artist [可选]
音乐的创作者。
-
cover [可选]
音乐的封面链接。
一个使用自定义音乐 URL 的 music 示例：
|
|
呈现的效果：
音乐平台 URL 的自动识别
music shortcode 有一个命名参数来使用音乐平台 URL 的自动识别：
-
auto [必需] (第一个位置参数)
用来自动识别的音乐平台 URL，支持
netease，tencent和xiami平台。
一个使用音乐平台 URL 的自动识别的 music 示例：
|
|
呈现的效果：
自定义音乐平台，类型和 ID
music shortcode 有以下命名参数来使用自定义音乐平台：
-
server [必需]（第一个位置参数）
[
netease,tencent,kugou,xiami,baidu]音乐平台。
-
type [必需]（第二个位置参数）
[
song,playlist,album,search,artist]音乐类型。
-
id [必需]（第三个位置参数）
歌曲 ID，或者播放列表 ID，或者专辑 ID，或者搜索关键词，或者创作者 ID。
一个使用自定义音乐平台的 music 示例：
|
|
呈现的效果：
其它参数
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。
bilibili
bilibili shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器。
bilibili shortcode 有以下命名参数：
-
id [必需]（第一个位置参数）
视频的 bvid。
-
p [可选]（第二个位置参数）
如果一个视频包含多个部分，指名第几部分，默认值
1。 -
【新增】autoplay [可选]（第三个位置参数）
是否自动播放，默认值
false。
如果视频只有一个部分，则仅需要视频的 BV id，例如：
|
|
一个 bilibili 示例：
|
|
呈现的效果：
如果视频包含多个部分，则除了视频的 BV id 之外，还需要 p，默认值为 1，例如：
|
|
一个带有 p 参数的 bilibili 示例：
|
|
呈现的效果：
typeit
typeit shortcode 基于 TypeIt 提供了打字动画。
只需将你需要打字动画的内容插入 typeit shortcode 中即可。
typeit shortcode 有以下命名参数：
-
tag [可选]
内容容器的 HTML 标签。
-
code [可选]
指定代码内容语言类型，可以实现语法高亮。
-
code-link [可选]
是否解析代码内容中的 Markdown 链接，默认：
false。 -
group [可选]
内容分组，相同分组的内容将按顺序开始打字动画。
-
loop [可选]
内容是否会在打字动画完成后继续循环。
简单内容
允许使用 Markdown 格式的简单内容，并且 不包含 富文本的块内容，例如图像等等……
一个 typeit 示例：
|
|
呈现的效果：
另外，你也可以自定义 HTML 标签。
一个带有 h4 标签的 typeit 示例：
|
|
呈现的效果：
代码内容
代码内容也是允许的，并且通过使用参数 code 指定语言类型可以实习语法高亮。
一个带有 code 参数的 typeit 示例：
|
|
呈现的效果：
分组内容
默认情况下，所有打字动画都是同时开始的。
但是有时你可能需要按顺序开始一组 typeit 内容的打字动画。
一组具有相同 group 参数值的 typeit 内容将按顺序开始打字动画。
一个带有 group 参数的 typeit 示例：
|
|
呈现的效果：
script
script shortcode 用来在你的文章中插入 Javascript 脚本。
一个 script 示例：
|
|
你可以在开发者工具的控制台中看到输出。
details
details shortcode 用来在你的文章中插入 HTML5 标签 details 和 summary。
details shortcode 只有一个参数：
-
summary [可选]（第一个位置参数）
summary 标签的内容。支持 Markdown 或者 HTML 格式。
一个 details 示例：
|
|
呈现的效果：
Copyright 2022.
All pages and graphics on this web site are the property of FixIt.center-quote
center-quote shortcode 用来在你的文章中插入文本居中的 blockquote 标签。
一个 center-quote 示例：
|
|
呈现的效果：
hello world
this is a center-quote shortcode example.
fixit-encryptor
您可以使用 fixit-encryptor shortcode 来加密部分内容。
完整文档请查看页面 内容加密。
raw
raw shortcode 用来在你的文章中插入原始 HTML 内容。
raw shortcode 只有一个参数：
-
tag [可选]（第一个位置参数）
原始内容的父级元素 HTML 标签，默认值是
div。
一个 raw 示例:
|
|
呈现的效果：
原始的带有 Markdown 和 HTML 语法的内容：**Hello** FixIt
reward
reward shortcode 有以下命名参数：
-
wechatpay [可选]（第一个位置参数）
-
alipay [可选]（第二个位置参数）
-
paypal [可选]（第三个位置参数）
-
bitcoin [可选]（第四个位置参数）
-
author [可选]（第五个位置参数）
-
comment [可选]（第六个位置参数）
-
mode [可选]（第七个位置参数）
二维码图片展示模式，可选值：[“static”, “fixed”]，默认：
static
一个 reward 示例：
|
|
呈现的效果：
支付宝
微信
showcase
showcase shortcode 引用自 Hugo - DoIt 主题｜showcase shortcode。showcase 用于在页面上插入一个个人项目的展示柜。
showcase shortcode 有以下命名参数：
-
title [必需]（第一个位置参数）
项目名称。
-
summary [必需]（第二个位置参数）
项目简介。
-
image [必需]（第三个位置参数）
预览图的链接。
-
link [必需]（第四个位置参数）
项目主页的链接。
-
column [可选]（第五个位置参数）
这个参数定义一行显示几个
showcase。默认的值是 2，默认一行显示两个showcase。你可以将它改为 1，2 或 3。需要注意的是，当用户使用小屏幕访问网站时，每行显示的showcase数量将会被自动调整以保证最好的体验。
一个 showcase 示例：
|
|
呈现的效果：
