admin commude
web admin
2020.07.14 /
[テスト投稿] Pug 文法
Pug（パグ）は、HTMLを効率的に書くためのテンプレートエンジンです。
↓ このように出力されます
↓ このように出力されます
↓ このように出力されます
メリット
新規構築に向いてます。 閉じタグ不要なので閉じミスなくなります。 includeが使える if・forなどなど書けます！ phpみたいに使えます。デメリット
運用は不向きだと思う。 include元を編集した時全ファイル保存しなおす必要がある。(動的にコンパイルされる方法がわからないだけかもしれない) 書き方が独特なルールあります。 覚えたら、htmlが凄くめんどくさくなります！繰り返し処理
each
|
1 2 3 4 5 |
ul.retailAreaPageSec02__cont__storeList__list each item in hokkaido_tohoku li.retailAreaPageSec02__cont__storeList__list__item div.retailAreaPageSec02__cont__storeList__list__item__int a(href=`/dist/purchase/retail/${item.shopArea}/${item.image}.html`) |
|
1 2 3 4 5 6 7 |
<ul class="retailAreaPageSec02__cont__storeList__list"> <li class="retailAreaPageSec02__cont__storeList__list__item"> <div class="retailAreaPageSec02__cont__storeList__list__item__int"> <a href="/dist/purchase/retail/XXXXXX/XXXXXX.html"></a> </div> </li> </ul> |
繰り返し処理
for
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
- var sample = [ { pageName: 'AAAA', pageDir: 'sampleA' }, { pageName: 'BBBB', pageDir: 'sapmleB' } ] ul.sample - for (var x = 0; x < sample.length; x++) li: a(href='/'+sample[x]['pageDir']+'/') #{sample[x]['pageName']} |
|
1 2 3 4 |
<ul class="sample"> <li><a href="/sampleA/">AAAA</a></li> <li><a href="/sapmleB/">BBBB</a></li> </ul> |
条件分岐
if
|
1 2 3 4 5 6 7 8 9 |
ul.retailAreaPageSec02__wrap__list //- ここループ - for (var x = 0; x < shopList.length; x++) if shopList[x]['area']==pageParent li.retailAreaPageSec02__wrap__list__item a.retailAreaPageSec02__wrap__list__item__link.retailAreaPageSec02__wrap__list__item__link__black(href='/'+shopList[x]['area']+'/') #{shopList[x]['name']} else li.retailAreaPageSec02__wrap__list__item a.retailAreaPageSec02__wrap__list__item__link(href='/'+shopList[x]['area']+'/') #{shopList[x]['name']} |
|
1 2 3 4 5 6 |
<ul class="retailAreaPageSec02__wrap__list"> <!-- cureent処理用のclassが付きます --> <li class="retailAreaPageSec02__wrap__list__item retailAreaPageSec02__wrap__list__item__link__black"><a class="retailAreaPageSec02__wrap__list__item__link" href="/XXXXXXX/">XXXXXXX</a></li> <li class="retailAreaPageSec02__wrap__list__item"><a class="retailAreaPageSec02__wrap__list__item__link" href="/XXXXXXX/">XXXXXXX</a></li> <li class="retailAreaPageSec02__wrap__list__item"><a class="retailAreaPageSec02__wrap__list__item__link" href="/XXXXXXX/">XXXXXXX</a></li> <li class="retailAreaPageSec02__wrap__list__item"><a class="retailAreaPageSec02__wrap__list__item__link" href="/XXXXXXX/">XXXXXXX</a></li> |
オススメサイト
html→Pug変換 https://www.html2jade.org 基本的な記述方法はここを見るといいです。 https://qiita.com/cotolier_risa/items/135d168eddd6ae6c3409
参考サイト
https://qiita.com/yuusuke510/items/844e97ce70b9ce64aaff https://hacknote.jp/archives/29090/ http://cly7796.net/wp/css/try-using-conditional-branching-and-looping-with-pug/
注意点
注意: 変数名に-入れるとエラー 例） 〇 var sample = ‘あいうえお’; × var sample-aaa = ‘あいうえお’; Pugで作業効率アップです！ 慣れるまでは、出力されたhtmlが変な入れ子が出来上がってないかチェックした方がいいです！ また②書くと思いますー。
