Pug, Template (Recap)

Iterationとmixinを復習します。

この2種類は先端でよく使われるからです.
ほとんどがIterationをよく使いますが、mixinはたまに使います.
Iterationは、配列内のすべての要素に対して特定の動作をとるために使用されます.videoController.jsから
ビデオという名前の配列を送信しています.

const videos = [

{

title: "First Video",

rating: 5,

comments: 10,

createdAt: "2 hours ago ",

views: 100,

id: 1,

},

{

title: "Second Video",

rating: 3,

comments: 5,

createdAt: "25 minutes ago ",

views: 20,

id: 1,

},

{

title: "Third Video",

rating: 4,

comments: 8,

createdAt: "2 minutes ago ",

views: 80,

id: 1,

},

];

return res.render("home", { pageTitle: "Home", videos });

ビデオはこうやって送られてきました"home"(variable)がhome.pugに送信されます.home.pug

each view in videos

+video(view)

ビデオ配列はこのように書くことができます.
だから、X in Yの形をしたYの中のXごとに同じ仕事をすることができます.
ここでYとは、現在所有しているarrayを指す.
また、ビデオという部分は、ビデオオブジェクトの配列である必要はありません.
たとえば、数値配列であってもよい.
あるいは直接配列を作ってもいいです

each x in [1, 2, 3, 4, 5]

li=x

更新するとリストに1~5があります.
これからはよくこんなことをします.
私はビデオ配列を持ってあなたにたくさんのビデオを見せます.
あるいは、コメント配列をインポートすることもできます.これらはすべて反復です.
each X in Yではvariableの名前は重要ではありません.
重要なのはYがリストでなければならないことです
実際には、res.renderに送信された変数の名前を使用することができる.
非常に重要な事実は、each X in Yにおいて、Yが存在しなければならないことである.
Yがないと問題になる

each view in [ ]

+video(view)

else

div Sorry nothing found.

配列に要素が存在しない場合は、elseに条件があることを示します.
JavaScriptでは見られない仕組みです.
pugでの構文.
pugは頭がいいので、Yが空の配列だったり、長さが0だったりすると、すぐに見えます.mixin

each x in videos

li=x

ビデオがrenderとして送信される変数であることを知っています.
更新するとobjectObjectが表示されます.
これは、ビデオの各XがJavaScriptオブジェクトであるためです.
each X inビデオでは、Xはオブジェクトです.
だからもっと良い方法でXを展示します.x.titleを試してみてください.

li=x.title

これでtitleが出てくることがわかります
YouTubeに行くと全部ビデオブロックです.
検索すると、ビデオブロック、トレンドページのビデオブロック、
エッジバーの関連ビデオもビデオブロックです.
この場合、UI componentを再利用する必要があります.
ビデオブロックを作成するには
皆さんにタイトルの採点コメント数の発表日を見せたい
ホームページ、検索ページ、プロファイルページ
同じ形式のhtmlブロックは複数のページに表示する必要があります.
この時必要なのはmixin
mixinは生成されたhtmlクリップと同じです.
外部世界から情報を得る役割を果たす.
既成のhtmlクリップを見たことがあります.
足の裏から見えます.
しかしfooterはhtmlブロックにすぎず、新しいページを作成するたびにインポートする必要があります.
脚注を修正したい場合は、footer.pugに移動して修正してください.
すべてのページに適用されるので、これは良い方法です.
しかしfooterは情報を取得しないか、取得しない.
脚注は同じものを展示し続けるだけです.

mixin video(info)

div

h4=info.title

ul

li #{info.rating}/5.

li #{info.comments} comments.

li Posted #{info.createdAt}.

li #{info.views} views.

逆に、ビデオは一部であり、他の世界から情報を得る役割を果たしています.
htmlコンテンツを返すJavaScriptのfunctionのようです
またhtmlの内容はずっと変化する可能性があります.
だからビデオを使う方法はまずinclude mixins/videoをします.
そして+ビデオ()を作ります.home.pug

include mixins/video

block content

h2 Welcome here you will see the trending videos.

each view in videos

+video(view)

ビデオには論証が必要だ.
(この場合、パラメータはinfoです.)
論争がなければ.

TypeError: /Users/j.mercury/Documents/wetube/src/views/mixins/video.pug:3

1| mixin video(info)

2| div

> 3| h4=info.title

4| ul

5| li #{info.rating}/5.

6| li #{info.comments} comments.

Cannot read properties of undefined (reading 'title')

このようなエラーが発生します.
エラーをよく見て、コードinfo.titleを実行したいです.
ビデオmixinにデータが送信されませんでした.
だからinfoでは定義されていません.
undefindeにはtitleがありません.
ビデオmixinにデータを送信します.
したがって、viewという変数で各itemにアクセスできます.
今viewをvideo mixinに送信しています.
video mixinはviewを受信し、すべての情報にアクセスしています.
だからリフレッシュするとよく働いていることがわかります.

mixin video(info)

div

h4=info.title

ul

li #{info.rating}/5.

li #{info.comments} comments.

li Posted #{info.createdAt}.

li #{info.views} views.

ご覧の通り、同じhtml形式ですが
しかし、中身はそれぞれ異なる.
mixinの力
htmlを返す関数に相当します.
その後、templateに関数を書き込むことができます.
少し違うのは+を加えることです.
逆に、脚注に+は入っていません.
フッターは簡単なhtmlなので.
mixinを使用したい場合は、+を追加できます.
次にmixinをtemplateに含める必要があります.