FixIt 主题在 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
示例:
|
|
呈现的效果:
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
示例:
|
|
呈现的效果: