Magic Modifying the Hexo-Aurora Theme

Foreword

The Aurora theme, developed by @San Diamond, is a Hexo theme that’s atmospheric and beautiful. However, as a design intended for the public, there are still some niche needs that are not met. Therefore, I made modifications according to my own needs, which is Aurora-s. It is important to note that:

• In my modifications, there are some text prompts under the loading animations that cannot be customized.
• The modified version of Aurora-s is based on Aurora V2.5.2. Efforts will be made to keep up with the original updates, but full adoption cannot be guaranteed.

Aurora is almost impeccable in terms of aesthetics, but still lacks in functionality, such as the reading experience. The above image was captured on a notebook’s small screen original page, showing that the spacing between components is very large, and the content display density is very low, requiring constant scrolling on small screens, which is a very poor reading experience (not so noticeable on large screens). Therefore, the main purpose of the magic modification is to increase display density and optimize the reading experience.

Modifications

Loading Animation

Since the theme-generated js and css will change and cannot be hosted by a third party, and the js file is not small, coupled with my deployment overseas, there will be a considerable first load time when the network is bad (looking forward to San Diamond’s optimization). If it takes a long time to load and is still blank, it might be mistaken for the website being down. Therefore, a loading animation was added, which will disappear when the basic framework of the page is loaded. The animation is implemented in pure code, with very little 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
}
}

The js script placed in the body, when loading is complete, makes the animation disappear:

1
2
3
4

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

Smaller Spacing

Smaller spacing between levels 1-6 headings, quote blocks and other styles.

Centered Level 1 and 2 Headings

• Centering the level 1 and 2 headings for a more symmetrical visual effect.
• The color bar under the level 2 heading is thinner, for differentiation.
• Font sizes for levels 1-6 headings have all been reduced by one level.

Image Rescaling

Originally, images were set to be screen-width. Now adjusted to 72% width and centered to prevent small images from occupying large space.

Code Copy Function

Implemented code copying through js in the upper right corner of the code blocks. The author said it would also be implemented in future versions, looking forward.

Narrower Menu Bar

The menu bar is narrowed to the smallest during reading, to improve the reading area.

Footer Modification

• Removed the color bar above the footer.
• Rearranged the text order on the left side of the footer in ascending order of length.
• Added hints for page views and unique visitors.
• Removed the avatar on the right side of the footer.

How to Use

For Aurora Users

If you need to use the modified theme, you can still retain your 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. Change theme from aurora to aurora-s in _config.yml
3. Copy and rename _config.aurora.yml in the hexo root directory to _config.aurora-s.yml Then you can continue to use it as usual.

For Non-Aurora Users

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

1
2

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

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