Modifications Du Thème Hexo-Aurora

1 Préface

Le thème Aurora est développé par @San Zuan pour Hexo. Bien que le thème soit esthétique et élégant, il ne répond pas à certains besoins spécifiques en raison de son design grand public. J’ai donc apporté des modifications selon mes besoins, ce qui a donné naissance à Aurora-s. Il est important de noter que :

• Certaines modifications, comme les textes d’indication sous l’animation de chargement, ne peuvent pas être personnalisées.
• La version modifiée Aurora-s est basée sur Aurora V2.5.2. Je ferai de mon mieux pour suivre les mises à jour de la version originale, mais je ne peux pas garantir l’adoption complète.

Aurora est presque irréprochable en termes d’esthétique, mais il présente des lacunes fonctionnelles, notamment en matière d’expérience de lecture. L’image ci-dessus montre une capture d’écran de la page originale sur un petit écran d’ordinateur portable. On peut voir que l’espacement entre les composants est très grand, ce qui réduit la densité d’affichage du contenu et nécessite un défilement constant sur les petits écrans, rendant l’expérience de lecture très médiocre (ce n’est pas aussi évident sur les grands écrans). Par conséquent, l’objectif principal de la version modifiée est d’augmenter la densité d’affichage et d’optimiser l’expérience de lecture.

2 Contenu des modifications

2.1 Animation de chargement

Étant donné que les fichiers js et css générés par le thème changent et ne peuvent pas être hébergés par des tiers, et que les fichiers js sont assez volumineux, combiné au fait que je les déploie à l’étranger, il peut y avoir un temps de chargement initial assez long lorsque le réseau est mauvais (en attendant une optimisation par San Zuan). Si le chargement prend trop de temps et que l’écran reste blanc, cela peut être interprété comme un site en panne. J’ai donc ajouté une animation de chargement qui disparaît lorsque le cadre de la page est chargé. L’animation est réalisée uniquement en code, avec un coût très faible.

 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
}
}

Script js placé dans le body, pour faire disparaître l’animation une fois le chargement terminé :

1
2
3
4

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

2.2 Espacement réduit

Réduction de l’espacement entre les styles des titres de niveau 1 à 6, des blocs de citation, etc.

2.3 Titres de niveau 1 et 2 centrés

• Les titres de niveau 1 et 2 sont centrés pour un effet visuel plus équilibré
• La barre colorée sous les titres de niveau 2 est plus fine pour faire la distinction
• La taille des titres de niveau 1 à 6 est réduite d’un niveau

2.4 Redimensionnement des images

Les images par défaut étaient de la même largeur que l’écran, elles sont maintenant ajustées à 72 % de largeur et centrées, pour éviter que les petites images n’occupent trop d’espace

2.5 Fonction de copie de code

Ajout d’une fonction de copie de code en haut à droite des blocs de code via js. L’auteur a indiqué que cette fonctionnalité sera également implémentée dans les futures versions, à suivre.

2.6 Réduction de la barre de menu

Réduction de la barre de menu pendant la lecture pour augmenter la surface de lecture

2.7 Modification du pied de page

• Suppression de la barre colorée au-dessus du pied de page
• Réorganisation de l’ordre des textes sur la liste à gauche du pied de page, par ordre croissant de longueur
• Ajout de textes d’indication PV et UV
• Suppression de l’avatar à droite du pied de page

3 Méthode d’utilisation

3.1 Pour ceux qui ont utilisé Aurora

Si vous souhaitez utiliser le thème modifié, vous pouvez conserver votre configuration actuelle en suivant ces étapes : Ouvrez le répertoire racine de hexo et exécutez :

1
2
3

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

2. Dans _config.yml, changez theme de aurora à aurora-s
3. Copiez _config.aurora.yml dans le répertoire racine de hexo et renommez-le en _config.aurora-s.yml Ensuite, continuez à l’utiliser comme d’habitude.

3.2 Pour ceux qui n’ont pas utilisé Aurora

Suivez ces étapes : Ouvrez le répertoire racine de hexo et exécutez :

1
2

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

2. Dans _config.yml, changez theme de aurora à aurora-s
3. Dans le répertoire racine de hexo, téléchargez le modèle de fichier de configuration et renommez-le en _config.aurora-s.yml
4. Configurez-le selon le guide de configuration original pour l’utiliser.