いままでEJSを使っていましたが、こんなかんじでEJSも古くなってきたようなのでPugを使い始めて１ヶ月経ちました。
インデントでコードを書いていくのは初めてで、最初は戸惑いましたが、今では普通にEmmetで組むのがだるいです。
自分で環境を整える能力がないので、カヤック様のテンプレートをいただきました。ありがとうございました。
そういえば無謀にもデザイナー募集に応募して、とても丁寧なテンプレお祈りお頂いた過去が有りました。ええ。ありがとうございました。
スポンサードリンク
基本
閉じタグは不要でインデントが重要となる。インデントはTabでも半角でもなんでもいいけれど、統一されていないとうまく認識してくれない。
|
1 2 3 4 5 6 7 8 9 |
html head title body h1 タイトル p |あいうえお <br> |かきくけこ |
結果
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title></title> </head> <body> <h1>タイトル <p> あいうえお<br>かきくけこ</p> </h1> </body> </html> |
ID Classについて
CSSと同じようにタグの後ろに「#」「.」をつけると、属性がつく。なにも着けたくない場合は「span」「div」と書く
|
1 2 3 |
section#contents p.text he span llo |
|
1 2 3 |
<section id="contents"> <p class="text">he<span>llo</span></p> </section> |
改行について
改行は少し面倒くさいと思いました。
|
1 2 3 4 |
p | こんにちは <br> | pug |
|
1 2 |
<p> こんにちは<br>pug</p> |
実は改行しなくても大丈夫
:と半角を書いてあげると、改行しなくても問題ない
|
1 2 3 4 5 |
ul#navi li: a(href="#") 01 li: a(href="#") 02 li: a(href="#") 03 li: a(href="#") 04 |
|
1 2 3 4 5 6 |
<ul id="navi"> <li><a href="#">01</a></li> <li><a href="#">02</a></li> <li><a href="#">03</a></li> <li><a href="#">04</a></li> </ul> |
普通のHTMLを挿入する場合
GoogleMapみたいにそのままHTMLを挿入する場合がある。
その時は以下のようにdiv#maps「.」とコンマを入れれば良い。
|
1 2 |
div#maps. <iframe src="googlemapのバス" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> |
イメージにリンクを貼る
|
1 2 |
a(href='#') img(src='', alt='', whidth='', height='') |
|
1 2 3 |
<a href="#"> <img src="" alt="" whidth="" height=""> </a> |
バスについて
link(rel=”stylesheet”, href=basePath + “/css/style.css”)
このように書けば、どのディレクトリからでもパスが通る
Pugでパンくずリストの作り方
設定
カヤックさんのにはtwitterカードやOGPを変数でまとめてくれるファイルがあります。すごい。
src/config/meta.yml
で設定できます。
src/config/meta.yml
で設定できます。
例えばogpならば以下のように設定します。
|
1 2 3 |
# カノニカル・og:urlなどで使われる、このサイトのURL # （複数ページあるサイトでは、全てに同じURLを入れないように） url: https://www.exsample.com/img/ogp.jpg |
「#url」→「url」にします。そしてURLを絶対パスで入れます。