blowfish/exampleSite/content/docs/shortcodes/index.ja.md

title, weight, draft, description, slug, tags, series, series_order

title	weight	draft	description	slug	tags	series	series_order
ショートコード	6	false	Blowfish で使えるすべてのショートコード	shortcodes	shortcodes mermaid icon lead docs	Documentation	8

デフォルトの Hugo ショートコードに加えて、Blowfish は機能拡張のためにいくつか独自のものを追加しています。

アコーディオン

accordion は折りたたみ可能なパネルのセットを作成します。各項目は accordionItem サブショートコードで定義します。mode パラメータで、複数の項目を同時に開けるかどうかを制御できます。

パラメータ	説明
mode	オプション collapse(1つのみ開く)または open(複数開く)。デフォルトは collapse です。
separated	オプション true にすると各項目が個別のカードとして表示されます。デフォルトは false(連結リスト)です。

accordionItem のパラメータ:

パラメータ	説明
title	必須 項目のヘッダーに表示されるタイトル。
open	オプション true に設定すると、その項目がデフォルトで開いた状態になります。
header	オプション title のエイリアス。他のショートコードとの互換性のために残されています。
icon	オプション タイトルの前に表示するアイコン名。
align	オプション 項目内のテキストの配置: left、center、right

例1: mode="open"(複数の項目を同時に開ける)+ separated=true

{{</* accordion mode="open" separated=true */>}}
  {{</* accordionItem title="Markdown example" icon="code" open=true */>}}
  This item demonstrates Markdown rendering:
  - **Bold text**
  - Lists
  - `inline code`
  {{</* /accordionItem */>}}

  {{</* accordionItem title="Shortcode example" md=false */>}}
  This item demonstrates shortcode rendering with <code>md=false</code>:
  
  {{</* alert */>}}This is an inline alert.{{</* /alert */>}}
  {{</* /accordionItem */>}}
{{</* /accordion */>}}

{{< accordion mode="open" separated=true >}} {{< accordionItem title="Markdown example" icon="code" open=true >}} This item demonstrates Markdown rendering:

• Bold text
• Lists
• inline code {{< /accordionItem >}}

{{< accordionItem title="Shortcode example" md=false >}} This item demonstrates shortcode rendering with md=false:

{{< alert >}}This is an inline alert.{{< /alert >}} {{< /accordionItem >}} {{< /accordion >}}

例2: mode="collapse"(同時に開けるのは1項目のみ)

{{</* accordion mode="collapse" */>}}
  {{</* accordionItem title="First item" open=true */>}}
  This item uses Markdown with a short list:
  1. One
  2. Two
  3. Three
  {{</* /accordionItem */>}}

  {{</* accordionItem title="Second item" md=false */>}}
  This item includes another shortcode:
  {{</* badge */>}}Tip{{</* /badge */>}}
  {{</* /accordionItem */>}}
{{</* /accordion */>}}

{{< accordion mode="collapse" >}} {{< accordionItem title="First item" open=true >}} This item uses Markdown with a short list:

1. One
2. Two
3. Three {{< /accordionItem >}}

{{< accordionItem title="Second item" md=false >}} This item includes another shortcode: {{< badge >}}Tip{{< /badge >}} {{< /accordionItem >}} {{< /accordion >}}

Admonition

Admonitions は、文書内で読者の注意を引くための強調表示を挿入するための機能です。

Admonitions は alert ショートコードと同様の目的を持ちますが、Hugo の render hooks を用いて実装されています。両者の主な違いは構文にあります。admonitions は Markdown 構文を使用するため、異なるプラットフォーム間でも扱いやすく、一方、ショートコードは Hugo 固有の仕組みです。構文は GitHub の alerts に近い形式です。

> [!TIP]
> Tip タイプの表示例。

> [!TIP]+ カスタムタイトル
> タイトルを指定した折りたたみ可能な表示例。
{icon="twitter"}

Tip

Tip タイプの表示例。

[!TIP]+ カスタムタイトル タイトルを指定した折りたたみ可能な表示例。 {icon="twitter"}

記号（+ または -）は任意で、表示を折りたたむかどうかを制御します。なお、この記号は Obsidian のみ対応しています。

[!INFO]- 対応しているタイプ 使用可能なタイプには、GitHub alert タイプ および Obsidian callout タイプ が含まれます。タイプ名は大文字・小文字を区別しません。

GitHub タイプ： NOTE, TIP, IMPORTANT, WARNING, CAUTION
Obsidian タイプ： note, abstract, info, todo, tip, success, question, warning, failure, danger, bug, example, quote

アラート

alert ショートコードを使うと、記事の中にスタイリッシュなメッセージボックスを表示できます。読者に見逃してほしくない重要な情報を目立たせるのに便利です。

パラメータ	説明
icon	オプション 左端に表示するアイコン。 デフォルト: exclamation triangle icon (アイコンの使用方法の詳細については、アイコンショートコードをご覧ください。)
iconColor	オプション 基本的な CSS スタイルのアイコンの色。 HEX値 (#FFFFFF) または色の名前 (white) のいずれかで指定できます。 デフォルトでは、現在のカラースキームに基づいて選択されます。
cardColor	オプション 基本的な CSS スタイルのカードの背景色。 HEX値 (#FFFFFF) または色の名前 (white) のいずれかを指定できます。 デフォルトでは、現在のカラースキームに基づいて選択されます。
textColor	オプション 基本的な CSS スタイルのテキストの色。 HEX値 (#FFFFFF) または色の名前 (white) のいずれかを指定できます。 デフォルトでは、現在のカラースキームに基づいて選択されます。

入力は Markdown で記述されているため、自由にフォーマットできます。

例1: パラメータなし

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

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

例2: 名前なしパラメータ

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

{{< alert "twitter" >}} Twitter で私をフォローするのを忘れないでください。 {{< /alert >}}

例3: 名前付きパラメータ

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

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

Ansible Galaxy カード

ansible は、Ansible Galaxy のエントリのカードをレンダリングします。データはビルド時に取得されます。role または collection パラメータのいずれかを受け付け、どちらも namespace.name 形式で指定します。

パラメータ	説明
role	[文字列] namespace.name 形式の Galaxy ロール。例: geerlingguy.docker
collection	[文字列] namespace.name 形式の Galaxy コレクション。例: community.general

1回の呼び出しで role または collection のどちらか一方だけを指定してください。

カードのすべての値は、Hugo の resources.GetRemote によってビルド時に取得されます。Galaxy はクロスオリジンリクエストを許可していないため、カードはブラウザ上では更新されません。値を更新するにはサイトを再ビルドしてください。

例1: ロール

{{</* ansible role="geerlingguy.docker" */>}}

{{< ansible role="geerlingguy.docker" >}}

例2: コレクション

{{</* ansible collection="community.general" */>}}

{{< ansible collection="community.general" >}}

記事

Article は、1つの記事を Markdown ファイルに埋め込みます。埋め込むファイルへの link は、埋め込むファイルの .RelPermalink である必要があります。ショートコードは、親を参照している場合は何も表示しないことに注意してください。注: Blowfish (/blowfish/ など) のようなサブフォルダでウェブサイトを実行している場合は、そのパスをリンクに含めてください。

パラメータ	説明
link	必須 ターゲット記事への .RelPermalink。
showSummary	オプション のブール値で、記事の要約を表示するかどうかを示します。設定されていない場合は、サイトのデフォルト設定が使用されます。
compactSummary	オプション のブール値で、要約をコンパクトモードで表示するかどうかを示します。デフォルトは false です。

例:

{{</* article link="/ja/docs/welcome/" showSummary=true compactSummary=true */>}}

{{< article link="/ja/docs/welcome/" showSummary=true compactSummary=true >}}

バッジ

badge は、メタデータを表示するのに役立つ、スタイリッシュなバッジを出力します。

例:

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

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

ボタン

button は、主要なアクションを強調するために使用できる、スタイリッシュなボタンコンポーネントを出力します。リンクの URL、ターゲット、および関係を指定するために使用できる、3 つのオプション変数 href、target、rel があります。

例:

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

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

カルーセル

carousel は、複数の画像をインタラクティブで魅力的に表示するために使用されます。これにより、ユーザーは画像1枚分の縦方向のスペースのみを使って、複数の画像をスライドさせながら表示できます。すべての画像は、親コンポーネントの幅いっぱいに表示され、16:9、21:9、または 32:9 の事前に決められたアスペクト比のいずれかを使用して表示されます。

パラメータ	説明
images	必須 画像名または URL に一致する正規表現文字列。
aspectRatio	オプション カルーセルのアスペクト比。16-9、21-9、または 32-9 のいずれか。デフォルトでは 16-9 に設定されています。
interval	オプション 自動スクロールの間隔。ミリ秒単位で指定します。デフォルトは 2000 (2秒) です。

例1: 16:9 のアスペクト比と冗長な画像のリスト

{{</* carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg, gallery/03.jpg, gallery/01.jpg, gallery/02.jpg, gallery/04.jpg}" */>}}

{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}

例2: 21:9 のアスペクト比と正規表現による画像のリスト

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

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

チャート

chart は Chart.js ライブラリを使用して、シンプルな構造化データを使用して記事にチャートを埋め込みます。さまざまなチャートスタイルをサポートしており、すべてをショートコード内から設定できます。ショートコードタグの間にチャートパラメータを指定するだけで、Chart.js が残りの処理を行います。

構文とサポートされているチャートタイプの詳細については、公式 Chart.js ドキュメントを参照してください。

例:

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

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

[チャートのサンプル]({{< ref "charts" >}})ページで、Chart.js の他の例を見ることができます。

コードインポーター

このショートコードは、コピーアンドペーストせずに外部ソースから簡単にコードをインポートするためのものです。

パラメータ	説明
url	必須 外部でホストされているコードファイルへの URL。
type	構文の強調表示に使用されるコードタイプ。
startLine	オプション インポートを開始する行番号。
endLine	オプション インポートを終了する行番号。

例:

{{</* codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" */>}}

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}

{{</* codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18" */>}}

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18">}}

Codeberg カード

codeberg を使用すると、Codeberg API を介して Codeberg リポジトリをすばやくリンクでき、スターやフォークなどの統計に関するリアルタイムの更新を提供できます。

パラメータ	説明
repo	[文字列] username/repo 形式の Codeberg リポジトリ

例1:

{{</* codeberg repo="forgejo/forgejo" */>}}

{{< codeberg repo="forgejo/forgejo" >}}

CTA ボタン

cta は、ドキュメント、ランディングページ、長文コンテンツ内で明確でアクセシブルなコールトゥアクションを表示するために使用します。

パラメータ	説明
url	リンク先の URL。デフォルトは # です。
label	ボタンのテキスト。デフォルトは Learn more です。
style	primary(デフォルト)または outline。

{{</* cta url="/docs/installation/" label="Start building" */>}}
{{</* cta url="/docs/configuration/" label="Explore configuration" style="outline" */>}}

{{< cta url="/docs/installation/" label="Start building" >}}   {{< cta url="/docs/configuration/" label="Explore configuration" style="outline" >}}

メール

難読化された mailto リンクを作成します:

{{</* email email="mailto:hello@test.com" text="text" subject="Reply to awesome article" */>}}

{{< email email="mailto:hello@test.com" text="text" subject="Reply to awesome article" >}}

機能グリッド

表示用のマークアップを繰り返すことなく、洗練されたレスポンシブな機能紹介セクションを作成できます。feature-grid をコンテナとして使用し、各項目ごとに feature ショートコードを追加します。グリッドは大画面ではデフォルトで3列になり、4列に設定することもできます。

パラメータ	説明
columns	大画面での列数(オプション): 3(デフォルト)または 4。
icon	機能のアイコン名。デフォルトは wand-magic-sparkles です。
title	機能のタイトル。Markdown がサポートされています。
url	機能リンクのリンク先(オプション)。
label	リンクのラベル。デフォルトは Learn more です。

例:

{{</* feature-grid columns="3" */>}}
{{</* feature icon="wand-magic-sparkles" title="Make it yours" url="/docs/configuration/" */>}}
Start from a thoughtful default, then adjust every meaningful detail.
{{</* /feature */>}}
{{</* feature icon="file-lines" title="Publish faster" url="/docs/shortcodes/" label="Browse shortcodes" */>}}
Compose rich content with small, reusable building blocks.
{{</* /feature */>}}
{{</* feature icon="heart" title="Built for people" */>}}
Accessible defaults, responsive layouts, and dark mode included.
{{</* /feature */>}}
{{</* /feature-grid */>}}

{{< feature-grid >}} {{< feature icon="wand-magic-sparkles" title="Make it yours" url="/docs/configuration/" >}} Start from a thoughtful default, then adjust every meaningful detail. {{< /feature >}} {{< feature icon="file-lines" title="Publish faster" url="/docs/shortcodes/" label="Browse shortcodes" >}} Compose rich content with small, reusable building blocks. {{< /feature >}} {{< feature icon="heart" title="Built for people" >}} Accessible defaults, responsive layouts, and dark mode included. {{< /feature >}} {{< /feature-grid >}}

Figure

Blowfish には、コンテンツに画像を追加するための figure ショートコードが含まれています。このショートコードは、追加のパフォーマンス上の利点を提供するために、基本の Hugo 機能を置き換えます。

提供された画像がページリソースである場合、Hugo Pipes を使用して最適化され、さまざまなデバイス解像度に適した画像を提供するために拡大縮小されます。静的アセットまたは外部画像への URL が提供された場合、Hugo による画像処理なしにそのまま含まれます。

figure ショートコードは、6つのパラメータを受け付けます。

パラメータ	説明
src	必須 画像のローカルパス/ファイル名または URL。パスとファイル名を指定すると、テーマは次の優先順位を使用して画像の特定を試みます。まず、ページにバンドルされたページリソースとして、次に assets/ ディレクトリ内のアセット、最後に static/ ディレクトリ内の静的画像。
alt	画像の代替テキスト。
caption	画像の下に表示される画像キャプションの Markdown。
class	画像に適用する追加の CSS クラス。
href	画像をリンクする URL。
target	href URL のターゲット属性。
nozoom	nozoom=true は、画像の「ズーム」機能を無効にします。これは、href リンクと組み合わせて使用​​するのが最も役立ちます。
default	Hugoのデフォルトの figure の動作に戻すための特別なパラメータ。default=true を指定し、通常の Hugo ショートコード構文を使用します。

Blowfish も、標準の Markdown 構文を使用して含まれる画像の自動変換もサポートしています。次の形式を使用するだけで、テーマが処理してくれます。

![代替テキスト](image.jpg "画像キャプション")

例:

{{</* figure
    src="abstract.jpg"
    alt="抽象的な紫のアートワーク"
    caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
    */>}}

<!-- または -->

![抽象的な紫のアートワーク](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)")

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

Forgejo カード

forgejo を使用すると、forgejo API を介して Forgejo リポジトリをすばやくリンクでき、スターやフォークなどの統計をリアルタイムで更新できます。

パラメータ	説明
repo	[文字列] username/repo 形式の forgejo リポジトリ
server	[文字列] https://v11.next.forgejo.org のようなサーバー URL

例1:

{{</* forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" */>}}

{{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}}

ギャラリー

gallery を使用すると、複数の画像を一度に、レスポンシブな方法で、より多様で興味深いレイアウトで紹介できます。

ギャラリーに画像を追加するには、各画像に img タグを使用し、ギャラリーが各画像の列幅を識別できるように class="grid-wXX" を追加します。デフォルトで使用可能な幅は 10% から始まり、5% 刻みで最大 100% までです。たとえば、幅を 65% に設定するには、クラスを grid-w65 に設定します。さらに、3列のギャラリーを構築するために、33% と 66% の幅も使用できます。また、tailwind +のレスポンシブインジケーターを活用して、レスポンシブグリッドを作成することもできます。

例1: 通常のギャラリー

{{</* 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" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{</* /gallery */>}}

{{< gallery >}} {{< /gallery >}}

例2: レスポンシブギャラリー

{{</* gallery */>}}
  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
{{</* /gallery */>}}

{{< gallery >}} {{< /gallery >}}

Gist

gistショートコードは、Gistのユーザー名、ID、必要に応じて特定のファイル名を指定することで、GitHub Gistをコンテンツに直接埋め込むことができます。

パラメーター	説明
[0]	[文字列] GitHubのユーザー名
[1]	[文字列] GistのID
[2]（オプション）	[文字列] Gist内で埋め込む特定のファイル名（オプション）

例1：Gist全体を埋め込む

{{</* gist "octocat" "6cad326836d38bd3a7ae" */>}}

{{< gist "octocat" "6cad326836d38bd3a7ae" >}}

例2：Gistの特定ファイルを埋め込む

{{</* gist "rauchg" "2052694" "README.md" */>}}

{{< gist "rauchg" "2052694" "README.md" >}}

Gitea カード

gitea を使用すると、gitea API を介して Gitea リポジトリをすばやくリンクでき、スターやフォークなどの統計に関するリアルタイムに更新できます。

パラメータ	説明
repo	[文字列] username/repo 形式の gitea リポジトリ
server	[文字列] https://git.fsfe.org のようなサーバー URL

例1:

{{</* gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" */>}}

{{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}}

GitHub カード

github を使用すると、github リポジトリをすばやくリンクでき、スター数やフォーク数などの統計情報をリアルタイムで表示および更新できます。

パラメータ	説明
repo	[文字列] username/repo 形式の github リポジトリ
showThumbnail	[ブール値] サムネイルを表示するかどうか。デフォルトは true。

例1:

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

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

GitLab カード

gitlab を使用すると、GitLab プロジェクト (リポジトリの GitLab 用語) をすばやくリンクできます。 スター数やフォーク数などのリアルタイムの統計情報を表示します。 github とは異なり、プロジェクトの主要なプログラミング言語を表示することはできません。 最後に、api/v4/projects/ エンドポイントが利用可能である限り、カスタム GitLab インスタンス URL を指定できるため、このショートコードはほとんどのセルフホスト/エンタープライズデプロイメントと互換性があります。

パラメータ	説明
projectID	[文字列] GitLab の数値 ProjectID
baseURL	[文字列] オプションの GitLab インスタンス URL。デフォルトは https://gitlab.com/

例1:

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

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

Hugging Face カード

huggingface を使用すると、Hugging Face のモデルやデータセットを素早くリンクし、いいね数やダウンロード数などのリアルタイム情報を表示できます。

パラメータ	説明
model	[文字列] ユーザー名/モデル名 の形式での Hugging Face モデル
dataset	[文字列] ユーザー名/データセット名 の形式での Hugging Face データセット

注意: model または dataset パラメータのどちらか一方を使用してください。

例1（モデル）:

{{</* huggingface model="google-bert/bert-base-uncased" */>}}

{{< huggingface model="google-bert/bert-base-uncased" >}}

例2（データセット）:

{{</* huggingface dataset="stanfordnlp/imdb" */>}}

{{< huggingface dataset="stanfordnlp/imdb" >}}

アイコン

icon は SVG アイコンを出力し、アイコン名を唯一のパラメータとして受け取ります。アイコンは、現在のテキストサイズに合わせてスケーリングされます。

例:

{{</* icon "github" */>}}

出力: {{< icon "github" >}}

アイコンは Hugo パイプラインを使用して設定されるため、非常に柔軟です。Blowfish には、ソーシャル、リンク、その他の目的のための組み込みアイコンが多数含まれています。サポートされているアイコンの完全なリストについては、[アイコンのサンプル]({{< ref "samples/icons" >}})ページを確認してください。

カスタムアイコンは、プロジェクトの assets/icons/ ディレクトリに独自のアイコンアセットを提供することで追加できます。その後、.svg 拡張子なしで SVG ファイル名を使用して、ショートコードでアイコンを参照できます。

アイコンは、[アイコンパーシャル]({{< ref "partials#アイコン" >}})を呼び出すことで、パーシャルでも使用できます。

KaTeX

katex ショートコードを使用すると、KaTeX パッケージを使用して記事のコンテンツに数式を追加できます。利用可能な構文については、サポートされている TeX 関数のオンラインリファレンスを参照してください。

記事に数式を含めるには、コンテンツを含むショートコードを任意の場所に配置するだけです。記事ごとに1回だけ含める必要があり、KaTeX はそのページのマークアップを自動的にレンダリングします。インライン表記とブロック表記の両方がサポートされています。

インライン表記は、式を \( と \) デリミタで囲むことで生成できます。また、ブロック表記は $$ デリミタを使用して生成できます。

例:

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

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

[数式表記のサンプル]({{< ref "mathematical-notation" >}})ページで、その他の例を確認できます。

キーワード

keyword コンポーネントは、特定の重要な単語やフレーズ、例えばプロフェッショナルスキルなどを視覚的に強調表示するために使用できます。keywordList ショートコードは、複数の keyword アイテムをグループ化するために使用できます。各アイテムには、次のプロパティを設定できます。

パラメータ	説明
icon	キーワードで使用するオプションのアイコン

入力は Markdown で記述されているため、自由にフォーマットできます。

例1 :

{{</* keyword */>}} *スーパー* スキル {{</* /keyword */>}}

{{< keyword >}} スーパー スキル {{< /keyword >}}

例2 :

{{</* keywordList */>}}
{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
{{</* keyword icon="code" */>}} **大事な** スキル {{</* /keyword */>}}
{{</* /keywordList */>}}

{{</* keyword */>}} *スタンドアロン* スキル {{</* /keyword */>}}

{{< keywordList >}} {{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}} {{< keyword icon="code" >}} 大事な スキル {{< /keyword >}} {{< /keywordList >}} {{< keyword >}} スタンドアロン スキル {{< /keyword >}}

リード文

lead は、記事の冒頭を強調するために使用されます。導入部分をスタイルしたり、重要な情報を呼び出したりするために使用できます。Markdown コンテンツを lead ショートコードで囲むだけです。

例:

{{</* lead */>}}
ピンチはチャンス。
{{</* /lead */>}}

{{< lead >}} ピンチはチャンス。 {{< /lead >}}

リスト

List は、最近の記事のリストを表示します。このショートコードには、リストを制限するための制限値が必要です。さらに、記事をパラメータでフィルタリングするために、where と value をサポートしています。このショートコードは、その親ページを表示しませんが、制限値にはカウントされることに注意してください。

パラメータ	説明
limit	必須 表示する最近の記事の数。
title	オプションのリストのタイトル。デフォルトは Recent です。
cardView	オプションのカードビュー。リストに対して有効化されます。デフォルトは false です。
where	記事のクエリに使用される変数。例: Type
value	where で定義されたパラメータに一致する必要がある値。記事のクエリに使用されます。例: where == Type の場合、有効な値は sample です。

{{< alert >}} where と value の値は、ショートコードのコードで次のクエリ where .Site.RegularPages $where $value で使用されます。使用可能なパラメータの詳細については、Hugo ドキュメントを確認してください。 {{</ alert >}}

例 #1:

{{</* list limit=2 */>}}

{{< list limit=2 >}}

例 #2:

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

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

LTR/RTL

ltr と rtl を使用すると、それぞれのコンテンツを混在させることができます。多くの RTL 言語ユーザーは、コンテンツの一部に LTR を含めたいと考えています。このショートコードを使用するとそれを行うことができ、Hugo ショートコードの最も外側の要素として % を活用することで、内部のマークダウンは通常どおりレンダリングされます。

例:

- これは Markdown のリストです。
- デフォルトでは LTR 方向です。
{{%/* rtl */%}}
- هذه القائمة باللغة العربية
- من اليمين الى اليسار
{{%/* /rtl */%}}

• これは Markdown のリストです。
• デフォルトでは LTR 方向です。 {{% rtl %}}
• هذه القائمة باللغة العربية
• من اليمين الى اليسار {{% /rtl %}}

Markdown インポーター

このショートコードを使用すると、外部のソースからマークダウンファイルをインポートできます。これは、コンテンツをコピー&ペーストすることなく、他のリポジトリやウェブサイトからコンテンツを含めるのに役立ちます。

パラメータ	説明
url	必須 外部でホストされている Markdown ファイルへの URL。

例:

{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}}

{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}

Mermaid

mermaid を使用すると、テキストを使用して詳細な図や視覚化を描画できます。内部で Mermaid を使用し、さまざまな図、チャート、その他の出力形式をサポートしています。

mermaid ショートコード内に Mermaid 構文を記述するだけで、プラグインが残りの処理を行います。

構文とサポートされている図の種類の詳細については、公式 Mermaid ドキュメントを参照してください。

例:

{{</* mermaid */>}}
graph LR;
A[レモン]-->B[レモネード];
B-->C[利益]
{{</* /mermaid */>}}

{{< mermaid >}} graph LR; A[レモン]-->B[レモネード]; B-->C[利益] {{< /mermaid >}}

[図とフローチャートのサンプル]({{< ref "diagrams-flowcharts" >}})ページで、Mermaid の追加の例を見ることができます。

統計

stats と stat を使用すると、簡潔で分かりやすい指標をレスポンシブなグリッドで表示できます。グリッドは大画面ではデフォルトで3列、columns="4" を指定すると4列になります。

{{</* stats */>}}
{{</* stat value="40+" label="Shortcodes" */>}}Compose pages without bespoke templates.{{</* /stat */>}}
{{</* stat value="100%" label="Portable" */>}}Keep your content in Markdown.{{</* /stat */>}}
{{</* stat value="0" label="Required plugins" */>}}Start with Hugo and Blowfish.{{</* /stat */>}}
{{</* /stats */>}}

{{< stats >}} {{< stat value="40+" label="Shortcodes" >}}Compose pages without bespoke templates.{{< /stat >}} {{< stat value="100%" label="Portable" >}}Keep your content in Markdown.{{< /stat >}} {{< stat value="0" label="Required plugins" >}}Start with Hugo and Blowfish.{{< /stat >}} {{< /stats >}}

ステップ

steps と step は、オンボーディング、プロセス、ロードマップ、チュートリアルに使用できます。

{{</* steps */>}}
{{</* step number="1" title="Configure the theme" */>}}Choose a colour scheme and homepage layout.{{</* /step */>}}
{{</* step number="2" title="Write your content" */>}}Use standard Markdown and shortcodes.{{</* /step */>}}
{{</* /steps */>}}

{{< steps >}} {{< step number="1" title="Configure the theme" >}}Choose a colour scheme and homepage layout.{{< /step >}} {{< step number="2" title="Write your content" >}}Use standard Markdown and shortcodes.{{< /step >}} {{< /steps >}}

色の見本

swatches は、カラーパレットなどのカラー要素を紹介するために、最大3つの異なる色のセットを出力します。このショートコードは、各色の HEX コードを受け取り、それぞれの視覚要素を作成します。

例

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

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

Tabs

tabs ショートコードは、特定の手順における異なるバリアントを提示する際によく使用される。例えば、VS Code を各種プラットフォームにインストールする方法を示す場合などに利用できる。

例

{{</* tabs */>}}

    {{</* tab label="Windows" */>}}
    Chocolatey を使用してインストール:

    ```pwsh
    choco install vscode.install
    ```

    または WinGet を使用してインストール

    ```pwsh
    winget install -e --id Microsoft.VisualStudioCode
    ```
    {{</* /tab */>}}

    {{</* tab label="macOS" */>}}
    ```bash
    brew install --cask visual-studio-code
    ```
    {{</* /tab */>}}

    {{</* tab label="Linux" */>}}
    [ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
    {{</* /tab */>}}

{{</* /tabs */>}}

出力

{{< tabs >}}

{{< tab label="Windows" >}}
Chocolatey を使用してインストール:

```pwsh
choco install vscode.install
```

または WinGet を使用してインストール

```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{< /tab >}}

{{< tab label="macOS" >}}
```bash
brew install --cask visual-studio-codeqweqwe
```
{{< /tab >}}

{{< tab label="Linux" >}}
[ドキュメント](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux)を参照。
{{< /tab >}}

{{< /tabs >}}

タイムライン

timeline は、さまざまなユースケース (例: 職務経歴、プロジェクトの成果など) で使用できる視覚的なタイムラインを作成します。timeline ショートコードは、メインタイムライン内の各アイテムを定義するために timelineItem サブショートコードに依存しています。各アイテムには、次のプロパティを設定できます。

パラメータ	説明
md	コンテンツを Markdown としてレンダリングする (true/false)
icon	タイムラインのビジュアルで使用するアイコン
header	各エントリのヘッダーー
badge	右上のバッジ内に配置するテキスト
subheader	エントリのサブヘッダー

例:

{{</* timeline */>}}

{{</* timelineItem icon="github" header="ヘッダー" badge="バッジテスト" subheader="サブヘッダー" */>}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
{{</* /timelineItem */>}}

{{</* timelineItem icon="code" header="もう1つの素晴らしいヘッダー" badge="日付 - 現在" subheader="素晴らしいサブヘッダー" */>}}
HTML コード付き
<ul>
  <li>コーヒー</li>
  <li>紅茶</li>
  <li>牛乳</li>
</ul>
{{</* /timelineItem */>}}

{{</* timelineItem icon="star" header="ショートコード" badge="素晴らしい" */>}}
他のショートコード付き
{{</* 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" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{</* /gallery */>}}
{{</* /timelineItem */>}}

{{</* timelineItem icon="code" header="もう1つの素晴らしいヘッダー"*/>}}
{{</* github repo="nunocoracao/blowfish" */>}}
{{</* /timelineItem */>}}

{{</* /timeline */>}}

{{< timeline >}}

{{< timelineItem icon="github" header="ヘッダー" badge="バッジテスト" subheader="サブヘッダー" >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. {{< /timelineItem >}}

{{< timelineItem icon="code" header="もう1つの素晴らしいヘッダー" badge="日付 - 現在" subheader="素晴らしいサブヘッダー">}} HTML コード付き

• コーヒー
• 紅茶
• 牛乳

{{< /timelineItem >}}

{{< timelineItem icon="star" header="ショートコード" badge="素晴らしい" >}} 他のショートコード付き {{< gallery >}} {{< /gallery >}} {{< /timelineItem >}} {{< timelineItem icon="code" header="もう1つの素晴らしいヘッダー">}} {{< github repo="nunocoracao/blowfish" >}} {{< /timelineItem >}} {{< /timeline >}}

TypeIt

TypeIt は、この地球上で最も用途の広い、タイプライターエフェクトを作成するための JavaScript ツールです。簡単な設定で、行を分割したり、相互に削除および置換したりする単一または複数の文字列を入力でき、複雑な HTML を含む文字列も処理できます。

Blowfish は、shortcode を使用して TypeIt 機能のサブセットを実装しています。typeit ショートコード内にテキストを記述し、次のパラメータを使用して、必要な動作を設定します。

パラメータ	説明
tag	[文字列] 文字列のレンダリングに使用される html タグ。
classList	[文字列] html 要素に適用する css クラスのリスト。
initialString	[文字列] 書き込まれて表示され、置き換えられる初期文字列。
speed	[数値] 各ステップ間のミリ秒単位で測定されるタイピング速度。
lifeLike	[ブール値] 実際の人間が行っているかのように、タイピングのペースを不規則にします。
startDelay	[数値] プラグインが初期化されてからタイピングを開始するまでの時間。
breakLines	[ブール値] 複数の文字列が互いに上に印刷されるか (true)、削除されて互いに置き換えられるか (false)。
waitUntilVisible	[ブール値] インスタンスがロードされたときに開始するか、ターゲット要素がビューポートに表示されたときにのみ開始するかを決定します。デフォルトは true です。
loop	[ブール値] 文字列が完了後に継続的にループするかどうか。

例1:

{{</* typeit */>}}
Lorem ipsum dolor sit amet 
{{</* /typeit */>}}

{{< typeit >}} Lorem ipsum dolor sit amet {{< /typeit >}}

例2:

{{</* typeit 
  tag=h1
  lifeLike=true
*/>}}
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
{{</* /typeit */>}}

{{< typeit tag=h1 lifeLike=true

}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. {{< /typeit >}}

例3:

{{</* typeit 
  tag=h3
  speed=50
  breakLines=false
  loop=true
*/>}}
"正直言って、俺の知ったこっちゃない。" 風と共に去りぬ (1939)
"イヤとは言わせない。" ゴッドファーザー (1972)
"トト、私たちもうカンザスにいないみたい。" オズの魔法使い (1939)
{{</* /typeit */>}}

{{< typeit tag=h3 speed=50 breakLines=false loop=true

}} "正直言って、俺の知ったこっちゃない。" 風と共に去りぬ (1939) "イヤとは言わせない。" ゴッドファーザー (1972) "トト、私たちもうカンザスにいないみたい。" オズの魔法使い (1939) {{< /typeit >}}

Video

Blowfish には、ローカルまたは外部の動画を本文に埋め込むための video ショートコードがあります。ショートコードは <figure> で包んだレスポンシブな動画プレーヤーと、任意のキャプションを出力します。

video ショートコードは次のパラメータを受け取ります:

パラメータ	説明
src	必須。 動画のURLまたはローカルパス。ローカルの検索順: ページリソース → assets/ → static/。
poster	任意のポスター画像URLまたはローカルパス。省略時は、ページバンドル内で同名の画像を試します。
caption	動画下に表示するMarkdownキャプション（任意）。
autoplay	true/false。true で自動再生。既定: false。
loop	true/false。true でループ再生。既定: false。
muted	true/false。true でミュート。既定: false。
controls	true/false。true でブラウザ標準の再生コントロールを表示。既定: true。
playsinline	true/false。true でモバイルのインライン再生。既定: true。
preload	metadata（情報のみ読み込み）、none（帯域節約）、auto（より多く事前読み込み）。既定: metadata。
start	任意の開始秒。
end	任意の終了秒。
ratio	プレーヤーの予約アスペクト比。16/9、4/3、1/1、またはカスタム W/H に対応。既定: 16/9。
fit	比率への収まり方: contain（切り抜きなし）、cover（切り抜いて埋める）、fill（引き伸ばす）。既定: contain。

ブラウザが動画を再生できない場合、プレーヤーは英語の簡潔なフォールバック文とダウンロードリンクを表示します。

例:

{{</* video
    src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm"
    poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg"
    caption="**パブリックドメインのデモ** — CC0 の動画とポスター。"
    loop=true
    muted=true
*/>}}

{{< video src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm" poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg" caption="パブリックドメインのデモ — CC0 の動画とポスター。" loop=true muted=true

}}

Youtube Lite

lite-youtube-embed ライブラリを使用して YouTube 動画を埋め込むためのショートカット。このライブラリは、標準の YouTube 埋め込みの軽量な代替手段であり、より高速で効率的になるように設計されています。

パラメータ	説明
id	[文字列] 埋め込む YouTube 動画の ID。
label	[文字列] 動画のラベル
params	[文字列] 動画再生のための追加パラメータ

例1:

{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}}

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}

例2:

以下に示すように、params 変数に Youtube のすべてのプレーヤーパラメータを使用できます。

この動画は130秒(2分10秒)後に開始されます。

{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130" */>}}

この動画には UI コントロールがなく、130秒後に再生が開始され、10秒後に停止します。

以下に示すように複数のオプションを連結するには、それらの間に & 文字を追加する必要があります。

{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" */>}}

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" >}}

詳細については、youtubeLite GitHub リポジトリおよび Youtube のプレーヤーパラメータページを参照してください。