Hugo に組み込まれたテンプレートの使用方法: ステップバイステップガイド

公開: 2024-11-27

Hugo は、開発者やコンテンツ作成者が高速でスケーラブルな Web サイトを迅速に構築できるようにする強力な静的サイトジェネレーターです。 Hugo の中核機能の 1 つは、コンテンツの構造化とサイトの外観のカスタマイズに役立つテンプレートシステムです。 Hugo を初めて使用する場合、またはそのテンプレート機能をより効果的に活用したい場合は、このステップバイステップのガイドで、Hugo に組み込まれているテンプレートの使用方法を説明します。

Hugo のテンプレートとは何ですか?

Hugo のテンプレートは、サイト上のコンテンツがどのようにレンダリングされるかを定義するファイルです。これらは HTML、CSS、Hugo 固有のコードで構成されており、Web サイトのレイアウトをカスタマイズできます。テンプレートは、ヘッダー、フッター、単一ページ、リストなどの作成など、さまざまな目的に使用できます。

チェックボックスが表示されない問題を理解する

Hugo にはテーマ構造の一部である組み込みのテンプレートがあり、柔軟性を高めるためにカスタムテンプレートを作成することもできます。これらのテンプレートは、コンテンツタイプ、URL 構造、その他の変数に基づいて自動的に適用されるため、複雑なサイトの管理が容易になります。

ステップ 1: Hugo をインストールして新しいサイトを作成する

テンプレートに進む前に、まず Hugo をインストールしてサイトを設定する必要があります。その方法は次のとおりです。

Hugo をインストールします。
- Hugo をインストールしていない場合は、オペレーティングシステムの公式インストールガイド「Hugo のインストール」に従ってください。
新しい Hugo サイトを作成します。
- ターミナルで次のコマンドを実行して、新しいサイトを作成します。
```
 hugo new site mysite
```
- これにより、Hugo プロジェクトの基本的なファイル構造を持つmysiteという新しいディレクトリが作成されます。

ステップ 2: テーマを追加する

Hugo はテーマを使用してコンテンツの表示方法を管理します。 Hugo Themes の既存のテーマを使用することも、カスタムのテーマを作成することもできます。簡単にするために、Hugo テーマライブラリのテーマを使用してみましょう。

テーマを追加します。
- テーマをthemes/ディレクトリに複製することで追加できます。たとえば、「Ananke」テーマを使用してみましょう。
```
 git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
```
テーマを構成します。
- config.tomlファイルを開いてテーマを設定します。
```
 theme = "ananke"
```

ステップ 3: Hugo テンプレートの構造を理解する

Hugo のテンプレートシステムは Go テンプレート言語に基づいています。テンプレートは、目的に基づいていくつかのカテゴリに分類されます。

基本テンプレート: これらは、コンテンツをラップする包括的なテンプレートです。多くの場合、ヘッダー、フッター、ナビゲーションなどの共通セクションが含まれます。
コンテンツテンプレート: これらは、個々のコンテンツタイプ (ブログ投稿、ページ、セクションなど) がどのように表示されるかを定義します。
リストテンプレート: これらのテンプレートは、コンテンツグループ (ブログ投稿のリストなど) の表示方法を制御します。
部分テンプレート: これらは、メインテンプレートに含まれる小さな再利用可能なスニペット (ナビゲーションバーやフッターなど) です。

共通テンプレートディレクトリ

layouts/ : index.html 、 single.htmlなどのすべてのレイアウトファイルが含まれます。
themes/ : 選択したテーマに付属するテンプレートが含まれます。
content/ : コンテンツファイル (通常は Markdown で記述されたもの) を保存します。

ステップ 4: テンプレートを作成する

ページのテンプレートを作成および変更する方法を見てみましょう。

新しいコンテンツファイルを作成します。
- 新しいページ (ブログ投稿など) を作成するには、次のコマンドを使用します。
```
 hugo new posts/my-first-post.md
```
- これにより、 content/posts/内に前付 (YAML または TOML) とコンテンツのプレースホルダーを含む新しい Markdown ファイルが作成されます。
単一ページのテンプレートを作成する:
- layoutsディレクトリで、 layouts/_default/内にsingle.htmlという名前のファイルを作成します。これにより、個々のコンテンツページの表示方法が制御されます。
```
  <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <article> {{ .Content }} </article> </main> </body> </html>
```
- このテンプレートには、作成する単一ページのタイトルとコンテンツが表示されます。
リストテンプレートを作成します。
- 同様に、複数のコンテンツ項目 (投稿のリストなど) を表示するためのリストテンプレートを作成できます。 list.html layouts/_default/ディレクトリに作成します。
```
  <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <ul> {{ range .Pages }} <li><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }} </ul> </main> </body> </html>
```

ステップ 5: テンプレートのカスタマイズ

Hugo の豊富なテンプレート機能セットを使用してテンプレートを強化できます。たとえば、カスタム CSS、変数のループ、または日付のフォーマットを含めることができます。

CSS の追加: CSS ファイルをテンプレートにリンクできます。
```
 <link rel="stylesheet" href="{{ "styles.css" | relURL }}">
```
日付の形式: date関数を使用して日付を特定の形式で表示します。
```
 <p>Published on: {{ .Date.Format "January 2, 2006" }}</p>
```

ステップ 6: サイトを提供してプレビューする

テンプレートを配置し、コンテンツを追加したら、サイトをローカルでプレビューできます。

 hugo server

http://localhost:1313に移動してサイトを表示します。

Hugo テンプレートに関するよくある質問

1. Hugo の「layouts」ディレクトリの目的は何ですか?

layoutsディレクトリは、Hugo のすべてのテンプレートファイルを保存する場所です。これは、さまざまなタイプのコンテンツ (投稿、ページ、リストなど) がサイトのフロントエンドでどのようにレンダリングされるかを定義するために使用されます。テンプレートは、個々のコンテンツページの場合はsingle.html 、コンテンツリストの場合はlist.htmlなど、タイプと場所ごとに編成されます。

2. Hugo で独自のカスタムテンプレートを作成できますか?

はい、Hugo でカスタムテンプレートを作成できます。テンプレートをlayoutsディレクトリに配置すると、特定のコンテンツタイプ、セクション、さらには固有のコンテンツ表示用に特化したテンプレートを作成できます。 Hugo では、選択したテーマのデフォルトのテンプレートをオーバーライドすることもできます。

3. Hugo はコンテンツファイルとテンプレートをどのように処理しますか?

Hugo は、コンテンツファイル (Markdown またはその他の形式で記述された) をテンプレートと組み合わせて、コンテンツファイルの表示方法を定義するシステムを使用します。コンテンツ (ブログ投稿など) を作成すると、Hugo は適切なテンプレート ( single.htmlなど) を自動的に検索し、そのテンプレートを使用してコンテンツをレンダリングします。 Hugo は、さまざまなテンプレートを使用できるセクションへのコンテンツの編成もサポートしています。

4. Hugo の部分テンプレートとは何ですか?

部分テンプレートは、他のテンプレートに含めることができる再利用可能な HTML のコンポーネントまたはスニペットです。たとえば、ヘッダー、フッター、またはナビゲーションメニューを部分として作成し、 {{ partial "header.html" . }}構文。これにより、DRY (Don't Reply Yourself) 原則を維持するのに役立ち、サイトの管理が容易になります。

5. Hugo テンプレートをカスタムテーマで使用できますか?

はい、Hugo ではカスタムテーマを使用できます。独自のテーマを作成することも、Hugo テーマリポジトリから既存のテーマを使用することもできます。既存のテーマを使用している場合は、 layoutsディレクトリにカスタムテンプレートを追加することでそのテンプレートをオーバーライドできます。これにより、構造全体を変更せずにテーマの特定の部分を変更できます。

これらの手順に従い、Hugo のテンプレートシステムを理解することで、強力でカスタマイズ可能な Web サイトを構築できます。組み込みのテンプレートを使用する場合でも、独自のテンプレートを作成する場合でも、Hugo は静的サイトを簡単に開発するために必要な柔軟性と速度を提供します。

Hugo に組み込まれたテンプレートの使用方法: ステップバイステップ ガイド