デフォルトの 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 >}}Markdown example
This item demonstrates Markdown rendering:
- Bold text
- Lists
inline code
Shortcode example
md=false:例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 >}}First item
This item uses Markdown with a short list:
- One
- Two
- Three
Second item
Admonition#
Admonitions は、文書内で読者の注意を引くための強調表示を挿入するための機能です。
Admonitions は alert ショートコードと同様の目的を持ちますが、Hugo の render hooks を用いて実装されています。両者の主な違いは構文にあります。admonitions は Markdown 構文を使用するため、異なるプラットフォーム間でも扱いやすく、一方、ショートコードは Hugo 固有の仕組みです。構文は GitHub の alerts に近い形式です。
> [!TIP]
> Tip タイプの表示例。
> [!TIP]+ カスタムタイトル
> タイトルを指定した折りたたみ可能な表示例。
{icon="twitter"}Tip タイプの表示例。
カスタムタイトル
タイトルを指定した折りたたみ可能な表示例。
記号（+ または -）は任意で、表示を折りたたむかどうかを制御します。なお、この記号は Obsidian のみ対応しています。
対応しているタイプ
使用可能なタイプには、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 >}}例2: 名前なしパラメータ
{{< alert "twitter" >}}
Twitter で私を[フォロー](https://twitter.com/nunocoracao)するのを忘れないでください。
{{< /alert >}}例3: 名前付きパラメータ
{{< 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" >}}例2: コレクション
{{< 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 >}}バッジ#
badge は、メタデータを表示するのに役立つ、スタイリッシュなバッジを出力します。
例:
{{< badge >}}
新しい記事!
{{< /badge >}}ボタン#
button は、主要なアクションを強調するために使用できる、スタイリッシュなボタンコンポーネントを出力します。リンクの URL、ターゲット、および関係を指定するために使用できる、3 つのオプション変数 href、target、rel があります。
例:
{{< 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}" >}}
例2: 21:9 のアスペクト比と正規表現による画像のリスト
{{< 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.js の他の例を見ることができます。
コードインポーター#
このショートコードは、コピーアンドペーストせずに外部ソースから簡単にコードをインポートするためのものです。
| パラメータ | 説明 |
|---|---|
url | 必須 外部でホストされているコードファイルへの URL。 |
type | 構文の強調表示に使用されるコードタイプ。 |
startLine | オプション インポートを開始する行番号。 |
endLine | オプション インポートを終了する行番号。 |
例:
{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}{{ $url := .Get "url" }}
{{ with resources.GetRemote (urls.Parse $url) }}
{{ .Content | markdownify }}
{{ else }}
{{ warnf "mdimporter shortcode: unable to fetch %q: %s" $url .Position }}
{{ end }}{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18" >}}enableRobotsTXT = true
summaryLength = 0
buildDrafts = false
buildFuture = false
enableEmoji = trueCodeberg カード#
codeberg を使用すると、Codeberg API を介して Codeberg リポジトリをすばやくリンクでき、スターやフォークなどの統計に関するリアルタイムの更新を提供できます。
| パラメータ | 説明 |
|---|---|
repo | [文字列] username/repo 形式の Codeberg リポジトリ |
例1:
{{< 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" >}}Start building Explore configuration
メール#
難読化された mailto リンクを作成します:
{{< 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 >}}Make it yours
Publish faster
Built for people
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 構文を使用して含まれる画像の自動変換もサポートしています。次の形式を使用するだけで、テーマが処理してくれます。
例:
{{< figure
src="abstract.jpg"
alt="抽象的な紫のアートワーク"
caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
>}}
<!-- または -->
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" >}}ギャラリー#
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 >}}
例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 >}}Gist#
gistショートコードは、Gistのユーザー名、ID、必要に応じて特定のファイル名を指定することで、GitHub Gistをコンテンツに直接埋め込むことができます。
| パラメーター | 説明 |
|---|---|
[0] | [文字列] GitHubのユーザー名 |
[1] | [文字列] GistのID |
[2]（オプション） | [文字列] Gist内で埋め込む特定のファイル名（オプション） |
例1：Gist全体を埋め込む
{{< gist "octocat" "6cad326836d38bd3a7ae" >}}例2：Gistの特定ファイルを埋め込む
{{< 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" >}}Source files of fsfe.org, pdfreaders.org, freeyourandroid.org, ilovefs.org, drm.info, and test.fsfe.org. Contribute: https://fsfe.org/contribute/web/
GitHub カード#
github を使用すると、github リポジトリをすばやくリンクでき、スター数やフォーク数などの統計情報をリアルタイムで表示および更新できます。
| パラメータ | 説明 |
|---|---|
repo | [文字列] username/repo 形式の github リポジトリ |
showThumbnail | [ブール値] サムネイルを表示するかどうか。デフォルトは true。 |
例1:
{{< 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" >}}Hugging Face カード#
huggingface を使用すると、Hugging Face のモデルやデータセットを素早くリンクし、いいね数やダウンロード数などのリアルタイム情報を表示できます。
| パラメータ | 説明 |
|---|---|
model | [文字列] ユーザー名/モデル名 の形式での Hugging Face モデル |
dataset | [文字列] ユーザー名/データセット名 の形式での Hugging Face データセット |
注意: model または dataset パラメータのどちらか一方を使用してください。
例1（モデル）:
{{< huggingface model="google-bert/bert-base-uncased" >}}例2（データセット）:
{{< huggingface dataset="stanfordnlp/imdb" >}}アイコン#
icon は SVG アイコンを出力し、アイコン名を唯一のパラメータとして受け取ります。アイコンは、現在のテキストサイズに合わせてスケーリングされます。
例:
{{< icon "github" >}}出力:
アイコンは Hugo パイプラインを使用して設定されるため、非常に柔軟です。Blowfish には、ソーシャル、リンク、その他の目的のための組み込みアイコンが多数含まれています。サポートされているアイコンの完全なリストについては、アイコンのサンプルページを確認してください。
カスタムアイコンは、プロジェクトの assets/icons/ ディレクトリに独自のアイコンアセットを提供することで追加できます。その後、.svg 拡張子なしで SVG ファイル名を使用して、ショートコードでアイコンを参照できます。
アイコンは、アイコンパーシャルを呼び出すことで、パーシャルでも使用できます。
KaTeX#
katex ショートコードを使用すると、KaTeX パッケージを使用して記事のコンテンツに数式を追加できます。利用可能な構文については、サポートされている TeX 関数のオンラインリファレンスを参照してください。
記事に数式を含めるには、コンテンツを含むショートコードを任意の場所に配置するだけです。記事ごとに1回だけ含める必要があり、KaTeX はそのページのマークアップを自動的にレンダリングします。インライン表記とブロック表記の両方がサポートされています。
インライン表記は、式を \( と \) デリミタで囲むことで生成できます。また、ブロック表記は $$ デリミタを使用して生成できます。
例:
{{< katex >}}
\(f(a,b,c) = (a^2+b^2+c^2)^3\)\(f(a,b,c) = (a^2+b^2+c^2)^3\)
数式表記のサンプルページで、その他の例を確認できます。
キーワード#
keyword コンポーネントは、特定の重要な単語やフレーズ、例えばプロフェッショナルスキルなどを視覚的に強調表示するために使用できます。keywordList ショートコードは、複数の keyword アイテムをグループ化するために使用できます。各アイテムには、次のプロパティを設定できます。
| パラメータ | 説明 |
|---|---|
icon | キーワードで使用するオプションのアイコン |
入力は Markdown で記述されているため、自由にフォーマットできます。
例1 :
{{< keyword >}} *スーパー* スキル {{< /keyword >}}例2 :
{{< keywordList >}}
{{< keyword icon="github" >}} Lorem ipsum dolor. {{< /keyword >}}
{{< keyword icon="code" >}} **大事な** スキル {{< /keyword >}}
{{< /keywordList >}}
{{< keyword >}} *スタンドアロン* スキル {{< /keyword >}}リード文#
lead は、記事の冒頭を強調するために使用されます。導入部分をスタイルしたり、重要な情報を呼び出したりするために使用できます。Markdown コンテンツを lead ショートコードで囲むだけです。
例:
{{< lead >}}
ピンチはチャンス。
{{< /lead >}}リスト#
List は、最近の記事のリストを表示します。このショートコードには、リストを制限するための制限値が必要です。さらに、記事をパラメータでフィルタリングするために、where と value をサポートしています。このショートコードは、その親ページを表示しませんが、制限値にはカウントされることに注意してください。
| パラメータ | 説明 |
|---|---|
limit | 必須 表示する最近の記事の数。 |
title | オプションのリストのタイトル。デフォルトは Recent です。 |
cardView | オプションのカードビュー。リストに対して有効化されます。デフォルトは false です。 |
where | 記事のクエリに使用される変数。例: Type |
value | where で定義されたパラメータに一致する必要がある値。記事のクエリに使用されます。例: where == Type の場合、有効な値は sample です。 |
where と value の値は、ショートコードのコードで次のクエリ where .Site.RegularPages $where $value で使用されます。使用可能なパラメータの詳細については、Hugo ドキュメントを確認してください。例 #1:
{{< list limit=2 >}}最近の記事
例 #2:
{{< list title="サンプル" cardView=true limit=6 where="Type" value="sample" >}}サンプル
アイコン
LTR/RTL#
ltr と rtl を使用すると、それぞれのコンテンツを混在させることができます。多くの RTL 言語ユーザーは、コンテンツの一部に LTR を含めたいと考えています。このショートコードを使用するとそれを行うことができ、Hugo ショートコードの最も外側の要素として % を活用することで、内部のマークダウンは通常どおりレンダリングされます。
例:
- これは Markdown のリストです。
- デフォルトでは LTR 方向です。
{{% rtl %}}
- هذه القائمة باللغة العربية
- من اليمين الى اليسار
{{% /rtl %}}- これは Markdown のリストです。
- デフォルトでは LTR 方向です。
- هذه القائمة باللغة العربية
- من اليمين الى اليسار
Markdown インポーター#
このショートコードを使用すると、外部のソースからマークダウンファイルをインポートできます。これは、コンテンツをコピー&ペーストすることなく、他のリポジトリやウェブサイトからコンテンツを含めるのに役立ちます。
| パラメータ | 説明 |
|---|---|
url | 必須 外部でホストされている Markdown ファイルへの URL。 |
例:
{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}Hi there 👋#
🧠 Principal PM @ Elastic · Creator of Watchfire and Blowfish · Ex-Docker · Ex-founder · Mentor & advisor
- ✨ Principal Product Manager @ Elastic
- 🚀 Personal blog - n9o.xyz
- 🔥 Creator and maintainer of Watchfire @ watchfire.io - repo
- 🐡 Creator and maintainer of Blowfish @ blowfish.page - repo
prev.
- 🐳 Principal Product Manager @ Docker - working on cagent
- 📚 mentoring @ mentorcruise
Mermaid#
mermaid を使用すると、テキストを使用して詳細な図や視覚化を描画できます。内部で Mermaid を使用し、さまざまな図、チャート、その他の出力形式をサポートしています。
mermaid ショートコード内に Mermaid 構文を記述するだけで、プラグインが残りの処理を行います。
構文とサポートされている図の種類の詳細については、公式 Mermaid ドキュメントを参照してください。
例:
{{< mermaid >}}
graph LR;
A[レモン]-->B[レモネード];
B-->C[利益]
{{< /mermaid >}}graph LR; A[レモン]-->B[レモネード]; B-->C[利益]
図とフローチャートのサンプルページで、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 >}}40+
Shortcodes
100%
Portable
0
Required plugins
ステップ#
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 >}}- 1
Configure the theme
Choose a colour scheme and homepage layout. - 2
Write your content
Use standard Markdown and shortcodes.
色の見本#
swatches は、カラーパレットなどのカラー要素を紹介するために、最大3つの異なる色のセットを出力します。このショートコードは、各色の HEX コードを受け取り、それぞれの視覚要素を作成します。
例
{{< 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 >}}出力
Chocolatey を使用してインストール:
choco install vscode.installまたは WinGet を使用してインストール
winget install -e --id Microsoft.VisualStudioCodebrew install --cask visual-studio-codeqweqweタイムライン#
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 >}}ヘッダー
バッジテスト
サブヘッダー
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.もう1つの素晴らしいヘッダー
日付 - 現在
素晴らしいサブヘッダー
HTML コード付き- コーヒー
- 紅茶
- 牛乳
ショートコード
素晴らしい
他のショートコード付き
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 >}}例2:
{{< 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 >}}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
>}}Youtube Lite#
lite-youtube-embed ライブラリを使用して YouTube 動画を埋め込むためのショートカット。このライブラリは、標準の YouTube 埋め込みの軽量な代替手段であり、より高速で効率的になるように設計されています。
| パラメータ | 説明 |
|---|---|
id | [文字列] 埋め込む YouTube 動画の ID。 |
label | [文字列] 動画のラベル |
params | [文字列] 動画再生のための追加パラメータ |
例1:
{{< 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 GitHub リポジトリおよび Youtube のプレーヤーパラメータページを参照してください。
