ClaudeMP – ブログ

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")
}

テーブル

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

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

ClaudeMP – ブログ

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

強調

リスト

順序なしリスト

順序付きリスト

画像

リンク

ブロッククォート

インラインコード

コードブロック

シンタックスハイライト

テーブル

参考資料