Magic Modifying the Hexo-Aurora Theme
1 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.
2 Modifications
2.1 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.
|
|
The js script placed in the body, when loading is complete, makes the animation disappear:
|
|
2.2 Smaller Spacing
Smaller spacing between levels 1-6 headings, quote blocks and other styles.
2.3 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.
2.4 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.
2.5 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.
2.6 Narrower Menu Bar
The menu bar is narrowed to the smallest during reading, to improve the reading area.
2.7 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.
3 How to Use
3.1 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:
|
|
- Change
theme
fromaurora
toaurora-s
in_config.yml
- 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.
3.2 For Non-Aurora Users
Follow these steps: Open the hexo root directory and execute:
|
|
- Change
theme
fromaurora
toaurora-s
in_config.yml
- In the hexo root directory, download the configuration file template, and rename it to
_config.aurora-s.yml
- Follow the original configuration guide to configure and use.