Pug, Template #02(Iteration, Mixin)

文字列化(string representation)オブジェクトを作成します。

videoController.js

export const trending = (req, res) => {

const videos = [

{

title: "Hello",},

{title: "video #2",

},

{

title: " What's up",

},

];

 

http://localhost:4000/ 확인해 보면

[object Object]

[object Object]

[object Object]

このようにして出てきます変更できます.
ビデオにはビデオがあり、video는 titleがあります.home.pugまでvideo.titleと書きます.

ul

each video in videos

li=video.title

titleが表示されますこれらのオブジェクトのリストを送信することもできます。

数字でなくても、オブジェクトであってもよい.

より複雑なビデオを作成します。

mixinを利用します
mixinはbase.pugで使用したpartialsと同じです.
mixinはpartialsですが、データを受信できるpartialを表します.
footerはhtmlの一部を表し、データを受信できません.
フッターがページを変えたが,内容は相変わらずだ.
mixinはfooterで使用されているのとは異なり、同じ構造のhtmlブロックですが、データを置き換えて入れます.

mixinは賢い一部です。

videoController.js

export const trending = (req, res) => {

const videos = [

{

title: "First Video",

rating: 5,

comments: 10,

createdAt: "2 minutes ago ",

views: 100,

id: 1,

},

{

title: "Second Video",

rating: 3,

comments: 5,

createdAt: "2 minutes ago ",

views: 20,

id: 1,

},

{

title: "Third Video",

rating: 4,

comments: 8,

createdAt: "2 minutes ago ",

views: 80,

id: 1,

},

];

確認するとTitleしか出てこない

home.pugに行って修正します

block content

h2 Welcome here you will see the trending videos.

each video in videos

div

h4=video.title

ul

li #{video.rating}/5.

li #{video.comments} comments.

li Posted #{video.createdAt}.

li #{video.views} views.

Title部分はliを使う必要がないのでdivに変更しました。

componentと呼ばれるビデオ。

ソフトウェア開発者や全スタック開発者のように考えるなら、YouTubeを思い出してみてはいかがでしょうか.
多くのビデオが表示され、サムネイルも表示され、タイトルやクリック率も表示されます.
いずれかのビデオをクリックして再生すると、サイドバーに他のビデオのプレイリストが表示されます.
前ページでは、クリックして再生した動画と似たような動画の種類が見られました.
サムネイル、タイトル、クリック率など、どこでもリピートできるコンポーネント.
youtubeは複数のページでコンポーネントを再利用します.
おすすめビデオのサイドバー、トップページ、人気ビデオのページ、各チャンネルのすべてのビデオ
フレームの中で同じように見えます.
最終的に繰り返し使用する文を最小化するために使用されるpartial gamixin.
データを受信できる予め作成されたhtmlブロックと見なすことができる.
viewsフォルダにmixinフォルダを作成します.
中ではビデオというmixinを作ります
一般的なpartialは最初は追加できるものはありませんが、mixinは異なる内容を追加する必要があります.video.pug

mixin video(info)

div

h4=info.title

ul

li #{info.rating}/5.

li #{info.comments} comments.

li Posted #{info.createdAt}.

li #{info.views} views.

こうなった以上、home.pugで削除します.
そしてお化粧直ししてあげます

block content

h2 Welcome here you will see the trending videos.

each view in videos

+video(view)

ビデオの各viewに対してvideoというmixinを呼び出します.
viewという名前の情報オブジェクトを送信しています.
そしてビデオmixinの中の情報になります.
その後、リフレッシュでエラーが発生します.
ビデオは機能ではありません.pug_mixins.videoは機能ではありません.
ビデオを書いています.また、フッターを入れたときとは別の形でビデオを書いています.
脚注は単純に含まれているだけです.
mixinの場合はプラス+です.home.pugに増加しました.

extends base.pug

include mixins/video

後でリフレッシュするのは以前と同じように仕事をします.
mixinをページに適用できるようになりました.
ホームページ、検索ページ、サイドバー、チャンネルページ
これがhtmlコードを再利用する方法です.