A Blog Solution With Coexisting Themes

1 Origin

Few themes can balance practicality and aesthetics. For example, the Aurora theme is cool and beautiful, but the content displayed on a single page is too little, making it hard to focus on the content; just want to tinker

Thus, the following needs arise:

• Generate a blog with multiple themes from a single configuration file, existing simultaneously
• Consistent routing between sites, allowing easy switching at any time Since the current blog is managed entirely based on Git, although different branches can be used to manage different themes, doing so is very inconvenient when updating articles, so this solution is not adopted.

2 Configuration

Since hexo generate can specify configuration files, this provides a possibility for this solution. This time, Hexo Next 8 and Aurora themes are used, and the configuration files are organized in the root directory as follows:

1
2
3
4
5

-/
--_config.yml  Global configuration for Aurora
--_configsimple.yml  Global configuration for Next
--_config.aurora.yml  Aurora theme configuration
--_config.next.yml  Next theme configuration

For general themes, using hexo generate --config x.yml is not a problem, but the plugin hexo-plugin-aurora required by the Aurora theme directly affects the hexo command, meaning the Aurora theme is mutually exclusive with other themes. If it is present, other themes cannot be used. Is there no way around this? Due to a lack of understanding of npm, the clumsy solution I thought of is to directly uninstall hexo-plugin-aurora and reinstall it when needed during the build, keeping package.json clean. To summarize, for the two themes, we need to:

• Maintain their unique dependencies
• Use custom generation commands

3 Routing Issues

Unifying the routes of multiple sites, for example, if I am currently on the www.zair.top/post/a page and want to switch to another theme, I only need to replace www with s, i.e., s.zair.top/post/a, to quickly switch themes.

The main issue here is the .html suffix in the address. Generally, ensuring the following fields in the global configuration files of multiple themes are unified is sufficient:

1
2
3
4
5
6

## permalink: :year/:month/:day/:title/ Configuration details at https://hexo.io/zh-cn/docs/permalinks.html
permalink: /post/:title.html
permalink_defaults:
pretty_urls:
  trailing_index: true ## Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true  ## Set to false to remove trailing '.html' from permalinks

But Aurora is not a general theme; it is a single-page application built with Vue. The suffix entered in the address bar (e.g., /post/a) is treated as a request parameter, while general themes consider it a static page path. If hosted on Cloudflare Pages, this issue can be ignored, but Vercel requires configuration. Specifically, a vercel.json needs to be created in the root directory with the following content:

1
2
3
4
5
6
7
8

{
    "redirects": [
        { "source": "/post/:path*.html", "destination": "/post/:path*" }
    ],
    "rewrites": [
        { "source": "/:path*", "destination": "/index.html" }
    ]
}

The first rule redirects all .html suffixes to be compatible with general static themes; The second rule reverse proxies all requests to the root page, which is required for Aurora on Vercel; The two rules are actually conflicting, but when conflicts occur, Vercel chooses to follow the one that appears first, and it works fine.

For many static page hosting sites, there is a Pretty URL feature that removes the .html suffix from URLs, but Vercel does not have it. If you want to use it, you need to configure another vercel.json:

1
2
3
4
5

{
    "rewrites": [
        { "source": "/:path*","destination": "/:path*.html"}
    ]
}

However, Vercel’s configuration file does not support renaming and can only have one, so the Next theme’s site can only be hosted on Netlify, which handles the .html suffix well. Finally, here is the deployment configuration on the two sites:

This is the configuration for deploying Aurora on Vercel, which is actually two commands:

1

npm install hexo-plugin-aurora && cp index_prod-00ee5e98.js node_modules/hexo-theme-aurora/source/static/js/

The second command is used to override my custom theme js;

The following image shows the configuration on Netlify: