[Hexo Plugin] Hexoプラグインを作ってみる

Hexoプラグインを作ってみたいと思います。間違っているところがありましたら、ご指摘いただけると幸いです。

HexoNode.jsで作られており、プラグインはnpm moduleとして作成します。

作るプラグインについて

今回作成するのは、タグ% embed videoId%でYoutubeのビデオを表示する作成したいと思います。
※タグは{}(半角)で囲んでください。

目次

  1. 開発用フォルダを作成
  2. npm moduleの初期設定
  3. 処理を定義
  4. 動作確認

開発用フォルダを作成

Hexoフォルダ作成前の状態は以下のようになっていると思います。

1
2
3
4
5
6
7
8
9
10
11
$ tree -d -L 1
.
├── 2015
├── archives
├── assets
├── node_modules
├── public
├── scaffolds
├── source
├── tags
└── themes

開発用のフォルダを作成し、移動します。

1
mkdir hexo-hoge && cd hexo-hoge

npm moduleの初期設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (hexo-embed-youtube)
version: (0.0.0)
description: generate youtube embed tag
entry point: (index.js)
test command:
git repository:
keywords: youtube
author:
license: (ISC) MIT
About to write to /home/kamiya/hexo-embed-youtube/package.json:
{
"name": "hexo-embed-youtube",
"version": "0.0.0",
"description": "generate youtube embed tag",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"youtube"
],
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes

処理を定義

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

1
touch index.js

処理を定義していきます。
“% embed %”と入力されたタグを処理するよう、登録を行います。
これで、Hexo generateコマンド実行時に呼び出され、処理が行われるようになります。

index.js
1
2
3
4
hexo.extend.tag.register('embed', function(args){
var id = args[0];
return '<div class="video-container"><iframe width="560" height="315" src="http://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe></div>';
});

動作確認

以下のようにしてnpm moduleをインストールします。
警告が表示されますが、今回は気にする必要はありません。

1
$ npm install ./hexo-embed-youtube --save

続いて、記事にタグを記載します。

1
hexo new test-embed

今回は、この動画を使用します。
URLのwatch?v=x0rk5zh7RaEのID部分を引数として以下のように記載します。

% embed x0rk5zh7RaE %

1
hexo generate

generateした後、ブラウザで確認してみてください。