LoginSignup
0
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-12-31

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

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1