PelicanのTOCプラグインで不具合？
以前書きましたが、このブログは Pelican という静的サイトジェネレータを使って作られています。
その Pelican にはプラグインが用意されていて、機能を拡張することができます。
私もいくつかのプラグインを使っていますが、そのうちのひとつが pelican-toc プラグインです。 pelican-toc プラグインは、記事内の見出し（デフォルトの設定では h1～h6 要素）を元に TOC（Table Of Contents）、つまり、目次を自動で生成し、各見出しへのアンカーリンクも生成してくれる便利なプラグインです。
このブログでは、さらに jQueryを使って、アンカーリンクをクリックした時に見出しまでスムーズスクロールするようにしています。
しかし、導入した当初、実際に試してみると、クリックしてもうまくスクロールできない場合があることに気づきました。 Chrome のデベロッパーツールで確認したところ、どうやらリンクのテキストに半角スペースが混じっている場合にうまく行かないらしいことがわかりました。
メタ文字はエスケープしないといけない
さらに調べてみたところ、実際には半角スペース以外にも jQuery のセレクタで指定する場合にエスケープしないといけない文字があることがわかりました。
英語で書かれたブログなら見出しが全部英数字ですし、そもそもこういった問題は起こらないのかもしれません。
作者は海外の方なので、こういったことが起こりうることに気づかなかったのかもしれません。 バグというよりも、海外製のソフトを使う場合によくあるやつと言ってもいいかもしれません。
では、具体的にどんな文字をエスケープしないといけないのでしょうか？
エスケープすべきメタ文字
「jQuery セレクターのエスケープ - ハマログ」でも触れられていますが、公式サイトに以下の説明があります。
To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar").
エスケープ用の関数
なので、エスケープ用の関数をつくっておくと非常に便利です。
こちらに関数化されたものが掲載されているので、それを使わせていただくのが簡単です。
