
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 | hexo.extend.tag.register('custom_tag', function(args){ |
※注 作成したpluginをローカルでテストするために「**npm link の手順 / morizyun GitBook**」を実行してください。
package.json
に以下を追加してください。
(0.0.1
は適切なバージョンに書き換えてください)
1 | "dependencies": { |
これでローカルのnpmライブラリが紐付けられた状態になります。
テスト
hexo server
上でさきほどのタグを使えることを試してみます。
hexoのテンプレートの中に{% custom_tag hoge %}
と書いてください。(%は半角に変更してください)
``
1 | hoge |
が表示されれば成功です。
npmへのpush
npmでpublishするのは次のコマンドです。
1 | npm publish |
Hexoのプラグインを作るのはちょうどよいJavaScriptの勉強の題材になりそうです。
Happy Hacking!
Hexoのプラグイン開発
Hexoのプラグイン作成手順
https://morizyun.github.io/blog/hexo-plugin-amazon-jp-link/index.html
フォルダ構造を決める
1 | ~/git <- プロジェクトルートdir |
作業ディレクトリ作成
プロジェクトのルートdirを決め、1) hexo init blog、2) mkdir hexo-multicol を実行する
1 | $ mkdir hexo-multicol && cd hexo-multicol |
プラグイン作成
entry pointになるindex.js
を作成します。
1 | hexo.extend.tag.register('custom_tag', function(args){ |
プラグインを使えるようにする
依存関係の設定
npm initで依存関係dependencyを定義する
1 | $ npm init |
シンボリックリンク設定
プラグインdir側からグローバルにシンボリックリンクを貼る。npm linkを実行する、シンボリックリンクの場所が/usr/localになるためroot権限が必要。
suコマンドで入って、npm linkする
1 | # npm link |
dependencyに新しいプラグインを追加
開発中のプラグインを追加する
1 | "dependencies": { |
プラグインを認識させる
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 | "dependencies": { |
テスト
hexoのテンプレートで{% custom_tag hoge %}
と書く。
一般公開
npmへのpush
Hexoのプラグインを作成、npm publishコマンドで公開。
1 | npm publish |
まとめ
便利だと思ってHexoのプラグインを当ててみたところジェネレートの動作不具合を起こしたり、プラグインそのものの脆弱性が解決できない場合があることも分かりました。