ブログに統一したスキンを当てた

（記事は中国語） 中文 →

このブログの UI 改造の全過程。参考デザインから具体的な実装まで、テンプレート再構築、スタイル統一、テーマ切り替えなどの主要な変更を含む。

ページのスタイルが次第に乱れてきた。ホームページ、記事ページ、ツールページがそれぞれ異なるデザイン言語を持ち、ナビバーが統一されておらず、テーマ切り替えも欠けていた。今回の改造の目標は、統一されたデザインシステムを構築し、すべてのページが同じウェブサイトに見えるようにすることだ。

next-contentlayer を主な参考にした。シンプルでモダンなデザイン、シングルカラムレイアウト、カードの影なし、システムフォントスタック。「UI を消し、文字を主役にする」という理念に合致する。ホームページ、記事ページ、アバウトページの HTML と CSS を保存し、参考基準とした。

改造はテンプレート構造から始めた。以前は各ページが <head> 内の meta、CSS、JS を重複して書いており、保守コストが高かった。共通部分を 6 つの partials に分割した。charset と viewport、favicon と manifest、canonical と description、OG と Twitter Card、CSS とテーマ切り替え初期化、ナビバーとテーマ切り替えボタンをそれぞれ担当する。すべてのページがこれらの partials を再利用し、一箇所変更すれば全体に反映される。

スタイルの統一ももう一つの重点だ。以前は各ページでコンテナ幅、フォント、リンクスタイルがバラバラだった。現在はコンテナ幅、システムフォントスタック、CJK サポート、リンクスタイルを統一した。トピックページの記事リストもホームページと同じ構造とスタイルを採用した。

テーマ切り替えは新機能だ。next-contentlayer は CSS クラス .dark でダークモードを制御しており、この手法を踏襲した。初期化スクリプトが localStorage からテーマ設定を読み取り、<html> の class に同期する。テーマ切り替えボタンはナビバーの右側に配置し、クリック時に .dark クラスを切り替え、localStorage に保存する。CSS 変数で二系統のカラースキームを定義し、@media (prefers-color-scheme: dark) をデフォルトとし、.dark クラスで上書きする。

いくつかのレガシーページを削除した。初期のホームページ案は既に廃止され、ラボページはコンテンツが断片化して保守コストが高かった。可視化総覧ページとツール総覧ページは動的生成に変更し、設定ファイルからデータを読み取り、ビルド時にレンダリングする。

設定のクリーンアップも同時に進めた。参照のない設定フィールドを削除した。すべてのテンプレートとビルドスクリプトを走査し、未使用の設定項目を報告するチェックスクリプトを書き、手動クリーンアップの遗漏を防いだ。

プロジェクトページは動的生成に再構築した。以前は手書きの HTML で、プロジェクト追加のたびに手動でエントリを追加する必要があった。現在は設定ファイルからプロジェクトリストを読み取り、ビルド時にレンダリングする。プロジェクトの追加は設定ファイルに一行追加するだけで、ビルドが自動更新する。

静的ツールページもデザインを統一した。以前はそれぞれが独立した HTML を保守し、スタイルが一致していなかった。現在は同じコンテナ幅、システムフォントスタック、テーマ切り替えボタン、完全なナビバーに統一した。

検証段階で全チェックを通過した。ビルドと検証コマンドで、各記事ページがコピーコンポーネント、clipboard API、chatbot ポップアップメニューを含むことを確認した。すべてのページでスタイルが統一され、テーマ切り替えが機能し、ナビバーが一致している。

核となるメリットは保守性だ。テンプレート partials が重複を減らし、設定チェックスクリプトが冗長性を防ぎ、動的生成ページが手動保守を減らす。デザインシステム構築後、新しいページの追加は規範に従うだけでよく、スタイルを一から設計し直す必要がない。

関連記事

更新履歴

  • 公開