mirror of
https://github.com/imfing/hextra.git
synced 2025-08-23 19:56:38 -04:00
chore: update ja translation
This commit is contained in:
Xin
@@ -5,18 +5,18 @@ prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に埋め込まれるシンプルなスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
|
||||
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に記述する簡潔なスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
|
||||
|
||||
Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="callout" title="コールアウト" icon="warning" >}}
|
||||
{{< card link="cards" title="カード" icon="card" >}}
|
||||
{{< card link="details" title="詳細" icon="chevron-right" >}}
|
||||
{{< card link="callout" title="Callout" icon="warning" >}}
|
||||
{{< card link="cards" title="Cards" icon="card" >}}
|
||||
{{< card link="details" title="Details" icon="chevron-right" >}}
|
||||
{{< card link="filetree" title="FileTree" icon="folder-tree" >}}
|
||||
{{< card link="icon" title="アイコン" icon="badge-check" >}}
|
||||
{{< card link="steps" title="ステップ" icon="one" >}}
|
||||
{{< card link="tabs" title="タブ" icon="collection" >}}
|
||||
{{< card link="icon" title="Icon" icon="badge-check" >}}
|
||||
{{< card link="steps" title="Steps" icon="one" >}}
|
||||
{{< card link="tabs" title="Tabs" icon="collection" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
<div style="padding-top:4rem"></div>
|
||||
@@ -25,5 +25,5 @@ Hugo と Hextra が提供する追加のショートコード:
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
|
||||
{{< card link="others" title="その他" icon="view-grid" >}}
|
||||
{{< /cards >}}
|
||||
{{< card link="others" title="Others" icon="view-grid" >}}
|
||||
{{< /cards >}}
|
||||
@@ -6,30 +6,30 @@ aliases:
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
読者に重要な情報を示すための組み込みコンポーネントです。
|
||||
読者に重要な情報を表示するための組み込みコンポーネントです。
|
||||
|
||||
<!--more-->
|
||||
|
||||
> [!NOTE]
|
||||
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
|
||||
> これはMarkdown構文を活用してコールアウトをレンダリングし、コンテンツの移植性と可読性を向上させます。
|
||||
> これはMarkdown構文を活用してコールアウトをレンダリングするため、コンテンツの移植性と可読性が向上します。
|
||||
|
||||
## 例
|
||||
|
||||
{{< callout emoji="👾">}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
## 使用方法
|
||||
@@ -37,24 +37,24 @@ prev: /docs/guide/shortcodes
|
||||
### デフォルト
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
|
||||
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
|
||||
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 情報
|
||||
|
||||
{{< callout type="info" >}}
|
||||
最新のリリースを確認するには、GitHubをご覧ください。
|
||||
最新リリースについてはGitHubをご覧ください。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
最新のリリースを確認するには、GitHubをご覧ください。
|
||||
最新リリースについてはGitHubをご覧ください。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
@@ -66,18 +66,18 @@ prev: /docs/guide/shortcodes
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
このAPIは次のバージョンで非推奨になります。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### エラー
|
||||
|
||||
{{< callout type="error" >}}
|
||||
何か問題が発生し、爆発しそうです。
|
||||
問題が発生しました。まもなく爆発します。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
何か問題が発生し、爆発しそうです。
|
||||
問題が発生しました。まもなく爆発します。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
@@ -13,8 +13,8 @@ linkTitle: カード
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" >}}
|
||||
{{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" >}}
|
||||
{{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" >}}
|
||||
{{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" >}}
|
||||
{{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## 使用方法
|
||||
@@ -30,8 +30,8 @@ linkTitle: カード
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="/" title="画像カード" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplashの風景画像" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
@@ -42,18 +42,18 @@ linkTitle: カード
|
||||
| `link` | URL（内部または外部）。 |
|
||||
| `title` | カードのタイトル見出し。 |
|
||||
| `subtitle` | サブタイトル見出し（Markdown対応）。 |
|
||||
| `icon` | アイコンの名前。 |
|
||||
| `tag` | タグ内のテキスト。 |
|
||||
| `icon` | アイコン名。 |
|
||||
| `tag` | タグのテキスト。 |
|
||||
| `tagColor` | タグの色: `gray`（デフォルト）、`yellow`、`red`、`blue`。 |
|
||||
|
||||
## 画像カード
|
||||
|
||||
さらに、カードは画像の追加と以下のパラメータを通じた処理をサポートします:
|
||||
さらに、カードには画像の追加と以下のパラメータを通じた処理がサポートされています:
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|----------- |---------------------------------------------|
|
||||
| `image` | カードの画像URLを指定します。 |
|
||||
| `method` | Hugoの画像処理メソッドを設定します。 |
|
||||
| `method` | Hugoの画像処理方法を設定します。 |
|
||||
| `options` | Hugoの画像処理オプションを設定します。 |
|
||||
|
||||
カードは3種類の画像をサポートします:
|
||||
@@ -62,14 +62,14 @@ linkTitle: カード
|
||||
2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
|
||||
3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
|
||||
|
||||
Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebPフォーマット）を適用します。
|
||||
現在サポートされている`method`は`Resize`、`Fit`、`Fill`、`Crop`です。
|
||||
Hextraはビルド時に画像処理が必要か自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebP形式）を適用します。
|
||||
現在サポートされている`method`: `Resize`、`Fit`、`Fill`、`Crop`。
|
||||
|
||||
Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
|
||||
Hugoの組み込み画像処理コマンド、方法、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
|
||||
|
||||
## タグ
|
||||
|
||||
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。
|
||||
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに便利です。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
|
||||
@@ -81,10 +81,10 @@ Hugoの組み込み画像処理コマンド、メソッド、オプションの
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="デフォルトタグ色付きカード" tag="タグテキスト" */>}}
|
||||
{{</* card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
|
||||
{{</* card link="../callout" title="デフォルト色タグ付きカード" tag="タグテキスト" */>}}
|
||||
{{</* card link="../callout" title="赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
|
||||
{{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}}
|
||||
{{</* card link="../callout" title="黄色タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
|
||||
{{</* card link="../callout" title="黄タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: 詳細
|
||||
---
|
||||
|
||||
折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。
|
||||
折りたたみ可能なコンテンツを表示するための組み込みコンポーネントです。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -12,7 +12,7 @@ title: 詳細
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdownは**サポートされています**。
|
||||
Markdown は **サポートされています**。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
@@ -22,14 +22,14 @@ Markdownは**サポートされています**。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
## 使い方
|
||||
## 使用方法
|
||||
|
||||
````markdown
|
||||
{{%/* details title="詳細" */%}}
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdownは**サポートされています**。
|
||||
Markdown は **サポートされています**。
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: アイコン
|
||||
next: /docs/guide/shortcodes/steps
|
||||
---
|
||||
|
||||
このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
|
||||
@@ -8,7 +9,7 @@ title: アイコン
|
||||
enableInlineShortcodes: true
|
||||
```
|
||||
|
||||
利用可能なアイコンのリストは、[`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
|
||||
利用可能なアイコンの一覧は [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -29,13 +30,13 @@ enableInlineShortcodes: true
|
||||
|
||||
### 独自のアイコンを追加する方法
|
||||
|
||||
`data/icons.yaml` ファイルを作成し、以下の形式で独自のSVGアイコンを追加します:
|
||||
`data/icons.yaml` ファイルを作成し、以下の形式で独自の SVG アイコンを追加します:
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>your icon svg content</svg>
|
||||
```
|
||||
|
||||
その後、ショートコードで以下のように使用できます:
|
||||
追加したアイコンは以下のようにショートコードで使用できます:
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
@@ -43,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
ヒント: [Iconify Design](https://iconify.design/) は、サイト用のSVGアイコンを見つけるのに最適な場所です。
|
||||
ヒント: [Iconify Design](https://iconify.design/) はサイト用の SVG アイコンを見つけるのに最適な場所です。
|
||||
@@ -6,15 +6,15 @@ sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}Jupyter Notebook をショートコード経由で含める実験的な機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
|
||||
{{< callout >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) は、[Project Jupyter](https://jupyter.org/) の言語に依存しない HTML ノートブックアプリケーションです。これを使用すると、ライブコード、数式、視覚化、および説明文を含むドキュメントを作成して共有できます。
|
||||
[Jupyter Notebook](https://jupyter.org/) は [Project Jupyter](https://jupyter.org/) の言語非依存な HTML ノートブックアプリケーションです。ライブコード、数式、可視化、説明文を含むドキュメントを作成・共有できます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 使用方法
|
||||
|
||||
### ローカルノートブックを使用する
|
||||
### ローカルノートブックの使用
|
||||
|
||||
Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
|
||||
|
||||
@@ -29,11 +29,11 @@ Jupyter Notebook ショートコードを使用するには、プロジェクト
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます：
|
||||
`jupyter` ショートコードを使用してページに Jupyter Notebook を組み込みます:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
title: My Page
|
||||
title: マイページ
|
||||
math: true
|
||||
---
|
||||
|
||||
@@ -55,16 +55,16 @@ math: true
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
---
|
||||
title: My Page
|
||||
title: マイページ
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
### リモートノートブックを使用する
|
||||
### リモートノートブックの使用
|
||||
|
||||
ノートブックファイルの URL を指定して、リモートノートブックを使用することもできます。たとえば、[What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) ノートブックをページに含めるには、次のショートコードを使用します：
|
||||
ノートブックファイルの URL を指定することで、リモートノートブックも使用できます。例えば、[What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) ノートブックをページに組み込むには、以下のショートコードを使用します:
|
||||
|
||||
```
|
||||
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
|
||||
@@ -72,7 +72,7 @@ math: true
|
||||
|
||||
## ノートブックの例
|
||||
|
||||
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれているノートブックファイルの例です。{{< /callout >}}
|
||||
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれるノートブックファイルの例です。{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
|
||||
@@ -3,22 +3,23 @@ title: その他のショートコード
|
||||
linkTitle: その他
|
||||
sidebar:
|
||||
exclude: true
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
これらの一部はHugoの組み込みショートコードです。
|
||||
これらの一部は Hugo 組み込みのショートコードです。
|
||||
これらのショートコードは安定性が低く、いつでも変更される可能性があります。
|
||||
{{< /callout >}}
|
||||
|
||||
## バッジ
|
||||
|
||||
```
|
||||
{{</* badge "バッジ" */>}}
|
||||
{{</* badge "Badge" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge "バッジ" >}}
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
バリエーション:
|
||||
|
||||
@@ -37,16 +38,16 @@ sidebar:
|
||||
リンクとアイコン付き:
|
||||
|
||||
```
|
||||
{{</* badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
## YouTube
|
||||
|
||||
YouTube動画を埋め込みます。
|
||||
YouTube 動画を埋め込みます。
|
||||
|
||||
```
|
||||
{{</* youtube VIDEO_ID */>}}
|
||||
@@ -56,17 +57,17 @@ YouTube動画を埋め込みます。
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
詳細については、[HugoのYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
|
||||
詳細については、[Hugo の YouTube ショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
|
||||
|
||||
## PDF
|
||||
|
||||
PDFショートコードを使用すると、コンテンツ内にPDFファイルを埋め込むことができます。
|
||||
PDF ショートコードを使用すると、コンテンツ内に PDF ファイルを埋め込むことができます。
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。
|
||||
プロジェクトディレクトリ内に PDF ファイルを配置し、相対パスを使用することもできます。
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: ステップ
|
||||
---
|
||||
|
||||
ステップのシリーズを表示するための組み込みコンポーネント。
|
||||
一連のステップを表示するための組み込みコンポーネントです。
|
||||
|
||||
## 例
|
||||
|
||||
@@ -22,14 +22,15 @@ title: ステップ
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
## 使い方
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
このショートコードは**Markdownコンテンツ専用**であることに注意してください。
|
||||
HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。
|
||||
このショートコードは **Markdown コンテンツ専用** であることに注意してください。
|
||||
HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
|
||||
{{< /callout >}}
|
||||
|
||||
`steps` ショートコード内にMarkdownのh3ヘッダーを配置します。
|
||||
`steps` ショートコード内に Markdown の h3 ヘッダーを配置します。
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
||||
@@ -5,11 +5,11 @@ next: /docs/guide/deploy-site
|
||||
|
||||
## 例
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
{{< tabs items="macOS,Linux,Windows" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
{{< tab >}}**macOS**: Apple が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab >}}**Linux**: オープンソースのオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab >}}**Windows**: Microsoft が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -20,23 +20,23 @@ next: /docs/guide/deploy-site
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 選択されたインデックスを指定
|
||||
### 選択インデックスの指定
|
||||
|
||||
`defaultIndex` プロパティを使用して、選択されるタブを指定します。インデックスは 0 から始まります。
|
||||
`defaultIndex` プロパティを使用して選択するタブを指定します。インデックスは 0 から始まります。
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
@@ -45,14 +45,14 @@ next: /docs/guide/deploy-site
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### Markdown を使用
|
||||
### Markdown の使用
|
||||
|
||||
コードブロックを含む Markdown 構文もサポートされています:
|
||||
|
||||
@@ -90,4 +90,36 @@ next: /docs/guide/deploy-site
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### タブの同期
|
||||
|
||||
同じ `items` リストを持つタブは同期できます。有効にすると、タブを選択すると同じ `items` を持つ他のタブも更新され、ページ間で選択が記憶されます。
|
||||
|
||||
`hugo.yaml` の `page` セクションでグローバルに有効にします:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
tabs:
|
||||
sync: true
|
||||
```
|
||||
|
||||
これを有効にすると、以下の 2 つのタブブロックは常に同じ選択項目を表示します:
|
||||
|
||||
```markdown
|
||||
{{</* tabs items="A,B" */>}}
|
||||
|
||||
{{</* tab */>}}A の内容{{</* /tab */>}}
|
||||
{{</* tab */>}}B の内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs items="A,B" */>}}
|
||||
|
||||
{{</* tab */>}}2 番目の A の内容{{</* /tab */>}}
|
||||
{{</* tab */>}}2 番目の B の内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
Reference in New Issue
Block a user