Solution De Blog À Coexistence Multi-Thèmes

1 Origine

Il y a peu de thèmes qui peuvent être à la fois pratiques et esthétiques. Par exemple, le thème Aurora est certes impressionnant et beau, mais le contenu affiché sur une seule page est trop limité pour se concentrer sur le contenu ; c’est juste pour s’amuser

Cela a donc conduit aux besoins suivants :

• Générer un blog avec plusieurs thèmes à partir d’un seul fichier de configuration, coexistant
• Cohérence des routes entre les sites, permettant un changement facile à tout moment Étant donné que le blog actuel est entièrement géré par Git, bien qu’il soit possible d’utiliser différentes branches pour gérer différents thèmes, cela devient très peu pratique à chaque mise à jour d’article, donc cette solution n’est pas adoptée.

2 Configuration

Étant donné que hexo generate peut spécifier un fichier de configuration, cela rend cette solution possible. Cette fois, nous utilisons les deux thèmes Hexo Next 8 et Aurora, et les fichiers de configuration sont organisés dans le répertoire racine comme suit :

1
2
3
4
5

-/
--_config.yml  Configuration globale pour Aurora
--_configsimple.yml  Configuration globale pour Next
--_config.aurora.yml  Configuration du thème Aurora
--_config.next.yml  Configuration du thème Next

Pour un thème ordinaire, utiliser hexo generate --config x.yml ne pose pas de problème, mais le plugin nécessaire pour le thème Aurora, hexo-plugin-aurora, agit directement sur la commande hexo, ce qui signifie que le thème Aurora est incompatible avec d’autres thèmes. Avec lui, il est impossible d’utiliser d’autres thèmes, alors n’y a-t-il pas de solution ? Ne connaissant pas npm, la solution que j’ai trouvée est de désinstaller directement hexo-plugin-aurora et de le réinstaller lors de la construction, ce qui permet de garder le package.json propre. Pour les deux thèmes, nous devons faire :

• Maintenir leurs dépendances uniques
• Utiliser des commandes de génération personnalisées

3 Problème de route

Unifier les routes de plusieurs sites, par exemple, si je suis actuellement sur la page www.zair.top/post/a, pour passer à un autre thème, il suffit de remplacer www par s, soit s.zair.top/post/a, afin de réaliser un changement rapide de thème.

Le problème ici réside principalement dans le suffixe .html de l’adresse. En général, il suffit de s’assurer que les champs suivants dans les fichiers de configuration globaux de plusieurs thèmes sont unifiés :

1
2
3
4
5
6

## permalink: :year/:month/:day/:title/ Voir la configuration sur https://hexo.io/zh-cn/docs/permalinks.html
permalink: /post/:title.html
permalink_defaults:
pretty_urls:
  trailing_index: true ## Définir sur false pour supprimer 'index.html' des permaliens
  trailing_html: true  ## Définir sur false pour supprimer '.html' des permaliens

Mais Aurora n’est pas un thème ordinaire, c’est une application monopage construite avec Vue, et le suffixe saisi dans la barre d’adresse (par exemple /post/a) est traité comme un paramètre de requête, tandis qu’un thème ordinaire le considère comme le chemin d’une page statique. Si vous hébergez sur Cloudflare Pages, ce problème peut être ignoré, mais Vercel nécessite une configuration spécifique. Concrètement, il faut créer un fichier vercel.json dans le répertoire racine, avec le contenu suivant :

1
2
3
4
5
6
7
8

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

La première règle redirige tous les suffixes .html, pour être compatible avec les thèmes statiques ordinaires ; La deuxième règle redirige toutes les requêtes vers la page racine, ce qui est nécessaire pour Aurora sur Vercel ; Les deux règles sont en fait en conflit, mais en cas de conflit, Vercel choisit de respecter la première, ce qui fonctionne bien.

Pour de nombreux sites d’hébergement de pages statiques, il existe une fonctionnalité Pretty URL qui supprime le suffixe .html des URL, mais Vercel ne l’a pas. Si vous voulez l’utiliser, vous devez configurer un autre vercel.json :

1
2
3
4
5

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

Cependant, le fichier de configuration de Vercel ne peut pas être renommé, il ne peut y en avoir qu’un seul, donc le site du thème Next ne peut être hébergé que sur Netlify, qui gère très bien le suffixe .html. Enfin, partageons la configuration de déploiement sur les deux sites :

Voici la configuration pour déployer Aurora sur Vercel, qui se compose en fait de deux commandes

1

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

La deuxième commande est utilisée pour remplacer mon fichier js de thème personnalisé ;

L’image ci-dessous montre la configuration sur Netlify :