--- title: "Hextra v0.10" date: 2025-08-14 authors: - name: imfing link: https://github.com/imfing image: https://github.com/imfing.png tags: - Release draft: true --- Hextra v0.10.0 は、新機能、アーキテクチャの刷新、利便性向上を詰め込んだ大きなリリースです。 また、10名の[新規コントリビューター](#contributors)からの貢献と、長らく要望のあった機能の実装も含まれています。 ## アップグレードガイド > [!IMPORTANT] > **破壊的変更**: このリリースにはいくつかの破壊的変更が含まれています。アップグレード前にチェックリストと[移行ガイド](#migration-guide)を確認してください。 v0.10.0 にアップグレードする前に、以下を確認してください: - Hugo v0.146.0+ (extended 版) がインストールされていること - カスタムCSSのクラス名変更を確認 ( [CSSクラスプレフィックス変更](#css-class-prefix-changes) と [Tailwind CSS v4](#tailwind-css-v4) を参照) - LaTeX や Mermaid を使用する場合、ビルド環境がアセットダウンロードのためインターネットに接続できること 準備が整ったら、Hugoモジュールを更新します: ```bash hugo mod get -u github.com/imfing/hextra@v0.10.0 ``` ## 新機能 このリリースの主な新機能は以下の通りです: - [**ナビゲーションバーのドロップダウンメニューサポート**](#dropdown-menu-support-in-navbar): 階層型ナビゲーションメニューの作成 - [**検索機能の強化**](#enhanced-search-experience): すべての見出しを対象にした精度向上した検索 - [**llms.txt サポート**](#llmstxt-support): AI向けサイトアウトラインの生成 - [**目次のスクロールハイライト**](#table-of-contents-scroll-highlighting): ページスクロール中の見出し自動ハイライト - [**タブの同期切り替え**](#synchronized-tab-switching): 複数のタブグループ間でのタブ選択の同期 - [**ブログ一覧のページネーション**](#blog-list-pagination): ブログ一覧ページへのページネーションコントロール追加 - [**MathJax サポート**](#mathjax-support): KaTeXに加えてMathJaxを数式レンダリングエンジンとして選択可能 ### ナビゲーションバーのドロップダウンメニューサポート ナビゲーションバーにドロップダウンメニューを作成し、ナビゲーション項目を整理できます。 ```yaml {filename="hugo.yaml"} menu: main: - identifier: products name: "製品" - name: "製品A" parent: products url: "/product-a" - name: "製品B" parent: products url: "/product-b" ``` ![ドロップダウンメニューナビゲーション](https://github.com/user-attachments/assets/1816f9b9-7fe3-46e8-9546-f15e43e9914a) ### 検索機能の強化 - **すべての見出しを検索**: ページタイトルだけでなく、すべてのレベルの見出しからコンテンツを検索 - **検索結果の精度向上**: タイトル処理とリンク精度の改善 - **結果ナビゲーションの修正**: 検索結果が正しいページセクションにリンクするようになりました 検索機能の強化に貢献してくださった [@ldez](https://github.com/ldez) に感謝します! ![強化された検索結果](https://github.com/user-attachments/assets/f819652a-95d4-4843-b7e2-c7953a8cabe8) ### llms.txt サポート Hextra はサイトの [llms.txt](https://llmstxt.org/) 出力形式をサポートし、AIツールや言語モデルがコンテキストや参照のためにサイトをよりアクセスしやすくします。 ```yaml {filename="hugo.yaml"} outputs: home: [html, llms] ``` これにより、サイトのルートに `llms.txt` ファイルが生成されます。 ![llms txtの例](https://github.com/user-attachments/assets/c6e929bb-0fce-4ab2-af15-a71c5a38b22c) ### 目次のスクロールハイライト ページをスクロールする際に、目次が現在のセクションを自動的にハイライトするようになり、ナビゲーションがより直感的になりました。 ![目次のスクロールハイライト](https://github.com/user-attachments/assets/d623fb99-7000-428b-af95-384eb722f0eb) ### タブの同期切り替え 同じ項目を持つタブはページ全体で同期されるようになりました。同期が有効な場合、タブを選択すると同じ項目リストを共有するすべてのタブグループが更新されます（選択内容は記憶されます）。 ```yaml {filename="hugo.yaml"} params: page: tabs: sync: true ``` ### ブログ一覧のページネーション ブログ一覧ページに基本的なページネーションコントロールが追加されました。 ```yaml {filename="hugo.yaml"} params: blog: list: pagerSize: 20 # 1ページあたりの投稿数 ``` ![ブログページネーション](https://github.com/user-attachments/assets/60405fb4-ec36-4733-ba13-b4066396b5c5) ### MathJax サポート デフォルトのKaTeXサポートに加えて、[MathJax](https://www.mathjax.org/) で数式をレンダリングできるようになりました。ニーズに合ったエンジンを選択できます。 ```yaml {filename="hugo.yaml"} params: math: engine: "mathjax" # デフォルトは "katex" ``` ## 技術的改善 ### フレームワークとビルドシステム - **Tailwind CSS v4 移行**: [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4) への完全移行とカスタマイズサポートの改善 - **Hugoテンプレートシステム**: Hugoの[新しいテンプレートシステム](https://gohugo.io/templates/new-templatesystem-overview/) (v0.146.0+) への対応 - **数式のサーバーサイドレンダリング**: Hugoネイティブレンダリングを使用した数式レンダリングの改善 - **FlexSearch 0.8 アップグレード**: 検索エンジン [FlexSearch](https://github.com/nextapps-de/flexsearch) のアップグレードにより、CJK (中国語、日本語、韓国語) コンテンツのエンコーディング改善と高速化・精度向上 - **アセット管理の強化**: KaTeXとMermaidアセットのCDNまたはローカルからの読み込みサポート ## 利便性の向上 - **動的ファビコン切り替え**: カラースキーム設定に基づくファビコンの自動更新 - **逆順ページネーション**: ページフロントマターで `reversePagination` を設定可能に - **Googleインデックス制御**: Googleのインデックスをブロックする新しいページパラメータ - **幅の処理改善**: CSS変数によるレスポンシブデザイン制御の強化 - **スタイリング改善**: Markdownテーブルと水平線のモダンなスタイル ## バグ修正と安定性 - **Giscusテーマ同期**: コメントがダーク/ライトモードの切り替えに正しく追従 - **検索結果の精度**: 検索結果のリンク問題とタイトルエスケープの修正 - **タブ切り替え**: 非同期タブモードでのナビゲーション問題の解決 - **ファントムスクロール**: フッター無効時の不要なスクロール動作の修正 - **画像アクセシビリティ**: 重複したaltテキストレンダリングの防止 - **リンクレンダリング**: 複雑なサイト構造におけるベースURL処理の改善 --- ## 移行ガイド - [**Hugoバージョン要件**](#hugo-version-requirements): Hugo v0.146.0+ (extended版) が必要 - [**CSSクラスプレフィックス変更**](#css-class-prefix-changes): コンポーネントCSSクラスに一貫した `hextra-` プレフィックスを採用 - [**アセット管理**](#asset-management-for-katex-and-mermaid): KaTeXとMermaidアセットはビルド時にダウンロード - [**Tailwind CSS v4**](#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](https://github.com/oosquare) - KaTeXフォント、画像レンダーフック、リンク処理の改善 - [@Zabriskije](https://github.com/Zabriskije) - ファントムスクロールの修正 - [@miniwater](https://github.com/miniwater) - カスタムフッターの中央揃え、画像altテキストの改善 - [@MattDodsonEnglish](https://github.com/MattDodsonEnglish) - Googleインデックス制御、OpenGraphドキュメント - [@KStocky](https://github.com/KStocky) - 逆順ページネーション機能 - [@PrintN](https://github.com/PrintN) - ドキュメントショーケースの追加 - [@hobobandy](https://github.com/hobobandy) - タイトル間隔の改善 - [@dlwocks31](https://github.com/dlwocks31) - 韓国語翻訳の更新 - [@TwoAnts](https://github.com/TwoAnts) - Giscusテーマ切り替えの修正 - [@ldez](https://github.com/ldez) - 検索機能の改善とバグ修正 継続的なサポート、ドキュメント、翻訳、技術的改善を提供してくださった [@deining](https://github.com/deining) と [@yuri1969](https://github.com/yuri1969) にも感謝します。 **完全な変更履歴**: https://github.com/imfing/hextra/compare/v0.9.7...v0.10.0