19 KiB
| title | weight | draft | description | slug | tags | series | series_order | |||
|---|---|---|---|---|---|---|---|---|---|---|
| コンテンツの例 | 11 | false | Blowfish で利用可能なすべてのパーシャル。 | content-examples |
|
|
12 |
ドキュメントを順番に読んできたなら、Blowfish で利用可能なすべての機能と設定について理解できたはずです。このページは、すべてをまとめて、Hugo プロジェクトで使用できる実例を提供するために設計されています。
{{< alert >}} ヒント: Hugo を初めて使用する場合は、公式ドキュメント をチェックして、ページバンドルとリソースの概念について詳しく学んでください。 {{< /alert >}}
このページの例はすべて、さまざまなシナリオに適用できますが、個々のプロジェクトで特定のコンテンツ項目をフォーマットする方法について、いくつかのアイデアを提供できれば幸いです。
ブランチページ
Hugo のブランチページバンドルは、ホームページ、セクションリスト、タクソノミーページなどのアイテムをカバーしています。ブランチバンドルについて覚えておくべき重要なことは、このコンテンツタイプのファイル名が _index.md であることです。
Blowfish は、ブランチページで指定されたフロントマターパラメータを尊重し、これらは特定のページのデフォルト設定を上書きします。たとえば、ブランチページで title パラメータを設定すると、ページタイトルを上書きできます。
ホームページ
| レイアウト: | layouts/index.html |
| コンテンツ: | content/_index.md |
Blowfish のホームページは、ホームページレイアウト設定パラメータによって全体的なデザインが制御されるという点で特別です。これについては、[ホームページレイアウト]({{< ref "homepage-layout" >}}) セクションで詳しく説明しています。
このページにカスタムコンテンツを追加する場合は、content/_index.md ファイルを作成するだけです。このファイルのすべてがホームページに含まれます。
例:
---
title: "Blowfish へようこそ!"
description: "これはホームページにコンテンツを追加するデモです。"
---
私のウェブサイトへようこそ! お越しいただきありがとうございます。
この例では、カスタムタイトルを設定し、ページの本文に追加のテキストを追加しています。ショートコード、画像、リンクなど、Markdown 形式のテキストはすべて使用できます。
リストページ
| レイアウト: | layouts/_default/list.html |
| コンテンツ: | content/../_index.md |
リストページは、セクション内のすべてのページをグループ化し、訪問者が各ページにアクセスする方法を提供します。ブログやポートフォリオは、投稿やプロジェクトをグループ化するため、リストページの例です。
リストページの作成は、コンテンツフォルダにサブディレクトリを作成するのと同じくらい簡単です。たとえば、「プロジェクト」セクションを作成するには、content/projects/ を作成します。次に、プロジェクトごとに Markdown ファイルを作成します。
リストページはデフォルトで生成されますが、コンテンツをカスタマイズするには、この新しいディレクトリに _index.md ページも作成する必要があります。
.
└── content
└── projects
├── _index.md # /projects
├── first-project.md # /projects/first-project
└── another-project
├── index.md # /projects/another-project
└── project.jpg
Hugo は、プロジェクトフォルダ内のページの URL をそれに応じて生成します。
ホームページと同様に、_index.md ファイルのコンテンツは、生成されたリストインデックスに出力されます。Blowfish は、このセクションのページをコンテンツの下にリストします。
例:
---
title: "プロジェクト"
description: "私のプロジェクトのいくつかについて学びましょう。"
cascade:
showReadingTime: false
---
このセクションには、私の現在のプロジェクトがすべて含まれています。
この例では、特別な cascade パラメータを使用して、このセクション内のサブページの閲覧時間を非表示にしています。これにより、プロジェクトページには閲覧時間が表示されなくなります。これは、個々のページに含めることなく、セクション全体のデフォルトのテーマパラメータを上書きする優れた方法です。
このサイトの [サンプルセクション]({{< ref "samples" >}}) は、リストページの例です。
タクソノミーページ
| リストレイアウト: | layouts/_default/taxonomy.html |
| タームレイアウト: | layouts/_default/term.html |
| コンテンツ: | content/../_index.md |
タクソノミーページには、タクソノミーリストとタクソノミータームの2つの形式があります。リストは、特定のタクソノミー内の各タームのリストを表示し、タームは特定のタームに関連するページのリストを表示します。
用語は少し混乱する可能性があるため、animals という名前のタクソノミーを使用した例を見てみましょう。
まず、Hugo でタクソノミーを使用するには、設定する必要があります。これを行うには、config/_default/taxonomies.toml に設定ファイルを作成し、タクソノミー名を定義します。
# config/_default/taxonomies.toml
animal = "animals"
Hugo はタクソノミーが単数形と複数形でリストされることを期待しているため、単数形の animal を複数形の animals と等しくして、サンプルのタクソノミーを作成します。
animals タクソノミーができたので、個々のコンテンツアイテムに追加する必要があります。フロントマターに挿入するだけです。
---
title: "ライオンの巣窟へ"
description: "今週はライオンについて学びます。"
animals: ["lion", "cat"]
---
これで、animals タクソノミー内に lion と cat の 2 つの ターム が作成されました。
この時点では明らかではありませんが、Hugo はこの新しいタクソノミーのリストページとタームページを生成します。デフォルトでは、リストは /animals/ でアクセスでき、タームページは /animals/lion/ と /animals/cat/ にあります。
リストページには、タクソノミーに含まれるすべてのタームがリストされます。この例では、/animals/ に移動すると、「lion」と「cat」のリンクがあるページが表示され、個々のタームページに移動できます。
タームページには、そのタームに含まれるすべてのページがリストされます。これらのタームリストは、基本的に通常の リストページ と同じであり、ほぼ同じように動作します。
タクソノミーページにカスタムコンテンツを追加するには、タクソノミー名をサブディレクトリ名として使用して、コンテンツフォルダに _index.md ファイルを作成するだけです。
.
└── content
└── animals
├── _index.md # /animals
└── lion
└── _index.md # /animals/lion
これらのコンテンツファイルのすべてが、生成されたタクソノミーページに配置されるようになりました。他のコンテンツと同様に、フロントマター変数を使用してデフォルトを上書きできます。このようにして、lion という名前のタグを付けて、title を「lion」に上書きできます。
これが実際にどのように見えるかを確認するには、このサイトの [タグタクソノミーリスト]({{< ref "tags" >}}) をご覧ください。
リーフページ
| レイアウト: | layouts/_default/single.html |
| コンテンツ (スタンドアロン): | content/../page-name.md |
| コンテンツ (バンドル): | content/../page-name/index.md |
Hugo のリーフページは、基本的に標準のコンテンツページです。サブページを含まないページとして定義されます。これらは、アバウトページや、ウェブサイトのブログセクションにある個々のブログ投稿などです。
リーフページについて覚えておくべき最も重要なことは、ブランチページとは異なり、リーフページはアンダースコアを 付けずに index.md という名前にする必要があることです。リーフページは、セクションのトップレベルでグループ化し、一意の名前を付けることができるという点でも特別です。
.
└── content
└── blog
├── first-post.md # /blog/first-post
├── second-post.md # /blog/second-post
└── third-post
├── index.md # /blog/third-post
└── image.jpg
画像などのページにアセットを含める場合は、ページバンドルを使用する必要があります。ページバンドルは、index.md ファイルを含むサブディレクトリを使用して作成されます。アセットをコンテンツとともに独自のディレクトリにグループ化することは、多くのショートコードやその他のテーマロジックがリソースがページと一緒にバンドルされていることを前提としているため、重要です。
例:
---
title: "私の最初のブログ投稿"
date: 2022-01-25
description: "私のブログへようこそ!"
summary: "私と私がこのブログを始めた理由について詳しく学びましょう。"
tags: ["welcome", "new", "about", "first"]
---
_これ_ は私のブログ投稿のコンテンツです。
リーフページには、表示方法をカスタマイズするために使用できるさまざまな [フロントマター]({{< ref "front-matter" >}}) パラメータがあります。
外部リンク
Blowfish には、記事リストの記事と外部リンクを一緒に表示できる特別な機能があります。これは、Medium などのサードパーティのウェブサイトにコンテンツがある場合や、Hugo サイトにコンテンツを複製せずにリンクしたい研究論文がある場合に便利です。
外部リンク記事を作成するには、いくつかの特別なフロントマターを設定する必要があります。
---
title: "私の Medium 投稿"
date: 2022-01-25
externalUrl: "https://medium.com/"
summary: "Medium に投稿を書きました。"
showReadingTime: false
_build:
render: "false"
list: "local"
---
title や summary などの通常のフロントマターパラメータに加えて、externalUrl パラメータは、これが通常の記事ではないことを Blowfish に伝えるために使用されます。ここに指定された URL は、訪問者がこの記事を選択したときにリダイレクトされる場所です。
さらに、特別な Hugo フロントマターパラメータ _build を使用して、このコンテンツの通常のページが生成されないようにします。外部リンクにリンクしているため、ページを生成する意味はありません。
テーマには、これらの外部リンク記事を簡単に生成するためのアーキタイプが含まれています。新しいコンテンツを作成するときに、-k external を指定するだけです。
hugo new -k external posts/my-post.md
シンプルページ
| レイアウト: | layouts/_default/simple.html |
| フロントマター: | layout: "simple" |
Blowfish には、シンプルなページ用の特別なレイアウトも含まれています。シンプルなレイアウトは、特別なテーマ機能なしで Markdown コンテンツをページに配置するだけの全幅テンプレートです。
シンプルなレイアウトで利用できる唯一の機能は、パンくずリストと共有リンクです。ただし、これらの動作は、通常のページの [フロントマター]({{< ref "front-matter" >}}) 変数を使用して制御できます。
特定のページでシンプルなレイアウトを有効にするには、layout フロントマター変数を "simple" の値で追加します。
---
title: "私のランディングページ"
date: 2022-03-08
layout: "simple"
---
このページコンテンツは全幅になりました。
カスタムレイアウト
Hugo の利点の 1 つは、サイト全体、個々のセクション、またはページのカスタムレイアウトを簡単に作成できることです。
レイアウトは、通常の Hugo テンプレートルールに従い、詳細については 公式 Hugo ドキュメント をご覧ください。
デフォルトレイアウトの上書き
上記の各コンテンツタイプは、各タイプのページを生成するために使用されるレイアウトファイルをリストしています。このファイルがローカルプロジェクトで作成されると、テーマテンプレートが上書きされるため、ウェブサイトのデフォルトスタイルをカスタマイズするために使用できます。
たとえば、layouts/_default/single.html ファイルを作成すると、リーフページのレイアウトを完全にカスタマイズできます。
カスタムセクションレイアウト
個々のコンテンツセクションのカスタムレイアウトを作成することも簡単です。これは、特定のスタイルを使用して特定のタイプのコンテンツをリストするセクションを作成する場合に便利です。
特別なレイアウトを使用してプロジェクトをリストするカスタム「Projects」ページを作成する例を見てみましょう。
これを行うには、通常の Hugo コンテンツルールを使用してコンテンツを構造化し、プロジェクトのセクションを作成します。さらに、コンテンツと同じディレクトリ名を使用して list.html ファイルを追加することで、プロジェクトセクションの新しいレイアウトを作成できます。
.
└── content
│ └── projects
│ ├── _index.md
│ ├── first-project.md
│ └── second-project.md
└── layouts
└── projects
└── list.html
この list.html ファイルは、デフォルトのリストテンプレートを上書きしますが、projects セクションに対してのみです。このファイルを見る前に、まず個々のプロジェクトファイルを見てみましょう。
---
title: "Blowfish"
date: 2021-08-11
icon: "github"
description: "Tailwind CSS で構築された Hugo のテーマ。"
topics: ["Hugo", "Web", "Tailwind"]
externalUrl: "https://github.com/nunocoracao/blowfish/"
---
この例では、各プロジェクトにメタデータを割り当てています。ページのコンテンツはありませんが、それを含めることを妨げるものは何もありません。結局のところ、これはあなた自身のカスタムテンプレートなのですから!
プロジェクトが定義されたので、各プロジェクトの詳細を出力するリストテンプレートを作成できます。
{{ define "main" }}
<section class="mt-8">
{{ range .Pages }}
<article class="pb-6">
<a class="flex" href="{{ .Params.externalUrl }}">
<div class="mr-3 text-3xl text-neutral-300">
<span class="relative inline-block align-text-bottom">
{{ partial "icon.html" .Params.icon }}
</span>
</div>
<div>
<h3 class="flex text-xl font-semibold">
{{ .Title }}
</h3>
<p class="text-sm text-neutral-400">
{{ .Description }}
</p>
</div>
</a>
</article>
{{ end }}
</section>
{{ end }}
これは非常に簡単な例ですが、このセクションの各ページ (つまり、各プロジェクト) をステップスルーし、アイコンと一緒に各プロジェクトへの HTML リンクを出力することがわかります。各プロジェクトのフロントマターのメタデータは、表示される情報を決定するために使用されます。
関連するスタイルとクラスが利用可能であることを確認する必要があることに注意してください。これには、Tailwind CSS の再コンパイルが必要になる場合があります。これについては、[高度なカスタマイズ]({{< ref "advanced-customisation" >}}) セクションで詳しく説明されています。
このようなカスタムテンプレートを作成する場合、デフォルトの Blowfish テンプレートの動作を確認し、それをガイドとして使用するのが常に最も簡単です。テンプレートの作成について詳しく学ぶには、Hugo ドキュメント も優れたリソースであることを忘れないでください。