Modified Hexo-Aurora Theme

1 Preface

The Aurora theme is a Hexo theme developed by @San Zuan. The theme is grand and beautiful, but as a design aimed at the general public, some niche needs are not met. Therefore, I modified it according to my needs, which is the Aurora-s. It should be noted that:

• Some of the modified content, such as the prompt text under the loading animation, cannot be customized.
• The modified version of Aurora-s is based on Aurora V2.5.2 and will try to follow the original updates but cannot guarantee full adoption.

Aurora is almost impeccable in aesthetics, but it still lacks functionality, such as reading experience. The above image is a screenshot of the original page on a small laptop screen, where you can see the spacing between components is very large, resulting in low content display density, requiring constant scrolling on small screens, which is a poor reading experience (not very noticeable on large screens). Therefore, the main purpose of the modified version is to increase display density and optimize the reading experience.

2 Modification Content

2.1 Loading Animation

Since the theme-generated js and css change and cannot be hosted on third-party sites, and the js files are not small, coupled with my deployment overseas, there can be a long initial loading time when the network is poor (looking forward to San Zuan’s optimization). If it loads for a long time and remains blank, it might be mistaken for a site crash. Therefore, a loading animation was added, which disappears when the page’s general framework is loaded. The animation is implemented purely with code, with very low overhead.

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

Placed in the body js script, making the animation disappear when loading is complete:

1
2
3
4

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

2.2 Smaller Spacing

Reduced spacing between styles such as headings 1-6, blockquotes, etc.

2.3 Centered First and Second-Level Titles

• Centered first and second-level titles for a more balanced visual effect
• Thinner color bar under the second-level titles for distinction
• Reduced font size for headings 1-6 by one level

2.4 Image Scaling

The original image was defaulted to the same width as the screen, now adjusted to 72% width centered to prevent small images from taking up large space

2.5 Code Copy Function

Implemented code copying via js in the top right corner of code blocks. The author mentioned future versions will also implement this, looking forward to it.

2.6 Narrowed Menu Bar

Narrowed the menu bar during reading to increase reading area

2.7 Footer Modification

• Removed the color bar above the footer
• Adjusted the text order in the footer’s left list to ascending order by length
• Added pv and uv prompt text
• Removed the avatar on the right side of the footer

3 Usage Method

3.1 Used Aurora

If you need to use the modified theme, you can still keep the existing configuration, just follow these steps: Open the hexo root directory and execute:

1
2
3

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

2. In _config.yml, change theme from aurora to aurora-s
3. Copy _config.aurora.yml in the hexo root directory and rename it to _config.aurora-s.yml Then continue to use as usual.

3.2 Never Used Aurora

Follow these steps: Open the hexo root directory and execute:

1
2

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

2. In _config.yml, change theme from aurora to aurora-s
3. In the hexo root directory, download the configuration file template, and rename it to _config.aurora-s.yml
4. Configure according to the original configuration guide to use