📝 Update

This commit is contained in:
yuubinnkyoku 2024-12-18 13:59:13 +00:00
parent b301244545
commit 69b8667c8b

View file

@ -9,19 +9,19 @@ series: ["Documentation"]
series_order: 12
---
ドキュメントを順に読んできたなら、Blowfish で利用可能なすべての機能と設定について理解できたはずです。このページは、すべてをまとめて、Hugo プロジェクトで使用できる実例を提供するために設計されています。
ドキュメントを順に読んできたなら、Blowfish で利用可能なすべての機能と設定について、すでにご存じでしょう。このページでは、これまで説明してきたすべてをまとめて、Hugo プロジェクトで使用できる実践的なサンプルを紹介します。
{{< alert >}}
**ヒント:** Hugo を初めて使用する場合は、[公式ドキュメント](https://gohugo.io/content-management/page-bundles/) をチェックして、ページバンドルとリソースの概念について詳しく学んでください
**ヒント:** Hugo を初めて使用する場合は、[公式ドキュメント](https://gohugo.io/content-management/page-bundles/) でページバンドルとリソースの概念について、さらに詳しく学習することをお勧めします
{{< /alert >}}
このページの例はすべて、さまざまなシナリオに適用できますが、個々のプロジェクトで特定のコンテンツ項目をフォーマットする方法について、いくつかのアイデアを提供できれば幸いです。
このページの例は、全てさまざまなシナリオに適応できます。あなたのプロジェクトで、特定のコンテンツをどのようにフォーマットするか、そのヒントになれば幸いです。
## ブランチページ
Hugo のブランチページバンドルは、ホームページ、セクションリスト、タクソノミーページなどのアイテムをカバーしています。ブランチバンドルについて覚えておくべき重要なことは、このコンテンツタイプのファイル名が **`_index.md`** であることです。
Hugo のブランチページバンドルは、ホームページ、セクションリスト、タクソノミーページなどを指します。ブランチバンドルで覚えておくべき重要なことは、このコンテンツタイプのファイル名が **`_index.md`** であることです。
Blowfish は、ブランチページで指定されたフロントマターパラメータを尊重し、これらは特定のページのデフォルト設定を上書きします。たとえば、ブランチページで `title` パラメータを設定すると、ページタイトルを上書きできます。
Blowfish は、ブランチページで指定された Front Matter のパラメータを認識し、特定のページのデフォルト設定を上書きします。例えば、ブランチページで `title` パラメータを設定すると、そのページタイトルを上書きできます。
### ホームページ
@ -30,21 +30,21 @@ Blowfish は、ブランチページで指定されたフロントマターパ
| **レイアウト:** | `layouts/index.html` |
| **コンテンツ:** | `content/_index.md` |
Blowfish のホームページは、ホームページレイアウト設定パラメータによって全体的なデザインが制御されるという点で特別です。これについては、[ホームページレイアウト]({{< ref "homepage-layout" >}}) セクションで詳しく説明しています
Blowfish のホームページは、その全体デザインがホームページレイアウト設定パラメータによって制御される、特別なページです。詳細は [ホームページレイアウト]({{< ref "homepage-layout" >}}) セクションをご覧ください
このページにカスタムコンテンツを追加する場合は、`content/_index.md` ファイルを作成するだけです。このファイルのすべてがホームページに含まれます。
ホームページに独自のコンテンツを追加するには、`content/_index.md` ファイルを作成するだけです。このファイルの内容が、ホームページに表示されます。
**例:**
```yaml
---
title: "Blowfish へようこそ!"
description: "これはホームページにコンテンツを追加するデモです。"
description: "ホームページにコンテンツを追加するデモです。"
---
私のウェブサイトへようこそ! お越しいただきありがとうございます。
私のウェブサイトへようこそ! お越しいただき、本当に嬉しいです。
```
_この例では、カスタムタイトルを設定し、ページの本文に追加のテキストを追加しています。ショートコード、画像、リンクなど、Markdown 形式のテキストはすべて使用できます。_
_この例では、独自のタイトルを設定し、ページ本文にテキストを追加しています。ショートコード、画像、リンクなど、Markdown 形式のテキストはすべて使用できます。_
### リストページ
@ -53,11 +53,11 @@ _この例では、カスタムタイトルを設定し、ページの本文に
| **レイアウト:** | `layouts/_default/list.html` |
| **コンテンツ:** | `content/../_index.md` |
リストページは、セクション内のすべてのページをグループ化し、訪問者が各ページにアクセスする方法を提供します。ブログやポートフォリオは、投稿やプロジェクトをグループ化するため、リストページの例です。
リストページは、セクション内の全ページをまとめて、訪問者が各ページを閲覧できるようにします。ブログやポートフォリオは、投稿やプロジェクトをまとめるリストページの代表例です。
リストページの作成は、コンテンツフォルダにサブディレクトリを作成するのと同じくらい簡単です。たとえば、「プロジェクト」セクションを作成するには、`content/projects/` を作成します。次に、プロジェクトごとに Markdown ファイルを作成します。
リストページは、コンテンツフォルダ内にサブディレクトリを作成するだけで簡単に作成できます。例えば、「プロジェクト」セクションを作成するには、`content/projects/` を作成します。そして、各プロジェクト用の Markdown ファイルを作成します。
リストページはデフォルトで生成されますが、コンテンツをカスタマイズするには、この新しいディレクトリ`_index.md` ページも作成する必要があります。
リストページはデフォルトで生成されますが、コンテンツをカスタマイズするには、この新しいディレクトリ内に `_index.md` ファイルも作成する必要があります。
```shell
.
@ -70,25 +70,25 @@ _この例では、カスタムタイトルを設定し、ページの本文に
└── project.jpg
```
Hugo は、プロジェクトフォルダ内のページの URL をそれに応じて生成します。
Hugo は、projects フォルダ内の各ページに対して、適切な URL を自動生成します。
ホームページと同様に、`_index.md` ファイルのコンテンツは、生成されたリストインデックスに出力されます。Blowfish は、このセクションのページをコンテンツの下にリストします。
ホームページと同様に、`_index.md` ファイルの内容は、生成されたリストのインデックスページに表示されます。そして、Blowfish は、そのセクション内のページをコンテンツの下に一覧表示します。
**例:**
```yaml
---
title: "プロジェクト"
description: "私のプロジェクトのいくつかについて学びましょう。"
description: "私のプロジェクトのいくつかをご紹介します。"
cascade:
showReadingTime: false
---
このセクションには、私の現在のプロジェクトがすべて含まれています。
このセクションでは、私の現在進行中のプロジェクトを紹介しています。
```
_この例では、特別な `cascade` パラメータを使用して、このセクション内のサブページの閲覧時間を非表示にしています。これにより、プロジェクトページには閲覧時間が表示されなくなります。これは、個々のページに含めることなく、セクション全体のデフォルトのテーマパラメータを上書きする優れた方法です。_
_この例では、特別な `cascade` パラメータを使用して、このセクション内の各ページの閲覧時間を非表示にしています。これにより、各プロジェクトページでは閲覧時間が表示されなくなります。これは、個々のページにパラメータを記述することなく、セクション全体のデフォルトのテーマパラメータを上書きできる便利な方法です。_
このサイトの [サンプルセクション]({{< ref "samples" >}}) は、リストページの例です。
このサイトの [サンプルセクション]({{< ref "samples" >}}) は、リストページの活用例です。
### タクソノミーページ
@ -98,11 +98,11 @@ _この例では、特別な `cascade` パラメータを使用して、この
| **タームレイアウト:** | `layouts/_default/term.html` |
| **コンテンツ:** | `content/../_index.md` |
タクソノミーページには、タクソミーリストとタクソミータームの2つの形式があります。リストは、特定のタクソミー内の各タームのリストを表示し、タームは特定のタームに関連するページのリストを表示します。
タクソノミーページには、「タクソミーリスト」と「タクソミーターム」の2種類があります。リストは特定のタクソミー内の各タームの一覧を表示し、タームは特定のタームに関連付けられたページ一覧を表示します。
用語は少し混乱する可能性があるため、`animals` という名前のタクソノミーを使用した例を見てみましょう
少し複雑に感じるかもしれないので、`animals` というタクソノミーを例に説明します
まず、Hugo でタクソノミーを使用するには、設定する必要があります。これを行うには、`config/_default/taxonomies.toml` に設定ファイルを作成し、タクソノミー名を定義しま
まず、Hugo でタクソノミーを使用するには、設定が必要です。`config/_default/taxonomies.toml` に設定ファイルを作成し、タクソノミー名を定義しましょう
```toml
# config/_default/taxonomies.toml
@ -110,9 +110,9 @@ _この例では、特別な `cascade` パラメータを使用して、この
animal = "animals"
```
Hugo はタクソノミーが単数形と複数形でリストされることを期待しているため、単数形の `animal` を複数形の `animals` と等しくして、サンプルのタクソノミーを作成します。
Hugo ではタクソノミーを単数形と複数形で設定する必要があるため、ここでは `animal` (単数形) = `animals` (複数形) として、サンプルのタクソノミーを作成します。
`animals` タクソノミーができたので、個々のコンテンツアイテムに追加する必要があります。フロントマターに挿入するだけです。
`animals` タクソノミーが作成できたので、次はこれを個々のコンテンツに追加します。フロントマターに以下のように記述するだけです。
```yaml
---
@ -122,15 +122,15 @@ animals: ["lion", "cat"]
---
```
これで、`animals` タクソノミー内に `lion``cat` の 2 つの _ターム_ が作成されました。
これで、`animals` タクソノミー内に `lion``cat` という2つの _ターム_ が作成されました。
この時点では明らかではありませんが、Hugo はこの新しいタクソノミーのリストページとタームページを生成します。デフォルトでは、リストは `/animals/` でアクセスでき、タームページは `/animals/lion/``/animals/cat/` にあります。
この時点ではまだ分かりませんが、Hugo はこの新しいタクソノミーのために、リストページとタームページを自動生成します。デフォルトでは、リストページ`/animals/`、タームページは `/animals/lion/``/animals/cat/` でアクセスできます。
リストページには、タクソノミーに含まれるすべてのタームがリストされます。この例では、`/animals/` に移動すると、「lion」と「cat」のリンクがあるページが表示され、個々のタームページに移動できます。
リストページには、タクソノミーに含まれるすべてのタームが一覧表示されます。この例では、`/animals/` にアクセスすると、「lion」と「cat」へのリンクが表示され、それぞれのタームページへ移動できます。
タームページには、そのタームに含まれるすべてのページがリストされます。これらのタームリストは、基本的に通常の [リストページ](#list-pages) と同じであり、ほぼ同じように動作します。
タームページには、そのタームに関連付けられたすべてのページが表示されます。タームリストは、基本的に通常の [リストページ](#リストページ) と同じで、ほぼ同様に機能します。
タクソノミーページにカスタムコンテンツを追加するには、タクソノミー名をサブディレクトリ名として使用して、コンテンツフォルダ`_index.md` ファイルを作成するだけです。
タクソノミーページに独自のコンテンツを追加するには、タクソノミー名をサブディレクトリ名として、`content` フォルダ内`_index.md` ファイルを作成するだけです。
```shell
.
@ -141,9 +141,9 @@ animals: ["lion", "cat"]
└── _index.md # /animals/lion
```
これらのコンテンツファイルのすべてが、生成されたタクソノミーページに配置されるようになりました。他のコンテンツと同様に、フロントマター変数を使用してデフォルトを上書きできます。このようにして、`lion` という名前のタグを付けて、`title` を「lion」に上書きできます。
これらのファイルに記述した内容はすべて、自動生成されたタクソノミーページに表示されます。他のコンテンツと同様に、フロントマターの変数を使用してデフォルト値を上書きできます。例えば、`lion` というタグ名を付けつつ、`title` を「Lion」と表示することも可能です。
これが実際にどのように見えるかを確認するには、このサイトの [タグタクソノミーリスト]({{< ref "tags" >}}) をご覧ください。
実際の表示例は、このサイトの [タグ タクソノミーリスト]({{< ref "tags" >}}) をご覧ください。
## リーフページ
@ -153,9 +153,9 @@ animals: ["lion", "cat"]
| **コンテンツ (スタンドアロン):** | `content/../page-name.md` |
| **コンテンツ (バンドル):** | `content/../page-name/index.md` |
Hugo のリーフページは、基本的に標準コンテンツページです。サブページを含まないページとして定義されます。これらは、アバウトページや、ウェブサイトのブログセクションにある個々のブログ投稿などです。
Hugo のリーフページは、基本的に標準的なコンテンツページです。サブページを含まないページとして定義されます。例えば、自己紹介ページや、ウェブサイトのブログセクションにある個別のブログ記事などが該当します。
リーフページについて覚えておくべき最も重要なことは、ブランチページとは異なり、リーフページはアンダースコアを _付けずに_ `index.md`いう名前にる必要があることです。リーフページはセクションのトップレベルでグループ化し、一意の名前を付けることができるという点でも特別です。
リーフページで最も重要なのは、ブランチページとは異なり、ファイル名をアンダースコアを _付けずに_ `index.md` とすることです。また、リーフページはセクションのトップレベルでグループ化し、それぞれに固有の名前を付けられるという点でも特別です。
```shell
.
@ -168,35 +168,35 @@ Hugo のリーフページは、基本的に標準のコンテンツページで
└── image.jpg
```
画像などのページにアセットを含める場合は、ページバンドルを使用する必要があります。ページバンドルは、`index.md` ファイルを含むサブディレクトリを使用して作成されます。アセットをコンテンツとともに独自のディレクトリにグループ化することは、多くのショートコードやその他のテーマロジックがリソースがページと一緒にバンドルされていることを前提としているため、重要です。
画像などのアセットをページに含める場合は、ページバンドルを使用する必要があります。ページバンドルは、`index.md` ファイルを含むサブディレクトリを使用して作成します。多くのショートコードやその他のテーマロジックは、リソースがページと共にバンドルされていることを前提としているため、アセットとコンテンツを独自のディレクトリにまとめておくことが重要です。
**例:**
```yaml
---
title: "私の最初のブログ投稿"
title: "初めてのブログ記事"
date: 2022-01-25
description: "私のブログへようこそ!"
summary: "私と私がこのブログを始めた理由について詳しく学びましょう。"
summary: "私自身と、このブログを始めた理由についてご紹介します。"
tags: ["welcome", "new", "about", "first"]
---
_これ_ は私のブログ投稿のコンテンツです。
_これ_ が私のブログ記事の本文です。
```
リーフページには、表示方法をカスタマイズするために使用できるさまざまな [フロントマター]({{< ref "front-matter" >}}) パラメータがあります。
リーフページでは、表示方法をカスタマイズするために、様々な [Front Matter]({{< ref "front-matter" >}}) パラメータを使用できます。
### 外部リンク
Blowfish には、記事リストの記事と外部リンクを一緒に表示できる特別な機能があります。これは、Medium などのサードパーティのウェブサイトにコンテンツがある場合や、Hugo サイトにコンテンツを複製せずにリンクしたい研究論文がある場合に便利です。
Blowfish には、記事リストの記事と一緒に外部リンクを表示できる特別な機能があります。これは、Medium などのサードパーティのウェブサイトにコンテンツがある場合や、Hugo サイトにコンテンツを複製せずにリンクしたい研究論文がある場合に便利です。
外部リンク記事を作成するには、いくつかの特別なフロントマターを設定する必要があります。
外部リンク記事を作成するには、特別なフロントマターを設定する必要があります。
```yaml
---
title: "私の Medium 投稿"
title: "私の Medium 記事"
date: 2022-01-25
externalUrl: "https://medium.com/"
summary: "Medium に投稿を書きました。"
summary: "Medium に記事を投稿しました。"
showReadingTime: false
_build:
render: "false"
@ -204,11 +204,11 @@ _build:
---
```
`title``summary` などの通常のフロントマターパラメータに加えて、`externalUrl` パラメータは、これが通常の記事ではないことを Blowfish に伝えるために使用されます。ここに指定された URL は、訪問者がこの記事を選択したときにリダイレクトされる場所です。
`title``summary` などの通常の Front Matter パラメータに加えて、`externalUrl` パラメータは、これが通常の記事ではないことを Blowfish に伝えるために使用されます。ここに指定された URL は、訪問者がこの記事を選択したにリダイレクトされる場所です。
さらに、特別な Hugo フロントマターパラメータ `_build` を使用して、このコンテンツの通常のページが生成されないようにします。外部リンクにリンクしているため、ページを生成する意味はありません。
さらに、特別な Hugo フロントマターパラメータ `_build` を使用して、このコンテンツの通常のページが生成されないようにします。外部リンクにリダイレクトするため、ページを生成する必要はありません。
テーマには、これらの外部リンク記事を簡単に生成するためのアーキタイプが含まれています。新しいコンテンツを作成するときに、`-k external` を指定するだけです。
テーマには、外部リンク記事を簡単に作成するためのアーキタイプが含まれています。新しいコンテンツを作成するに、`-k external` を指定するだけです。
```shell
hugo new -k external posts/my-post.md
@ -221,11 +221,11 @@ hugo new -k external posts/my-post.md
| **レイアウト:** | `layouts/_default/simple.html` |
| **フロントマター:** | `layout: "simple"` |
Blowfish には、シンプルなページ用の特別なレイアウトも含まれています。シンプルなレイアウトは、特別なテーマ機能なしで Markdown コンテンツをページに配置するだけの全幅テンプレートです。
Blowfish には、シンプルなページ用の特別なレイアウトも用意されています。シンプルレイアウトは、特別なテーマ機能を使用せずに、Markdown コンテンツのみを表示する全幅テンプレートです。
シンプルレイアウトで利用できる唯一の機能は、パンくずリストと共有リンクです。ただし、これらの動作は、通常のページの [フロントマター]({{< ref "front-matter" >}}) 変数を使用して制御できます。
シンプルレイアウトで利用できる機能は、パンくずリストと共有リンクのみです。ただし、これらの動作は、通常のページの [フロントマター]({{< ref "front-matter" >}})変数を使用して制御できます。
特定のページでシンプルレイアウトを有効にするには、`layout` フロントマター変数`"simple"` の値で追加します。
特定のページでシンプルレイアウトを有効にするには、`layout` フロントマター変数に値 `"simple"` を設定します。
```yaml
---
@ -233,28 +233,28 @@ title: "私のランディングページ"
date: 2022-03-08
layout: "simple"
---
このページコンテンツは全幅になりました
このページのコンテンツは全幅で表示されます
```
## カスタムレイアウト
Hugo の利点の 1 つは、サイト全体、個々のセクション、またはページのカスタムレイアウトを簡単に作成できることです。
Hugo の利点の 1 つは、サイト全体、個別のセクション、またはページごとに、簡単にカスタムレイアウトを作成できることです。
レイアウトは、通常の Hugo テンプレートルールに従い、詳細については [公式 Hugo ドキュメント](https://gohugo.io/templates/introduction/) をご覧ください。
レイアウトは、通常の Hugo テンプレートルールに従います。詳細は [公式 Hugo ドキュメント](https://gohugo.io/templates/introduction/) をご覧ください。
### デフォルトレイアウトの上書き
上記の各コンテンツタイプは、各タイプのページを生成するために使用されるレイアウトファイルをリストしています。このファイルがローカルプロジェクトで作成されると、テーマテンプレートが上書きされるため、ウェブサイトのデフォルトスタイルをカスタマイズするために使用できます。
上記の各コンテンツタイプには、それぞれのタイプのページを生成するために使用されるレイアウトファイルが記載されています。このファイルをローカルプロジェクトで作成すると、テーマのテンプレートが上書きされるため、ウェブサイトのデフォルトスタイルをカスタマイズできます。
たとえば、`layouts/_default/single.html` ファイルを作成すると、リーフページのレイアウトを完全にカスタマイズできます。
えば、`layouts/_default/single.html` ファイルを作成すると、リーフページのレイアウトを完全にカスタマイズできます。
### カスタムセクションレイアウト
個々のコンテンツセクションのカスタムレイアウトを作成することも簡単です。これは、特定のスタイルを使用して特定のタイプのコンテンツをリストするセクションを作成する場合に便利です。
個々のコンテンツセクション用に、カスタムレイアウトを作成することも簡単です。特定のスタイルを使用して、特定のタイプのコンテンツを一覧表示するセクションを作成したい場合に便利です。
特別なレイアウトを使用してプロジェクトをリストするカスタム「Projects」ページを作成する例を見てみましょう。
特別なレイアウトを使用してプロジェクトを一覧表示する、カスタム「プロジェクト」ページを作成する例を見てみましょう。
これを行うには、通常の Hugo コンテンツルールを使用してコンテンツを構造化し、プロジェクトのセクションを作成します。さらに、コンテンツと同じディレクトリ名を使用して `list.html` ファイルを追加することで、プロジェクトセクションの新しいレイアウトを作成できます。
まず、通常の Hugo コンテンツルールに従ってコンテンツを構成し、プロジェクト用のセクションを作成します。次に、コンテンツと同じディレクトリ名を使用し、`list.html` ファイルを追加して、プロジェクトセクション用の新しいレイアウトを作成します。
```shell
.
@ -268,22 +268,22 @@ Hugo の利点の 1 つは、サイト全体、個々のセクション、また
└── list.html
```
この `list.html` ファイルは、デフォルトのリストテンプレートを上書きしますが、`projects` セクションに対してのみです。このファイルを見る前に、まず個々のプロジェクトファイルを見てみましょう。
この `list.html` ファイルは、デフォルトのリストテンプレートを上書きしますが、`projects` セクションに対してのみ有効です。このファイルの中身を見る前に、まず個々のプロジェクトファイルを見てみましょう。
```yaml
---
title: "Blowfish"
date: 2021-08-11
icon: "github"
description: "Tailwind CSS で構築された Hugo のテーマ。"
description: "Tailwind CSS を使用して構築された Hugo テーマ。"
topics: ["Hugo", "Web", "Tailwind"]
externalUrl: "https://github.com/nunocoracao/blowfish/"
---
```
_この例では、各プロジェクトにメタデータを割り当てています。ページのコンテンツはありませんが、それを含めることを妨げるものは何もありません。結局のところ、これはあなた自身のカスタムテンプレートなのですから!_
_ここでは、各プロジェクトのメタデータを設定しています。このメタデータは、後ほどリストテンプレートで使用できます。ページコンテンツはありませんが、必要に応じて追加することも可能です。あなた独自のカスタムテンプレートですから!_
プロジェクトが定義されたので、各プロジェクトの詳細を出力するリストテンプレートを作成できます
プロジェクトが定義できたので、次は各プロジェクトの詳細を出力するリストテンプレートを作成しましょう
```go
{{ define "main" }}
@ -311,8 +311,8 @@ _この例では、各プロジェクトにメタデータを割り当ててい
{{ end }}
```
これは非常に簡単な例ですが、このセクションの各ページ (つまり、各プロジェクト) をステップスルーし、アイコンと一緒に各プロジェクトへの HTML リンクを出力することがわかります。各プロジェクトのフロントマターのメタデータは、表示される情報を決定するために使用されます。
これは非常にシンプルな例ですが、このセクションの各ページ (つまり、各プロジェクト) を順に処理し、アイコンと共に各プロジェクトへの HTML リンクを出力しています。各プロジェクトのフロントマターのメタデータは、表示される情報を決定するために使用されます。
関連するスタイルとクラスが利用可能であることを確認する必要があることに注意してください。これには、Tailwind CSS の再コンパイルが必要になる場合があります。これについては、[高度なカスタマイズ]({{< ref "advanced-customisation" >}}) セクションで詳しく説明されています。
関連するスタイルとクラスが利用可能であることを確認する必要があることに注意してください。場合によっては、Tailwind CSS の再コンパイルが必要になる場合があります。これについては、[高度なカスタマイズ]({{< ref "advanced-customisation" >}}) セクションで詳しく説明ています。
このようなカスタムテンプレートを作成する場合、デフォルトの Blowfish テンプレートの動作を確認し、それをガイドとして使用するのが常に最も簡単です。テンプレートの作成について詳しく学ぶには、[Hugo ドキュメント](https://gohugo.io/templates/introduction/) も優れたリソースであることを忘れないでください
このようなカスタムテンプレートを作成する際には、まずデフォルトの Blowfish テンプレートの動作を確認し、それを参考にすることをお勧めします。[Hugo ドキュメント](https://gohugo.io/templates/introduction/) も、テンプレート作成について学ぶための優れた情報源です