ビューコピー#4-2 Pug:Digging to Pugs

3322 ワード
講義 pug youtube テキストリンク

🔖 コース:5.3～5.4ドル


▼▼定理:


Preview


この授業では、Pugテンプレートの使い方や、Pugをどのように使うかを学びました.
ダミーデータの作成と転送時に、コントローラ部分の構造を下図に示すため、以前に作成したコントローラファイルからデータを作成して継承します.

では、今、Pugの本名をサーバデータを利用して理解してみましょう.

Pug独自の機能


Include機能

  • https://pugjs.org/language/includes.html
  • コンセプト
  • は、他のpugファイルの「コンテンツ」をロードするために使用される.
  • の下にあるextendsとは異なり、extendsは他のpugファイルにロードされます.主に、このファイルのblockを使用する場合は、使用するファイルの上部のコンセプトにインポートし、extendsを使用します.includeは、上部ではなくファイルで使用したい行に使用され、ファイルの内容が直接この部分に適用され、ブラウザに表示されます.
    • 注意
  • :次のextendsと似ていますが、異なります.またextendsの後にsを付けますがincludeは付けません.

    • 継承機能

  • https://pugjs.org/language/inheritance.html
  • コンセプト
  • extendsは別のpugファイルを読み込みます.importのようなコンセプト
  • blockは、テンプレートにするファイルに空きスペースを作成します.
    このテンプレートをインポートした別のファイルでは、この空白領域ブロックに目的のコンテンツをカスタマイズできます.
  • 使い方
    1)テンプレートとして使用するファイルを作成します.
    2)テンプレートに書き込みたいファイルに拡張します.ファイル名で読み込みます.
    3)テンプレートで変更したい内容は、テンプレートファイルにblock block名を付けることができます.
    4)テンプレートで変更したい部分はblock blocknameタグ名に変更できます.

    • Mixin機能

  • https://pugjs.org/language/mixins.html
  • コンセプト
  • 遺産の中の街と同じです.ホームページに示すように、再利用可能なブロック、すなわち作成されたブロック、再利用可能です.サーバ上のデータを反映します.
  • 最も重要なmixinのポイントは、議論を受け入れることです.したがって、データを受信し、他のコンテンツを同じテンプレートのブロックに入れることができる.
  • の使用方法はinlcudeの使用時と似ています.
  • 使い方
    1)テンプレートブロックを作成する.(使用しているファイルは生成したファイルと違っても構いません.)
    2)呼びたいところに+mixin名を書く.
    3)arguを別途取得したい場合は+mixin名(argu)
    4)他のファイルからのみmixinを読み込む場合は、include mixin名を使用するファイルの先頭で宣言します.*

    • Pugの構文


    1.変数

  • で重複する部分を変数として指定し、単純に変数名だけを使いたい場合?
    => #{ }
  • 、そうだ.{}JavaScript機能に使用する場合と同じ構文です.
  • 使い方
    1)pugファイルで＃{変数名}を使用したい場所を指定します.
    2)変数宣言は、pugファイルを表示するときに以下のようになります.
  • 他の文字と混合して使用する必要がなければ、ラベル名=変数名を使用することができます.
    •  header
 	title #{pageTitle}
    
 header
 	title=pageTitle

    2.条件文（条件文）

  • https://pugjs.org/language/conditionals.html
  • テンプレートに条件文を書き込む必要がある場合があります.サーバがデータを受信しhtmlを区切る必要がある場合...たとえば、特定のユーザに対して条件付き文のコードのみを表示する場合.
  • を読めばわかる、JavaScriptのif...elseゲートとあまり違いはありません.ただ()がいなくなった.

    • 3.繰り返し（反復）

  • https://pugjs.org/language/iteration.html
  • pugはeachとwhileの2つの重複文をサポートします.

    • ?疑問点:

  • minxinを使用するとincludeはblockを使用するextendsのように動作します.*
  • 混同の部分にぶんも同じ質問をしました

    • ††次のように感じられます。


    x

    💖 要約:

  • Pugのさまざまな機能を理解しました:Include、extends、block、mixin
    • Pugで
  • の既存のJavaScript(#{JavaScriptコード})を使用する方法について説明します.
  • 既存のJavaScriptにおける反復文(for,while,do...while)のPugでの使用法(each,while)について理解した.また,変数(#{変数名}を用いてコントローラに変数を指定する方法も紹介した.
    • JetPack Component:複雑な状態の管理
    2022年3月振り返り