主题文档 - 扩展 Shortcodes
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
属性,当悬停在链接上会显示的提示。 -
是否显示为卡片式链接,默认值
false
。 -
HTML
a
标签 的download
属性。 -
class [可选]
HTML
a
标签 的class
属性。 -
rel [可选]
HTML
a
标签 的rel
补充属性。 -
是否自动显示外链图标
一个 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
示例:
|
|
呈现的输出效果如下:
4 admonition
admonition
shortcode 支持 12 种 帮助你在页面中插入提示的横幅。
支持 Markdown 或者 HTML 格式。
admonition
shortcode 有以下命名参数:
-
type [必需](第一个位置参数)
admonition
横幅的类型,默认值是note
。 -
title [可选](第二个位置参数)
-
横幅内容是否默认展开,默认值是
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 来加密部分内容。
完整文档请查看页面 主题文档 - 内容加密。
v0.2.10
版本之前的内容,感谢原作者 Dillon 编写修订。