Major Update to the Blog!#
If you've clicked into this article, then you must have already seen the changes to the blog (QWQ)
Motivation#
The motivation for updating the blog is quite simple. The hexo miracle theme has stopped updating, and coupled with the desire to practice my front-end knowledge, I decided to revamp the blog.
I wavered between vue, valaxy, and astro for a long time. I gave up on vue because its SPA optimization for SEO isn't great, and valaxy's documentation isn't very comprehensive and hard to understand. In the end, I chose astro.
Process#
Clearly, given my current front-end knowledge, starting from scratch was not feasible, so I chose the hexo journal theme as a template and migrated it to astro.
During the migration process, I referred to the astro-paper and Frosti themes to write the code, but in the end, I felt like I produced a pile of garbage
Overview#
All the source code is placed in the /src directory.
The /public directory contains only one js file, responsible for the dynamic behavior of the website, including:
- Back to top in wide-screen mode
- Implementation of the drawer function in narrow-screen mode
- Display of the top title in narrow-screen mode
/page#
The page directory is the routing directory for astro.
It contains the post directory, responsible for article routing; archives for archiving; category for the classification interface; page for displaying articles on the homepage; index implements the same functionality as /page/1.
/style#
Contains css files.
layout#
Responsible for the specific implementation of each interface.
Among them, BaseLayout is the overall layout implementation.
component#
Reusable components, future comments will also be written here.
utils#
Some utility components.
Results#
The final result is the blog you see in front of you, but as of now, only part of it is completed, and there are still many details to update.
If you're interested, you can take a look at the source code at github.com/histcat/blog.