Hexo Theme のインストールと有用なプラグインの導入、そして投稿リンクについてご案内いたします
hexo のインストールが完了してブログを開始した後、追加の操作を使用してブログをより美しく、読みやすくすることができます。以下のような操作がいくつかあります。 テーマを変更してサイトをより見やすくする 美しいです。サイトの使用率を上げるためにプラグインを追加してください
デフォルトのテーマを変更すること
新しいテーマを選ぶ
以下の手順でお好みのテーマを選び、そのGitHubリポジトリのアドレスをコピーできます。
-
ここに好みのテーマを選んでください。
-
テーマのタイトルをクリックしてください。(画像をクリックするとデモサイトに移動してしまいますので、タイトルをクリックしてください。)
-
タイトルをクリックすると、GitHubのリポジトリに移動します。
-
ブラウザのアドレスバーに表示されているリポジトリのURLをコピーしてください。
例えば、僕は使用しているテーマが「Next
」であり、そのプロジェクトのアドレスが「git@github.com:next-theme/hexo-theme-next.git
」であることがわかりました。
テーマのインストール
-
コマンドプロンプトやターミナルを開き、Hexoプロジェクトのディレクトリに移動します。
-
次のコマンドを実行して、テーマのプロジェクトをローカルにクローンします:
git clone git@github.com:next-theme/hexo-theme-next.git
3.テーマのファイルを含むnext
という名前のフォルダを作成します。次のコマンドを実行します:
mkdir themes/next
これにより、themes
フォルダ内にnext
という名前の新しいフォルダが作成されます。
4.次に、テーマ ファイルをこのフォルダーにコピーします。以下のコマンドを使って、ファイルをコピーすることもできます:
cp -r hexo-theme-next/* /themes/next
これで、テーマのファイルがHexoプロジェクトのthemes/next
フォルダにコピーされました。テーマのファイルが正しく配置されていることを確認してください。その後、Hexoの設定ファイルである_config.yml
を編集し、
theme: next
と設定することで、新しいテーマを使用できます。
検索プラグイン
インストールする方法
Hexoブログにローカル検索を作成する手順をご案内します:
-
コマンドプロンプトやターミナルを開き、Hexoプロジェクトのディレクトリに移動します。
-
次のコマンドを実行して、Hexoの検索プラグインをインストールします:
npm install hexo-generator-searchdb --save
設定変更
このプラグインは、ルートの _config.yml
ファイルで簡単に設定できます。すべての引数はオプションです。次のような形式を追加します:
search:
path: search.xml
field: post
content: true
format: html
永久リンク
Hexoのデフォルトの永久リンクは、_config.yml
ファイルで設定されており、生成規則は「permalink: :year/:month/:day/:title/
」です。年、月、日、タイトルの順に生成されます。
このデフォルトの設定には、非常に受け入れがたい欠点があります。ファイル名が外国語の場合、URLリンクにも外国語が表示されてしまいます。コピーした後のリンクはエンコードされ、読みにくく、簡潔ではありません。
最近、各投稿の永久リンクを簡素化したいと思っています。以下のような形式から:
/2023/06/22/230622
以下のような形式に変更したいです:
/migrateopsmanager
短いURLはより簡潔で読みやすくなります。日付の文字列はユーザーにとって意味がないためです。便利で使いやすい解決策として、hexo-abbrlink
プラグインを使用することができます。
インストールする方法
Hexoへのプラグインの追加方法は以下の通りです:
-
コマンドプロンプトやターミナルを開き、Hexoプロジェクトのディレクトリに移動します。
-
次のコマンドを実行して、Hexoプロジェクトにプラグインを追加します:
npm install hexo-abbrlink --save
This command will install the "hexo-abbrlink" plugin using the npm package manager and add it to your dependencies using the --save option.
設定変更
プラグインのインストールが完了したら、Hexoの設定ファイルである_config.yml
を開きます。_config.yml
ファイル内で、permalink
のセクションを探し、以下のような形式に変更します
permalink: posts/:abbrlink/
# or
permalink: posts/:abbrlink.html
プラグインの設定が完了した後、古い記事のリンクが "undefined" となってしまう問題が発生しました。しかし、この問題についてよく考えてみると、解決策が見えてきます。まず、古い記事のキャッシュをクリアするために
hexo clean
コマンドを実行し、その後hexo g
コマンドを使用して再度レンダリングする必要があります。これにより問題が解消されるはずです。