KOTET'S
PERSONAL
BLOG

#qiita JekyllでテキストをHTML用にエスケープする

#qiita #tech #jekyll

これは1年以上前の記事です

ここに書かれている情報、見解は現在のものとは異なっている場合があります。

この記事はQiitaに投稿されたものの転載です。


Twitter cardsを設定するためにこちらの記事を参考にテンプレートを書いた。

Jekyll で作成したサイトを Twitter Card に対応させる

しかしこのまま使うとHTMLでエスケープすべき文字もそのまま埋め込まれてしまうため、うまく動かない時がある。

<meta name="twitter:title" content="{{ page.title }}" />

具体例

たとえばこちらの記事のように、タイトルにセミコロンが入っていたりするとおかしくなる。

Jekyllのtheme”minima”のハンバーガーメニューがiOSで動作しないバグ

Screenshot from 2016-12-31 14-52-55.png

Screenshot from 2016-12-31 14-51-38.png

| escape

escapeフィルタをつければ大丈夫。

<meta name="twitter:title" content="{{ page.title | escape}}" />

Screenshot from 2016-12-31 15-31-44.png

Screenshot from 2016-12-31 15-37-09.png

でもちょっとタイトルが長すぎるかもしれない。