例1: パラメータなし

{{< alert >}}
**警告!** この行為は破壊的です!
{{< /alert >}}

例2: 名前なしパラメータ (アイコン変更)

{{< alert "twitter" >}}
Twitter で私を[フォロー](https://twitter.com/nunocoracao)するのを忘れないでください。
{{< /alert >}}

例3: 名前付きパラメータ (色指定)

{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
これはエラーです!
{{< /alert >}}

例

{{< article link="/docs/welcome/" >}}

例

{{< badge >}}
新しい記事!
{{< /badge >}}

例

{{< button href="#button" target="_self" >}}
アクションを呼び出す
{{< /button >}}

例1: 画像リスト

{{< carousel images="{image1.jpg, image2.png, ...}" >}}

例2: 正規表現とカスタム設定

{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}

例: 棒グラフ

{{< chart >}}
type: 'bar',
data: {
  labels: ['トマト', 'ブルーベリー', 'バナナ', 'ライム', 'オレンジ'],
  datasets: [{
    label: '# 投票数',
    data: [12, 19, 3, 5, 3],
  }]
}
{{< /chart >}}

例: Goコード全体

{{< codeimporter url="...(略).../mdimporter.html" type="go" >}}

{{ $url := .Get "url"}}
{{ with resources.GetRemote (urls.Parse $url) }}
{{ .Content | markdownify }}
{{ else }}
{{ errorf "Mardown Importer Shortcode - Unable to get remote resource" . }}
{{ end }}

例: TOMLコード一部 (11-18行)

{{< codeimporter url="...(略).../hugo.toml" type="toml" startLine="11" endLine="18" >}}

enableRobotsTXT = true
summaryLength = 0

buildDrafts = false
buildFuture = false

enableEmoji = true

例: GitHubカード

{{< github repo="nunocoracao/blowfish" >}}

例: GitLabカード

{{< gitlab projectID="278964" >}}

例

{{< figure src="abstract.jpg" alt="抽象的な紫のアートワーク" caption="Photo by Jr Korpa" >}}

![抽象的な紫のアートワーク](abstract.jpg "Photo by Jr Korpa")

例: 通常のギャラリー (3列)

{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  ...
{{< /gallery >}}

例

{{< icon "github" >}}

カスタムアイコンは assets/icons/ に配置し、ファイル名で参照します。

例

{{< katex >}}
\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)

$$
E = mc^2
$$

例

{{< keywordList >}}
{{< keyword icon="github" >}} Git & Version Control {{< /keyword >}}
{{< keyword icon="code" >}} **Problem Solving** {{< /keyword >}}
{{< /keywordList >}}

{{< keyword >}} *Standalone* Keyword {{< /keyword >}}

例

{{< lead >}}
これは記事の重要な導入文です。読者の注意を引きつけます。
{{< /lead >}}

例1: 最近の記事 (デフォルト表示)

{{< list limit=2 >}}

例2: 特定タイプの記事をカード表示

{{< list title="サンプル" cardView=true limit=3 where="Type" value="sample" >}}

例

- これは LTR です。

    
- هذه قائمة باللغة العربية (これはRTLです)


- 再び LTR です。

例

{{< mdimporter url="https://raw.githubusercontent.com/user/repo/main/README.md" >}}

例: フローチャート

{{< mermaid >}}
graph LR;
    A[入力] --> B(処理);
    B --> C{結果};
{{< /mermaid >}}

例

{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}

例

{{< timeline >}}
  {{< timelineItem icon="star" header="イベント開始" subheader="2023年" badge="重要" >}}
    最初のステップです。
  {{< /timelineItem >}}
  {{< timelineItem icon="code" header="開発フェーズ" subheader="2024年" >}}
    機能開発を行いました。
    <ul><li>機能A</li><li>機能B</li></ul>
  {{< /timelineItem >}}
{{< /timeline >}}

例1: シンプルテキスト

{{< typeit >}}
これはタイプライター効果です。
{{< /typeit >}}

例2: 複数行、ループ、置き換えなし

{{< typeit tag=h3 speed=50 breakLines=false loop=true >}}
"一行目のテキストです。"
"これは二行目。一行目を置き換えます。"
"そして三行目です。"
{{< /typeit >}}

例1: 基本的な埋め込み

{{< youtubeLite id="動画ID" label="動画のタイトル" >}}

例2: 開始時間を指定

{{< youtubeLite id="動画ID" label="動画のタイトル" params="start=130" >}}