Posted onEdited onInWebsite ConfigurationWord count in article: 2kReading time ≈7 mins.
Update Log of my blog. This time, there weren't many adjustments — just a simple refresh of the version number and a slight enhancement of the reading experience.
Upgrade Content
Upgraded Hexo version: 6.3.0 → 7.3.0
Upgraded NexT version: 8.18.2 → 8.20.0
Changed website icon
Changed fonts
Automatically switched background image based on browser theme
Adjusted pagination settings for archives, directory, and tags
Redirected some URLs
Removed click effects on mobile
Changed Cursor Theme
Added image carousel functionality
Adjust the Margin Before Lists/Code Blocks
NPM Package Upgrade
During this upgrade, I discovered a very useful package called npm-check-updates that can check which packages can be upgraded.
It’s been years since I updated the NexT configuration file. While it doesn’t really affect usage, it triggers my OCD a bit.
Rename ./_config.next.yml to ./_old_next_config.yml.
Copy ./node_modules/hexo-theme-next/_config.yml to the blog root directory and rename it to _config.next.yml.
Open both files in VSCode, hold Shift to select both, right-click the file tabs, and choose “Compare Selected”. Then copy and paste the necessary sections.
Change Website Icon
I’m simply tired of the current icon and want a new one.
Open Photoshop (PS) and sketch a random design, then export it with a higher resolution.
Upload the image to Favicon Generator to generate all required icons.
Place the generated images in the ./source/images/ directory, replacing the old ones.
Be sure to update android_manifest in ./_config.next.yml to /images/site.webmanifest since the auto-generated filenames might differ.
Change Website Font
I’ve changed the website’s global font to the Noto Sans, while the blog content uses the more readable Noto Serif. You just need to tweak a few lines in ./_config.next.yml.
# Font options: # `external: true` will load this font family from `host` above. # `family: Times New Roman`. Without any quotes. # `size: x.x`. Use `em` as unit. Default: 1 (16px)
# Global font settings used for all elements inside <body>. global: external:true family:NotoSans size:
# Font settings for site title (.site-title). title: external:true family: size:
# Font settings for headlines (<h1> to <h6>). headings: external:true family: size:
# Font settings for posts (.post-body). posts: external:true family:NotoSerif
# Font settings for <code> and code blocks. codes: external:true family:FiraCode,NotoSerifSC
Background Image Adjustments
Same reason as before — I’m tired of the old look. Here’s what I’ve changed:
The original background image was way too bright, especially in dark mode. It felt out of place, and honestly, it was blinding during those late-night sessions. So, I went ahead and set different background images for light and dark modes.
No more semi-transparent background images. This should make the text way easier to read.
Oh, and I scrapped the gradient background for mobile devices.
Just add the following styles in D:\Project\Blog\cn_Siriusq\source\_data\styles.styl:
/* Dark Background */ @media (prefers-color-scheme: dark) { body { background-image: url('https://s2.loli.net/2024/09/11/YHxg9RsTUDKvBPr.webp'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; footer > div > div { color:#dddddd;//Bottom Text Colour } } } }
/* Do not show background image on mobile */ @media screen and (max-width: 767px) { body { background-image: none; } }
Pagination Adjustments
When animations are enabled, the NexT theme uses a waterfall-like effect to gradually reveal elements on the page, including blog post titles in the archives. This creates a bit of a problem: if there are too many titles on one page, the ones at the bottom won’t show up until the animation finishes. I originally had it set to display 50 titles per page, but waiting a few seconds for the animation to complete is just inconvenient. So, I’ve now changed it to display 20 titles per page.
Adjust the following settings in Hexo’s config file _config.yml:
Currently, the blog URLs are generated based on the filenames of the markdown files. There are a few filenames I’ve been wanting to change for a while, but renaming them directly would result in broken links. To solve this, I installed the hexo-generator-alias plugin.
Installation command:
1
npm install hexo-generator-alias --save
How to use it:
Rename the relevant markdown files.
Open the file and add alias: [relative path of the old markdown filename].html in the front-matter section.
Example: My old filename was Win10-Reinstall-Guide.md, I’d rename it to Windows-Reinstall-Guide.md, then open the file and modify it like this:
1 2 3 4 5 6 7 8
--- title: Windows Reinstall Guide date: 2020-07-13 12:28:34 lang: zh-CN tags: [Windows, Office, Reinstall] categories: Windows + alias: Win10-Reinstall-Guide.html ---
Remove Click Effects on Mobile
The current click effect is a bit laggy on mobile devices, so I’m removing it for now. Maybe in a few years, when mobile performance improves, I’ll bring it back. To do this, go to the CursorSpecialEffects class in the existing ./source/js/firework.js file, and add a conditional statement in the init method: if (window.innerWidth > 768){}. Then, move the original content inside this block.
init() { // Only works on the desktop, determines if the screen width is greater than 768px if (window.innerWidth > 768) { const style = this.renderCanvas.style style.position = 'fixed' style.top = style.left = 0 style.zIndex = '999999999999999999999999999999999999999999' style.pointerEvents = 'none'
It turns out the mouse theme file I was using had issues and wasn’t being recognized correctly in Firefox, only displaying black-and-white icons. So, I decided to switch up the mouse theme and patch the stylesheet to cover more elements.
This time, I chose the Frieren theme, which pairs nicely with my background image. You can find it here: Frieren Cursor (2 packs) by NOiiRE ❖. The original files are in ANI format for animated cursors, but unfortunately, most mainstream browsers don’t support that format, so I had to convert everything to PNG. I also tried APNG format, which the browsers could read, but they didn’t animate.
Then, it’s the same steps as before:
Create a new folder named cursor in ./node_modules/hexo-theme-next/source/css/.
Move the collected mouse style files into the newly created folder.
Open _config.next.yml.
Find the line for custom_file_path:.
Uncomment style: source/_data/styles.styl.
Open ./source/_data/styles.styl, paste in the following code, and modify it as needed (e.g. change the path to your mouse style files).
The default margin-top for lists and code blocks in the NeXT theme is 20px, which looks a bit off. So, I made some tweaks by adding the following styles to D:\Project\Blog\cn_Siriusq\source\_data\styles.styl: