Hextra v0.13
Hextra v0.13.0 は、モバイルでもデスクトップでもスムーズに動作する新しい検索体験、ライトボックス付きの新しいギャラリーショートコード、折りたたみ式アラート、リモートアイコンパック、改善された Jupyter ノートブックレンダリングに加え、検索の信頼性向上とバグ修正を提供します。
アップグレードガイド
ほとんどのサイトで破壊的変更はありません。Hugo Modules を使って更新してください:
hugo mod get -u github.com/imfing/hextraCSS で検索 UI をカスタマイズしている場合は、検索 CSS の変更をご覧ください。
ハイライト
- モバイルでもデスクトップでもスムーズに動作する新しい検索体験
- PhotoSwipe ライトボックスとグリッド、カルーセル、モザイクレイアウトを備えたギャラリーショートコード
- Obsidian callouts 互換の、カスタムタイトル付き折りたたみ式アラート
- リモートアイコンパック: Lucide、Tabler Icons、Simple Icons
- In/Out プロンプトとより多くの出力タイプに対応した Jupyter ノートブックレンダリングの改善
- ページ本文の周囲にコンテンツを挿入するカスタムページセクションパーシャル
- 検索インデックスのフィンガープリントとよりクリーンな検索結果
新機能
新しい検索体験
検索がコマンドパレット形式のダイアログとして全面的に再設計され、モバイルでもデスクトップでもスムーズに動作するようになりました。デスクトップでは、どのページでも ⌘+K(Windows と Linux では Ctrl+K)または / を押すと開きます。モバイルでは、ナビバーの検索アイコンをタップすると同じ検索ダイアログが開きます。
検索結果にはパンくずが表示されるため、各結果がどこにあるかがひと目でわかります。ダイアログはすべてキーボードで操作でき、開閉もスムーズなアニメーションで行われます。デスクトップでもアイコンのみのトリガーを使いたい場合は、検索メニュー項目に params.icon を設定します:
menu:
main:
- name: Search
weight: 5
params:
type: search
icon: search検索結果もよりクリーンになりました。抜粋から HTML タグが除去され、見出しアンカー内のインラインマークアップが正しく処理されるようになり、本番環境では検索データファイルがフィンガープリントされるため、デプロイ直後からインデックスの更新が反映されます。
ギャラリーショートコード
新しい gallery ショートコードは、インタラクティブな PhotoSwipe ライトボックス付きで画像のコレクションを表示します。フルスクリーン表示、前へ/次へナビゲーション、キャプション、キーボード操作に対応しています。
{{< gallery >}}
{{< gallery-item src="https://picsum.photos/id/1015/1600/1200" thumb="https://picsum.photos/id/1015/800/600" width="1600" height="1200" caption="渓谷" >}}
{{< gallery-item src="https://picsum.photos/id/1018/1600/1200" thumb="https://picsum.photos/id/1018/800/600" width="1600" height="1200" caption="山の湖" >}}
{{< gallery-item src="https://picsum.photos/id/1019/1600/1200" thumb="https://picsum.photos/id/1019/800/600" width="1600" height="1200" caption="森の小道" >}}
{{< /gallery >}}type パラメータで 3 種類のレイアウトを利用できます: 均一な grid(デフォルト)、水平スクロール可能な carousel、アイテムが複数の列や行にまたがることができる mosaic レイアウトです。画像ソースとしては、ローカルのページバンドルリソース、グローバルアセット、静的ファイル、リモート URL のすべてがサポートされています。
折りたたみ式アラート
アラートが、折りたたみ可能なコンテンツとカスタムタイトルのための拡張構文をサポートしました。アラートタイプの後に + または - を追加すると折りたたみ可能になり、マーカーの後にテキストを追加するとタイトルを設定できます。この構文は Obsidian callouts と互換性があります。
> [!TIP]- アラートは折りたためますか?
> はい。折りたたみ式アラートは、閉じると内容が非表示になります。はい。折りたたみ式アラートは、閉じると内容が非表示になります。
リモートアイコンパック
組み込みの Heroicons セットに加え、プロバイダープレフィックスを使ってリモートアイコンパックからアイコンをオンデマンドで読み込めるようになりました:
| プロバイダー | 例 | アイコン |
|---|---|---|
| Lucide | {{< icon "lucide:rocket" >}} | |
| Lucide | {{< icon "lucide:sparkles" >}} | |
| Tabler Icons | {{< icon "tabler:brand-github" >}} | |
| Tabler Icons | {{< icon "tabler:database" >}} | |
| Simple Icons | {{< icon "simple:hugo" >}} | |
| Simple Icons | {{< icon "simple:markdown" >}} |
サポートされているプロバイダーは Lucide、Tabler Icons、Simple Icons です。アイコンはビルド時に取得され、カード、タブ、バッジ、コールアウト、ナビバーメニュー項目など、Hextra がアイコン名を受け付けるあらゆる場所で利用できます。
たとえば、バッジやカードでは次のように使えます:
{{< badge content="Hugo" icon="simple:hugo" >}}
{{< badge content="Markdown" icon="simple:markdown" >}}
{{< cards >}}
{{< card link="https://lucide.dev/icons/" title="Lucide" icon="lucide:feather" >}}
{{< card link="https://tabler.io/icons" title="Tabler Icons" icon="tabler:brand-tabler" >}}
{{< card link="https://simpleicons.org/" title="Simple Icons" icon="simple:simpleicons" >}}
{{< /cards >}}Jupyter ノートブックレンダリングの改善
jupyter ショートコードが大幅に改善され、エラートレースバック、stderr ストリーム、SVG、Markdown、LaTeX、JSON、raw セル、添付ファイル、出力メタデータ、セル表示メタデータをサポートするようになりました。新しい prompts パラメータで Jupyter スタイルの In [N]:/Out[N]: 実行プロンプトを表示できます:
{{< jupyter src="notebook.ipynb" prompts=true >}}カスタムページセクション
新しいカスタマイズフックにより、以下のパーシャルをサイトに作成することで、各ページの本文の周囲にコンテンツを挿入できます:
layouts/_partials/custom/page-begin.html
layouts/_partials/custom/content-begin.html
layouts/_partials/custom/content-end.html
layouts/_partials/custom/page-end.html各パーシャルは現在の Hugo ページをコンテキストとして受け取ります。
検索 CSS の変更
インライン検索ボックスはダイアログに置き換えられたため、hextra-search-wrapper クラスは削除されました。CSS で検索 UI をカスタマイズしている場合は、代わりに新しい hextra-search-trigger と hextra-search-dialog クラスを使用してください。検索関連クラスの完全なリストはカスタム CSS ドキュメントをご覧ください。
修正
- ページ読み込み時に表示されている Mermaid ダイアグラムを即座にレンダリング
- 視差効果を減らす設定(prefers-reduced-motion)の有効時の Mermaid ダイアグラムのスケーリングを修正
- Hugo の数式レンダラーに対して互換性のある KaTeX CSS を選択
- サイドバーにページに紐づくエントリがない場合、モバイルメニューでページツリーにフォールバック
- リンクのレンダーフックでのページ相対 Markdown リンクの解決
- 検索での見出しフラグメント内のインラインマークアップの処理
- Hugo の言語設定キーを最新の規約に更新
- ナビバーのアイコン付きメニュー項目で
tel:などの HTTP 以外のリンクが使えるように - カードとリンクで HTML 属性間のスペースが欠落する問題と、ネストした hero ショートコードでタグが閉じられない問題を修正
- Windows でのギャラリーショートコードのビルドエラーを修正
コントリビューター
このリリースに貢献いただいたコントリビューターの皆様に感謝いたします:
- @bombsimon - 検索結果からの HTML タグの除去
- @yuri1969 - 視差効果を減らす設定(prefers-reduced-motion)の有効時の Mermaid ダイアグラムスケーリング修正
- @muhammadkholidb - Roled ドキュメントのショーケース掲載
- @farmacia-cambie - ナビバーのアイコン付きメニュー項目での
tel:リンク対応 - @hoshsadiq - HTML 属性のスペースとネストした hero ショートコードの修正
- @avighnac - Windows でのギャラリーショートコードのビルド修正
完全な変更履歴: https://github.com/imfing/hextra/compare/v0.12.3...v0.13.0
