短代码

短代码是Hugo中的一种自定义标记语法,它允许你在Markdown文件中插入预定义的HTML代码片段。

什么是短代码

Hugo 中的短代码(Shortcodes)是一个强大的功能,它允许你在Markdown文件中插入自定义的HTML代码,而不必编写HTML标签。Hugo会在生成静态网站时将短代码替换为相应的HTML代码,这使得Markdown文件的编写更加简洁和直观,同时保持了内容的纯文本格式。

在Hugo主题的模板文件中,短代码会被定义为一个函数,它接受参数并返回HTML代码。例如,一个简单的短代码函数可能如下所示:

1<!-- shortcode-name.html -->
2<div>
3  <!-- 短代码的实现 -->
4</div>

在Markdown文件中使用短代码时,Hugo会在生成静态网站时将短代码替换为相应的HTML代码。

Hugo内置短代码

  • Figure: 是 Markdown 中图像语法的延伸。
  • Gist:显示 GitHub gist 代码。
  • Highlight:显示高亮代码。
  • Param:获取当前页面的参数,如无则回退到网站参数。
  • ref and relref:返回指定页面的固定链接(ref)或相对固定链接(relref)。

Bootstrap 短代码

此为HB主题中内置的短代码

Bootstrap 短代码列表。

  • Alert:显示警告信息,支持多种样式、图标和标题。
  • Clearfix:清除浮动的内容,如浮动图片。
  • Collapse:隐藏和显示内容。
  • Config Toggle:从一个代码库中生成一个配置切换,支持 YAMLTOML 和 JSON
  • Icon Grid:显示带有图标、标题和描述的 icon grid。
  • Lead:使一个段落脱颖而出。
  • Ratio:完美的响应式处理视频或幻灯片的嵌入,基于父体的宽度。
  • Toggle:比 config toggle 更加通用,设计用于任何内容,如 SDK 代码。

详情请参考文章:短代码 - 内容 - 用户手册 - HB 框架 (hbstack.dev)