Hextra v0.10

ブログ

Hextra v0.10

8月 14, 2025·

imfing

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 ファイルが生成されます。

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

最終更新日 8月 14, 2025

Markdown 構文ガイド