テーマを編集する際、不意に現れる 「空白のテキストノード」 の対処法

[WEBUILD]

テーマを編集する際にときどき上記画像のような空白のテキストノードが現れて

な、なんだコイツ！っとなったことはありませんか？
私は先程まで苦しめられておりましたが、解決法がわかりましたので共有させていただきます♫

どうやら liquidの {{ }}  や {% %} のタグは 時々、タグの左、あるいは右に空白を

自動的に生み出してしまう  仕様らしいのです。。。

しかし回避方法も同時に案内されておりました。

公式のリファレンス情報はこちら→ホワイトスペースの対策法 

結果から申しますと タグに - (ハイフン) を追加するだけで空白を含まれない仕様にできます。

下記のような感じに書き換えます。

{{ product.title }} → {{- product.title -}}

{% assign ling in link.links %} → {%- assign ling in link.links -%}

すべてのタグでテキストノードが発生しているわけではなさそうですが、とりあえずつけとくほうが無難かもしれませんね。

テーマ編集の助けになれば幸いです。

[junichiokamura · Accepted solution]

ご共有ありがとうございます！