Shortcodes:FixIt 扩展

系列 - Shortcodes 语法

FixIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode。

转载(略有增改)
原文作者Lruihao
原文链接扩展 Shortcodes 概述
版权声明CC BY-NC 4.0

style

注意
Hugo extended 版本对于 style shortcode 是必需的。

style shortcode 用来在你的文章中插入自定义样式。

style shortcode 有两个位置参数。

  • 第一个参数是自定义样式的内容。它支持  SASS 中的嵌套语法,并且 & 指代这个父元素。

  • 第二个参数是包裹你要更改样式的内容的 HTML 标签,默认值是 div

一个 style 示例:

1
2
3
{{< style "text-align:right; strong{color:red;}" >}}
This is a **right-aligned** paragraph.
{{< /style >}}

呈现的效果:

This is a right-aligned paragraph.

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 示例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{{< link "https://assemble.io" >}}
或者
{{< link href="https://assemble.io" >}}

{{< link "mailto:contact@revolunet.com" >}}
或者
{{< link href="mailto:contact@revolunet.com" >}}

{{< link "https://assemble.io" Assemble >}}
或者
{{< link href="https://assemble.io" content=Assemble >}}

呈现的效果:

一个带有标题的 link 示例:

1
2
3
{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
或者
{{< link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" >}}

呈现的效果(将鼠标悬停在链接上,会有一行提示):

Upstage

一个卡片式 link 示例:

1
2
3
{{< link "https://github.com/hugo-fixit/FixIt" "FixIt Theme" "source of FixIt Theme" true >}}

{{< link href="https://github.com/hugo-fixit/FixIt" content="FixIt Theme" title="source of FixIt Theme" card=true avatar="https://avatars.githubusercontent.com/u/33419593?v=4" >}}

呈现的效果:

FixIt Theme https://github.com/hugo-fixit/FixIt FixIt Theme https://github.com/hugo-fixit/FixIt

一个可下载的 link 示例:

1
2
3
{{< link href="/music/Wavelength.mp3" content="Wavelength" title="Download Wavelength.mp3" download="Wavelength.mp3" >}}

{{< link href="/music/Wavelength.mp3" content="Wavelength.mp3" title="Download Wavelength.mp3" download="Wavelength.mp3" card=true >}}

呈现的效果:

Wavelength.mp3 Wavelength.mp3 /music/Wavelength.mp3

image

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 补充属性,可选值:eagerlazy,默认值是 lazy

一个 image 示例:

1
{{< image src="/images/lighthouse.webp" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.webp" src_l="/images/lighthouse-large.webp" >}}

呈现的效果:

Lighthouse (image)

admonition

admonition shortcode 支持 12 种 帮助你在页面中插入提示的横幅。支持 Markdown 或者 HTML 格式。

注意
一个 注意(note) 横幅
摘要
一个 摘要(abstract) 横幅
信息
一个 信息(info) 横幅
技巧
一个 技巧(tip) 横幅
成功
一个 成功(success) 横幅
问题
一个 问题(question) 横幅
警告
一个 警告(warning) 横幅
失败
一个 失败(failure) 横幅
危险
一个 危险(danger) 横幅
Bug
一个 Bug(bug) 横幅
示例
一个 示例(example) 横幅
引用
一个 引用(quote) 横幅

admonition shortcode 有以下命名参数:

  • type [必需]第一个位置参数)

    admonition 横幅的类型,默认值是 note

  • title [可选]第二个位置参数)

    admonition 横幅的标题,默认值是 type 参数的值。支持 Markdown 或者 HTML 格式。

  • open [可选]第三个位置参数) 横幅内容是否默认展开,默认值是 true

一个 admonition 示例:

1
2
3
4
5
6
7
{{< admonition type=tip title="*This* is a <u>tip</u>" open=false >}}
一个 **技巧** 横幅
{{< /admonition >}}
或者
{{< admonition tip "*This* is a <u>tip</u>" false >}}
一个 **技巧** 横幅
{{< /admonition >}}

呈现的效果:

This is a tip
一个 技巧 横幅

echarts

ECharts 是一个帮助你生成交互式数据可视化的库.

ECharts 提供了常规的 折线图柱状图散点图饼图K线图,用于统计的 盒形图,用于地理数据可视化的 地图热力图线图,用于关系数据可视化的 关系图treemap旭日图,多维数据可视化的 平行坐标,还有用于 BI 的 漏斗图仪表盘,并且支持图与图之间的混搭.

只需在 echarts shortcode 中以 JSON/YAML/TOML格式插入 ECharts 选项即可。

echarts shortcode 有以下命名参数:

  • width [可选]第一个位置参数)

    数据可视化的宽度,默认值是 100%

  • height [可选]第二个位置参数)

    数据可视化的高度,默认值是 30rem

一个 JSON 格式的 echarts 示例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
{{< echarts >}}
{
  "title": {
    "text": "折线统计图",
    "top": "2%",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
    "top": "10%"
  },
  "grid": {
    "left": "5%",
    "right": "5%",
    "bottom": "5%",
    "top": "20%",
    "containLabel": true
  },
  "toolbox": {
    "feature": {
      "saveAsImage": {
        "title": "保存为图片"
      }
    }
  },
  "xAxis": {
    "type": "category",
    "boundaryGap": false,
    "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "name": "邮件营销",
      "type": "line",
      "stack": "总量",
      "data": [120, 132, 101, 134, 90, 230, 210]
    },
    {
      "name": "联盟广告",
      "type": "line",
      "stack": "总量",
      "data": [220, 182, 191, 234, 290, 330, 310]
    },
    {
      "name": "视频广告",
      "type": "line",
      "stack": "总量",
      "data": [150, 232, 201, 154, 190, 330, 410]
    },
    {
      "name": "直接访问",
      "type": "line",
      "stack": "总量",
      "data": [320, 332, 301, 334, 390, 330, 320]
    },
    {
      "name": "搜索引擎",
      "type": "line",
      "stack": "总量",
      "data": [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
}
{{< /echarts >}}

一个 YAML 格式的 echarts 示例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
{{< echarts >}}
title:
    text: 折线统计图
    top: 2%
    left: center
tooltip:
    trigger: axis
legend:
    data:
        - 邮件营销
        - 联盟广告
        - 视频广告
        - 直接访问
        - 搜索引擎
    top: 10%
grid:
    left: 5%
    right: 5%
    bottom: 5%
    top: 20%
    containLabel: true
toolbox:
    feature:
        saveAsImage:
            title: 保存为图片
xAxis:
    type: category
    boundaryGap: false
    data:
        - 周一
        - 周二
        - 周三
        - 周四
        - 周五
        - 周六
        - 周日
yAxis:
    type: value
series:
    - name: 邮件营销
      type: line
      stack: 总量
      data:
          - 120
          - 132
          - 101
          - 134
          - 90
          - 230
          - 210
    - name: 联盟广告
      type: line
      stack: 总量
      data:
          - 220
          - 182
          - 191
          - 234
          - 290
          - 330
          - 310
    - name: 视频广告
      type: line
      stack: 总量
      data:
          - 150
          - 232
          - 201
          - 154
          - 190
          - 330
          - 410
    - name: 直接访问
      type: line
      stack: 总量
      data:
          - 320
          - 332
          - 301
          - 334
          - 390
          - 330
          - 320
    - name: 搜索引擎
      type: line
      stack: 总量
      data:
          - 820
          - 932
          - 901
          - 934
          - 1290
          - 1330
          - 1320
{{< /echarts >}}

一个 TOML 格式的 echarts 示例:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
{{< echarts >}}
[title]
text = "折线统计图"
top = "2%"
left = "center"

[tooltip]
trigger = "axis"

[legend]
data = [
  "邮件营销",
  "联盟广告",
  "视频广告",
  "直接访问",
  "搜索引擎"
]
top = "10%"

[grid]
left = "5%"
right = "5%"
bottom = "5%"
top = "20%"
containLabel = true

[toolbox]
[toolbox.feature]
[toolbox.feature.saveAsImage]
title = "保存为图片"

[xAxis]
type = "category"
boundaryGap = false
data = [
  "周一",
  "周二",
  "周三",
  "周四",
  "周五",
  "周六",
  "周日"
]

[yAxis]
type = "value"

[[series]]
name = "邮件营销"
type = "line"
stack = "总量"
data = [
  120.0,
  132.0,
  101.0,
  134.0,
  90.0,
  230.0,
  210.0
]

[[series]]
name = "联盟广告"
type = "line"
stack = "总量"
data = [
  220.0,
  182.0,
  191.0,
  234.0,
  290.0,
  330.0,
  310.0
]

[[series]]
name = "视频广告"
type = "line"
stack = "总量"
data = [
  150.0,
  232.0,
  201.0,
  154.0,
  190.0,
  330.0,
  410.0
]

[[series]]
name = "直接访问"
type = "line"
stack = "总量"
data = [
  320.0,
  332.0,
  301.0,
  334.0,
  390.0,
  330.0,
  320.0
]

[[series]]
name = "搜索引擎"
type = "line"
stack = "总量"
data = [
  820.0,
  932.0,
  901.0,
  934.0,
  1290.0,
  1330.0,
  1320.0
]
{{< /echarts >}}

呈现的效果:

mapbox

Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL,以 vector tilesMapbox 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 示例:

1
2
3
{{< mapbox 121.485 31.233 12 >}}
或者
{{< mapbox lng=121.485 lat=31.233 zoom=12 >}}

呈现的效果:

问题
使用 mapbox 需要在 mapbox 注册账号并在 Hugo 配置文件 hugo.toml 设置好获取的 accessToken。

一个带有自定义样式的 mapbox 示例:

1
2
3
{{< mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1" >}}
或者
{{< mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" >}}

呈现的效果:

问题
使用 mapbox 需要在 mapbox 注册账号并在 Hugo 配置文件 hugo.toml 设置好获取的 accessToken。

music

music shortcode 基于 APlayerMetingJS 提供了一个内嵌的响应式音乐播放器。

有三种方式使用 music shortcode。

自定义音乐 URL

music shortcode 有以下命名参数来使用自定义音乐 URL:

  • server [必需]

    音乐的链接。

  • type [可选]

    音乐的名称。

  • artist [可选]

    音乐的创作者。

  • cover [可选]

    音乐的封面链接。

一个使用自定义音乐 URL 的 music 示例:

1
{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.webp" >}}

呈现的效果:

音乐平台 URL 的自动识别

music shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:

  • auto [必需] (第一个位置参数)

    用来自动识别的音乐平台 URL,支持 neteasetencentxiami 平台。

一个使用音乐平台 URL 的自动识别的 music 示例:

1
2
3
{{< music auto="https://music.163.com/#/playlist?id=60198" >}}
或者
{{< music "https://music.163.com/#/playlist?id=60198" >}}

呈现的效果:

自定义音乐平台,类型和 ID

music shortcode 有以下命名参数来使用自定义音乐平台:

  • server [必需]第一个位置参数)

    [netease, tencent, kugou, xiami, baidu]

    音乐平台。

  • type [必需]第二个位置参数)

    [song, playlist, album, search, artist]

    音乐类型。

  • id [必需]第三个位置参数)

    歌曲 ID,或者播放列表 ID,或者专辑 ID,或者搜索关键词,或者创作者 ID。

一个使用自定义音乐平台的 music 示例:

1
2
3
{{< music server="netease" type="song" id="1868553" >}}
或者
{{< music netease song 1868553 >}}

呈现的效果:

其它参数

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,例如:

1
https://www.bilibili.com/video/BV1Sx411T7QQ

一个 bilibili 示例:

1
2
3
{{< bilibili BV1Sx411T7QQ >}}
或者
{{< bilibili id="BV1Sx411T7QQ" >}}

呈现的效果:

如果视频包含多个部分,则除了视频的 BV id 之外,还需要 p,默认值为 1,例如:

1
https://www.bilibili.com/video/BV1TJ411C7An?p=3

一个带有 p 参数的 bilibili 示例:

1
2
3
{{< bilibili BV1TJ411C7An 3 true >}}
或者
{{< bilibili id="BV1TJ411C7An" p="3" autoplay="true" >}}

呈现的效果:

typeit

typeit shortcode 基于 TypeIt 提供了打字动画。

只需将你需要打字动画的内容插入 typeit shortcode 中即可。

typeit shortcode 有以下命名参数:

  • tag [可选]

    内容容器的 HTML 标签。

  • code [可选]

    指定代码内容语言类型,可以实现语法高亮。

  • code-link [可选]

    是否解析代码内容中的 Markdown 链接,默认:false

  • group [可选]

    内容分组,相同分组的内容将按顺序开始打字动画。

  • loop [可选]

    内容是否会在打字动画完成后继续循环。

简单内容

允许使用 Markdown 格式的简单内容,并且 不包含 富文本的块内容,例如图像等等……

一个 typeit 示例:

1
2
3
{{< typeit >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画***段落*……
{{< /typeit >}}

呈现的效果:

另外,你也可以自定义 HTML 标签

一个带有 h4 标签的 typeit 示例:

1
2
3
{{< typeit tag=h4 >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画***段落*……
{{< /typeit >}}

呈现的效果:

代码内容

代码内容也是允许的,并且通过使用参数 code 指定语言类型可以实习语法高亮。

一个带有 code 参数的 typeit 示例:

1
2
3
4
5
6
7
{{< typeit code=java >}}
public class HelloWorld {
    public static void main(String []args) {
        System.out.println("Hello World");
    }
}
{{< /typeit >}}

呈现的效果:

分组内容

默认情况下,所有打字动画都是同时开始的。 但是有时你可能需要按顺序开始一组 typeit 内容的打字动画。

一组具有相同 group 参数值的 typeit 内容将按顺序开始打字动画。

一个带有 group 参数的 typeit 示例:

1
2
3
4
5
6
7
{{< typeit group=paragraph >}}
**首先**,这个段落开始
{{< /typeit >}}

{{< typeit group=paragraph >}}
**然后**,这个段落开始
{{< /typeit >}}

呈现的效果:

script

script shortcode 用来在你的文章中插入  Javascript 脚本。

注意
脚本内容可以保证在所有的第三方库加载之后按顺序执行。 所以你可以自由地使用第三方库。

一个 script 示例:

1
2
3
{{< script >}}
console.log('Hello FixIt!');
{{< /script >}}

你可以在开发者工具的控制台中看到输出。

details

details shortcode 用来在你的文章中插入  HTML5 标签 details 和 summary。

details shortcode 只有一个参数:

  • summary [可选]第一个位置参数)

    summary 标签的内容。支持 Markdown 或者 HTML 格式。

一个 details 示例:

1
2
3
4
5
6
7
{{< details "**Copyright** 2022." >}}
*All pages and graphics on this web site are the property of FixIt.*
{{< /details >}}
或者
{{< details summary="**Copyright** 2022." >}}
*All pages and graphics on this web site are the property of FixIt.*
{{< /details >}}

呈现的效果:

Copyright 2022. All pages and graphics on this web site are the property of FixIt.

center-quote

center-quote shortcode 用来在你的文章中插入文本居中的 blockquote 标签。

一个 center-quote 示例:

1
2
3
4
{{< center-quote >}}
**hello** *world*  
this is a center-quote shortcode example.
{{< /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 示例:

1
2
3
4
5
6
7
8
{{< raw >}}行内公式:\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}

{{< raw >}}
公式块:
\[ a=b+c \\ d+e=f \]
{{< /raw >}}

原始的带有 Markdown 和 HTML 语法的内容:{{< raw "span" >}}**Hello** <strong>FixIt</strong>{{< /raw >}}

呈现的效果:

行内公式:\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\)
公式块: \[ a=b+c \\ d+e=f \]

原始的带有 Markdown 和 HTML 语法的内容:**Hello** FixIt

reward

reward shortcode 有以下命名参数:

  • wechatpay [可选]第一个位置参数)

  • alipay [可选]第二个位置参数)

  • paypal [可选]第三个位置参数)

  • bitcoin [可选]第四个位置参数)

  • author [可选]第五个位置参数)

  • comment [可选]第六个位置参数)

  • mode [可选]第七个位置参数)

    二维码图片展示模式,可选值:[“static”, “fixed”],默认:static

一个 reward 示例:

1
{{< reward wechatpay="/images/wechatpay.gif" alipay="/images/alipay.gif" comment="给作者买杯卡布奇诺~" >}}

呈现的效果:

给作者买杯卡布奇诺~
支付宝
微信

showcase

引用
showcase shortcode 引用自 Hugo - DoIt 主题|showcase shortcode

showcase 用于在页面上插入一个个人项目的展示柜。

showcase shortcode 有以下命名参数:

  • title [必需]第一个位置参数)

    项目名称。

  • summary [必需]第二个位置参数)

    项目简介。

  • image [必需]第三个位置参数)

    预览图的链接。

  • link [必需]第四个位置参数)

    项目主页的链接。

  • column [可选]第五个位置参数)

    这个参数定义一行显示几个 showcase。默认的值是 2,默认一行显示两个 showcase。你可以将它改为 1,2 或 3。需要注意的是,当用户使用小屏幕访问网站时,每行显示的 showcase 数量将会被自动调整以保证最好的体验。

一个 showcase 示例:

1
2
3
{{< showcase title="太阳系模拟" summary="这是一个太阳系模模拟器,展示了太阳系内各天体的相对位置、相对大小及其运行轨迹。" image="/practices/games/solargame/images/SolarGame01.webp" link="/practices/games/solargame/" >}}
或者
{{< showcase "太阳系模拟" "这是一个太阳系模模拟器展示了太阳系内各天体的相对位置相对大小及其运行轨迹。" "/practices/games/solargame/images/SolarGame01.webp" "/practices/games/solargame/" >}}

呈现的效果:

太阳系模拟

这是一个太阳系模模拟器,展示了太阳系内各天体的相对位置、相对大小及其运行轨迹。

阅读全文
0%