ホームページ

サイトのトップページです。レイアウトはホームページレイアウト設定で制御されますが、content/_index.md に記述した内容はページ上に表示されます。

例: content/_index.md

---
title: "ようこそ！"
description: "ホームページにコンテンツを追加するデモです。"
---
私のウェブサイトへようこそ!
# ショートコードやMarkdownも使えます
{{< button href="/about/" >}} 私について {{< /button >}}

リストページ (セクション)

特定のセクション（例: ブログ、プロジェクト）内のページ一覧を表示します。コンテンツフォルダ内にサブディレクトリを作成することでセクションが作られます。

例: プロジェクトセクションの構造

content/projects/_index.md に記述した内容は、プロジェクト一覧ページの上部に表示されます。

例: content/projects/_index.md (cascade使用)

---
title: "プロジェクト"
description: "私のプロジェクトの一部をご紹介します。"
cascade: # このセクション配下の全ページに適用
  showReadingTime: false # 閲覧時間を非表示にする
---
このセクションでは、私の現在進行中のプロジェクトを紹介しています。

cascade を使うと、そのセクション内の全ページに共通のフロントマター設定を一括で適用できます。

タクソノミーページ

タグやカテゴリなど、コンテンツを分類するためのページです。「リストページ」（例: 全タグ一覧）と「タームページ」（例: 特定タグが付いた記事一覧）があります。

タクソノミー作成プロセス

1. 1
   設定ファイルで定義: config/_default/taxonomies.toml でタクソノミー名（単数形=複数形）を定義します。
   animal = "animals"
2. 2
   コンテンツに追加: 各ページのフロントマターで、タクソノミー（複数形）とその値（ターム）を指定します。
   animals: ["lion", "cat"]
3. 3
   自動生成: Hugoが自動的にリストページ (/animals/) とタームページ (/animals/lion/, /animals/cat/) を生成します。
4. 4
   (任意) コンテンツ追加: 必要であれば、リストページやタームページに説明文などを追加できます。ファイル名は _index.md を使います。
   content/animals/_index.md (リストページ用)
   content/animals/lion/_index.md (タームページ "lion" 用)

例: タクソノミー用コンテンツファイル構造

通常のリーフページ

例: ブログセクションの構造

例: content/blog/first-post.md フロントマター

---
title: "初めてのブログ記事"
date: 2025-05-04
description: "私のブログへようこそ!"
summary: "私自身と、このブログを始めた理由についてご紹介します。"
tags: ["welcome", "new", "first"]
showAuthor: true # 著者情報を表示
showReadingTime: true # 閲覧時間を表示
---
# ここから本文
_これ_ が私のブログ記事の本文です。Markdownが使えます。

様々なフロントマターパラメータで表示をカスタマイズできます。

外部リンク

サイト内の記事リストに、外部サイト（Medium記事、論文など）へのリンクを表示させる機能です。

例: content/posts/my-medium-article.md

---
title: "私の Medium 記事"
date: 2025-01-25
summary: "Medium に記事を投稿しました。"
externalUrl: "https://medium.com/my-article" # 必須: リンク先のURL
showReadingTime: false # 外部記事なので不要
_build: # Hugoのビルド制御
  render: "false" # このページのHTMLは生成しない
  list: "local" # リストページには表示する
---
# 本文は通常不要

externalUrl と _build 設定が重要です。テーマには外部リンク用のアーキタイプも用意されています: hugo new -k external posts/my-post.md

シンプルページ

特別なテーマ機能（サイドバーなど）を使わず、Markdownコンテンツのみを全幅で表示するシンプルなレイアウトです。

例: content/landing-page.md

---
title: "私のランディングページ"
date: 2025-03-08
layout: "simple" # 必須: シンプルレイアウトを指定
showBreadcrumbs: false # パンくずリストを非表示にする例
---
このページのコンテンツは **全幅** で表示されます。
シンプルな情報提示に適しています。

デフォルトレイアウトの上書き

テーマが提供するデフォルトのレイアウトファイル（例: layouts/_default/single.html）を、プロジェクトの同じパスに作成することで、そのレイアウトを完全に上書きできます。詳細は高度なカスタマイズガイドを参照してください。

カスタムセクションレイアウト

特定のコンテンツセクション（例: プロジェクト一覧）に対して独自のリストレイアウトを作成できます。

カスタムセクションレイアウト作成プロセス

1. 1
   コンテンツ構成: まず、通常通りセクション用のコンテンツ（例: content/projects/）を作成します。各ページにはカスタムレイアウトで利用したい情報をフロントマターで設定します（例: アイコン名、外部リンクURLなど）。

   ---
   title: "Blowfish Theme"
   icon: "github"
   externalUrl: "https://github.com/..."
   ---

2. 2
   レイアウトファイル作成: プロジェクトの layouts/ ディレクトリ内に、コンテンツセクションと同じ名前のサブディレクトリを作成し、その中に list.html ファイルを作成します。
   例: layouts/projects/list.html
3. 3
   テンプレート記述: 作成した list.html に、Hugoのテンプレート構文を使ってHTML構造と表示ロジックを記述します。.Pages でセクション内の各ページにアクセスし、フロントマターの値 (.Params.icon など) を利用して表示内容を組み立てます。

   {{ define "main" }}
     <section>
       {{ range .Pages }}
         <article>
           <a href="{{ .Params.externalUrl }}">
             {{ partial "icon.html" .Params.icon }} {{ .Title }}
             <p>{{ .Description }}</p>
           </a>
         </article>
       {{ end }}
     </section>
   {{ end }}

4. 4
   (任意) スタイル調整: 必要であれば、custom.css やTailwindの再ビルドでスタイルを調整します。