14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Pugで属性に変数を使うやり方が変わってた

Last updated at Posted at 2016-12-05

WordPressにはトップページにはhome、他ページにはIDやらスラッグ(要カスタマイズ)とかそういうのが設定されるbody_classという関数があります。

自分の作業フローとして、最初にHTML→WP化するというようなフローが多いのですが、そういうときにJadeだとJSONを読み込ませて、

//pathは変数
body(class='#{path}')

としてやることで、ページごとにbodyにclassを設定することができ、ページごとに変わるような部分を無理やり対処することができます。(なぜかフッターとコンテンツのマージンが特定ページだけ違う、特定ページだけコンテンツ部分のフォントカラーが違う、特定ページのコンテンツ部分のフォントが違うなどなど…)

他にもループする部分などに対して属性値に変数をセットすることが多かったのですが、Pugでは上記のコードは使えなくなってしまっていました。
ここが解決できないと思っていたのでPugへの移行はまだまだ先だな〜とか思っていたのですが、Github(たしかpugのIssue)を見てたら解決方法が載っていたためPugに移行することができました。

解決策

//pathは変数
body(class=path)

上記のコードで対応することができました。(もしかしたらJadeで昔からできてたのかもしれませんが、)これによりJadeで変数を用いてループする部分などをPugに置き換えることができてよかったという感じです😂

追記

butchi_yさんにコメントしてもらったのですが、PugはES2015記法に対応したみたいでバッククオートも使用できるようです。

//pathは変数
body(class=`${path}`)

また、参考にしたIssueのページも見つかりましたので掲載しておきます。
参考:escaping variables, behavior has changed for attributes

14
13
2

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
14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?