1
00:00:01,010 --> 00:00:03,430
‫Istruttore: In questa lezione, voglio mostrarti molto

2
00:00:03,430 --> 00:00:05,760
‫velocemente una caratteristica che abbiamo in tutti

3
00:00:05,760 --> 00:00:07,330
‫i linguaggi di programmazione.

4
00:00:07,330 --> 00:00:09,870
‫Dobbiamo solo includere un file e, in questo

5
00:00:09,870 --> 00:00:12,313
‫caso, un modello in un altro modello.

6
00:00:13,770 --> 00:00:16,250
‫Quindi diciamo che volevamo mantenere il

7
00:00:16,250 --> 00:00:18,540
‫nostro layout di base qui davvero

8
00:00:18,540 --> 00:00:20,720
‫pulito senza alcun contenuto.

9
00:00:20,720 --> 00:00:23,460
‫Quindi quello che faremo è mettere tutto il codice

10
00:00:23,460 --> 00:00:26,180
‫per l'intestazione in un file di intestazione.

11
00:00:26,180 --> 00:00:29,040
‫E poi includi quel file proprio qui.

12
00:00:29,040 --> 00:00:31,470
‫E lo stesso anche per il footer.

13
00:00:31,470 --> 00:00:33,990
‫E quindi, il nostro blocco di

14
00:00:33,990 --> 00:00:35,670
‫contenuto, quindi fondamentalmente il

15
00:00:35,670 --> 00:00:39,650
‫nostro corpo qui diventa questo elemento molto pulito solo con questi

16
00:00:39,650 --> 00:00:42,780
‫include e poi questo contenuto qui per ora.

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

18
00:00:43,613 --> 00:00:47,633
‫Quindi, di nuovo, creiamo un nuovo file qui per l'intestazione.

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

20
00:00:51,000 --> 00:00:54,640
‫E in realtà mi piace anteporre questi file che servono solo

21
00:00:54,640 --> 00:00:57,083
‫per essere inclusi con un trattino basso.

22
00:00:58,060 --> 00:01:00,710
‫E se hai familiarità con qualcosa

23
00:01:00,710 --> 00:01:03,423
‫come Sass, allora sarà familiare anche a te.

24
00:01:04,310 --> 00:01:08,400
‫Ok, ora aggiungiamo e incolliamo questo qui, e non questo

25
00:01:08,400 --> 00:01:10,110
‫codice, quindi immagino

26
00:01:10,110 --> 00:01:13,740
‫di aver dimenticato di copiarlo o di tagliarlo.

27
00:01:13,740 --> 00:01:16,030
‫E poi incollalo qui.

28
00:01:16,030 --> 00:01:18,940
‫E ora questo rientro è tutto sbagliato

29
00:01:18,940 --> 00:01:22,040
‫qui, perché ora abbiamo tipo tre livelli, come

30
00:01:22,040 --> 00:01:24,870
‫puoi vedere, quindi uno, due, tre

31
00:01:24,870 --> 00:01:28,520
‫livelli in cui questo codice dovrebbe effettivamente essere qui.

32
00:01:28,520 --> 00:01:31,940
‫Ok, quindi ora dobbiamo aggiungere e risolvere il problema, ma quello

33
00:01:31,940 --> 00:01:35,250
‫che possiamo effettivamente fare invece di farlo manualmente è usare

34
00:01:35,250 --> 00:01:38,423
‫una bella estensione che fa questo lavoro per noi.

35
00:01:39,400 --> 00:01:41,313
‫Quindi qui nella mia scheda

36
00:01:42,280 --> 00:01:44,930
‫dell'estensione, lascia che ti mostri l'estensione che intendo.

37
00:01:44,930 --> 00:01:48,380
‫E questo si chiama Pug beautify.

38
00:01:48,380 --> 00:01:53,330
‫Ok, allora vai avanti e installa questo pacchetto, va bene.

39
00:01:53,330 --> 00:01:55,210
‫E una volta

40
00:01:55,210 --> 00:01:57,350
‫fatto, puoi semplicemente selezionare tutto

41
00:01:57,350 --> 00:02:00,970
‫il codice qui premendo command-A e quindi creare

42
00:02:00,970 --> 00:02:03,810
‫un comando VS Code dicendo command-shift-P.

43
00:02:03,810 --> 00:02:06,310
‫E poi qui dentro, scrivi carlino.

44
00:02:06,310 --> 00:02:08,800
‫E così questo poi abbellirà il carlino.

45
00:02:08,800 --> 00:02:11,480
‫E vedi che hai anche la scorciatoia

46
00:02:11,480 --> 00:02:14,610
‫qui e non sono sicuro che questa sia quella

47
00:02:14,610 --> 00:02:17,825
‫predefinita ma almeno nel mio caso posso usare la scorciatoia

48
00:02:17,825 --> 00:02:19,740
‫anche per abbellire questo codice.

49
00:02:19,740 --> 00:02:21,910
‫Ma comunque, scrivendo pug,

50
00:02:21,910 --> 00:02:24,590
‫dovresti ottenere questa selezione qui ora.

51
00:02:24,590 --> 00:02:27,290
‫E se poi premi invio, come

52
00:02:27,290 --> 00:02:30,880
‫vedi, risolverà il rientro che era sbagliato in questo file.

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

54
00:02:32,230 --> 00:02:34,800
‫Quindi salvalo, chiudilo e torniamo

55
00:02:36,450 --> 00:02:38,103
‫qui in realtà.

56
00:02:39,220 --> 00:02:42,870
‫E ora tutto ciò che dobbiamo fare è dire include _header.

57
00:02:46,297 --> 00:02:48,750
‫E lo stesso per il piè

58
00:02:48,750 --> 00:02:52,170
‫di pagina, quindi tagliamo qui, creiamo un nuovo modello...

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

60
00:02:57,160 --> 00:02:58,320
‫incollalo selezionalo,

61
00:02:58,320 --> 00:03:00,940
‫command-shift-P o probabilmente in Windows che

62
00:03:02,061 --> 00:03:04,270
‫è control-shift-P e poi in

63
00:03:04,270 --> 00:03:06,460
‫realtà l'ultimo che è stato

64
00:03:06,460 --> 00:03:08,470
‫usato apparirà qui alla selezione.

65
00:03:08,470 --> 00:03:12,043
‫Quindi, premi Invio ed ecco fatto.

66
00:03:13,090 --> 00:03:14,763
‫Anche questo è stato risolto.

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

68
00:03:19,130 --> 00:03:20,500
‫piè di pagina.

69
00:03:20,500 --> 00:03:23,200
‫E nota come non abbiamo nemmeno bisogno di specificare

70
00:03:23,200 --> 00:03:25,103
‫di nuovo l'estensione dot pug.

71
00:03:26,610 --> 00:03:29,610
‫Quindi salvalo e quando lo

72
00:03:29,610 --> 00:03:32,800
‫ricarichiamo dovrebbe avere lo stesso identico aspetto.

73
00:03:32,800 --> 00:03:36,380
‫Beh, non proprio, perché questi pulsanti qui si

74
00:03:36,380 --> 00:03:38,860
‫sono spostati verso il basso,

75
00:03:38,860 --> 00:03:41,900
‫quindi hanno lasciato questa barra di navigazione.

76
00:03:41,900 --> 00:03:45,560
‫O in realtà, questa intestazione, quindi non è

77
00:03:45,560 --> 00:03:47,230
‫corretto, forse c'era

78
00:03:47,230 --> 00:03:50,990
‫qualche problema con questo rientro automatico qui nell'intestazione.

79
00:03:50,990 --> 00:03:53,510
‫E sì, in realtà non è

80
00:03:53,510 --> 00:03:56,523
‫corretto perché tutto questo dovrebbe essere all'interno dell'intestazione.

81
00:03:59,880 --> 00:04:03,040
‫Quindi questo nav, questo div e questo nav dovrebbero

82
00:04:03,040 --> 00:04:05,180
‫essere tutti sullo stesso livello.

83
00:04:05,180 --> 00:04:07,030
‫E quindi ora è corretto.

84
00:04:07,030 --> 00:04:09,623
‫Giusto per sicurezza, controlliamo anche il piè di pagina.

85
00:04:10,786 --> 00:04:12,740
‫Ma qui, in realtà è corretto, quindi

86
00:04:12,740 --> 00:04:15,690
‫non sono sicuro di cosa sia effettivamente andato storto in questa situazione.

87
00:04:17,010 --> 00:04:19,073
‫Ma comunque, proviamoci di nuovo adesso.

88
00:04:20,560 --> 00:04:22,230
‫E quindi eccoci qui.

89
00:04:22,230 --> 00:04:26,100
‫Comunque questo è semplicemente includere alcuni file,

90
00:04:26,100 --> 00:04:27,283
‫uno nell'altro.

91
00:04:28,382 --> 00:04:30,380
‫Nel prossimo video, poi, faremo qualcosa

92
00:04:30,380 --> 00:04:35,120
‫di un po' simile, ma allo stesso tempo molto più complesso e anche più utile.

93
00:04:35,120 --> 00:04:37,580
‫Quindi, se sei curioso di sapere di cosa

94
00:04:37,580 --> 00:04:39,963
‫si tratta, unisciti a me nel prossimo.