1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Hexo Theme のインストールと有用なプラグインの導入、そして投稿リンクについてご案内いたします

Last updated at Posted at 2023-06-27

Hexo Theme のインストールと有用なプラグインの導入、そして投稿リンクについてご案内いたします

hexo のインストールが完了してブログを開始した後、追加の操作を使用してブログをより美しく、読みやすくすることができます。以下のような操作がいくつかあります。 テーマを変更してサイトをより見やすくする 美しいです。サイトの使用率を上げるためにプラグインを追加してください

デフォルトのテーマを変更すること

新しいテーマを選ぶ

以下の手順でお好みのテーマを選び、そのGitHubリポジトリのアドレスをコピーできます。

  1. ここに好みのテーマを選んでください。

  2. テーマのタイトルをクリックしてください。(画像をクリックするとデモサイトに移動してしまいますので、タイトルをクリックしてください。)

  3. タイトルをクリックすると、GitHubのリポジトリに移動します。

  4. ブラウザのアドレスバーに表示されているリポジトリのURLをコピーしてください。

例えば、僕は使用しているテーマが「Next」であり、そのプロジェクトのアドレスが「git@github.com:next-theme/hexo-theme-next.git」であることがわかりました。

テーマのインストール

  1. コマンドプロンプトやターミナルを開き、Hexoプロジェクトのディレクトリに移動します。

  2. 次のコマンドを実行して、テーマのプロジェクトをローカルにクローンします:

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ブログにローカル検索を作成する手順をご案内します:

  1. コマンドプロンプトやターミナルを開き、Hexoプロジェクトのディレクトリに移動します。

  2. 次のコマンドを実行して、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へのプラグインの追加方法は以下の通りです:

  1. コマンドプロンプトやターミナルを開き、Hexoプロジェクトのディレクトリに移動します。

  2. 次のコマンドを実行して、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 コマンドを使用して再度レンダリングする必要があります。これにより問題が解消されるはずです。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?