cullmann.io/themes/CodeIT/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md at 0f19f2e8eb77291a133194a34938fb36fd3d123b

cullmann/cullmann.io

Fork 0

Christoph Cullmann 0321812a29 update to https://github.com/sunt-programator/CodeIT/releases/tag/v0.2.0

2021-08-29 11:48:16 +02:00

29 KiB

Raw Blame History

weight

title

date

lastmod

draft

author

authorLink

description

resources

1 style

{{< admonition >}} Hugo extended 版本对于 style shortcode 是必需的. {{< /admonition >}}

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

style shortcode 有两个位置参数.

第一个参数是自定义样式的内容. 它支持 :(fab fa-sass fa-fw): SASS 中的嵌套语法, 并且 & 指代这个父元素.

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

一个 style 示例:

{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
This is a **right-aligned** paragraph.
{{</* /style */>}}

呈现的输出效果如下:

{{< style "text-align:right; strong{color:#00b1ff;}" >}} This is a right-aligned paragraph. {{< /style >}}

2 link

link shortcode 是 Markdown 链接语法的替代. link shortcode 可以提供一些其它的功能并且可以在代码块中使用.

支持本地资源引用的完整用法.

link shortcode 有以下命名参数:

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

链接的目标.
content [可选] (第二个位置参数)

链接的内容, 默认值是 href 参数的值.

支持 Markdown 或者 HTML 格式.
title [可选] (第三个位置参数)

HTML a 标签的 title 属性, 当悬停在链接上会显示的提示.
rel [可选]

HTML a 标签的 rel 补充属性.
class [可选]

HTML a 标签的 class 属性.

一个 link 示例:

{{</* 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 "https://assemble.io" >}}
{{< link "mailto:contact@revolunet.com" >}}
{{< link "https://assemble.io" Assemble >}}

一个带有标题的 link 示例:

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

呈现的输出效果如下 (将鼠标悬停在链接上，会有一行提示):

{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}

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

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

呈现的输出效果如下:

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

4 admonition

admonition shortcode 支持 12 种帮助你在页面中插入提示的横幅.

支持 Markdown 或者 HTML 格式.

{{< admonition >}} 一个注意横幅 {{< /admonition >}}

{{< admonition abstract >}} 一个摘要横幅 {{< /admonition >}}

{{< admonition info >}} 一个信息横幅 {{< /admonition >}}

{{< admonition tip >}} 一个技巧横幅 {{< /admonition >}}

{{< admonition success >}} 一个成功横幅 {{< /admonition >}}

{{< admonition question >}} 一个问题横幅 {{< /admonition >}}

{{< admonition warning >}} 一个警告横幅 {{< /admonition >}}

{{< admonition failure >}} 一个失败横幅 {{< /admonition >}}

{{< admonition danger >}} 一个危险横幅 {{< /admonition >}}

{{< admonition bug >}} 一个 Bug 横幅 {{< /admonition >}}

{{< admonition example >}} 一个示例横幅 {{< /admonition >}}

{{< admonition quote >}} 一个引用横幅 {{< /admonition >}}

admonition shortcode 有以下命名参数:

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

admonition 横幅的类型, 默认值是 note.
title [可选] (第二个位置参数)

admonition 横幅的标题, 默认值是 type 参数的值.
open [可选] (第三个位置参数)

横幅内容是否默认展开, 默认值是 true.

一个 admonition 示例:

{{</* admonition type=tip title="This is a tip" open=false */>}}
一个 **技巧** 横幅
{{</* /admonition */>}}
或者
{{</* admonition tip "This is a tip" false */>}}
一个 **技巧** 横幅
{{</* /admonition */>}}

呈现的输出效果如下:

{{< admonition tip "This is a tip" false >}} 一个技巧横幅 {{< /admonition >}}

5 mermaid

mermaid 是一个可以帮助你在文章中生成图表和流程图的库, 类似 Markdown 的语法.

只需将你的 mermaid 代码插入 mermaid shortcode 中即可.

5.1 流程图

一个 流程图 mermaid 示例:

{{</* mermaid */>}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{</* /mermaid */>}}

呈现的输出效果如下:

{{< mermaid >}} graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] {{< /mermaid >}}

5.2 时序图

一个 时序图 mermaid 示例:

{{</* mermaid */>}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{</* /mermaid */>}}

呈现的输出效果如下:

{{< mermaid >}} sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good! {{< /mermaid >}}

5.3 甘特图

一个 甘特图 mermaid 示例:

{{</* mermaid */>}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
{{</* /mermaid */>}}

呈现的输出效果如下:

{{< mermaid >}} gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d {{< /mermaid >}}

5.4 类图

一个类图 mermaid 示例:

{{</* mermaid */>}}
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 _-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --_ C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
{{</* /mermaid */>}}

呈现的输出效果如下:

{{< mermaid >}} classDiagram Class01 <|-- AveryLongClass : Cool Class03 -- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 -- C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label {{< /mermaid >}}

5.5 状态图

一个 状态图 mermaid 示例:

{{</* mermaid */>}}
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{</* /mermaid */>}}

呈现的输出效果如下:

{{< mermaid >}} stateDiagram [] --> Still Still --> [] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] {{< /mermaid >}}

5.6 Git 图

一个 Git 图 mermaid 示例:

{{</* mermaid */>}}
gitGraph:
options
{
"nodeSpacing": 100,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
{{</* /mermaid */>}}

呈现的输出效果如下:

{{< mermaid >}} gitGraph: options { "nodeSpacing": 100, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch {{< /mermaid >}}

5.7 饼图

一个饼图 mermaid 示例:

{{</* mermaid */>}}
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{</* /mermaid */>}}

呈现的输出效果如下:

{{< mermaid >}} pie "Dogs" : 386 "Cats" : 85 "Rats" : 15 {{< /mermaid >}}

6 echarts

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

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

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

一个 JSON 格式的 echarts 示例:

{{</* 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 示例:

{{</* 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 示例:

{{</* 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 */>}}

呈现的输出效果如下:

{{< 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 >}}

echarts shortcode 还有以下命名参数:

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

数据可视化的宽度, 默认值是 100%.
height [可选] (第二个位置参数)

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

7 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.
properties [optional]

GeoJSON sources and the layers of the map.

一个简单的 mapbox 示例:

{{</* mapbox 121.485 31.233 12 */>}}
或者
{{</* mapbox lng=121.485 lat=31.233 zoom=12 */>}}

呈现的输出效果如下:

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

{{</* 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 -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" >}}

Example mapbox input with the GetJSON data:

{{</* mapbox lng=28.836 lat=47.021 zoom=8 marked=false properties="/static/features-layers.json" */>}}

The rendered output looks like this:

{{< mapbox lng=28.836 lat=47.021 zoom=8 marked=false properties="/static/features-layers.json" >}}

8 music

music shortcode 基于 APlayer 和 MetingJS 提供了一个内嵌的响应式音乐播放器.

有三种方式使用 music shortcode.

8.1 自定义音乐 URL

支持本地资源引用的完整用法.

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

server [必需]

音乐的链接.
type [可选]

音乐的名称.
artist [可选]

音乐的创作者.
cover [可选]

音乐的封面链接.

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

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

呈现的输出效果如下:

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

8.2 音乐平台 URL 的自动识别

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

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

用来自动识别的音乐平台 URL, 支持 netease, tencent 和 xiami 平台.

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

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

呈现的输出效果如下:

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

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

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

[netease, tencent, kugou, xiami, baidu]

音乐平台.
type [必需] (第二个位置参数)

[song, playlist, album, search, artist]

音乐类型.
id [必需] (第三个位置参数)

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

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

{{</* music server="netease" type="song" id="1868553" */>}}
或者
{{</* music netease song 1868553 */>}}

呈现的输出效果如下:

8.4 其它参数

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.

9 bilibili

bilibili shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.

如果视频只有一个部分, 则仅需要视频的 BV id, 例如:

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

一个 bilibili 示例:

{{</* bilibili BV1Sx411T7QQ */>}}
或者
{{</* bilibili id=BV1Sx411T7QQ */>}}

呈现的输出效果如下:

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

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

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

{{</* bilibili BV1TJ411C7An 3 */>}}
或者
{{</* bilibili id=BV1TJ411C7An p=3 */>}}

呈现的输出效果如下:

10 typeit

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

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

10.1 简单内容

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

一个 typeit 示例:

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

呈现的输出效果如下:

{{< typeit >}} 这一个带有基于 TypeIt 的 打字动画 的段落... {{< /typeit >}}

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

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

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

呈现的输出效果如下:

{{< typeit tag=h4 >}} 这一个带有基于 TypeIt 的 打字动画 的段落... {{< /typeit >}}

10.2 代码内容

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

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

{{</* typeit code=java */>}}
public class HelloWorld {
public static void main(String []args) {
System.out.println("Hello World");
}
}
{{</* /typeit */>}}

呈现的输出效果如下:

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

10.3 分组内容

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

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

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

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

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

呈现的输出效果如下:

{{< typeit group=paragraph >}} 首先, 这个段落开始 {{< /typeit >}}

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

11 script

script shortcode 用来在你的文章中插入 :(fab fa-js fa-fw): Javascript 脚本.

{{< admonition >}} 脚本内容可以保证在所有的第三方库加载之后按顺序执行. 所以你可以自由地使用第三方库. {{< /admonition >}}

一个 script 示例:

{{</* script */>}}
console.log('Hello CodeIT!');
{{</* /script */>}}

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

{{< script >}} console.log('Hello CodeIT!'); {{< /script >}}

29 KiB Raw Blame History

1 style

2 link

3 image

4 admonition

5 mermaid

5.1 流程图

5.2 时序图

5.3 甘特图

5.4 类图

5.5 状态图

5.6 Git 图

5.7 饼图

6 echarts

7 mapbox

8 music

8.1 自定义音乐 URL

8.2 音乐平台 URL 的自动识别

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

8.4 其它参数

9 bilibili

10 typeit

10.1 简单内容

10.2 代码内容

10.3 分组内容

11 script

29 KiB

Raw Blame History