forked from drowl87/hextra_mirror
docs(i18n): add ja translation
- translated via llm
This commit is contained in:
Xin
29
exampleSite/content/docs/guide/shortcodes/_index.ja.md
Normal file
29
exampleSite/content/docs/guide/shortcodes/_index.ja.md
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
title: ショートコード
|
||||
weight: 9
|
||||
prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[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="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" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
<div style="padding-top:4rem"></div>
|
||||
|
||||
Hugo と Hextra が提供する追加のショートコード:
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
|
||||
{{< card link="others" title="その他" icon="view-grid" >}}
|
||||
{{< /cards >}}
|
||||
83
exampleSite/content/docs/guide/shortcodes/callout.ja.md
Normal file
83
exampleSite/content/docs/guide/shortcodes/callout.ja.md
Normal file
@ -0,0 +1,83 @@
|
||||
---
|
||||
title: コールアウトコンポーネント
|
||||
linkTitle: コールアウト
|
||||
aliases:
|
||||
- callouts
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
読者に重要な情報を示すための組み込みコンポーネントです。
|
||||
|
||||
<!--more-->
|
||||
|
||||
> [!NOTE]
|
||||
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
|
||||
> これはMarkdown構文を活用してコールアウトをレンダリングし、コンテンツの移植性と可読性を向上させます。
|
||||
|
||||
## 例
|
||||
|
||||
{{< callout emoji="👾">}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
### デフォルト
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 情報
|
||||
|
||||
{{< callout type="info" >}}
|
||||
最新のリリースを確認するには、GitHubをご覧ください。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
最新のリリースを確認するには、GitHubをご覧ください。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 警告
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
このAPIは次のバージョンで非推奨になります。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### エラー
|
||||
|
||||
{{< callout type="error" >}}
|
||||
何か問題が発生し、爆発しそうです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
何か問題が発生し、爆発しそうです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
115
exampleSite/content/docs/guide/shortcodes/cards.ja.md
Normal file
115
exampleSite/content/docs/guide/shortcodes/cards.ja.md
Normal file
@ -0,0 +1,115 @@
|
||||
---
|
||||
title: カードコンポーネント
|
||||
linkTitle: カード
|
||||
---
|
||||
|
||||
## 例
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="コールアウト" icon="warning" >}}
|
||||
{{< card link="../callout" title="タグ付きカード" icon="tag" tag="カスタムタグ">}}
|
||||
{{< card link="/" title="アイコンなし" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< 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" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="コールアウト" icon="warning" */>}}
|
||||
{{</* card link="../callout" title="タグ付きカード" icon="tag" tag= "カスタムタグ" */>}}
|
||||
{{</* card link="/" title="アイコンなし" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
```
|
||||
{{</* 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" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## カードパラメータ
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|----------- |-----------------------------------------------------------------|
|
||||
| `link` | URL（内部または外部）。 |
|
||||
| `title` | カードのタイトル見出し。 |
|
||||
| `subtitle` | サブタイトル見出し（Markdown対応）。 |
|
||||
| `icon` | アイコンの名前。 |
|
||||
| `tag` | タグ内のテキスト。 |
|
||||
| `tagColor` | タグの色: `gray`（デフォルト）、`yellow`、`red`、`blue`。 |
|
||||
|
||||
## 画像カード
|
||||
|
||||
さらに、カードは画像の追加と以下のパラメータを通じた処理をサポートします:
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|----------- |---------------------------------------------|
|
||||
| `image` | カードの画像URLを指定します。 |
|
||||
| `method` | Hugoの画像処理メソッドを設定します。 |
|
||||
| `options` | Hugoの画像処理オプションを設定します。 |
|
||||
|
||||
カードは3種類の画像をサポートします:
|
||||
|
||||
1. リモート画像: `image`パラメータに完全なURLを指定。
|
||||
2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
|
||||
3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
|
||||
|
||||
Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebPフォーマット）を適用します。
|
||||
現在サポートされている`method`は`Resize`、`Fit`、`Fill`、`Crop`です。
|
||||
|
||||
Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
|
||||
|
||||
## タグ
|
||||
|
||||
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。
|
||||
|
||||
{{< cards >}}
|
||||
{{< 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="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" tag="タグテキスト" tagType="error" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* 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" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## 列
|
||||
|
||||
`cards`ショートコードに`cols`パラメータを渡すことで、カードが広がる最大列数を指定できます。ただし、小さい画面では列は折りたたまれます。
|
||||
|
||||
{{< cards cols="1" >}}
|
||||
{{< card link="/" title="上部カード" >}}
|
||||
{{< card link="/" title="下部カード" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards cols="2" >}}
|
||||
{{< card link="/" title="左カード" >}}
|
||||
{{< card link="/" title="右カード" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards cols="1" */>}}
|
||||
{{</* card link="/" title="上部カード" */>}}
|
||||
{{</* card link="/" title="下部カード" */>}}
|
||||
{{</* /cards */>}}
|
||||
|
||||
{{</* cards cols="2" */>}}
|
||||
{{</* card link="/" title="左カード" */>}}
|
||||
{{</* card link="/" title="右カード" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
43
exampleSite/content/docs/guide/shortcodes/details.ja.md
Normal file
43
exampleSite/content/docs/guide/shortcodes/details.ja.md
Normal file
@ -0,0 +1,43 @@
|
||||
---
|
||||
title: 詳細
|
||||
---
|
||||
|
||||
折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 例
|
||||
|
||||
{{% details title="詳細" %}}
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdownは**サポートされています**。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
{{% details title="クリックして表示" closed="true" %}}
|
||||
|
||||
これはデフォルトで非表示になります。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
## 使い方
|
||||
|
||||
````markdown
|
||||
{{%/* details title="詳細" */%}}
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdownは**サポートされています**。
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
|
||||
````markdown
|
||||
{{%/* details title="クリックして表示" closed="true" */%}}
|
||||
|
||||
これはデフォルトで非表示になります。
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
34
exampleSite/content/docs/guide/shortcodes/filetree.ja.md
Normal file
34
exampleSite/content/docs/guide/shortcodes/filetree.ja.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
title: FileTree コンポーネント
|
||||
linkTitle: FileTree
|
||||
---
|
||||
|
||||
## 例
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="closed" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="introduction.md" >}}
|
||||
{{< filetree/file name="introduction.fr.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/file name="hugo.toml" >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```text {filename="Markdown"}
|
||||
{{</* filetree/container */>}}
|
||||
{{</* filetree/folder name="content" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/folder name="docs" state="closed" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/file name="introduction.md" */>}}
|
||||
{{</* filetree/file name="introduction.fr.md" */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* filetree/file name="hugo.toml" */>}}
|
||||
{{</* /filetree/container */>}}
|
||||
```
|
||||
46
exampleSite/content/docs/guide/shortcodes/icon.ja.md
Normal file
46
exampleSite/content/docs/guide/shortcodes/icon.ja.md
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: アイコン
|
||||
---
|
||||
|
||||
このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
enableInlineShortcodes: true
|
||||
```
|
||||
|
||||
利用可能なアイコンのリストは、[`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 例
|
||||
|
||||
{{< icon "academic-cap" >}}
|
||||
{{< icon "cake" >}}
|
||||
{{< icon "gift" >}}
|
||||
{{< icon "sparkles" >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* icon "github" */>}}
|
||||
```
|
||||
|
||||
[Heroicons](https://v1.heroicons.com/) v1 のアウトラインアイコンがデフォルトで利用可能です。
|
||||
|
||||
### 独自のアイコンを追加する方法
|
||||
|
||||
`data/icons.yaml` ファイルを作成し、以下の形式で独自のSVGアイコンを追加します:
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>your icon svg content</svg>
|
||||
```
|
||||
|
||||
その後、ショートコードで以下のように使用できます:
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
ヒント: [Iconify Design](https://iconify.design/) は、サイト用のSVGアイコンを見つけるのに最適な場所です。
|
||||
79
exampleSite/content/docs/guide/shortcodes/jupyter.ja.md
Normal file
79
exampleSite/content/docs/guide/shortcodes/jupyter.ja.md
Normal file
@ -0,0 +1,79 @@
|
||||
---
|
||||
title: "Jupyter Notebook コンポーネント"
|
||||
linktitle: "Jupyter Notebook"
|
||||
math: true
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}Jupyter Notebook をショートコード経由で含める実験的な機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) は、[Project Jupyter](https://jupyter.org/) の言語に依存しない HTML ノートブックアプリケーションです。これを使用すると、ライブコード、数式、視覚化、および説明文を含むドキュメントを作成して共有できます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 使用方法
|
||||
|
||||
### ローカルノートブックを使用する
|
||||
|
||||
Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="assets" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
title: My Page
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
あるいは、Hugo の [ページバンドル][page-bundles] 機能を利用して、Jupyter Notebook を Markdown ファイルと一緒に整理することもできます。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
---
|
||||
title: My Page
|
||||
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) ノートブックをページに含めるには、次のショートコードを使用します：
|
||||
|
||||
```
|
||||
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
## ノートブックの例
|
||||
|
||||
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれているノートブックファイルの例です。{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
77
exampleSite/content/docs/guide/shortcodes/others.ja.md
Normal file
77
exampleSite/content/docs/guide/shortcodes/others.ja.md
Normal file
@ -0,0 +1,77 @@
|
||||
---
|
||||
title: その他のショートコード
|
||||
linkTitle: その他
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
これらの一部はHugoの組み込みショートコードです。
|
||||
これらのショートコードは安定性が低く、いつでも変更される可能性があります。
|
||||
{{< /callout >}}
|
||||
|
||||
## バッジ
|
||||
|
||||
```
|
||||
{{</* badge "バッジ" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge "バッジ" >}}
|
||||
|
||||
バリエーション:
|
||||
|
||||
```
|
||||
{{</* badge content="info" type="info" */>}}
|
||||
{{</* badge content="warning" type="warning" */>}}
|
||||
{{</* badge content="error" type="error" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge content="info" type="info" >}}
|
||||
{{< badge content="warning" type="warning" >}}
|
||||
{{< badge content="error" type="error" >}}
|
||||
|
||||
リンクとアイコン付き:
|
||||
|
||||
```
|
||||
{{</* badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
## YouTube
|
||||
|
||||
YouTube動画を埋め込みます。
|
||||
|
||||
```
|
||||
{{</* youtube VIDEO_ID */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
詳細については、[HugoのYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
|
||||
|
||||
## PDF
|
||||
|
||||
PDFショートコードを使用すると、コンテンツ内にPDFファイルを埋め込むことができます。
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
```
|
||||
|
||||
例:
|
||||
|
||||
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
|
||||
46
exampleSite/content/docs/guide/shortcodes/steps.ja.md
Normal file
46
exampleSite/content/docs/guide/shortcodes/steps.ja.md
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: ステップ
|
||||
---
|
||||
|
||||
ステップのシリーズを表示するための組み込みコンポーネント。
|
||||
|
||||
## 例
|
||||
|
||||
{{% steps %}}
|
||||
|
||||
### ステップ 1
|
||||
|
||||
これは最初のステップです。
|
||||
|
||||
### ステップ 2
|
||||
|
||||
これは2番目のステップです。
|
||||
|
||||
### ステップ 3
|
||||
|
||||
これは3番目のステップです。
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
## 使い方
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
このショートコードは**Markdownコンテンツ専用**であることに注意してください。
|
||||
HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。
|
||||
{{< /callout >}}
|
||||
|
||||
`steps` ショートコード内にMarkdownのh3ヘッダーを配置します。
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
||||
### ステップ 1
|
||||
|
||||
これは最初のステップです。
|
||||
|
||||
### ステップ 2
|
||||
|
||||
これは2番目のステップです。
|
||||
|
||||
{{%/* /steps */%}}
|
||||
```
|
||||
93
exampleSite/content/docs/guide/shortcodes/tabs.ja.md
Normal file
93
exampleSite/content/docs/guide/shortcodes/tabs.ja.md
Normal file
@ -0,0 +1,93 @@
|
||||
---
|
||||
title: タブ
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
## 例
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
### デフォルト
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 選択されたインデックスを指定
|
||||
|
||||
`defaultIndex` プロパティを使用して、選択されるタブを指定します。インデックスは 0 から始まります。
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
`YAML` タブがデフォルトで選択されます。
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### Markdown を使用
|
||||
|
||||
コードブロックを含む Markdown 構文もサポートされています:
|
||||
|
||||
````
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
... 他のタブも同様に追加
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
|
||||
{{< tab >}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
```yaml
|
||||
hello: world
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
```toml
|
||||
hello = "world"
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
Reference in New Issue
Block a user