Hextraのカスタマイズ
Hextraは、hugo.yaml設定ファイル内でテーマを設定するためのデフォルトのカスタマイズオプションを提供しています。
このページでは、利用可能なオプションとテーマをさらにカスタマイズする方法について説明します。
カスタムCSS
カスタムCSSを追加するには、サイト内にassets/css/custom.cssファイルを作成します。Hextraはこのファイルを自動的に読み込みます。
フォントファミリー
コンテンツのフォントファミリーは以下のようにカスタマイズできます:
.content {
font-family: "Times New Roman", Times, serif;
}インラインコード要素
他のテキストと混在するテキストの色は以下のようにカスタマイズできます:
.content code:not(.code-block code) {
color: #c97c2e;
}プライマリカラー
テーマのプライマリカラーは、--primary-hue、--primary-saturation、--primary-lightness変数を設定することでカスタマイズできます:
:root {
--primary-hue: 100deg;
--primary-saturation: 90%;
--primary-lightness: 50%;
}コンポーネントレイアウト変数
Hextraは、ページ、ナビゲーションバー、フッターの幅をカスタマイズするためのCSS変数を提供しています:
:root {
/* ページ幅 - hugo.yamlのparams.page.widthでも設定可能 */
--hextra-max-page-width: 80rem; /* デフォルト: 80rem (標準), 90rem (ワイド), 100% (フル) */
/* ナビゲーションバー幅 - hugo.yamlのparams.navbar.widthでも設定可能 */
--hextra-max-navbar-width: 90rem; /* 独立したナビゲーションバー幅 */
/* フッター幅 - hugo.yamlのparams.footer.widthでも設定可能 */
--hextra-max-footer-width: 80rem; /* 独立したフッター幅 */
}Tailwindテーマ変数
Tailwind CSS v4をベースにしたHextra v0.10.0以降では、@layer themeブロック内でCSS変数をオーバーライドすることでテーマをカスタマイズできます。
これにより、個々のクラスを変更することなく、グローバルな外観をカスタマイズできます。
@layer theme {
:root {
--hx-default-mono-font-family: "JetBrains Mono", monospace;
}
}詳細については、Tailwindテーマ変数のドキュメントを参照してください。
さらなるテーマカスタマイズ
テーマは、公開されているCSSクラスをオーバーライドすることでさらにカスタマイズできます。フッター要素をカスタマイズする例:
.hextra-footer {
/* フッター要素に適用されるスタイル */
}
.hextra-footer:is(html[class~="dark"] *) {
/* ダークモードでのフッター要素に適用されるスタイル */
}以下のクラスを使用して、テーマのさまざまな部分をカスタマイズできます。
一般
hextra-scrollbar- スクロールバー要素content- ページコンテンツコンテナ
ショートコード
バッジ
hextra-badge- バッジ要素
カード
hextra-card- カード要素hextra-card-image- カード画像要素hextra-card-icon- カードアイコン要素hextra-card-subtitle- カードサブタイトル要素
カードグリッド
hextra-cards- カードグリッドコンテナ
Jupyter Notebook
hextra-jupyter-code-cell- Jupyterコードセルコンテナhextra-jupyter-code-cell-outputs-container- Jupyterコードセル出力コンテナhextra-jupyter-code-cell-outputs- Jupyterコードセル出力div要素
hextra-pdf- PDFコンテナ要素
ステップ
hextra-steps- ステップコンテナ
タブ
hextra-tabs-panel- タブパネルコンテナhextra-tabs-toggle- タブトグルボタン
ファイルツリー
hextra-filetree- ファイルツリーコンテナ
フォルダ
hextra-filetree-folder- ファイルツリーフォルダコンテナ
ナビゲーションバー
hextra-nav-container- ナビゲーションバーコンテナhextra-nav-container-blur- ブラー効果付きナビゲーションバーコンテナhextra-hamburger-menu- ハンバーガーメニューボタン
フッター
hextra-footer- フッター要素hextra-custom-footer- カスタムフッターセクションコンテナ
検索
hextra-search-wrapper- 検索ラッパーコンテナhextra-search-input- 検索入力要素hextra-search-results- 検索結果リストコンテナ
検索UI内で使用されるオプションのネストされたクラス:
hextra-search-title- 結果タイトル要素hextra-search-active- アクティブな結果アンカーhextra-search-no-result- 空の状態要素hextra-search-prefix- グループ化された結果のパンくずリスト/プレフィックスラベルhextra-search-excerpt- 結果スニペットテキストhextra-search-match- ハイライトされたクエリスパン
目次
hextra-toc- 目次コンテナ
サイドバー
hextra-sidebar-container- サイドバーコンテナhextra-sidebar-active-item- サイドバーのアクティブアイテム
言語スイッチャー
hextra-language-switcher- 言語スイッチャーボタンhextra-language-options- 言語オプションコンテナ
テーマトグル
hextra-theme-toggle- テーマトグルボタン
コードコピーボタン
hextra-code-copy-btn-container- コードコピーボタンコンテナhextra-code-copy-btn- コードコピーボタンhextra-copy-icon- コピーアイコン要素hextra-success-icon- 成功アイコン要素
コードブロック
hextra-code-block- コードブロックコンテナhextra-code-filename- コードブロックのファイル名要素
フィーチャーカード
hextra-feature-card- フィーチャーカードリンク要素
フィーチャーグリッド
hextra-feature-grid- フィーチャーグリッドコンテナ
シンタックスハイライト
利用可能なシンタックスハイライトテーマの一覧は、Chroma Styles Galleryで確認できます。スタイルシートは以下のコマンドで生成できます:
hugo gen chromastyles --style=githubデフォルトのシンタックスハイライトテーマをオーバーライドするには、生成されたスタイルをカスタムCSSファイルに追加します。
カスタムスクリプト
すべてのページのheadの終わりにカスタムスクリプトを追加するには、以下のファイルを作成します:
layouts/partials/custom/head-end.htmlフッターへのカスタムセクション追加
フッターに追加セクションを追加するには、サイト内にlayouts/partials/custom/footer.htmlファイルを作成します。
<!-- ここにフッター要素を追加 -->追加されたセクションは、フッターの著作権セクションの前に追加されます。 HTMLとHugoテンプレート構文を使用して独自のコンテンツを追加できます。
フッターセクションで利用可能なHugo変数: .switchesVisibleと.displayCopyright。
カスタムレイアウト
テーマのレイアウトは、サイトのlayoutsディレクトリに同じ名前のファイルを作成することでオーバーライドできます。
例えば、ドキュメントのsingle.htmlレイアウトをオーバーライドするには、サイト内にlayouts/docs/single.htmlファイルを作成します。
詳細については、Hugoテンプレートを参照してください。
さらなるカスタマイズ
探しているものが見つかりませんでしたか？ディスカッションを開くか、テーマへの貢献をお願いします！