1
00:00:01,010 --> 00:00:03,430
‫Instrutor: Nesta aula, quero apenas mostrar rapidamente

2
00:00:03,430 --> 00:00:05,760
‫um recurso que realmente temos em todas

3
00:00:05,760 --> 00:00:07,330
‫as linguagens de programação.

4
00:00:07,330 --> 00:00:09,870
‫Devemos incluir apenas um arquivo e, neste

5
00:00:09,870 --> 00:00:12,313
‫caso, um modelo em outro modelo.

6
00:00:13,770 --> 00:00:16,250
‫Então, digamos que queremos manter nosso

7
00:00:16,250 --> 00:00:18,540
‫layout básico aqui realmente limpo,

8
00:00:18,540 --> 00:00:20,720
‫sem nenhum conteúdo nele.

9
00:00:20,720 --> 00:00:23,460
‫E então o que vamos fazer é colocar todo o

10
00:00:23,460 --> 00:00:26,180
‫código do cabeçalho em um arquivo de cabeçalho.

11
00:00:26,180 --> 00:00:29,040
‫E então inclua esse arquivo aqui.

12
00:00:29,040 --> 00:00:31,470
‫E o mesmo também para o rodapé.

13
00:00:31,470 --> 00:00:33,990
‫E então, nosso bloco de conteúdo,

14
00:00:33,990 --> 00:00:35,670
‫então basicamente nosso corpo

15
00:00:35,670 --> 00:00:39,650
‫aqui se torna este elemento muito limpo apenas com estes

16
00:00:39,650 --> 00:00:42,780
‫includes e então este conteúdo aqui por enquanto.

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

18
00:00:43,613 --> 00:00:47,633
‫Então, novamente, vamos criar um novo arquivo aqui para o cabeçalho.

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

20
00:00:51,000 --> 00:00:54,640
‫E na verdade eu gosto de prefixar esses arquivos que só

21
00:00:54,640 --> 00:00:57,083
‫servem para serem incluídos com um sublinhado.

22
00:00:58,060 --> 00:01:00,710
‫E se você estiver familiarizado com algo

23
00:01:00,710 --> 00:01:03,423
‫como Sass, isso também será familiar para você.

24
00:01:04,310 --> 00:01:08,400
‫Ok, agora vamos adicionar e colar isso aqui, e

25
00:01:08,400 --> 00:01:10,110
‫não este código,

26
00:01:10,110 --> 00:01:13,740
‫então acho que esqueci de copiar ou cortar.

27
00:01:13,740 --> 00:01:16,030
‫E então cole aqui.

28
00:01:16,030 --> 00:01:18,940
‫E agora esse recuo está todo errado

29
00:01:18,940 --> 00:01:22,040
‫aqui, porque agora temos três níveis, como você

30
00:01:22,040 --> 00:01:24,870
‫pode ver, então, um, dois,

31
00:01:24,870 --> 00:01:28,520
‫três níveis onde esse código deveria realmente estar aqui.

32
00:01:28,520 --> 00:01:31,940
‫Ok, e agora precisamos adicionar e corrigir isso, mas o que

33
00:01:31,940 --> 00:01:35,250
‫podemos realmente fazer em vez de fazer manualmente é usar

34
00:01:35,250 --> 00:01:38,423
‫uma extensão agradável que faz esse trabalho para nós.

35
00:01:39,400 --> 00:01:41,313
‫Então, aqui na minha guia

36
00:01:42,280 --> 00:01:44,930
‫de extensão, deixe-me mostrar a extensão que quero dizer.

37
00:01:44,930 --> 00:01:48,380
‫E isso é chamado de embelezamento de Pug.

38
00:01:48,380 --> 00:01:53,330
‫Ok, então vá em frente e instale este pacote, certo.

39
00:01:53,330 --> 00:01:55,210
‫E depois de fazer

40
00:01:55,210 --> 00:01:57,350
‫isso, você pode simplesmente selecionar

41
00:01:57,350 --> 00:02:00,970
‫todo o código aqui pressionando command-A e, em seguida,

42
00:02:00,970 --> 00:02:03,810
‫criar um comando VS Code dizendo command-shift-P.

43
00:02:03,810 --> 00:02:06,310
‫E aqui, você escreve pug.

44
00:02:06,310 --> 00:02:08,800
‫E isso vai embelezar o pug.

45
00:02:08,800 --> 00:02:11,480
‫E você vê que você também tem o atalho

46
00:02:11,480 --> 00:02:14,610
‫aqui e não tenho certeza se este é o padrão,

47
00:02:14,610 --> 00:02:17,825
‫mas pelo menos no meu caso posso usar o atalho

48
00:02:17,825 --> 00:02:19,740
‫também para embelezar este código.

49
00:02:19,740 --> 00:02:21,910
‫Mas de qualquer forma, ao escrever

50
00:02:21,910 --> 00:02:24,590
‫pug, você deve obter esta seleção aqui agora.

51
00:02:24,590 --> 00:02:27,290
‫E se você clicar em Enter, ele irá,

52
00:02:27,290 --> 00:02:30,880
‫como você pode ver, corrigir o recuo que estava errado neste arquivo.

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

54
00:02:32,230 --> 00:02:34,800
‫Então salve-o, feche-o e vamos voltar

55
00:02:36,450 --> 00:02:38,103
‫aqui na verdade.

56
00:02:39,220 --> 00:02:42,870
‫E agora tudo o que precisamos fazer é dizer include _header.

57
00:02:46,297 --> 00:02:48,750
‫E o mesmo para o

58
00:02:48,750 --> 00:02:52,170
‫rodapé, vamos recortar aqui, criar um novo template ...

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

60
00:02:57,160 --> 00:02:58,320
‫cole selecione-o,

61
00:02:58,320 --> 00:03:00,940
‫command-shift-P ou provavelmente no Windows isso

62
00:03:02,061 --> 00:03:04,270
‫é control-shift-P e então na

63
00:03:04,270 --> 00:03:06,460
‫verdade o último que foi

64
00:03:06,460 --> 00:03:08,470
‫usado aparecerá aqui na seleção.

65
00:03:08,470 --> 00:03:12,043
‫Então, clique em voltar e pronto.

66
00:03:13,090 --> 00:03:14,763
‫Isso também está corrigido agora.

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

68
00:03:19,130 --> 00:03:20,500
‫rodapé.

69
00:03:20,500 --> 00:03:23,200
‫E observe como nem mesmo precisamos especificar a

70
00:03:23,200 --> 00:03:25,103
‫extensão dot pug novamente.

71
00:03:26,610 --> 00:03:29,610
‫Portanto, salve-o e, quando recarregarmos,

72
00:03:29,610 --> 00:03:32,800
‫ele deverá ter a mesma aparência.

73
00:03:32,800 --> 00:03:36,380
‫Bem, não realmente, porque esses botões aqui, eles meio

74
00:03:36,380 --> 00:03:38,860
‫que se deslocaram para baixo,

75
00:03:38,860 --> 00:03:41,900
‫então eles deixaram esta barra de navegação.

76
00:03:41,900 --> 00:03:45,560
‫Ou, na verdade, este cabeçalho, então isso não está

77
00:03:45,560 --> 00:03:47,230
‫correto, talvez seja

78
00:03:47,230 --> 00:03:50,990
‫algum problema com esse recuo automático aqui no cabeçalho.

79
00:03:50,990 --> 00:03:53,510
‫E sim, na verdade isso não está

80
00:03:53,510 --> 00:03:56,523
‫correto porque tudo isso deve estar dentro do cabeçalho.

81
00:03:59,880 --> 00:04:03,040
‫Portanto, este nav, este div e este nav devem

82
00:04:03,040 --> 00:04:05,180
‫estar todos no mesmo nível.

83
00:04:05,180 --> 00:04:07,030
‫E agora está correto.

84
00:04:07,030 --> 00:04:09,623
‫Só para ter certeza, vamos verificar também o rodapé.

85
00:04:10,786 --> 00:04:12,740
‫Mas aqui, ele realmente está correto,

86
00:04:12,740 --> 00:04:15,690
‫então não tenho certeza do que realmente deu errado nesta situação.

87
00:04:17,010 --> 00:04:19,073
‫De qualquer forma, vamos tentar de novo agora.

88
00:04:20,560 --> 00:04:22,230
‫E aqui vamos nós.

89
00:04:22,230 --> 00:04:26,100
‫De qualquer forma, isso é simplesmente incluir alguns arquivos, uns

90
00:04:26,100 --> 00:04:27,283
‫nos outros.

91
00:04:28,382 --> 00:04:30,380
‫No próximo vídeo, faremos algo

92
00:04:30,380 --> 00:04:35,120
‫um pouco parecido, mas ao mesmo tempo mais complexo e também mais útil.

93
00:04:35,120 --> 00:04:37,580
‫Então, se você está curioso para saber o que

94
00:04:37,580 --> 00:04:39,963
‫é isso, junte-se a mim na próxima.