1
00:00:01,010 --> 00:00:03,430
‫Instruktur: Dalam kuliah ini, saya ingin menunjukkan

2
00:00:03,430 --> 00:00:05,760
‫kepada Anda fitur yang sebenarnya kita miliki

3
00:00:05,760 --> 00:00:07,330
‫di semua bahasa pemrograman.

4
00:00:07,330 --> 00:00:09,870
‫Kami hanya memasukkan satu file dan dalam hal

5
00:00:09,870 --> 00:00:12,313
‫ini, satu template ke template lain.

6
00:00:13,770 --> 00:00:16,250
‫Jadi katakanlah kami ingin menjaga tata letak

7
00:00:16,250 --> 00:00:18,540
‫dasar kami di sini benar-benar bersih tanpa

8
00:00:18,540 --> 00:00:20,720
‫konten apa pun di dalamnya.

9
00:00:20,720 --> 00:00:23,460
‫Jadi yang akan kita lakukan adalah memasukkan semua kode

10
00:00:23,460 --> 00:00:26,180
‫untuk header ke dalam satu file header.

11
00:00:26,180 --> 00:00:29,040
‫Dan kemudian sertakan file itu di sini.

12
00:00:29,040 --> 00:00:31,470
‫Dan hal yang sama juga untuk footer.

13
00:00:31,470 --> 00:00:33,990
‫Jadi, konten kita diblokir, jadi pada

14
00:00:33,990 --> 00:00:35,670
‫dasarnya tubuh kita di

15
00:00:35,670 --> 00:00:39,650
‫sini menjadi elemen yang sangat bersih ini hanya dengan menyertakan ini

16
00:00:39,650 --> 00:00:42,780
‫dan kemudian konten ini di sini untuk saat ini.

17
00:00:42,780 --> 00:00:43,613
‫Oke.

18
00:00:43,613 --> 00:00:47,633
‫Jadi sekali lagi, mari buat file baru di sini untuk header.

19
00:00:49,950 --> 00:00:51,000
‫dot pug

20
00:00:51,000 --> 00:00:54,640
‫Dan sebenarnya saya suka mengawali file-file ini yang hanya

21
00:00:54,640 --> 00:00:57,083
‫berfungsi untuk disertakan dengan garis bawah.

22
00:00:58,060 --> 00:01:00,710
‫Dan jika Anda familiar dengan sesuatu seperti

23
00:01:00,710 --> 00:01:03,423
‫Sass, maka itu juga akan familiar bagi Anda.

24
00:01:04,310 --> 00:01:08,400
‫Oke, jadi sekarang mari kita tambahkan dan tempel ini di

25
00:01:08,400 --> 00:01:10,110
‫sini, dan bukan kode

26
00:01:10,110 --> 00:01:13,740
‫ini, jadi saya kira saya lupa menyalinnya atau memotongnya.

27
00:01:13,740 --> 00:01:16,030
‫Dan kemudian tempel di sini.

28
00:01:16,030 --> 00:01:18,940
‫Dan sekarang lekukan ini semuanya salah di

29
00:01:18,940 --> 00:01:22,040
‫sini, karena sekarang kita memiliki tiga tingkat, seperti

30
00:01:22,040 --> 00:01:24,870
‫yang Anda lihat, jadi, satu, dua,

31
00:01:24,870 --> 00:01:28,520
‫tiga tingkat di mana kode ini seharusnya ada di sini.

32
00:01:28,520 --> 00:01:31,940
‫Oke, jadi sekarang kita perlu menambahkan dan memperbaikinya, tetapi apa yang

33
00:01:31,940 --> 00:01:35,250
‫sebenarnya dapat kita lakukan daripada melakukannya secara manual adalah dengan

34
00:01:35,250 --> 00:01:38,423
‫menggunakan ekstensi yang bagus yang berfungsi untuk kita.

35
00:01:39,400 --> 00:01:41,313
‫Jadi di sini, di tab ekstensi

36
00:01:42,280 --> 00:01:44,930
‫saya, izinkan saya menunjukkan kepada Anda ekstensi yang saya maksud.

37
00:01:44,930 --> 00:01:48,380
‫Dan itu disebut Pug mempercantik.

38
00:01:48,380 --> 00:01:53,330
‫Oke, jadi lanjutkan dan instal paket ini, oke.

39
00:01:53,330 --> 00:01:55,210
‫Dan setelah Anda

40
00:01:55,210 --> 00:01:57,350
‫selesai melakukannya, Anda cukup memilih

41
00:01:57,350 --> 00:02:00,970
‫semua kode di sini dengan menekan command-A dan kemudian

42
00:02:00,970 --> 00:02:03,810
‫membuat perintah VS Code dengan mengatakan command-shift-P.

43
00:02:03,810 --> 00:02:06,310
‫Dan kemudian di sini, Anda menulis pug.

44
00:02:06,310 --> 00:02:08,800
‫Dan jadi ini kemudian akan mempercantik pesek.

45
00:02:08,800 --> 00:02:11,480
‫Dan Anda melihat bahwa Anda juga memiliki

46
00:02:11,480 --> 00:02:14,610
‫pintasan di sini dan saya tidak yakin apakah ini

47
00:02:14,610 --> 00:02:17,825
‫default, tetapi setidaknya dalam kasus saya, saya juga dapat menggunakan

48
00:02:17,825 --> 00:02:19,740
‫pintasan untuk mempercantik kode ini.

49
00:02:19,740 --> 00:02:21,910
‫Tapi bagaimanapun, dengan menulis pug,

50
00:02:21,910 --> 00:02:24,590
‫Anda harus mendapatkan pilihan ini di sini sekarang.

51
00:02:24,590 --> 00:02:27,290
‫Dan jika Anda kemudian menekan enter, itu akan,

52
00:02:27,290 --> 00:02:30,880
‫seperti yang Anda lihat, memperbaiki lekukan yang salah dalam file ini.

53
00:02:30,880 --> 00:02:32,230
‫Baiklah?

54
00:02:32,230 --> 00:02:34,800
‫Jadi simpan saja, tutup dan mari kita

55
00:02:36,450 --> 00:02:38,103
‫kembali ke sini sebenarnya.

56
00:02:39,220 --> 00:02:42,870
‫Dan sekarang yang perlu kita lakukan hanyalah mengatakan include _header.

57
00:02:46,297 --> 00:02:48,750
‫Dan hal yang sama untuk footer,

58
00:02:48,750 --> 00:02:52,170
‫jadi mari kita potong di sini, buat template baru...

59
00:02:54,826 --> 00:02:55,659
‫_footer

60
00:02:57,160 --> 00:02:58,320
‫paste pilih

61
00:02:58,320 --> 00:03:00,940
‫itu, command-shift-P atau mungkin di Windows

62
00:03:02,061 --> 00:03:04,270
‫itu control-shift-P dan kemudian sebenarnya

63
00:03:04,270 --> 00:03:06,460
‫yang terakhir digunakan akan muncul

64
00:03:06,460 --> 00:03:08,470
‫di sini di seleksi.

65
00:03:08,470 --> 00:03:12,043
‫Jadi, tekan kembali dan begitulah.

66
00:03:13,090 --> 00:03:14,763
‫Itu sudah diperbaiki sekarang juga.

67
00:03:16,330 --> 00:03:17,260
‫Termasuk...

68
00:03:19,130 --> 00:03:20,500
‫catatan kaki.

69
00:03:20,500 --> 00:03:23,200
‫Dan perhatikan bagaimana kita bahkan tidak perlu menentukan

70
00:03:23,200 --> 00:03:25,103
‫ekstensi dot pug lagi.

71
00:03:26,610 --> 00:03:29,610
‫Jadi, simpan dan ketika kita memuat

72
00:03:29,610 --> 00:03:32,800
‫ulang ini, itu akan terlihat sama persis.

73
00:03:32,800 --> 00:03:36,380
‫Yah, tidak juga, karena tombol-tombol ini di sini,

74
00:03:36,380 --> 00:03:38,860
‫agak bergeser ke bawah,

75
00:03:38,860 --> 00:03:41,900
‫jadi mereka meninggalkan bilah navigasi ini.

76
00:03:41,900 --> 00:03:45,560
‫Atau sebenarnya, header ini, jadi itu tidak benar,

77
00:03:45,560 --> 00:03:47,230
‫mungkin itu adalah

78
00:03:47,230 --> 00:03:50,990
‫beberapa masalah dengan indentasi otomatis ini di header.

79
00:03:50,990 --> 00:03:53,510
‫Dan ya, sebenarnya itu tidak benar

80
00:03:53,510 --> 00:03:56,523
‫karena semua ini seharusnya ada di dalam header.

81
00:03:59,880 --> 00:04:03,040
‫Jadi nav ini, div ini dan nav ini mereka semua

82
00:04:03,040 --> 00:04:05,180
‫harus berada pada level yang sama.

83
00:04:05,180 --> 00:04:07,030
‫Dan sekarang itu benar.

84
00:04:07,030 --> 00:04:09,623
‫Untuk memastikannya, mari kita periksa juga footernya.

85
00:04:10,786 --> 00:04:12,740
‫Tapi di sini, itu benar,

86
00:04:12,740 --> 00:04:15,690
‫jadi saya tidak yakin apa yang salah dalam situasi ini.

87
00:04:17,010 --> 00:04:19,073
‫Tapi bagaimanapun, mari kita coba lagi sekarang.

88
00:04:20,560 --> 00:04:22,230
‫Dan jadi di sini kita pergi.

89
00:04:22,230 --> 00:04:26,100
‫Pokoknya itu hanya memasukkan beberapa file, satu ke

90
00:04:26,100 --> 00:04:27,283
‫yang lain.

91
00:04:28,382 --> 00:04:30,380
‫Di video berikutnya, kita akan melakukan

92
00:04:30,380 --> 00:04:35,120
‫sesuatu yang sedikit mirip, tetapi pada saat yang sama jauh lebih kompleks dan juga lebih bermanfaat.

93
00:04:35,120 --> 00:04:37,580
‫Jadi jika Anda penasaran dengan apa itu, maka

94
00:04:37,580 --> 00:04:39,963
‫bergabunglah dengan saya di yang berikutnya.