Skip to content

Latest commit

 

History

History
110 lines (91 loc) · 4.38 KB

index.zh-hant.md

File metadata and controls

110 lines (91 loc) · 4.38 KB
title linkTitle description date nav_weight series categories tags alias
短代碼
短代碼
各種各樣的段代碼列表。
2023-04-11
4
文檔
短代碼
Figure
Gist
Highlight
Instagram
Param
ref
relref
Tweet
Vimeo
YouTube
Bootstrap
Alert
Clearfix
Config Toggle
Lead
Ratio
Toggle
CodePen
JSRun
asciinema
嗶哩嗶哩
網易雲音樂
優酷
Mermaid
KaTex
圖片鏈接
圖標
/zh-hant/docs/shortcodes/
/zh-hant/docs/diagrams/
/zh-hant/docs/math/

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

使用短代碼

另請參閱 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 "github.com/hugomods/bootstrap" %}}

Bootstrap 短代碼列表。

  • Alert:顯示警告信息,支持多種樣式、圖標和標題。
  • Clearfix:清除浮動的內容,如浮動圖片。
  • Collapse:隱藏和顯示內容。
  • Config Toggle:從一個代碼庫中生成一個配置切換,支持 YAMLTOMLJSON
  • Icon Grid:顯示帶有圖標、標題和描述的 icon grid。
  • Lead:使一個段落脫穎而出。
  • Ratio:完美的響應式處理視頻或幻燈片的嵌入,基於父體的寬度。
  • Toggle:比 config toggle 更加通用,設計用於任何內容,如 SDK 代碼。

擴展的短代碼

{{% module "github.com/hugomods/shortcodes" %}}

擴展的短代碼列表。

線上代碼編輯器

  • CodePen:顯示 CodePen 代碼。
  • JSFiddle:顯示 JSFiddle 代碼。
  • JSRun:顯示 JSRun 代碼。

媒體播放器

由模塊提供的短代碼

你可能需要安裝相應的模塊來使用以下短代碼。

  • 加密:加密內容。
  • 圖標:顯示圖標。
  • [圖片鏈接]({{< relref "modules/enhancement/bigger-picture#shortcode" >}}):當點擊圖片鏈接時彈出一個圖片。
  • KaTex:數學排版。
  • [Mermaid]({{< relref "modules/content/mermaid#usages" >}}):使用受 Markdown 啓發的文本定義和一個渲染器來創建和修改複雜的圖表。
  • Video.js:自定義屬於你自己的視頻播放器。