hextra/exampleSite/content/docs/guide/organize-files.ja.md

title	weight	prev
ファイルの整理	1	/docs/guide

ディレクトリ構造

デフォルトでは、Hugoはcontentディレクトリ内のMarkdownファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。 このサイトを例に取ります：

{{< filetree/container >}} {{< filetree/folder name="content" >}} {{< filetree/file name="_index.md" >}} {{< filetree/folder name="docs" state="open" >}} {{< filetree/file name="_index.md" >}} {{< filetree/file name="getting-started.md" >}} {{< filetree/folder name="guide" state="open" >}} {{< filetree/file name="_index.md" >}} {{< filetree/file name="organize-files.md" >}} {{< /filetree/folder >}} {{< /filetree/folder >}} {{< filetree/folder name="blog" state="open" >}} {{< filetree/file name="_index.md" >}} {{< filetree/file name="post-1.md" >}} {{< /filetree/folder >}} {{< /filetree/folder >}} {{< /filetree/container >}}

各_index.mdファイルは、対応するセクションのインデックスページです。他のMarkdownファイルは通常のページです。

content
├── _index.md // <- /
├── docs
│   ├── _index.md // <- /docs/
│   ├── getting-started.md // <- /docs/getting-started/
│   └── guide
│       ├── _index.md // <- /docs/guide/
│       └── organize-files.md // <- /docs/guide/organize-files/
└── blog
    ├── _index.md // <- /blog/
    └── post-1.md // <- /blog/post-1/

レイアウト

Hextraは、異なるコンテンツタイプに対して3つのレイアウトを提供します：

レイアウト	ディレクトリ	特徴
docs	content/docs/	構造化されたドキュメントに最適で、このセクションと同じです。
blog	content/blog/	ブログ投稿用で、リスト表示と詳細記事表示の両方があります。
default	その他のディレクトリ	サイドバーなしの単一ページ記事表示です。

セクションの動作をビルトインレイアウトと同じにするには、セクションの_index.mdのフロントマターで希望するタイプを指定します。

---
title: My Docs
cascade:
  type: docs
---

上記の設定例により、content/my-docs/内のコンテンツファイルはデフォルトでドキュメント（docsタイプ）として扱われます。

サイドバーナビゲーション

サイドバーナビゲーションは、コンテンツの整理に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdownファイルのフロントマターでweightパラメータを使用します。

---
title: Guide
weight: 2
---

{{< callout emoji="ℹ️">}} サイドバーがあまり深くならないようにすることをお勧めします。多くのコンテンツがある場合は、複数のセクションに分割することを検討してください。 {{< /callout >}}

パンくずナビゲーション

パンくずは、/contentのディレクトリ構造に基づいて自動生成されます。

例えば、上記のファイル構造を考えます。その構造に基づいて、/docs/guide/organize-files/ページの上部にパンくずが自動的に表示されます：

Documentation > Guide > Organize Files

パンくずリンクのタイトルをカスタマイズ

デフォルトでは、各パンくずリンクはそのページのtitleパラメータに基づいて生成されます。これをカスタマイズするには、linkTitleを指定します。

例えば、Organize Filesの代わりにFoo Barと表示したい場合：

---
linkTitle: Foo Bar
title: Organize Files
---

これにより、以下のパンくずが生成されます：

Documentation > Guide > Foo Bar

パンくずを非表示にする

ページのフロントマターでbreadcrumbs: falseを指定することで、パンくずを完全に非表示にできます：

---
breadcrumbs: false
title: Organize Files
---

コンテンツディレクトリの設定

デフォルトでは、Hugoはサイトを構築するためにルートのcontent/ディレクトリを使用します。 例えばdocs/など、異なるディレクトリをコンテンツに使用する必要がある場合は、サイト設定hugo.yamlでcontentDirパラメータを設定することで行えます。

画像の追加

画像を追加する最も簡単な方法は、画像ファイルをMarkdownファイルと同じディレクトリに置くことです。 例えば、my-page.mdファイルと同じディレクトリにimage.pngファイルを追加します：

{{< filetree/container >}} {{< filetree/folder name="content" >}} {{< filetree/folder name="docs" >}} {{< filetree/file name="my-page.md" >}} {{< filetree/file name="image.png" >}} {{< /filetree/folder >}} {{< /filetree/folder >}} {{< /filetree/container >}}

その後、以下のMarkdown構文を使用してコンテンツに画像を追加できます：

![](image.png)

また、Hugoのページバンドル機能を利用して、画像ファイルをMarkdownファイルと一緒に整理することもできます。そのためには、my-page.mdファイルをmy-pageディレクトリに変換し、コンテンツをindex.mdというファイルに置き、画像ファイルをmy-pageディレクトリ内に置きます：

{{< filetree/container >}} {{< filetree/folder name="content" >}} {{< filetree/folder name="docs" >}} {{< filetree/folder name="my-page" >}} {{< filetree/file name="index.md" >}} {{< filetree/file name="image.png" >}} {{< /filetree/folder >}} {{< /filetree/folder >}} {{< /filetree/folder >}} {{< /filetree/container >}}

![](image.png)

または、画像ファイルをstaticディレクトリに置くこともできます。これにより、すべてのページで画像が利用可能になります：

{{< filetree/container >}} {{< filetree/folder name="static" >}} {{< filetree/folder name="images" >}} {{< filetree/file name="image.png" >}} {{< /filetree/folder >}} {{< /filetree/folder >}} {{< filetree/folder name="content" >}} {{< filetree/folder name="docs" >}} {{< filetree/file name="my-page.md" >}} {{< /filetree/folder >}} {{< /filetree/folder >}} {{< /filetree/container >}}

画像パスはスラッシュ/で始まり、staticディレクトリからの相対パスであることに注意してください：

![](/images/image.png)