本文将简单地介绍如何利用短代码来丰富你的内容,并列出一些可用的短代码。

使用短代码

另请参阅 use shortcodes

Hugo 内置短代码

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

Bootstrap 短代码

Module PathVersion
github.com/hugomods/bootstrapVersion

Bootstrap 短代码列表。

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

扩展的短代码

Module PathVersion
github.com/hugomods/shortcodesVersion

扩展的短代码列表。

线上代码编辑器

  • CodePen:显示 CodePen 代码。
  • JSFiddle:显示 JSFiddle 代码。
  • JSRun:显示 JSRun 代码。

媒体播放器

由模块提供的短代码

你可能需要安装相应的模块来使用以下短代码。

  • 加密:加密内容。
  • 图标:显示图标。
  • 图片链接:当点击图片链接时弹出一个图片。
  • KaTex:数学排版。
  • Mermaid:使用受 Markdown 启发的文本定义和一个渲染器来创建和修改复杂的图表。
  • Video.js:自定义属于你自己的视频播放器。