過去のコミット履歴を振り返ると、サイトは何度もテーマを変更してきた。たびにカスタムした変更があり、ここではその変更のアイデアを記録しておく。筆者のGitHubにもリポジトリがあり、一時的にEvenテーマをメンテナンスしていたが、強迫観念から最新版にHugoコンパイラをアップデートしようとした結果、Evenテーマとの互換性がなくなり、Stackテーマに戻した。
ヒューゴのモジュール化
モジュール化と聞くと、NginxのモジュールやIDEAプラグインなどが思い浮かぶかもしれません。通常は、いくつかのモジュールをアップロードすることで、私の差別化されたニーズを満たすことができます。皆がこのモジュールを好む主な理由は、十分に柔軟性があり、あまり労せずして自身のニーズを満たせるからです。なぜなら、多くの場合、全体としては似ていても、細部には差異があるからです。これもまた、ソフトウェアの複雑さを物語っており、技術的な複雑さだけでなく、ビジネス上の複雑さも存在します。ほとんどの場合、私たちはビジネス上の複雑さに直面します。これは、ソフトウェア分野における「隔行如隔山」という言葉の最も良い説明です。現在では、インターネット業界だけでなく、金融業界や伝統的な製造業に至るまで、情報化システムを利用して企業の生産と管理を支援しています。同じ休暇申請システムでも、同じ業界であっても、異なる会社ごとに差異が生じることがあります。
そして、Hugoのモジュールは、皆さんが想像するような機能単位で多様なニーズを満たすものではなく、むしろディレクトリ構造を主とし、同じ構造を識別することに重点を置いています。
資料リンク：07. Hugo 架构 — Hugo 的模块
[[imports]]
path = "github.com/CaiJimmy/hugo-theme-stack/v3"
Git サブモジュール方式は引き続き利用可能ですが、本稿では推奨しません。テーマの更新が発生した場合、個別の Git リポジトリでテーマを管理する必要があり、メンテナンスが煩雑になります。
テーマの変更ロジック
モジュール化の基礎概念を理解した上で、カスタムテーマを理解するのは非常に簡単になります。現在Hugoが提供しているテーマも、複数の異なるモジュールを組み合わせて作られており、もし特定のモジュールを変更したい場合は、対応するテンプレートファイルを特定して修正すれば良いのです。
Stack公式ドキュメントからの抜粋です。
Using this method, there won’t be any file under themes directory. In order to modify the theme, you will have to copy the file you want to modify to the same directory under layouts directory.
For example, in order to modify the themes/hugo-theme-stack/layouts/partials/head/custom.html file, you will have to copy it to layouts/partials/head/custom.html and modify it there (copy the code from theme’s repository). The same applies to assets and static directories。
テンプレートファイルを見つけるにはどうすればいいですか。
正統な発想
テーマのソースファイルを確認し、デザインの意図を理解した上で、対応するテンプレートファイルを修正すればよい。
乱暴な考え方
私はフロントエンドコードに詳しくないので、時には乱暴な方法を取ることがあります。例えば、ブラウザで該当のページを開いて、変更したい場所を見つけ、「要素を検証」機能を使ってcss nameを特定し、テーマソースコード内で検索して、対応するファイルを見つけたら、それをサイトディレクトリにコピーして修正するというものです。
ちょっとしたコツ
公式デフォルトでスタイルをカスタマイズするためのファイルが用意されており、変更が必要な箇所は複数のファイルに分割し、custom.scssファイルから他のファイルをインポートすることで、よりスタイルのファイルを整理して管理できます。
変更点まとめ(6h)
現在はすでに「AI」コーディングの元年であり、詳細についてはここでは割愛しますが、簡単な変更点としては、コピーボタンのスタイルの調整やコードブロックのスタイルの再設定などです。「ChatGPT」なら簡単に対応できます。
- 全体：グローバルテキストスタイル。以前の
evenとinfo cnの表示スタイルを継承し、中国語に親和性がある。 - ホームページ：右側のナビゲーションにマウスインタラクションアニメーションを追加
- トップページ：記事に要約プレビューを追加しました（時間がかかりすぎるので、多少の裏手回りを経て実現しました）。
- スクロールバー：スタイルを少し修正しました。
- コードブロックに
highlight.jsコードハイライトプラグインが導入され、コードブロックのスタイルが改善されました。 - 一部内容は転載であり、新規に著作者情報表示と原文リンク表示を追加しました。
- アーカイブページ：上部のカテゴリ画像、テーマに付属するカラーオーバーレイを削除し、オリジナルの画像をそのまま表示します。
- アーカイブページ：年ごとの分類による統計表示パネルを追加しました。
- アーカイブページ：2列表示レイアウト
スタックのテーマのコンポーネント再利用率が非常に高いため、ホームページの記事に概要プレビューを追加するのに時間がかかりました。対応するコンポーネントを変更した結果、記事の詳細ページも変更され、正文の内容が重複して表示されるようになりました。また、golangテンプレートの構文にも詳しくなかったので、時間がかかりました。コンポーネント間のパラメータ伝送は最後までうまくいかず、最終的には裏技を使って、ホームページに個別のJavaScriptスクリプトを導入し、カスタム特殊変数を使用して概要プレビューを実現しました。
コードの再利用率が時々高すぎると問題になることがあります。ある場所を変更すると、他の場所にも影響が出てしまうため、テーマを修正する際は、既存のロジックを壊さないように注意してください。
コメント欄
この男の人の修正はさらに完璧になりました：https://blog.reincarnatey.net/2024/0719-better-waline/
このサイトでは簡単な Waline コメントシステムを導入しています。stack テーマはデフォルトで Waline をサポートしており、config.toml で設定するだけで利用できます。
推奨ページ、メールお問い合わせ。当サイトではコメント欄は開放しておりません。