Hextra – ブログ

Hextra v0.12

Fri, 20 Feb 2026 00:00:00 +0000

Hextra v0.12.0 は、ページコンテキストメニュー、画像ズーム、刷新されたタブ、その他多くの新機能に加え、包括的な WCAG 2.2 AA アクセシビリティ改善と多数のバグ修正を提供します。

アップグレードガイド

ほとんどのサイトで破壊的変更はありません。Hugo Modules を使って更新してください:

hugo mod get -u github.com/imfing/hextra

ハイライト

Markdown ソースのコピー・表示ができるページコンテキストメニュー
タブ名指定とアイコンをサポートする刷新されたタブショートコード
Markdown 画像のクリックズーム
GoatCounter アナリティクス対応
デスクトップでメインサイドバーを非表示にするオプション
GitInfo による最終更新者の表示
前へ/次へナビゲーションの無効化オプション
ブログ記事の年別アーカイブページ
用語集ショートコードとレイアウト
llms.txt からのページ/セクション除外
モバイルサイドバーの順序とラベルが menu.main に準拠
CSS 変数オーバーライドによる安定したコンテンツ幅
包括的な WCAG 2.2 AA アクセシビリティ改善

新機能

ページコンテキストメニュー

ページコンテキストメニューはドロップダウンボタンを提供し、ページの内容を Markdown としてコピーしたり、生の Markdown ソースを表示できます。ドキュメントを生成 AI ツールに取り込むユーザーが増える中、クリーンな Markdown への素早いアクセスはますます有用です。テンプレート変数（{url}、{title}、{markdown_url}）を使ったカスタムリンクにより、「AI に質問」ショートカットなどのインテグレーションをメニューに直接組み込めます。

「Markdown として表示」および {markdown_url} 機能を利用するには、サイト設定で Markdown 出力フォーマットを有効にしてください:

hugo.yaml

outputs:
 page: [html, markdown]
 section: [html, rss, markdown]

次にコンテキストメニューを設定します:

hugo.yaml

params:
 page:
 contextMenu:
 enable: true
 links:
 - name: "Ask AI"
 url: "https://example.com?content={markdown_url}"
 icon: "sparkles"

タブの刷新とアイコン対応

タブショートコードが刷新されました。各 tab ショートコードでタブ名を直接設定でき、オプションの icon パラメータでラベルの前にアイコンを表示できます。従来の構文も引き続きサポートされています。

{{< tabs >}}
 {{< tab name="Photos" icon="photograph" >}}写真ライブラリを管理・整理します。{{< /tab >}}
 {{< tab name="Music" icon="music-note" >}}お気に入りの曲を閲覧・再生します。{{< /tab >}}
 {{< tab name="Videos" icon="film" >}}動画コンテンツを視聴・ストリーミングします。{{< /tab >}}
{{< /tabs >}}

画像ズーム

medium-zoom を利用した新しい設定オプションで、Markdown 画像のクリックズームを有効にできます。

hugo.yaml

params:
 imageZoom:
 enable: true

GoatCounter アナリティクス

既存の Google Analytics、Umami、Matomo に加え、GoatCounter アナリティクスの組み込みサポートを追加しました。

メインサイドバーの非表示

新しいフロントマターパラメータにより、デスクトップでメインサイドバーを非表示にしてコンテンツを全幅表示できます。

content/my-page.md

---
title: My Page
sidebar:
 hide: true
---

最終更新者の表示

Hugo の GitInfo を使って、「最終更新日」と合わせて最終コミット者を表示します。

hugo.yaml

params:
 displayUpdatedAuthor: true

前へ/次へナビゲーションの無効化

サイト全体で前へ/次へナビゲーションボタンを無効にできます:

hugo.yaml

params:
 page:
 displayPagination: false

LLMs.txt 除外

フロントマターで llms: false を設定すると、個別のページやセクション全体を llms.txt 出力から除外できます。

content/private-page.md

---
title: "Private Page"
llms: false
---

アーカイブページ

新しい組み込み archives レイアウトは、ブログ記事を年ごとにグループ化した時系列タイムラインで表示し、各タイトルの後にタグをインラインで表示します。

content/archives/_index.md

---
title: Archives
layout: archives
---

用語集

サイト全体の用語集。専用のリストページとインライン定義用の term ショートコードを備えています。

アクセシビリティ

包括的な WCAG 2.2 AA アクセシビリティ改善 (#924):

すべてのページに本文へスキップリンクと ARIA ランドマークロール
すべてのインタラクティブウィジェット（テーマトグル、タブ、サイドバー、ファイルツリー、ドロップダウン、検索、メニュー）に ARIA 属性
タブとテーマトグルのキーボードナビゲーション（矢印キー、Enter、Escape）
prefers-reduced-motion サポートとグローバル focus-visible スタイル
全 21 ロケールに完全翻訳された 15 個の新しい i18n アクセシビリティキー
ハードコードされた英語 aria-label 文字列をすべて i18n ルックアップに置き換え

利便性の向上

テーブルの読みやすさ向上のためのスタイル改善
ヘッダーでの Markdown 属性サポート
多言語セクションランディングページでのアクティブリンク検出の改善
カードショートコードで画像に alt パラメータをオプションでサポート
ページバンドル画像が OpenGraph メタデータでサポート
コンテンツ幅がデフォルトで安定し、カスタムレイアウト用の CSS 変数オーバーライドをサポート

修正

render-link での relref ベースプレフィックスの二重付与を修正
ステップ内にネストされたタブの描画を修正
モバイルサイドバーの順序とラベルを menu.main に準拠
サイドバーでの search.enable の尊重
モバイルドロップダウンでの toc ページパラメータの尊重
FlexSearch のマッチハイライトと安全な DOM 操作の改善
カードのサブタイトル位置の修正
サブパスデプロイメントでの OG 画像パスの先頭スラッシュの処理
FlexSearch が期待より少ない結果ページを返す問題の修正
Umami アナリティクスのデフォルトファイルを script.js に変更
Hugo v0.156.0+ での RSS author ルックアップの修正 (.Site.Params.Author)

ドキュメントと i18n

イタリア語ローカリゼーションを追加
KaTeX ドキュメントへのリンクを追加
details ショートコードのドキュメントを angle bracket 構文に更新

コントリビューター

このリリースは 11 名の新しいコントリビューターの貢献により実現しました:

@ghac101 - Umami アナリティクスの修正、前へ/次へナビゲーションの無効化
@pmarrapese - ヘッダーの Markdown 属性サポート
@Bubbler-4 - details ショートコードのドキュメント
@bloovis - FlexSearch の結果件数修正
@AntoninPvr - カードのサブタイトル位置修正
@illia-v - モバイル TOC と検索トグルの修正
@gallochri - イタリア語ローカリゼーション
@MatheusFlausino - LLMs.txt 除外
@daniseijo - 最終更新者機能
@confusedkernel - アーカイブページ
@Fenyutanchan - Hugo v0.156.0 RSS author 互換性修正

さらに、継続的な貢献をいただいている @KStocky、@ldez、@kowyo、@torbjornbp、@yuri1969、@PrintN の各コントリビューターに感謝いたします。

完全な変更履歴: https://github.com/imfing/hextra/compare/v0.11.1...v0.12.0

Hextra v0.11

Sat, 30 Aug 2025 00:00:00 +0000

Hextra v0.11.0 は、UX の磨き込みと便利な新コンポーネントに注力したリリースです。サイト全体バナー、改良されたコールアウトとバッジ、よりリッチなカード、アナリティクス連携、そしていくつかのナビゲーション改善を含みます。安定性の修正とドキュメント更新も同梱しています。

アップグレードガイド

ほとんどのサイトで破壊的変更はありません。Hugo Modules を使って更新してください:

hugo mod get -u github.com/imfing/hextra

ハイライト

お知らせ用のトップバナーコンポーネント
より見やすくなったコールアウトの刷新
Umami と Matomo のアナリティクス対応
端末録画のための Asciinema ショートコード
外部リンク装飾オプション
単一ページ（ドキュメント・ブログ以外）向けのパンくずリスト
ナビバー改善: アイコン付きリンク項目と配置の改善
バッジとカードのカスタマイズ性向上
テーマ切り替えに「System」オプションを追加

新機能

トップバナー

告知やリリース、ステータスメッセージ向けに、サイト全体で表示できる閉じられるバナーを追加します。

hugo.yaml

params:
 banner:
 key: "announcement"
 message: Welcome!

コールアウト刷新

Callout のデザインを刷新し、テーマを問わず可読性と強調表現を向上しました。

アナリティクス: Umami と Matomo

以下のアナリティクスプロバイダに組み込み設定で対応:

Umami
Matomo

Asciinema ショートコード

Asciinema の端末録画を、新しい Asciinema ショートコードで埋め込みできます。

{{< asciinema id="123456" autoplay=true loop=true >}}

ナビバーの改善

ナビバーのリンク項目でアイコンをサポート
言語スイッチャー等との兼ね合いを考慮してメニュー配置を最適化

特に、0.10.2 ではナビバーに言語スイッチャーとテーマトグルを追加可能になりました。

外部リンク装飾

外部リンクに控えめな装飾をオプションで付与できます。

hugo.yaml

params:
 externalLinkDecoration: true

パンくずリストの有効化

フロントマターで breadcrumbs: true を設定すると、単一ページ（ドキュメント・ブログ以外）でパンくずリストを有効化できます。

content/about.md

---
title: About
breadcrumbs: true
---

カードとバッジの改善

カード: 新オプション tagIcon と tagBorder
バッジ: 新しい色とボーダースタイル

利便性の向上

テーマ切り替え: 「System」オプションを追加
タイポグラフィ: チェックボックス付きタスクリストのスタイル改善
言語スイッチャー: アイコンメニュー項目との並び順を改善

修正

Giscus: テーマと言語の同期を適切に実施
カード: RTL でのバッジ描画を修正
ナビバー: メニュー配置とインタラクションを調整

ドキュメントと i18n

Docs: Hextra のショートコードをまとめた新ページ
i18n: zh-cn に copyCode と system の翻訳を追加

完全な変更履歴: https://github.com/imfing/hextra/compare/v0.10.2...v0.11.0

Hextra v0.10

Thu, 14 Aug 2025 00:00:00 +0000

Hextra v0.10.0 は、新機能、アーキテクチャの刷新、利便性向上を詰め込んだ大きなリリースです。

また、10名の新規コントリビューターからの貢献と、長らく要望のあった機能の実装も含まれています。

アップグレードガイド

Important

破壊的変更: このリリースにはいくつかの破壊的変更が含まれています。アップグレード前にチェックリストと移行ガイドを確認してください。

v0.10.0 にアップグレードする前に、以下を確認してください:

Hugo v0.146.0+ (extended 版) がインストールされていること
カスタムCSSのクラス名変更を確認 ( CSSクラスプレフィックス変更と Tailwind CSS v4 を参照)
LaTeX や Mermaid を使用する場合、ビルド環境がアセットダウンロードのためインターネットに接続できること

準備が整ったら、Hugoモジュールを更新します:

hugo mod get -u github.com/imfing/hextra@v0.10.0

新機能

このリリースの主な新機能は以下の通りです:

ナビゲーションバーのドロップダウンメニューサポート: 階層型ナビゲーションメニューの作成
検索機能の強化: すべての見出しを対象にした精度向上した検索
llms.txt サポート: AI向けサイトアウトラインの生成
目次のスクロールハイライト: ページスクロール中の見出し自動ハイライト
タブの同期切り替え: 複数のタブグループ間でのタブ選択の同期
ブログ一覧のページネーション: ブログ一覧ページへのページネーションコントロール追加
MathJax サポート: KaTeXに加えてMathJaxを数式レンダリングエンジンとして選択可能

ナビゲーションバーのドロップダウンメニューサポート

ナビゲーションバーにドロップダウンメニューを作成し、ナビゲーション項目を整理できます。

hugo.yaml

menu:
 main:
 - identifier: products
 name: "製品"
 - name: "製品A"
 parent: products
 url: "/product-a"
 - name: "製品B"
 parent: products
 url: "/product-b"

検索機能の強化

すべての見出しを検索: ページタイトルだけでなく、すべてのレベルの見出しからコンテンツを検索
検索結果の精度向上: タイトル処理とリンク精度の改善
結果ナビゲーションの修正: 検索結果が正しいページセクションにリンクするようになりました

検索機能の強化に貢献してくださった @ldez に感謝します!

llms.txt サポート

Hextra はサイトの llms.txt 出力形式をサポートし、AIツールや言語モデルがコンテキストや参照のためにサイトをよりアクセスしやすくします。

hugo.yaml

outputs:
 home: [html, llms]

これにより、サイトのルートに llms.txt ファイルが生成されます。

目次のスクロールハイライト

ページをスクロールする際に、目次が現在のセクションを自動的にハイライトするようになり、ナビゲーションがより直感的になりました。

タブの同期切り替え

同じ項目を持つタブはページ全体で同期されるようになりました。同期が有効な場合、タブを選択すると同じ項目リストを共有するすべてのタブグループが更新されます（選択内容は記憶されます）。

hugo.yaml

params:
 page:
 tabs:
 sync: true

ブログ一覧のページネーション

ブログ一覧ページに基本的なページネーションコントロールが追加されました。

hugo.yaml

params:
 blog:
 list:
 pagerSize: 20 # 1ページあたりの投稿数

MathJax サポート

デフォルトのKaTeXサポートに加えて、MathJax で数式をレンダリングできるようになりました。ニーズに合ったエンジンを選択できます。

hugo.yaml

params:
 math:
 engine: "mathjax" # デフォルトは "katex"

技術的改善

フレームワークとビルドシステム

Tailwind CSS v4 移行: Tailwind CSS v4 への完全移行とカスタマイズサポートの改善
Hugoテンプレートシステム: Hugoの新しいテンプレートシステム (v0.146.0+) への対応
数式のサーバーサイドレンダリング: Hugoネイティブレンダリングを使用した数式レンダリングの改善
FlexSearch 0.8 アップグレード: 検索エンジン FlexSearch のアップグレードにより、CJK (中国語、日本語、韓国語) コンテンツのエンコーディング改善と高速化・精度向上
アセット管理の強化: KaTeXとMermaidアセットのCDNまたはローカルからの読み込みサポート

利便性の向上

動的ファビコン切り替え: カラースキーム設定に基づくファビコンの自動更新
逆順ページネーション: ページフロントマターで reversePagination を設定可能に
Googleインデックス制御: Googleのインデックスをブロックする新しいページパラメータ
幅の処理改善: CSS変数によるレスポンシブデザイン制御の強化
スタイリング改善: Markdownテーブルと水平線のモダンなスタイル

バグ修正と安定性

Giscusテーマ同期: コメントがダーク/ライトモードの切り替えに正しく追従
検索結果の精度: 検索結果のリンク問題とタイトルエスケープの修正
タブ切り替え: 非同期タブモードでのナビゲーション問題の解決
ファントムスクロール: フッター無効時の不要なスクロール動作の修正
画像アクセシビリティ: 重複したaltテキストレンダリングの防止
リンクレンダリング: 複雑なサイト構造におけるベースURL処理の改善

移行ガイド

Hugoバージョン要件: Hugo v0.146.0+ (extended版) が必要
CSSクラスプレフィックス変更: コンポーネントCSSクラスに一貫した hextra- プレフィックスを採用
アセット管理: KaTeXとMermaidアセットはビルド時にダウンロード
Tailwind CSS v4: 内部CSSコンパイルにTailwind CSS v4.xを採用し hx: プレフィックスを使用

Hugoバージョン要件

影響: 古いHugoバージョンで動作しているサイト

Hextra v0.10.0 は新しいテンプレートシステムを採用しているため、Hugo v0.146.0以降 (extended版) が必要です。

必要な対応: Hextraをアップグレードする前にHugoをv0.146.0+に更新

CSSクラスプレフィックス変更

影響: HextraコンポーネントクラスをターゲットにしたカスタムCSSがあるサイト

Hextra v0.10.0 では、メンテナンス性向上とユーザースタイルとの衝突防止のため、ほとんどのコンポーネントCSSクラスに一貫した hextra- プレフィックスを導入しました。

必要な対応: HextraコンポーネントをターゲットにしたカスタムCSSがある場合、以下のクラス名を更新してください:

領域	変更前	変更後
検索 (コンテナ)	`.search-wrapper`	`.hextra-search-wrapper`
検索 (入力)	`.search-input`	`.hextra-search-input`
検索 (結果)	`.search-results`	`.hextra-search-results`
検索 (タイトル)	`.search-wrapper .title`	`.hextra-search-wrapper .hextra-search-title`
検索 (アクティブ項目)	`.search-wrapper .active`	`.hextra-search-wrapper .hextra-search-active`
検索 (結果なし)	`.search-wrapper .no-result`	`.hextra-search-wrapper .hextra-search-no-result`
検索 (プレフィックス)	`.search-wrapper .prefix`	`.hextra-search-wrapper .hextra-search-prefix`
検索 (抜粋)	`.search-wrapper .excerpt`	`.hextra-search-wrapper .hextra-search-excerpt`
検索 (マッチ)	`.search-wrapper .match`	`.hextra-search-wrapper .hextra-search-match`
ナビバーブラー	`.nav-container-blur`	`.hextra-nav-container-blur`
ハンバーガーメニュー	`.hamburger-menu`	`.hextra-hamburger-menu`
テーマトグル	`.theme-toggle`	`.hextra-theme-toggle`
言語スイッチャー	`.language-switcher`	`.hextra-language-switcher`
サイドバーコンテナ	`.sidebar-container`	`.hextra-sidebar-container`
サイドバーアクティブ項目	`.sidebar-active-item`	`.hextra-sidebar-active-item`
コードファイル名	`.filename`	`.hextra-code-filename`
コピーアイコン	`.copy-icon`	`.hextra-copy-icon`
成功アイコン	`.success-icon`	`.hextra-success-icon`
ステップ	`.steps`	`.hextra-steps`

KaTeXとMermaidのアセット管理

影響: KaTeXまたはMermaidを使用しているサイト

Hextra v0.10.0 では、KaTeXとMermaidアセットをビルド時にCDNからダウンロードするようになりました。

変更点:

これらのアセットをダウンロードするため、ビルドプロセスでインターネットアクセスが必要
ビルド後はこれらのアセットに対する外部CDN呼び出しが不要

必要な対応:

アセットをダウンロードするため、ビルド環境がインターネットに接続できることを確認
エアギャップ環境のサイトでは、これらのアセットを事前にダウンロードし、Hextraがそれらを読み込むように設定する必要がある場合があります

Tailwind CSS v4

影響: HextraのTailwindクラス hx-* を広範囲にカスタマイズしているサイト

HextraはTailwind CSS v4移行を内部で処理しますが、高度にカスタマイズされたサイトでは追加の調整が必要な場合があります。

変更点:

内部CSSコンパイルにTailwind CSS v4.xを使用
ユーティリティクラスのプレフィックスが hx- から hx: に変更

コントリビューター

このリリースは、10名の新規コントリビューターの貢献によって実現されました:

@oosquare - KaTeXフォント、画像レンダーフック、リンク処理の改善
@Zabriskije - ファントムスクロールの修正
@miniwater - カスタムフッターの中央揃え、画像altテキストの改善
@MattDodsonEnglish - Googleインデックス制御、OpenGraphドキュメント
@KStocky - 逆順ページネーション機能
@PrintN - ドキュメントショーケースの追加
@hobobandy - タイトル間隔の改善
@dlwocks31 - 韓国語翻訳の更新
@TwoAnts - Giscusテーマ切り替えの修正
@ldez - 検索機能の改善とバグ修正

継続的なサポート、ドキュメント、翻訳、技術的改善を提供してくださった @deining と @yuri1969 にも感謝します。

完全な変更履歴: https://github.com/imfing/hextra/compare/v0.9.7...v0.10.0

Markdown 構文ガイド

Wed, 01 Jan 2020 00:00:00 +0000

この記事では、Hugo のコンテンツファイルで使用できる基本的な Markdown 構文のサンプルを紹介します。

基本構文

見出し

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

見出し2

見出し3

見出し4

見出し5

見出し6

強調

*このテキストは斜体になります*
_これも斜体になります_

**このテキストは太字になります**
__これも太字になります__

_これらを**組み合わせる**こともできます_

このテキストは斜体になります

これも斜体になります

このテキストは太字になります

これも太字になります

これらを組み合わせることもできます

画像

![GitHub ロゴ](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)

リンク

[Hugo](https://gohugo.io)

Hugo

ブロッククォート

ニュートンはこう言いました:

> 私が遠くを見渡せたとしたら、それは巨人の肩の上に立っていたからです。

私が遠くを見渡せたとしたら、それは巨人の肩の上に立っていたからです。

インラインコード

インライン `コード` は `バッククォートで囲みます`。

インライン コード は バッククォートで囲みます。

コードブロック

シンタックスハイライト

```go
func main() {
 fmt.Println("Hello World")
}
```

func main() {
 fmt.Println("Hello World")
}

テーブル

| 構文 | 説明 |
| --------- | ----------- |
| 見出し | タイトル |
| 段落 | テキスト |

構文	説明
見出し	タイトル
段落	テキスト

Hextra – ブログ

Hextra v0.12

アップグレードガイド

ハイライト

新機能

ページコンテキストメニュー

タブの刷新とアイコン対応

画像ズーム

GoatCounter アナリティクス

メインサイドバーの非表示

最終更新者の表示

前へ/次へナビゲーションの無効化

LLMs.txt 除外

アーカイブページ

用語集

アクセシビリティ

利便性の向上

修正

ドキュメントと i18n

コントリビューター

Hextra v0.11

アップグレードガイド

ハイライト

新機能

トップバナー

コールアウト刷新

アナリティクス: Umami と Matomo

Asciinema ショートコード

ナビバーの改善

外部リンク装飾

パンくずリストの有効化

カードとバッジの改善

利便性の向上

修正

ドキュメントと i18n

Hextra v0.10

アップグレードガイド

新機能

ナビゲーションバーのドロップダウンメニューサポート

検索機能の強化

llms.txt サポート

目次のスクロールハイライト

タブの同期切り替え

ブログ一覧のページネーション

MathJax サポート

技術的改善

フレームワークとビルドシステム

利便性の向上

バグ修正と安定性

移行ガイド

Hugoバージョン要件

CSSクラスプレフィックス変更

KaTeXとMermaidのアセット管理

Tailwind CSS v4

コントリビューター

Markdown 構文ガイド

基本構文

見出し

見出し2

見出し3

見出し4

見出し5

見出し6

強調

リスト

順序なしリスト

順序付きリスト

画像

リンク

ブロッククォート

インラインコード

コードブロック

シンタックスハイライト

テーブル

参考資料