Pugを使ってみました。基本編

いままでEJSを使っていましたが、こんなかんじでEJSも古くなってきたようなのでPugを使い始めて1ヶ月経ちました。

インデントでコードを書いていくのは初めてで、最初は戸惑いましたが、今では普通にEmmetで組むのがだるいです。

自分で環境を整える能力がないので、カヤック様のテンプレートをいただきました。ありがとうございました。
そういえば無謀にもデザイナー募集に応募して、とても丁寧なテンプレお祈りお頂いた過去が有りました。ええ。ありがとうございました。

スポンサードリンク

基本

閉じタグは不要でインデントが重要となる。インデントはTabでも半角でもなんでもいいけれど、統一されていないとうまく認識してくれない。

 

 

結果

 

 


ID Classについて

CSSと同じようにタグの後ろに「#」「.」をつけると、属性がつく。なにも着けたくない場合は「span」「div」と書く


改行について

改行は少し面倒くさいと思いました。


実は改行しなくても大丈夫
:と半角を書いてあげると、改行しなくても問題ない

 


普通のHTMLを挿入する場合

GoogleMapみたいにそのままHTMLを挿入する場合がある。
その時は以下のようにdiv#maps「.」とコンマを入れれば良い。

 

 


イメージにリンクを貼る


バスについて

link(rel=”stylesheet”, href=basePath + “/css/style.css”)
このように書けば、どのディレクトリからでもパスが通る

Pugでパンくずリストの作り方

設定

カヤックさんのにはtwitterカードやOGPを変数でまとめてくれるファイルがあります。すごい。
src/config/meta.yml
で設定できます。
例えばogpならば以下のように設定します。

「#url」→「url」にします。そしてURLを絶対パスで入れます。