Hexoの機能拡張とプラグイン

Hexoの機能拡張とプラグイン

2020-06-21


Hexo Plugin 作成

https://morizyun.github.io/blog/hexo-plugin-amazon-jp-link/index.html

プロジェクトのフォルダを作成します。

1
mkdir hexo-<プラグイン名> && cd hexo-<プラグイン名>

npm moduleの設定を行います。

1
npm init

entry pointになるindex.jsを作成します。

1
2
3
4
5
hexo.extend.tag.register('custom_tag', function(args){
var message = args[0];
return `
custom_tag: ${message}`;
});

※注 作成したpluginをローカルでテストするために「**npm link の手順 / morizyun GitBook**」を実行してください。

package.jsonに以下を追加してください。

(0.0.1は適切なバージョンに書き換えてください)

1
2
3
"dependencies": {
"hexo-<プラグイン名>": "^0.0.1",
}

これでローカルのnpmライブラリが紐付けられた状態になります。

テスト

hexo server上でさきほどのタグを使えることを試してみます。
hexoのテンプレートの中に{% custom_tag hoge %}と書いてください。(%は半角に変更してください)
``

1
hoge

が表示されれば成功です。

npmへのpush

npmでpublishするのは次のコマンドです。

1
npm publish

Hexoのプラグインを作るのはちょうどよいJavaScriptの勉強の題材になりそうです。

Happy Hacking!

Hexoのプラグイン開発

Hexoのプラグインの作成手順

npm link

npm linkにsu権限が必要な理由

Hexoのプラグイン作成手順

https://morizyun.github.io/blog/hexo-plugin-amazon-jp-link/index.html

フォルダ構造を決める

1
2
3
~/git							<- プロジェクトルートdir
​ L blog <- hexoブログのルートdir
​ L hexo-multicol <- hexoプラグインのルートdir

作業ディレクトリ作成

プロジェクトのルートdirを決め、1) hexo init blog、2) mkdir hexo-multicol を実行する

1
$ mkdir hexo-multicol && cd hexo-multicol

プラグイン作成

entry pointになるindex.jsを作成します。

1
2
3
4
5
hexo.extend.tag.register('custom_tag', function(args){
var message = args[0];
return `
custom_tag: ${message}`;
});

プラグインを使えるようにする

依存関係の設定

npm initで依存関係dependencyを定義する

1
$ npm init

シンボリックリンク設定

プラグインdir側からグローバルにシンボリックリンクを貼る。npm linkを実行する、シンボリックリンクの場所が/usr/localになるためroot権限が必要。
suコマンドで入って、npm linkする

1
# npm link

dependencyに新しいプラグインを追加

開発中のプラグインを追加する

1
2
3
"dependencies": {
"hexo-<プラグイン名>": "^0.0.1", <-間に追加する ","を忘れないように
}

プラグインを認識させる

npm link hexo-multicolで認識させる

1
$ npm link hexo-multicol

リンクが生成される。/usr/local/lib/node_modules/hexo-multicol -> /home/hamkaz/git/hexo-multicol

パッケージ追加

package.jsonに追加。ローカルのnpmライブラリが紐付けられた状態になる。

1
2
3
"dependencies": {
"hexo-<プラグイン名>": "^0.0.1",
}

テスト

hexoのテンプレートで{% custom_tag hoge %}と書く。

一般公開

npmへのpush

Hexoのプラグインを作成、npm publishコマンドで公開。

1
npm publish

まとめ

便利だと思ってHexoのプラグインを当ててみたところジェネレートの動作不具合を起こしたり、プラグインそのものの脆弱性が解決できない場合があることも分かりました。