1
00:00:00,990 --> 00:00:01,900
‫-: Baiklah.

2
00:00:01,900 --> 00:00:04,500
‫Dalam video ini, saya akan menunjukkan cara

3
00:00:04,500 --> 00:00:06,180
‫menggunakan salah satu

4
00:00:06,180 --> 00:00:09,440
‫fitur Pug yang paling penting dan juga paling kompleks.

5
00:00:09,440 --> 00:00:11,940
‫Dan itu diperpanjang.

6
00:00:11,940 --> 00:00:14,280
‫Dengan ekstensi, kita akan

7
00:00:14,280 --> 00:00:17,000
‫dapat menggunakan tata letak dasar yang

8
00:00:17,000 --> 00:00:20,770
‫sama untuk setiap halaman yang ingin kita render.

9
00:00:20,770 --> 00:00:24,280
‫Saat ini, kami memiliki jenis template dasar kami yang telah selesai

10
00:00:24,280 --> 00:00:27,210
‫dengan header yang bagus dan footer yang bagus.

11
00:00:27,210 --> 00:00:30,760
‫Jadi sekarang, mari kita mulai mengisi isinya.

12
00:00:30,760 --> 00:00:32,670
‫Sekarang, tentu saja, kami ingin

13
00:00:32,670 --> 00:00:35,560
‫memuat konten yang berbeda untuk halaman yang berbeda.

14
00:00:35,560 --> 00:00:38,550
‫Dan untuk memulai, kami ingin memiliki halaman ikhtisar dengan

15
00:00:38,550 --> 00:00:40,860
‫semua tur, dan kemudian halaman

16
00:00:40,860 --> 00:00:43,763
‫dengan semua detail tur untuk satu tur tertentu.

17
00:00:44,860 --> 00:00:47,080
‫Jadi sekarang mari kita terapkan beberapa rute

18
00:00:47,080 --> 00:00:48,713
‫untuk kedua halaman ini.

19
00:00:51,410 --> 00:00:53,640
‫Dan saya akan melakukannya di sini di bawah

20
00:00:53,640 --> 00:00:55,840
‫yang pertama yang telah kita buat.

21
00:00:59,056 --> 00:01:00,510
‫Jadi, /overview Dan

22
00:01:09,440 --> 00:01:12,750
‫kemudian sesuatu yang sangat mirip dengan sebelumnya.

23
00:01:12,750 --> 00:01:15,430
‫Dan lagi, sedikit kemudian, sebenarnya di video berikutnya kita

24
00:01:15,430 --> 00:01:16,910
‫akan memasukkan rute-rute ini

25
00:01:16,910 --> 00:01:18,863
‫ke dalam file terpisah mereka sendiri.

26
00:01:21,530 --> 00:01:24,560
‫Jadi, render, dan sekarang di halaman ikhtisar ini

27
00:01:24,560 --> 00:01:26,030
‫kita sebenarnya ingin

28
00:01:26,030 --> 00:01:28,223
‫merender template yang disebut ikhtisar.

29
00:01:32,440 --> 00:01:34,000
‫Itu belum ada,

30
00:01:34,000 --> 00:01:36,903
‫jadi sekarang mari kita cepat membuat satu.

31
00:01:40,400 --> 00:01:43,010
‫Jadi, ikhtisar. pug Dan

32
00:01:48,570 --> 00:01:51,640
‫sebenarnya mari kita juga mengirimkan beberapa data.

33
00:01:51,640 --> 00:01:54,080
‫Dan kami akan memberikan judul halaman yang

34
00:01:54,080 --> 00:01:56,113
‫dalam hal ini, kami akan mengatakan,

35
00:01:58,220 --> 00:01:59,063
‫Semua Tur.

36
00:02:00,780 --> 00:02:03,130
‫Sekarang mari ambil kode

37
00:02:03,130 --> 00:02:05,503
‫ini dan salin untuk tur.

38
00:02:06,680 --> 00:02:11,270
‫Jadi kami juga ingin rute untuk tur tertentu lagi.

39
00:02:11,270 --> 00:02:12,770
‫Dan di sini,

40
00:02:12,770 --> 00:02:16,160
‫kita ingin memiliki template yang juga disebut tour.

41
00:02:16,160 --> 00:02:18,260
‫Dan kemudian judulnya, untuk saat ini, mari

42
00:02:18,260 --> 00:02:19,300
‫kita lakukan

43
00:02:19,300 --> 00:02:20,950
‫lagi, The Forest Hiker Tour.

44
00:02:25,830 --> 00:02:27,990
‫Jadi untuk saat ini, ini hanya sebagai pengganti,

45
00:02:27,990 --> 00:02:29,470
‫dan tentu saja nanti

46
00:02:29,470 --> 00:02:31,360
‫kita akan benar-benar membuat ini menjadi dinamis.

47
00:02:31,360 --> 00:02:33,120
‫Karena pada titik ini,

48
00:02:33,120 --> 00:02:35,723
‫kami masih mempelajari cara kerja Pug yang sebenarnya.

49
00:02:38,830 --> 00:02:42,323
‫Sekarang mari kita buat juga template tur itu.

50
00:02:44,070 --> 00:02:45,810
‫Dan itu saja.

51
00:02:45,810 --> 00:02:49,363
‫Oke, sekarang dengan dua template baru di sini selesai, inilah

52
00:02:50,810 --> 00:02:52,680
‫yang akan kita lakukan.

53
00:02:52,680 --> 00:02:54,960
‫Di masing-masing template ini, dan dalam hal

54
00:02:54,960 --> 00:02:56,820
‫ini di sini ikhtisarnya, kami

55
00:02:56,820 --> 00:02:59,500
‫hanya ingin menempatkan konten untuk halaman tertentu itu.

56
00:02:59,500 --> 00:03:01,720
‫Jadi kami tidak menginginkan footer di sini dan tidak

57
00:03:01,720 --> 00:03:04,260
‫ada header dan tidak ada barang yang kami miliki di pangkalan.

58
00:03:04,260 --> 00:03:06,040
‫Jadi, sekali lagi, benar-benar

59
00:03:06,040 --> 00:03:07,900
‫hanya konten untuk halaman ikhtisar.

60
00:03:07,900 --> 00:03:10,890
‫Jadi itulah tepatnya yang akan kita masukkan ke dalam

61
00:03:10,890 --> 00:03:14,000
‫file ini, dan kemudian, pada dasarnya kita akan menyuntikkan konten

62
00:03:14,000 --> 00:03:16,300
‫ini ke dalam template dasar, yang dapat

63
00:03:16,300 --> 00:03:18,316
‫kita sebut sebagai template induk.

64
00:03:18,316 --> 00:03:21,620
‫Proses ini kemudian disebut perluasan.

65
00:03:21,620 --> 00:03:24,750
‫Jadi setiap kali template ikhtisar dirender, kami

66
00:03:24,750 --> 00:03:26,550
‫kemudian mengambil template dasar

67
00:03:26,550 --> 00:03:29,560
‫dan mengisinya dengan konten file ini,

68
00:03:29,560 --> 00:03:31,353
‫dan kami memperluasnya.

69
00:03:32,930 --> 00:03:35,080
‫Inilah cara kami menerapkannya.

70
00:03:35,080 --> 00:03:38,203
‫Pertama, di pangkalan, kita perlu meletakkan balok.

71
00:03:40,110 --> 00:03:41,560
‫Saya benar-benar akan melakukannya di sini.

72
00:03:42,890 --> 00:03:45,180
‫Jadi mari kita hapus semua

73
00:03:45,180 --> 00:03:47,900
‫ini, dan di sini, letakkan blok.

74
00:03:47,900 --> 00:03:52,320
‫Dan blok itu, saya akan menyebutnya konten.

75
00:03:52,320 --> 00:03:54,260
‫Kemudian di dalam blok itu, kita sebenarnya juga

76
00:03:54,260 --> 00:03:55,303
‫memiliki beberapa konten.

77
00:03:56,490 --> 00:03:58,520
‫Jadi mari kita menempatkan h1 di sini.

78
00:03:58,520 --> 00:04:01,740
‫Namun konten ini kemudian akan ditimpa.

79
00:04:01,740 --> 00:04:03,600
‫Tapi bagaimanapun, mari kita

80
00:04:03,600 --> 00:04:06,230
‫taruh di sini hanya sebagai pengganti, pada dasarnya.

81
00:04:06,230 --> 00:04:09,630
‫Jadi, Ini adalah heading placeholder.

82
00:04:12,150 --> 00:04:15,600
‫Oke, jadi kami memiliki blok kami di sini, dan sekarang

83
00:04:15,600 --> 00:04:18,280
‫kami dapat pergi ke halaman ikhtisar kami

84
00:04:18,280 --> 00:04:21,473
‫dan mengatakan bahwa kami ingin memperluas template dasar kami.

85
00:04:22,360 --> 00:04:25,053
‫Jadi, perpanjang basis.

86
00:04:26,400 --> 00:04:28,420
‫Atau sebenarnya, itu disebut memanjang.

87
00:04:28,420 --> 00:04:30,823
‫Jadi file ini memperluas file dasar.

88
00:04:31,970 --> 00:04:33,528
‫Dan tentu saja, jika yang ini

89
00:04:33,528 --> 00:04:36,157
‫akan dipanggil, misalnya, index. pug, maka

90
00:04:36,157 --> 00:04:38,853
‫di sini kita akan mengatakan extends index.

91
00:04:40,660 --> 00:04:42,510
‫Sekarang apa sebenarnya konten

92
00:04:42,510 --> 00:04:45,083
‫yang akan diperluas di template dasar?

93
00:04:46,000 --> 00:04:49,203
‫Nah, itu yang kita masukkan ke dalam blok konten.

94
00:04:52,030 --> 00:04:55,573
‫Jadi, juga di sini, kami membuat blok yang disebut konten.

95
00:04:57,410 --> 00:05:01,063
‫Dan kemudian di sana, seperti biasa kita bisa meletakkan konten kita.

96
00:05:02,650 --> 00:05:06,243
‫Jadi katakan saja, Ini adalah ikhtisar tur.

97
00:05:09,180 --> 00:05:12,075
‫Di sini, kami pada dasarnya mendefinisikan kembali blok

98
00:05:12,075 --> 00:05:14,073
‫konten yang ada di pangkalan.

99
00:05:15,270 --> 00:05:16,900
‫Jadi sekali lagi, kami

100
00:05:16,900 --> 00:05:19,450
‫memiliki blok ini di sini yang disebut konten,

101
00:05:19,450 --> 00:05:22,400
‫dan sekarang dengan meletakkan blok konten yang sama di

102
00:05:22,400 --> 00:05:24,370
‫sini, di halaman ini, yang kemudian

103
00:05:24,370 --> 00:05:27,293
‫memperluas dasarnya, pada dasarnya kami mendefinisikan ulang blok itu.

104
00:05:28,171 --> 00:05:31,820
‫Setiap file hanya dapat memperpanjang satu file lainnya.

105
00:05:31,820 --> 00:05:33,860
‫Jadi kami hanya dapat memperluas

106
00:05:33,860 --> 00:05:38,390
‫basis di sini, tetapi kami dapat memiliki blok yang berbeda di setiap file.

107
00:05:38,390 --> 00:05:41,730
‫Jadi kita bisa memiliki blok untuk kepala di sini juga.

108
00:05:41,730 --> 00:05:43,760
‫Dan kemudian kami dapat memperluasnya

109
00:05:43,760 --> 00:05:45,790
‫juga di template ikhtisar.

110
00:05:45,790 --> 00:05:48,330
‫Dan, sebenarnya, kita akan melakukannya nanti.

111
00:05:48,330 --> 00:05:51,260
‫Tapi untuk saat ini, tentu saja, mari kita tetap sederhana.

112
00:05:51,260 --> 00:05:52,923
‫Oke, apakah ini masuk akal?

113
00:05:54,270 --> 00:05:57,020
‫Sekarang mari kita lanjutkan dan benar-benar melakukan hal yang sama di sini.

114
00:05:57,930 --> 00:06:02,190
‫Jadi ini memperluas tata letak dasar.

115
00:06:02,190 --> 00:06:04,083
‫Dan apa sebenarnya yang diperpanjang?

116
00:06:05,200 --> 00:06:08,900
‫Nah, itu akan memperpanjang blok konten.

117
00:06:08,900 --> 00:06:11,660
‫Jadi yang ini akan

118
00:06:11,660 --> 00:06:16,180
‫kita pasang di h1, Ini adalah halaman detail tur.

119
00:06:19,230 --> 00:06:21,830
‫Jadi, sebelum menguji ini, mari kita cepat rekap apa yang

120
00:06:21,830 --> 00:06:23,020
‫baru saja kita lakukan.

121
00:06:23,020 --> 00:06:26,100
‫Jadi, kami ingin menggunakan template dasar ini

122
00:06:26,100 --> 00:06:28,330
‫sebagai titik awal kami.

123
00:06:28,330 --> 00:06:31,600
‫Jadi, sebagai kerangka yang memiliki semua hal

124
00:06:31,600 --> 00:06:32,815
‫HTML, seperti

125
00:06:32,815 --> 00:06:36,360
‫kepala ini, dan juga header dan footer, tetapi

126
00:06:36,360 --> 00:06:39,610
‫bukan konten khusus untuk setiap halaman.

127
00:06:39,610 --> 00:06:41,720
‫Kemudian, di setiap halaman ini

128
00:06:41,720 --> 00:06:44,933
‫di sini, kami hanya memiliki konten untuk halaman itu sendiri.

129
00:06:46,020 --> 00:06:47,650
‫Dan kita dapat melakukannya

130
00:06:47,650 --> 00:06:49,913
‫karena pada dasarnya kita dapat menyuntikkan

131
00:06:49,913 --> 00:06:53,650
‫konten ini ke dalam template dasar induk dengan menggunakan ekstensi.

132
00:06:53,650 --> 00:06:57,353
‫Jadi pada dasarnya, anggap ini sebagai kebalikan dari memasukkan.

133
00:06:58,881 --> 00:07:03,298
‫Di sini, templat ini menyertakan dua templat induk.

134
00:07:03,298 --> 00:07:07,424
‫Template ini di sini termasuk dua template

135
00:07:07,424 --> 00:07:10,293
‫anak, header dan footer.

136
00:07:12,284 --> 00:07:14,200
‫Jadi, sekali lagi, basisnya

137
00:07:14,200 --> 00:07:17,140
‫adalah induknya, dan header dan footernya adalah anaknya.

138
00:07:17,140 --> 00:07:19,890
‫Jadi di sini, orang tua termasuk anak-anak.

139
00:07:19,890 --> 00:07:22,740
‫Tetapi dengan ekstensi, itu sebaliknya, di mana

140
00:07:22,740 --> 00:07:25,660
‫anak-anak, seperti yang dapat kita katakan, sehingga

141
00:07:25,660 --> 00:07:27,300
‫kita dapat mengatakan

142
00:07:27,300 --> 00:07:29,570
‫bahwa gambarannya adalah anak juga dari

143
00:07:29,570 --> 00:07:33,160
‫basis, tetapi di sini adalah anak yang termasuk basis.

144
00:07:33,160 --> 00:07:36,883
‫Jadi, pada dasarnya, semua yang ada di sekitar konten blok ini.

145
00:07:38,260 --> 00:07:40,960
‫Anda dapat membayangkan bahwa semua kode

146
00:07:40,960 --> 00:07:43,750
‫ini di sini, semua ini yang bukan

147
00:07:43,750 --> 00:07:47,090
‫konten blok kemudian disalin langsung ke file ini.

148
00:07:47,090 --> 00:07:49,843
‫Itu cara yang bagus untuk membayangkan bagaimana ini bekerja.

149
00:07:51,334 --> 00:07:55,360
‫Itu memungkinkan kami untuk kemudian menggunakan di sini

150
00:07:55,360 --> 00:07:59,430
‫di rute kami ikhtisar dan templat tur alih-alih menggunakan basis.

151
00:07:59,430 --> 00:08:02,750
‫Tapi tetap saja, tentu saja, menggunakan semua HTML yang

152
00:08:02,750 --> 00:08:04,620
‫kami miliki di sini.

153
00:08:04,620 --> 00:08:08,460
‫Oke, jadi saya harap itu masuk akal sekarang.

154
00:08:08,460 --> 00:08:10,653
‫Mari kita benar-benar pergi ke depan dan mencoba ini.

155
00:08:12,030 --> 00:08:13,783
‫Aku hanya akan menyalin URL.

156
00:08:14,960 --> 00:08:16,913
‫Jadi sekarang mari kita menulis ikhtisar.

157
00:08:18,960 --> 00:08:22,350
‫Jadi, memang, kami mendapatkan h1 yang mengatakan

158
00:08:22,350 --> 00:08:24,460
‫Ini adalah ikhtisar tur.

159
00:08:24,460 --> 00:08:27,810
‫Dan sebenarnya mari kita juga menggunakan variabel judul yang kita

160
00:08:27,810 --> 00:08:29,683
‫berikan ke dalam template ini.

161
00:08:31,810 --> 00:08:34,096
‫Ingat bahwa di sini kami memiliki

162
00:08:34,096 --> 00:08:37,320
‫judul Semua Tur di ikhtisar, dan kemudian di tur,

163
00:08:37,320 --> 00:08:39,310
‫kami memiliki The Forest Hiker.

164
00:08:39,310 --> 00:08:41,563
‫Jadi mari kita benar-benar menempatkan bahwa pada judul.

165
00:08:42,590 --> 00:08:44,860
‫Sebenarnya, kita sebenarnya bisa melakukannya di

166
00:08:44,860 --> 00:08:47,110
‫sini di template dasar.

167
00:08:47,110 --> 00:08:48,850
‫Jadi ketika di

168
00:08:48,850 --> 00:08:51,140
‫sini dalam ikhtisar kami memperluas templat

169
00:08:51,140 --> 00:08:54,970
‫dasar, templat dasar masih memiliki akses ke lokal, jadi,

170
00:08:54,970 --> 00:08:57,843
‫ke variabel, yang kami berikan ke templat.

171
00:08:58,810 --> 00:09:02,300
‫Di sini, kita bisa melakukan apa yang kita

172
00:09:02,300 --> 00:09:05,973
‫lakukan sebelumnya, jadi interpolasi dengan variabel, jadi dengan lokal.

173
00:09:07,620 --> 00:09:12,580
‫Jadi, yang perlu kita lakukan adalah meletakkan judul di sini, seperti ini.

174
00:09:12,580 --> 00:09:14,400
‫Dan jika sekarang kami memuat ulang,

175
00:09:14,400 --> 00:09:16,823
‫maka Anda melihat Semua Tur di sini di atas.

176
00:09:19,267 --> 00:09:20,573
‫Sekarang mari kita coba tur.

177
00:09:21,630 --> 00:09:24,420
‫Jadi ini adalah halaman detail tur, dan di atas

178
00:09:24,420 --> 00:09:26,833
‫sini Anda melihat The Forest Hiker Tour.

179
00:09:28,610 --> 00:09:30,660
‫Sekarang jika kita memuat yang ini

180
00:09:30,660 --> 00:09:32,540
‫maka kita harus mendapatkan placeholder yang

181
00:09:32,540 --> 00:09:34,230
‫kita taruh di blok.

182
00:09:34,230 --> 00:09:35,113
‫Ingat itu?

183
00:09:36,890 --> 00:09:40,430
‫Dan, memang, Ini adalah judul placeholder.

184
00:09:40,430 --> 00:09:41,570
‫Besar.

185
00:09:41,570 --> 00:09:44,466
‫Ini adalah mekanisme yang kuat dan sangat penting

186
00:09:44,466 --> 00:09:47,220
‫untuk kita pahami dan gunakan untuk semua

187
00:09:47,220 --> 00:09:49,200
‫template yang akan kita buat

188
00:09:49,200 --> 00:09:50,550
‫di bagian selanjutnya.

189
00:09:52,210 --> 00:09:54,250
‫Di video berikutnya, kita akhirnya akan

190
00:09:54,250 --> 00:09:57,710
‫membersihkan sedikit kekacauan yang kita miliki di sini, dan memfaktorkan

191
00:09:57,710 --> 00:09:59,328
‫ulang semua kode ini

192
00:09:59,328 --> 00:10:01,303
‫di sini menjadi beberapa file berbeda.