当サイトのサイトテンプレートを改良。タグページ(tags.html)においてTwitter Bootstrapを使用したタブの名前(Id)に日本語が入るとタブが開かない問題を修正した。
変更前
<div class="col-sm-4 col-xs-5 tabs-vertical-scroll">
<ul class="nav nav-tabs-vertical">
{% /*for item in (0..site.tags.size)*/ %}{% /*unless forloop.last*/ %}
{% /*capture this_word*/ %}{{ tag_words[item] | strip_newlines }}{% /*endcapture*/ %}
<li>
<a href="#{{ this_word | cgi_escape }}" data-toggle="tab">
{{ this_word }}<span class="badge pull-right">{{ site.tags[this_word].size }}</span>
</a>
</li>
{% /*endunless*/ %}{% /*endfor*/ %}
</ul>
</div>
変更後
<div class="col-sm-4 col-xs-5 tabs-vertical-scroll">
<ul class="nav nav-tabs-vertical">
{% /*for item in (0..site.tags.size)*/ %}{% /*unless forloop.last*/ %}
{% /*capture this_word*/ %}{{ tag_words[item | strip_newlines }}{% /*endcapture*/ %}
<li>
<a href="#{{ this_word | cgi_escape | replace: '%', '' }}" data-toggle="tab">
{{ this_word }}<span class="badge pull-right">{{ site.tags[this_word].size }}</span>
</a>
</li>
{% /*endunless*/ %}{% /*endfor*/ %}
</ul>
</div>
タブの名前にタグ名を使用しているが、この名前はLiquidのcgi_escapeを使ってURLエンコードしている。その時の%がjqueryセレクターの禁則文字に引っかかって、「Syntax error, unrecognized expression」というエラーになってしまうようだ。
URLエンコードしなければそれで通ってしまうのだが、一応URL名の規則として使えない文字であるし、ブックマークや他のサイトからそこにリンクを貼られたときに問題が生じる可能性がある。
Wikipedia方式のように「%」を「.」に置換しようと思っていたが、これもjqueryの予約文字に引っかかるので、ここでは%を削除して16進数の羅列にしてしまうことにした。