Hugo モジュールカスタムテーマの修正：考え方の解説

過去のコミット履歴を調べてみたところ、サイトが何度もテーマを変更しており、毎回いくつかのカスタム設定を適用していた。そこで、カスタム設定の変更方法を記録しておく。私のGitHubには「even」というテーマがあり、短期間メンテナンスを行っていたが、最新版のHugoコンパイラへのアップグレードを強行した結果、互換性が失われ、最終的に「stack」テーマに切り替えてしまった。

Hugoのモジュール化

モジュール化について言及する際、NginxモジュールやIDEAプラグインなどを思い浮かべる人が多いでしょう。通常は、私がいくつかのモジュールをアップロードすることで、私の独自のニーズを満たすことができます。モジュールが広く受け入れられる理由は、十分に柔軟で、あまり労力をかけずに自分のニーズを満たせることです。多くの場合は、大体同じように見えるものの、細部には常に違いがあるからです。これはソフトウェアの複雑さを物語っており、技術的な複雑さだけでなく、ビジネス上の複雑さも含まれます。大多数の場合、私たちが直面しているのはビジネスの複雑さです。これこそが、「隔行如隔山」という俗語を最もよく表すものです。

現在では、インターネット業界だけでなく、金融業界、さらには伝統的な製造業まで、情報化システムを使用して企業の生産と管理を支援しています。同じ「休暇申請システム」でも、同じ業界の異なる企業間には違いがあります。

そしてHugoのモジュールは、皆さんがイメージするモジュールとは少し異なります。機能単位で独自のニーズを満たすのではなく、ディレクトリ構造を主に使用して、共通の構造を認識します。

資料リンク：07. Hugoアーキテクチャ — Hugoのモジュール

[[imports]]
path = "github.com/CaiJimmy/hugo-theme-stack/v3"

git submodule 方式も引き続き使用できますが、本記事では推奨されません。テーマを導入した場合、更新が発生するとメンテナンスが煩雑になり、個別の git リポジトリでテーマを管理する必要があるためです。

テーマの修正ロジック (https://stack.jimmycai.com/guide/modify-theme)

前面モジュール化の基礎概念を理解した上で、カスタムテーマを理解すると、それほど難しくありません。hugo の現在のテーマも、複数の異なるモジュールを組み合わせて構成されています。あるモジュールを変更したい場合は、対応するテンプレートファイルを検索し、修正すればOKです。

stack 公式ドキュメントからの抜粋：

この方法を使用すると、themes ディレクトリの下にファイルは存在しません。テーマを修正するには、変更したいファイルを同じディレクトリにある layouts ディレクトリにコピーする必要があります。

例えば、themes/hugo-theme-stack/layouts/partials/head/custom.html ファイルを変更する場合は、それを layouts/partials/head/custom.html にコピーし、そこから修正します（テーマのリポジトリからコードをコピー）。assets と static ディレクトリについても同様です。

テンプレートファイルの場所を見つける方法

従来の思路

テーマのソースファイルを確認し、テーマのデザイン思想を理解し、対応するテンプレートファイルを修正します。

蛮力的なアプローチ

私はフロントエンドのコードがあまり理解していないため、時には手動で対応することがあります。例えば、関連するページをブラウザで開き、修正したい箇所を見つけ、要素を検査を使ってCSS名（css name）を特定し、ソースコード内で検索して該当ファイルを抽出し、それをサイトディレクトリにコピーして変更します。

スニppets

公式サイトでデフォルトのファイルが用意されており、カスタマイズが必要な箇所は、複数のファイルに分割して custom.scss ファイルをインポートすることで、よりスタイルの管理を効率化できます。 alt text

修正内容まとめ（6時間）

現在は AI エンコードの元年であり、詳細な内容はここでは省略し、主な変更点を以下に列挙します。本サイトで行った修正内容としては、コピーボタンのスタイルの調整、コードブロックのスタイルの再設定などがあり、ChatGPT などは容易に対応できました。

全体：グローバル文字スタイルを、以前の even と info cn を融合した表示スタイルを引き継ぎ、中国語に最適化
首页：右側のナビゲーションにマウスインタラクションアニメーションを追加
首页：記事に概要プレビュー（手間のかかる方法で実現）を追加
スクロールバー：スクロールバーのスタイルを美化
コードブロック：highlight.js を導入し、コードブロックのスタイルを美化
文章詳細：一部コンテンツが転載であるため、原作者情報と元のリンクを表示
アーカイブページ：トップのカテゴリ画像にテーマ自带の色付きマスクを削除し、元の画像を表示
アーカイブページ：年単位でのカテゴリ分類の統計表示パネルを追加
アーカイブページ：2列表示レイアウト stack テーマのコンポーネント再利用率が高いため、首页の記事への概要プレビュー追加に時間がかかりました。対応するコンポーネントを変更したことで、記事の詳細ページの変更も引き起こされ、正文が重複して表示される問題が発生しました。golang テンプレート の構文はあまり馴染みがないため、多くの時間を費やし、コンポーネント間のパラメータ伝達を解決することができませんでした。最終的には、巧みに手段として、ホームページに独自に JavaScript スクリプトを導入し、カスタムの特殊変数を通じて概要プレビューを実現しました。

コード再利用率が高すぎる場合も問題であり、変更を加えることで他の場所にも影響が及ぶ可能性があるため、テーマを変更する際には注意が必要です。元のロジックを壊さないようにしてください。

コメント欄

このイケメンさんの修正はより洗練されています：https://blog.reincarnatey.net/2024/0719-better-waline/ 本サイトではシンプルな形で Waline 评论システムを導入しており、stack テーマがデフォルトで Waline をサポートしているため、config.toml に設定するだけです。

ホームページへのメール連絡の推奨、本サイトではコメント欄は開放していません