Yamato DaiwaFrontend (2.0.0-beta.4)

ページの原型

Pugは他の本格的なHTMLプリプロセッサと同じ様に テンプレートの継承と言う機能が有る。 実際のプロジェクトだと、ページ数が多く、上記の継承多層

妥当なHTMLページ必須部分が有り、特定のタグ限らず、これらのネスティング且つ特殊の属性を含む。 2024年だと、妥当なHTMLページ最少 コードは下記通り。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <!-- 見える内容 -->
  </body>
</html>

必須部分と他に、任意ではあるが、良く使われているコードの断片も在る。 例えば、ページの内容を画面に収まる様に縮小必要は無いと指定する下記の宣言(現在だと、レスポンシブ・アダプティブレイアウトがオプションではなく、事実上必須だから)。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

テンプレート継承を用いて、必須部分及びよく使われる任意な部分を親ファイルへ抽出可能。 更に、内部JavaScript を使い、コードを生成する事でも出来る。 例えば、スタイルシートスクリプトへのパスを定数化し、親のテンプレートが当定数 を元に適切なタグを適切な場所で生成する様に確保出来る。

YDFは、継承される前提で、下記の作成済みの原形を提供している。