Middleman 4にする
Middlemanの新しいのがリリースされたので更新してみた。
大きな変化はSprocketsが分離されたこと。gemを追加すれば引き続き使えるようだが、ためしに外部パイプラインでjs/cssを生成することにした。
外部パイプラインそのものについてはサンプルを参考にすればすんなりできた。なんせ適当なタイミングでコマンドが実行されるだけなので。ただ、外部パイプラインに組み入れるwebpackそのものの使い方と、Middlemanとのすり合わせとには時間をとられた。これまでなじみがなかったせい。
あとこのことに関連して、シンタックスハイライトのためのCSS出力にerbを使えなくなったんだが、これはどうするとよいのだろう。そう変更するものでもないのでrougify style github > syntax.cssとして置いておいた。webpackで一つにまとめたCSSファイルだけをbuildに出力したいのでignoreを設定したせいではあるのだけど。う〜ん。
# js/cssを無視する
ignore /\/(?!all\.(?:js|css)).*\.(?:js|css|s[ac]ss)\z/
# ドットファイルを無視する
ignore /(?:\A|\/)\./
# 外部パイプラインの設定
activate :external_pipeline,
name: :webpack,
command: build? ? 'node_modules/.bin/webpack --bail' : 'node_modules/.bin/webpack --watch -d',
source: '.tmp/dist',
latency: 1
それ以外ではblog.summary_separatorに指定すべき正規表現の変更?に戸惑った。以前は記事中に<!-- more -->と書いておいて、blug.summary_separator = /<!-- more -->/と設定しておけば、そこで記事を区切ってくれた。
Middleman 4では、まずHTMLコメント形式が使えない。これは、以下のコードが動くためで、inner_textが返すテキストにはHTMLコメントが含まれない。
doc = Nokogiri::HTML::DocumentFragment.parse text
length = doc.inner_text =~ Regexp.new(separator)
またHTML変換後のことも考えた正規表現にしなければならいように思える。具体的には、記事に--more--と書いておくとすると、blog.summary_separatorには%r{(?:^|<p>)--more--(?:$|</p>)}を設定する必要がある。これは、区切り検出がHTML変換前に行われるため。%r{<p>--more--</p>}では区切りにマッチせず、/--more--/ではHTML変換により生成される<p></p>が残ってしまう。
activate :blog do |blog|
blog.summary_separator = %r{(?:^|<p>)--more--(?:$|</p>)}
blog.summary_length = 200
end
もう一つ。Middlemanのヘルパーなどで生成するリンクを相対リンクにするオプションがあるのだが、そのためのパスの計算がうまく動かないケースがある……と思う。たとえば2016-07-05-foo-bar.html.markdownで使う画像を2016-07-05-foo-bar/baz.jpgとして置いたとき、image_tag '2016-07-05-foo-bar/baz.jpg'による出力が<img src="bar.jpg">となってしまうことがあった。いまひとつ切り分けできていないのだが、ひとまずは相対リンクにするのをあきらめることで対応した。
# なんだかうまくうごかない?
#activate :relative_assets
#set :relative_links, true