ファイルの整理

ディレクトリ構造

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

各_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つのレイアウトを提供します：

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

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

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

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

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

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

パンくずナビゲーション

パンくずは、/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ファイルを追加します：

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

![](image.png)

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

![](image.png)

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

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

![](/images/image.png)