Hexo-Auroraテーマのカスタマイズ

1 前言

Auroraテーマは、@三钻によって開発されたHexoのテーマです。このテーマは美しく洗練されていますが、大衆向けのデザインであるため、一部のニッチなニーズには対応していません。そこで、自分のニーズに合わせてカスタマイズを行い、Aurora-sを作成しました。注意点としては：

• 私が行った変更の中には、カスタマイズできないテキストが一部あります。例えば、ロードアニメーションの下に表示されるテキストです。
• 変更版のAurora-sは、AuroraV2.5.2をベースにしており、可能な限りオリジナルの更新内容を追従しますが、完全には採用できない場合があります。

Auroraは美しさにおいてほぼ完璧ですが、機能面ではまだ欠けている部分があります。例えば、読書体験です。上の画像はノートパソコンの小さな画面でのオリジナルページのスクリーンショットですが、コンポーネント間の間隔が非常に大きく、コンテンツの表示密度が低いため、小さな画面では頻繁にスクロールする必要があり、読書体験が非常に悪いです（大画面ではそれほど顕著ではありません）。したがって、カスタマイズ版の主な目的は、表示密度を高め、読書体験を最適化することです。

2 魔改内容

2.1 加载动画

テーマが生成するjsとcssは変化するため、サードパーティにホスティングすることができません。また、jsファイルも小さくなく、海外にデプロイしているため、ネットワークが悪いときには初回ロード時間が長くなることがあります（三钻の最適化を期待しています）。もし長時間ロードしても真っ白なままだと、サイトがダウンしていると誤解される可能性があります。そこで、ロードアニメーションを追加しました。ページの大まかなフレームが読み込まれると、このアニメーションは消えます。アニメーションは純粋なコードで実装されており、オーバーヘッドは非常に小さいです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.loader {
	width:200px;
	height:22px;
	border-radius:20px;
	color:#514b82;
	border:2px solid;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
}
.loader::before {
	content:"";
	position:absolute;
	margin:2px;
	inset:0 100% 0 0;
	border-radius:inherit;
	background:currentColor;
	animation:l6 2s infinite
}
@keyframes l6 {
	100% {
	inset:0
}
}

読み込み完了時にアニメーションを消すためのbodyに置くjsスクリプト:

1
2
3
4

window.addEventListener('load', function() {
          var loader = document.querySelector('.loader');
          loader.remove();
      });

2.2 更小的间距

1-6級の見出し、引用ブロックなどのスタイル間の間隔を小さくしました。

2.3 一级二级标题居中

• 1級と2級の見出しを中央揃えにして、視覚的なバランスを取ります。
• 2級見出しの下の色のバーを細くして区別します。
• 1-6級の見出しのフォントサイズを1段階下げました。

2.4 图片缩放

オリジナルの画像はデフォルトで画面と同じ幅ですが、現在は72%の幅に調整して中央に表示し、小さな画像が大きなスペースを占有しないようにしました。

2.5 代码复制功能

コードブロックの右上に、jsを使用してコードをコピーする機能を追加しました。作者は後続のバージョンでも実装すると言っており、期待しています。

2.6 菜单栏收窄

読書中にメニューを最も狭くして、読書エリアを広げます。

2.7 页脚修改

• フッター上の色のバーを削除しました。
• フッター左側のリストのテキストの順序を、長さの昇順に変更しました。
• pvとuvのヒントテキストを追加しました。
• フッター右側のアバターを削除しました。

3 使用方法

3.1 用过Aurora

変更後のテーマを使用したい場合、既存の設定を保持したまま、以下の手順に従ってください： Hexoのルートディレクトリを開き、以下を実行します：

1
2
3

npm uninstall hexo-plugin-aurora
npm install hexo-theme-aurora-s
npm install hexo-plugin-aurora

2. _config.ymlで、themeをauroraからaurora-sに変更します。
3. Hexoのルートディレクトリにある_config.aurora.ymlをコピーして、_config.aurora-s.ymlにリネームします。 その後、通常通りに使用を続けることができます。

3.2 没用过Aurora

以下の手順に従ってください： Hexoのルートディレクトリを開き、以下を実行します：

1
2

npm install hexo-theme-aurora-s
npm install hexo-plugin-aurora

2. _config.ymlで、themeをauroraからaurora-sに変更します。
3. Hexoのルートディレクトリで、設定ファイルテンプレートをダウンロードし、_config.aurora-s.ymlにリネームします。
4. オリジナルの設定ガイドに従って設定を行い、使用を開始します。