tanatiyo 今回はPugのルールを、以下参考サイトを参照してまとめました。
自分の中に整理するためにも、ここにまとめておきたいと思います。
参考サイト：https://www.tam-tam.co.jp/tipsnote/html_css/post12789.html
：https://haniwaman.com/pug/#index_id5
：https://and-ha.com/coding/what-is-pug/
Pugの公式サイトはここ→https://pugjs.org/api/getting-started.html
【自分なりにまとめたPugの基本的な書き方、ルール】
・タグ名を記述→開始タグと終了タグはない。タグ名を記述するだけでHTMLタグと認識してくれる。
・タグ名の後に半角スペースを入れてテキストを入力。
・親子構造にしたい時は、改行してインデント。
・タブかスペースで統一する→タブやスペースが混ざっているとエラーになりがち。
・属性は（）で囲む。属性が複数ある場合は半角スペースか(，)カンマで区切る。
・1要素につき、1行を使う→改行する時も1行につき1つのbrを使う。タグ名はコロン（：）をつけると1行で記述することもできるがコロンをつけた要素にはテキストを記述できない（↑の参考サイトを参照）
・インライン要素は、パイプライン（｜）を使って複数行で書く→他にもいろいろな書き方がある。
・サードパーティーコンテンツ(HTML)をそのままPugに張り付ける時は1行先頭にドット「.」のみを入れてから改行し、タブでインデントを設け、入れ子になった状態で張り付ける。タグ名やクラス名を記述する時は「.クラス名」「.(ドット)」を書いて、改行、インデントして貼りつけ。
・クラス属性はタグ名のすぐ後にドット「.」で繋げてかく。複数の場合はスペースを入れないようにドットを繋げてかく。
・ID属性も基本はクラス属性と同じ。なおタグ名が省略されたら、divタグに自動変換される。
・スタイル属性は少し記述が変わって、ブレース（{}）で囲ってからプロパティと値を記述する。ハイフンが含まれるプロパティはクオーテーション（””または”）で囲う必要がある。
・コメントには2種類ある。Pug内だけで表示されるコメントと、HTMLに表示されるコメント。前者は「//-」のようにスラッシュ2つの後にハイフン。ハイフンを付けるとHTMLには残らなくなる。後者はスラッシュ2つのみ「//」でOK。これはCSSやJavaScriptと同じなので使いやすそう。複数行のコメントも「//」の後入れ子構造にすればできる。IEなどのコンディショナルコメントはそのまま(HTMLの表記と同じように)書けば良い。
・エスケープ・・・・HTMLでは、セキュリティのために(& < > ” ‘)の5つの文字列をエスケープすることが推奨されている。イコール「=」の後にあるテキストのエスケープが有効になり、パイプライン「|」が入るとエスケープが解除される。
・インクルード(Includes)・・・別ファイルで作成しているPugファイルの中身を挿入できる。ローカルナビゲーションやバナーのような、カテゴリーなどで使いまわせる共通エリアの管理に役立つ。ヘッダーやフッターで使えそう。「include ファイルパス」で表示。
例：↓原文ママ↓
挿入するPugファイルで以下のようにインクルードします（ここでは/index.pugに/_include/_SideBanner.pugを挿入する想定です）。ファイルの拡張子である.pugは省略もできます。
//- Pug
include _include/_SideBanner.pugbasedirオプションを指定している場合はルート相対パスで指定することができるので、以下のような記述が可能です。
//- Pug
include /_include/_SideBanner.pug↑ここまで引用↑
【Pugの勉強中気になって調べた用語のまとめ】
SSI(Server Side Include)・・・HTMLにwebサーバー側で実行するコマンドを埋め込んで置き、その実行結果をクライアントに返す仕組み。SSIを有効にするには、事前設定が必要になる。通常のHTMLファイルにそれ用のコードを埋め込んでも何も表示されない。
参考サイト：https://murashun.jp/article/programming/ssi-writing.html#chapter-1
サードパーティーコンテンツ・・・ここでは、YoutubeやGoogle Maps、Google Analyticsなどで取得したHTMLのことを指している
コンディショナルコメント・・・ブラウザによって、CSSの解釈が違うので同じCSSを読み込んでも表示が異なる時がある。それを防ぐために用いられる。(1記事かけてしまいそうなので、詳しくはまた別記事にまとめてみます)
参考にしたサイト：https://m-suta.com/bibouroku-homepage-css-conditionalcomments/
【最後に、まとめ】
↓参考サイトにきれいにまとめてありました。ここはそのまま引用させて頂きます↓
覚えておくルールは以下の9個です。
- タグ名はHTMLタグになる
- 改行をしてインデントをつければ入れ子になる
- インライン要素や改行にはパイプライン（
|）を使う（ここだけ慣れが必要） - HTMLはドット（
.）で終わる要素の中に入れておけば解釈される - 属性は丸括弧内に記述する
- クラス属性はドット（
.）、ID属性はシャープ（#）で表す - コメントにはHTMLとして出力されるものと、されないものがある
- イコール（
=）を使えばエスケープできる - インクルード（
include [ファイル名へのパス]）で共通化したファイルを挿入できる
↑引用はここまで↑
初めのうちはパイプラインと<br>などのインライン要素との位置関係が分からなくなって、コンパイルエラーを何度も起こしてしまうかもしれないが、パターンが分かってくると自然と記述できるようになるとのこと。マスター出来れば、早く正確に書くことも出来て、かつ編集しやすいコードになると思います。慣れていってみよう。