当サイトのサイトテンプレートを改良。タグページ(tags.html)においてTwitter Bootstrapを使用したタブの名前(Id)に日本語が入るとタブが開かない問題を修正した。

変更前

``` html{% raw %}

{% endraw %}


### 変更後

``` html{% raw %}
<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>{% endraw %}

タブの名前にタグ名を使用しているが、この名前はLiquidのcgi_escapeを使ってURLエンコードしている。その時の%がjqueryセレクターの禁則文字に引っかかって、「Syntax error, unrecognized expression」というエラーになってしまうようだ。

URLエンコードしなければそれで通ってしまうのだが、一応URL名の規則として使えない文字であるし、ブックマークや他のサイトからそこにリンクを貼られたときに問題が生じる可能性がある。

Wikipedia方式のように「%」を「.」に置換しようと思っていたが、これもjqueryの予約文字に引っかかるので、ここでは%を削除して16進数の羅列にしてしまうことにした。


※コメント欄が表示されない場合はdisqusについてJavascriptが有効であることを確認して下さい。コメントはスパム防止フィルターによる承認制のため、投稿してもすぐに反映されない場合があります。

管理人 : Akamaki (akm)

は、PCとVTuberに夢中になっている電気技術者です。

私はレトロコンピューティングの愛好家ですが、そのようなリグはもう収集していません。

私の活動はトップページで見ることができます。読んでくれてありがとう!