ホーム on 私の Hugo サイト

テーマガイド

Sun, 26 Oct 2025 00:00:00 +0000

この記事では hugo-trainsh の描画機能を紹介します——見出し、コード、テーブル、図、数式、画像など。

3つのテーマモード
テキスト
コード
テーブル
図表
数式
画像
タグ

3つのテーマモード

ヘッダーのトグルボタンで順に切り替えます：

レトロ (ゲームパッド) — NES ディープブルー背景、ピクセルフォント見出し、8-bit ダイアログ枠
ライト (太陽) — すっきりしたモダン配色
ダーク (月) — 夜間の閲覧に最適

テキスト

通常の Markdown がそのまま使えます。太字はレトロモードでゴールドに、斜体も問題なく表示されます。任意のリンクもテーマに合わせてスタイルが変わります。

引用ブロックはレトロモードでシアンの枠が付き、長い記事でもすぐ見分けがつきます。

コード

フェンスコードブロックにはシンタックスハイライト、コピーボタン、ソフトラップが付きます：

 
from datetime import date

def greet(name: str) -> str:
 return f"こんにちは、{name}！今日は {date.today()} です。"

print(greet("世界"))

hugo server のようなインラインコードもスタイル付きです。

コードサンプル

Sun, 19 Oct 2025 00:00:00 +0000

JavaScript

 
export function hasFeature(name) {
 return ['ショートコード', 'Mermaid', 'KaTeX', 'PhotoSwipe', 'i18n'].includes(name);
}
console.log(hasFeature('ショートコード'));

Python

 
from dataclasses import dataclass
from datetime import date

@dataclass
class DemoFeature:
 name: str
 enabled: bool

features = ["コードブロック拡張", "検索", "タグ絞り込み", "いいね", "多言語"]
status = [DemoFeature(name=feature, enabled=True) for feature in features]

print(date.today().isoformat(), status[:2], f"total={len(status)}")

画像とライトボックス

Sun, 12 Oct 2025 00:00:00 +0000

外部画像

画像をクリックするとライトボックスで開きます。

拡大表示

ローカル画像の注意

Page Bundle の場合は、画像を index.md と同じ場所に置き、ファイル名だけで参照するとサイズが取得できます。

Mermaid と数式のデモ

Sun, 05 Oct 2025 00:00:00 +0000

Mermaid

 sequenceDiagram
 participant U as ユーザー
 participant H as Hugo
 participant T as テーマランタイム
 U->>H: コンテンツを保存
 H->>T: テンプレートでレンダリング
 T-->>U: ライブリロード

数式

インライン数式: $a^2 + b^2 = c^2$。

ブロック数式:

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}

アーカイブとタグ

Sun, 28 Sep 2025 00:00:00 +0000

アーカイブ

アーカイブページでは日付ごとに閲覧できます。最新の投稿はホームに表示されます。

表のテスト

Fri, 26 Sep 2025 00:00:00 +0000

左	中央	右
a	b	c
`code`	em	bold

エンジニアリング原則 2024

Mon, 22 Apr 2024 00:00:00 +0000

原則

小さく出して、頻繁にリリースする。
クリティカルパスは枯れた技術を優先する。
テストは意図を記録するもの。読みやすく保つ。
機能を足す前に、ロールバックを容易にしておく。

メモ

これらの原則は、覚えて議論できるよう意図的に簡潔にしている。

機能デモガイド

Thu, 18 Mar 2021 00:00:00 +0000

なぜこの投稿を更新したか

このデモ記事は最新テーマの確認用に更新し、アップグレード後の主要機能を検証するためのチェックリストになっています。

検証フロー

言語切替で各言語版の対応ページが参照できること。
一覧ページで検索とタグ絞り込みが動作すること。
記事内のショートコード（toc、tags、recent-posts）が正しく描画されること。
コードブロック・Mermaid・KaTeX・PhotoSwipe が正常に表示されること。
テーマ切替ボタンが3段階で正しく動作すること：ライト（太陽）→ ダーク（月）→ レトロ（ゲームパッド）→ ライト。レトロモードでは NES ピクセル風（ディープブルー背景、ピクセルフォント見出し）が表示されること。

推奨設定

params.mainSections は記事の実際のセクションを含める（デモは posts）。
outputs.home で JSON を有効にすると検索インデックスを使えます。

補足

多言語の同一コンテンツは translationKey で関連付けます。