本文將簡單地介紹如何利用短代碼來豐富你的內容,並列出一些可用的短代碼。

使用短代碼

另請參閱 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:自定義屬於你自己的視頻播放器。