複数テーマ共存のブログソリューション

1 起因

実用性と美観を兼ね備えたテーマは少ないです。例えば、オーロラテーマは見た目がクールで美しいですが、単一ページの表示内容が少なく、コンテンツに集中できません。ただいじりたいだけ

そのため、以下のニーズが生じました：

• 一つの設定ファイルで複数のテーマのブログを生成し、同時に存在させる
• サイト間のルーティングを統一し、いつでも切り替えやすくする 現在のブログはGit管理に基づいているため、異なるテーマを異なるブランチで管理することは可能ですが、記事を更新するたびに非常に不便なので、この方法は採用しません。

2 設定

hexo generateは設定ファイルを指定できるため、このソリューションを実現する可能性を提供します。今回はHexo Next 8とAuroraの二つのテーマを使用し、設定ファイルはルートディレクトリで以下のように整理されています：

1
2
3
4
5

-/
--_config.yml  Aurora用のグローバル設定
--_configsimple.yml  Next用のグローバル設定
--_config.aurora.yml  Auroraテーマ設定
--_config.next.yml  Nextテーマ設定

一般的なテーマについては、hexo generate --config x.ymlを使用すれば問題ありませんが、Auroraテーマに必要なプラグインhexo-plugin-auroraはhexoコマンドに直接影響を与えるため、Auroraテーマと他のテーマは互換性がありません。これがあると他のテーマを使用することはできません。解決策はないのでしょうか？ npmについて詳しくないため、私が考えたのはhexo-plugin-auroraを直接アンインストールし、ビルドが必要なときに再インストールするという方法です。これにより、package.jsonをクリーンに保つことができます。 整理すると、二つのテーマのために行うべきことは：

• 各テーマ固有の依存関係をしっかりと管理する
• カスタム生成コマンドを使用する

3 ルーティング問題

複数サイトのルーティングを統一する、例えば、現在www.zair.top/post/aページにいるとき、別のテーマに切り替えたい場合、wwwをsに置き換えるだけで済みます。つまり、s.zair.top/post/aにすることで、テーマを迅速に切り替えることができます。

ここでの問題は、アドレスの.htmlサフィックスにあります。一般的には、複数テーマのグローバル設定ファイルで以下のフィールドを統一することで解決できます：

1
2
3
4
5
6

## permalink: :year/:month/:day/:title/ 設定の詳細はhttps://hexo.io/zh-cn/docs/permalinks.htmlを参照
permalink: /post/:title.html
permalink_defaults:
pretty_urls:
  trailing_index: true ## 'index.html'をパーマリンクから削除するにはfalseに設定
  trailing_html: true  ## '.html'をパーマリンクから削除するにはfalseに設定

しかし、Auroraは一般的なテーマではありません。Vueで構築されたシングルページアプリケーションであり、アドレスバーに入力されたサフィックス（例：/post/a）はすべてリクエストパラメータとして処理されます。一方、一般的なテーマはそれを静的ページのパスと見なします。Cloudflare Pagesにホスティングする場合、この問題は無視できますが、Vercelでは自分で設定する必要があります。具体的には、ルートディレクトリにvercel.jsonを作成し、以下の内容を設定します：

1
2
3
4
5
6
7
8

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

最初のルールは、すべての.htmlサフィックスをリダイレクトするもので、一般的な静的テーマとの互換性を確保するためです。 二番目のルールは、すべてのリクエストをルートページにリバースプロキシするもので、AuroraをVercelで使用するために必要です。 この二つのルールは実際には矛盾していますが、矛盾がある場合、Vercelは前にあるルールを優先して適用しますので、問題なく使用できます。

多くの静的ページホスティングサイトでは、Pretty URL機能があり、URLの.htmlサフィックスを削除しますが、Vercelにはありません。もし使用したい場合は、別のvercel.jsonを設定する必要があります：

1
2
3
4
5

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

しかし、Vercelの設定ファイルはリネームをサポートしておらず、一つしか持てません。そのため、NextテーマのサイトはNetlifyにホスティングするしかありません。Netlifyは.htmlサフィックスの処理が非常に優れています。 最後に、二つのサイトでのデプロイ設定を共有します：

これはVercelでAuroraをデプロイする設定で、実際には二つのコマンドです：

1

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

二つ目のコマンドはカスタムテーマjsを上書きするためのものです。

下図はNetlifyでの設定です：