扩展 Shortcodes 概述
Lruihao
FixIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 Shortcodes。
FixIt 主题内置
根据需要使用这些 FixIt 主题扩展的 Shortcodes。
layouts/shortcodes 目录中同名的文件中。Style
style shortcode 是必需的。style shortcode 用来在你的文章中插入自定义样式。
style shortcode 有两个位置参数。
第一个参数是自定义样式的内容。它支持 SASS 中的嵌套语法，
并且 & 指代这个父元素。
第二个参数是包裹你要更改样式的内容的 HTML 标签，默认值是 div。
一个 style 示例：
| |
呈现的输出效果如下：
Link
link shortcode 是 Markdown 链接语法 的替代。
link shortcode 可以提供一些其它的功能并且可以在代码块中使用。
支持 本地资源引用 的完整用法。
link shortcode 有以下命名参数：
href [必需]（第一个位置参数）
链接的目标。
content [可选]（第二个位置参数）
链接的内容，默认值是 href 参数的值。
支持 Markdown 或者 HTML 格式。
title [可选]（第三个位置参数）
HTML
a标签 的title属性，当悬停在链接上会显示的提示。card [可选]（第四个位置参数）
是否显示为卡片式链接，默认值
false。card-icon [可选] (第五个位置参数)
卡片式链接的图标，支持图片链接和 Font Awesome 图标。设置为
true，自动从链接获取缩略图。download [可选]
HTML
a标签 的download属性。class [可选]
HTML
a标签 的class属性。rel [可选]
HTML
a标签 的rel补充属性。external-icon [可选]
是否自动显示外链图标。
noreferrer [可选]
rel属性是否添加noreferrer, 默认：true。
一个 link 示例：
| |
呈现的输出效果如下：
一个带有标题的 link 示例：
| |
呈现的输出效果如下（将鼠标悬停在链接上，会有一行提示）:
Upstage一个卡片式 link 示例：
| |
呈现的输出效果如下：
FixIt Theme
Lruihao Blog
Lruihao Blog
一个可下载的 link 示例：
| |
呈现的输出效果如下：
Image
image shortcode 是 [figure shortcode][figure] 的替代。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 有以下命名参数：
type [可选]（第一个位置参数）
admonition横幅的类型，默认值是note。（共 12 种类型，见 完整示例）title [可选]（第二个位置参数）
admonition横幅的标题，默认值是 type 参数的值。（支持 Markdown 和 HTML 格式）
open [可选]（第三个位置参数）
横幅内容是否默认展开，默认值是
true。（支持 Markdown 和 HTML 格式）
一个 admonition 示例：
| |
呈现的输出效果如下：
admonition shortcode 支持 12 种类型的横幅，完整示例如下：
| |
Mermaid
mermaid shortcode 使用 Mermaid 库提供绘制图表和流程图的功能。
完整文档请查看页面 扩展 Shortcode - mermaid。
Echarts
echarts shortcode 使用 ECharts 库提供数据可视化的功能。
完整文档请查看页面 扩展 Shortcode - echarts。
Mapbox
mapbox shortcode 使用 Mapbox GL JS 库提供互动式地图的功能。
完整文档请查看页面 扩展 Shortcode - mapbox。
Music
music shortcode 基于 APlayer 和 MetingJS 库提供了一个内嵌的响应式音乐播放器。
完整文档请查看页面 扩展 Shortcode - music。
Spotify
spotify shortcode 提供了一个内嵌的用来播放 Spotify 音乐的响应式播放器。
完整文档请查看页面 扩展 Shortcode - spotify。
Bilibili
bilibili shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器。
完整文档请查看页面 扩展 Shortcode - bilibili。
Douyin
douyin shortcode 提供了一个内嵌的用来播放抖音视频的响应式播放器。
完整文档请查看页面 扩展 Shortcode - douyin。
Typeit
typeit shortcode 基于 TypeIt 提供了打字动画。
完整文档请查看页面 扩展 Shortcode - typeit。
Script
script shortcode 用来在你的文章中插入 Javascript 脚本。
一个 script 示例：
| |
你可以在开发者工具的控制台中看到输出。
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.Center-Quote
center-quote shortcode 用来在你的文章中插入文本居中的 blockquote 标签。
一个 center-quote 示例：
| |
呈现的输出效果如下：
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 示例：
| |
呈现的输出效果如下：
支付宝
微信额外的主题组件
FixIt 主题旨在 简洁性 和 可扩展性 之间取得平衡。为此，我们开发了一系列额外的 Hugo 主题组件供用户选择。
访问 此页面 浏览由 Hugo FixIt 社区创建的主题组件合集。
相关内容
支付宝
微信