Hexo で画像リンクを作りたい

静的サイトジェネレータ Hexo はじめました。

実は Markdown を書くのは初めてだったりするので、
試行錯誤の連続です。
まぁ、Wiki には慣れているのでそれほど違和感はない。

とりあえず、手元の Ubuntu サーバで Hexo server が動くところまで来ました。

しかし、ここで、ちょっとした問題が発生。
原因と回避策は判明したのですが、
調べた限りだと日本語の記事は見つからなかったので、
記事にしておきます。

今回の環境は以下の通り:

1
2
3
hexo: 3.2.2
hexo-cli: 1.0.2
node: 6.9.1

なお、長文になってしまったので先に結論を言っておくと、
こちらの英語記事がとりあえずの正解でした:
http://alexdrenea.com/2016/04/28/hexo-image-hacking/

やりたいこと

Hexo の投稿記事の中で画像リンクを張ろうとしました。
具体的に言うと、本の表紙画像をクリックすると Amazon に飛ぶようにしたかった。

HTML で書くとこんな感じ:

1
2
3
<a herf="https://www.amazon.co.jp/dp/4048669095/">
<img src="/2016/11/06/book-uminosoko/book01.jpg" />
</a>

まずは画像の貼り方

まず参考にしたのは Qiita のこの記事:

Hexoで始めるお手軽な静的ブログ -画像投稿とプラグインの追加-

おかげで Asset の使い方が理解できました。
asset_img タグも使えたし、img タグを直接書くのも OK.
post_path タグだけじゃなくて asset_path タグでも問題ありませんでした
(記事名を書かなくて済むので後者のほうが楽)。

これでとりあえず画像は貼れるようになりました。

Fancybox が邪魔

次に画像にリンクを張ろうと思ったのですが、
その前の時点ですでに自動でリンクが張られていました。
いわゆる Lightbox 的な機能で、
画像をクリックすると原寸画像がオーバーレイ表示される仕掛けです。

asset_img タグを使った場合だけじゃなくて、
img タグを直接書いても自動加工されてしまいます。

ブラウザの開発ツール (Google Chrome Developer Tools) で見ると、
class="fancybox" が付いた a 要素が自動生成されていました。
(あとキャプションも)

1
2
3
4
<a href="/2016/11/06/book-uminosoko/book01.jpg" title="有川浩「海の底」" class="fancybox" rel="article1">
<img src="/2016/11/06/book-uminosoko/book01.jpg" alt="有川浩「海の底」" title="有川浩「海の底」">
</a>
<span class="caption">有川浩「海の底」</span>

ためしに Markdown 上で画像を a タグで囲ってみましたが、
上記の内側の a 要素が優先されてしまってダメでした。

1
2
3
<a href="https://www.amazon.co.jp/dp/4048669095/" target="_blank">
{% asset_img book01.jpg "有川浩「海の底」" %}
</a>

1
2
3
4
5
6
<a href="https://www.amazon.co.jp/dp/4048669095/" target="_blank">
<a href="/2016/11/06/book-uminosoko/book01.jpg" title="有川浩「海の底」" class="fancybox" rel="article1">
<img src="/2016/11/06/book-uminosoko/book01.jpg" alt="有川浩「海の底」" title="有川浩「海の底」">
</a>
<span class="caption">有川浩「海の底」</span>
</a>

Fancybox を無効化できないか?

ちょっとググってみると、_config.yml または記事ソース先頭 (front-matter) で

1
fancybox: false

とすればよい、というアドバイスらしきものを発見(漢字読めないけど)。

たしかにソースコード (themes/landscape/layout/_partial/after-footer.ejs)
を見る限り、themes/landscape/_config.ymlfancybox: true しているのを
fancybox: false にすれば Fancybox 関連の JavaScript/CSS は読み込まれなくなる模様。

しかし、ためしてみると、Lightbox 的な挙動はなくなったものの、
自動リンクは有効なままで、Amazon へのリンクは無効なまま。

ちゃんとソースコードを追ってみる

そもそもリンクの自動生成をしているのは誰だ? というわけで grep した結果、
themes/landscape/source/js/script.js で書き換えていることが判明。

このスクリプトはそのままデプロイされるもので、ブラウザでアクセスした際に
初めて実行されます。てっきりリンクの自動生成は generate 時に行われていると
思い込んでいたので、びっくり。

当然ながら、_config.yml の記述なんて参照できないので、
fancybox: false 指定に関係なく無条件で HTML DOM を書き換えています。
ちょっとひどい。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Caption
$('.article-entry').each(function(i){
$(this).find('img').each(function(){
if ($(this).parent().hasClass('fancybox')) return;

var alt = this.alt;

if (alt) $(this).after('<span class="caption">' + alt + '</span>');

$(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
});

$(this).find('.fancybox').each(function(){
$(this).attr('rel', 'article' + i);
});
});

if ($.fancybox){
$('.fancybox').fancybox();
}

しかし、ここで一筋の光明が。

上記のコードをみればわかりますが、img 要素の親要素にクラス属性 fancybox
が指定されていると書き換えは行われません。

回避策

画像の親要素である a 要素にクラス属性 fancybox を指定すれば OK.

1
2
3
<a class="fancybox" href="https://www.amazon.co.jp/dp/4048669095/" target="_blank">
{% asset_img book01.jpg "有川浩「海の底」" %}
</a>

根本的な解決策

リンクの自動生成をやめる。

具体的には、上記の themes/landscape/source/js/script.js のコードを
丸ごと削除(あるいはコメントアウト)する。

まぁ、そもそも Fancybox を使わない Theme を使えばよいのですが、
ちょっとギャラリーを眺めてみた限りだと見つかりませんでした。

Hexo の導入

静的サイトジェネレータ Hexo を始めました。

https://hexo.io

https://github.com/hexojs/hexo/

Hexo は Node.js で動く SSG (Static Site Generator) です。

SSG (Static Site Generator) とは?

SSG に関しては以下のリンクを参照してください:

インストール

まず、Node.js を入れておいてください。 ※参考記事「Node.js めも

続いて、Hexo のコマンドをインストールします:

1
$ npm install hexo-cli -g

NVM で新しいバージョンの Node.js をインストールした場合には、
毎回これが必要です。

新しいブログの作成

1
2
3
$ hexo init new_my_blog
$ cd new_my_blog
$ hexo server -p 5210

これで Hexo 内蔵の仮 HTTP サーバがポート 5210 番で起動します。
ポート番号は適当に選んでください。
あらかじめファイアウォールでポートを開けておく必要があります。

あとはブラウザで http://www.example.com:5210 とかアクセスすれば、
“Hello World” ページが見られるはずです。

Hexo server は Ctrl-C で止められます。

ブログの初期設定

Hexo の設定ファイルは _config.yml という YAML ファイルです。

1
$ vi _config.yml

デプロイ前の確認

1
(nice -10 hexo clean --debug && nice -10 hexo server -p 5210 --debug) 2>&1 | tee z

Node.js めも

導入

最初に nvm を導入する:

1
2
3
4
5
6
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
$ cat >> ~/.bashrc

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
$

続いて、Node.js 本体をインストールする:

1
2
3
$ nvm ls-remote
$ nvm install stable
$ node -v

依存パッケージをインストール

カレントディレクトリにある package.json の設定にしたがって、ローカル(カレントディレクトリ直下の node_modules ディレクトリ)に依存パッケージをインストールできます。

普通に使うだけなら “dependencies” の依存パッケージのみインストールすればよい:

1
$ npm install

“devDependencies” の依存パッケージをインストールしたいときはオプションが必要:

1
$ npm install --only=dev