1
00:00:01,010 --> 00:00:03,430
‫Instructor: En esta conferencia, quiero mostrarle muy rápidamente

2
00:00:03,430 --> 00:00:05,760
‫una característica que realmente tenemos en todos

3
00:00:05,760 --> 00:00:07,330
‫los lenguajes de programación.

4
00:00:07,330 --> 00:00:09,870
‫Solo debemos incluir un archivo y, en este

5
00:00:09,870 --> 00:00:12,313
‫caso, una plantilla en otra plantilla.

6
00:00:13,770 --> 00:00:16,250
‫Entonces, digamos que queríamos mantener

7
00:00:16,250 --> 00:00:18,540
‫nuestro diseño base aquí realmente

8
00:00:18,540 --> 00:00:20,720
‫limpio sin ningún contenido.

9
00:00:20,720 --> 00:00:23,460
‫Entonces, lo que haremos es poner todo el código

10
00:00:23,460 --> 00:00:26,180
‫del encabezado en un archivo de encabezado.

11
00:00:26,180 --> 00:00:29,040
‫Y luego incluye ese archivo aquí mismo.

12
00:00:29,040 --> 00:00:31,470
‫Y lo mismo también para el pie de página.

13
00:00:31,470 --> 00:00:33,990
‫Y entonces, nuestro bloque de contenido,

14
00:00:33,990 --> 00:00:35,670
‫básicamente nuestro cuerpo aquí

15
00:00:35,670 --> 00:00:39,650
‫se convierte en este elemento muy limpio solo con estas

16
00:00:39,650 --> 00:00:42,780
‫inclusiones y luego este contenido aquí por ahora.

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

18
00:00:43,613 --> 00:00:47,633
‫Entonces, nuevamente, creemos un nuevo archivo aquí para el encabezado.

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

20
00:00:51,000 --> 00:00:54,640
‫Y de hecho me gusta prefijar estos archivos que solo sirven

21
00:00:54,640 --> 00:00:57,083
‫para ser incluidos con un guión bajo.

22
00:00:58,060 --> 00:01:00,710
‫Y si está familiarizado con algo

23
00:01:00,710 --> 00:01:03,423
‫como Sass, entonces eso también le resultará familiar.

24
00:01:04,310 --> 00:01:08,400
‫Bien, ahora agreguemos y peguemos esto aquí, y no

25
00:01:08,400 --> 00:01:10,110
‫este código, así

26
00:01:10,110 --> 00:01:13,740
‫que supongo que olvidé copiarlo o cortarlo.

27
00:01:13,740 --> 00:01:16,030
‫Y luego pégalo aquí.

28
00:01:16,030 --> 00:01:18,940
‫Y ahora esta sangría está mal aquí,

29
00:01:18,940 --> 00:01:22,040
‫porque ahora tenemos como tres niveles, como

30
00:01:22,040 --> 00:01:24,870
‫pueden ver, entonces, uno, dos,

31
00:01:24,870 --> 00:01:28,520
‫tres niveles donde este código debería estar aquí.

32
00:01:28,520 --> 00:01:31,940
‫Bien, y ahora tenemos que agregar y arreglar eso, pero lo

33
00:01:31,940 --> 00:01:35,250
‫que realmente podemos hacer en lugar de hacerlo manualmente es usar

34
00:01:35,250 --> 00:01:38,423
‫una extensión agradable que haga este trabajo por nosotros.

35
00:01:39,400 --> 00:01:41,313
‫Así que aquí, en la pestaña de

36
00:01:42,280 --> 00:01:44,930
‫mi extensión, déjame mostrarte la extensión a la que me refiero.

37
00:01:44,930 --> 00:01:48,380
‫Y eso se llama Pug embellecer.

38
00:01:48,380 --> 00:01:53,330
‫De acuerdo, adelante e instale este paquete, está bien.

39
00:01:53,330 --> 00:01:55,210
‫Y una vez que

40
00:01:55,210 --> 00:01:57,350
‫haya hecho eso, puede simplemente

41
00:01:57,350 --> 00:02:00,970
‫seleccionar todo el código aquí presionando el comando-A y luego

42
00:02:00,970 --> 00:02:03,810
‫crear un comando de Código VS diciendo comando-shift-P.

43
00:02:03,810 --> 00:02:06,310
‫Y luego aquí, escribe pug.

44
00:02:06,310 --> 00:02:08,800
‫Y entonces esto embellecerá el barro amasado.

45
00:02:08,800 --> 00:02:11,480
‫Y ves que también tienes el atajo aquí

46
00:02:11,480 --> 00:02:14,610
‫y no estoy seguro si este es el predeterminado,

47
00:02:14,610 --> 00:02:17,825
‫pero al menos en mi caso puedo usar el atajo

48
00:02:17,825 --> 00:02:19,740
‫también para embellecer este código.

49
00:02:19,740 --> 00:02:21,910
‫Pero de todos modos, al

50
00:02:21,910 --> 00:02:24,590
‫escribir pug, debería obtener esta selección aquí ahora.

51
00:02:24,590 --> 00:02:27,290
‫Y si luego presiona enter, como puede

52
00:02:27,290 --> 00:02:30,880
‫ver, arreglará la sangría que estaba mal en este archivo.

53
00:02:30,880 --> 00:02:32,230
‫¿Está bien?

54
00:02:32,230 --> 00:02:34,800
‫Así que déjelo guardar, ciérrelo

55
00:02:36,450 --> 00:02:38,103
‫y regresemos aquí.

56
00:02:39,220 --> 00:02:42,870
‫Y ahora todo lo que tenemos que hacer es decir include _header.

57
00:02:46,297 --> 00:02:48,750
‫Y lo mismo para el pie de

58
00:02:48,750 --> 00:02:52,170
‫página, así que cortémoslo aquí, creemos una nueva plantilla ...

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

60
00:02:57,160 --> 00:02:58,320
‫péguelo, selecciónelo, command-shift-P

61
00:02:58,320 --> 00:03:00,940
‫o probablemente en Windows que es

62
00:03:02,061 --> 00:03:04,270
‫control-shift-P y luego, en realidad,

63
00:03:04,270 --> 00:03:06,460
‫el último que se usó

64
00:03:06,460 --> 00:03:08,470
‫aparecerá aquí en la selección.

65
00:03:08,470 --> 00:03:12,043
‫Entonces, presiona regresar y listo.

66
00:03:13,090 --> 00:03:14,763
‫Eso también está arreglado ahora.

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

68
00:03:19,130 --> 00:03:20,500
‫pie de página.

69
00:03:20,500 --> 00:03:23,200
‫Y observe que ni siquiera necesitamos volver a

70
00:03:23,200 --> 00:03:25,103
‫especificar la extensión dot pug.

71
00:03:26,610 --> 00:03:29,610
‫Así que déjelo guardar y cuando

72
00:03:29,610 --> 00:03:32,800
‫lo recarguemos ahora debería verse exactamente igual.

73
00:03:32,800 --> 00:03:36,380
‫Bueno, en realidad no, porque estos botones de

74
00:03:36,380 --> 00:03:38,860
‫aquí, como que se desplazaron

75
00:03:38,860 --> 00:03:41,900
‫hacia abajo, dejaron esta barra de navegación.

76
00:03:41,900 --> 00:03:45,560
‫O en realidad, este encabezado, así que eso no es

77
00:03:45,560 --> 00:03:47,230
‫correcto, tal vez fue

78
00:03:47,230 --> 00:03:50,990
‫algún problema con esta sangría automática aquí en el encabezado.

79
00:03:50,990 --> 00:03:53,510
‫Y sí, en realidad eso no es

80
00:03:53,510 --> 00:03:56,523
‫correcto porque todo esto debería estar dentro del encabezado.

81
00:03:59,880 --> 00:04:03,040
‫Entonces, esta navegación, este div y esta navegación deberían

82
00:04:03,040 --> 00:04:05,180
‫estar todos al mismo nivel.

83
00:04:05,180 --> 00:04:07,030
‫Y ahora eso es correcto.

84
00:04:07,030 --> 00:04:09,623
‫Solo para asegurarnos, también revisemos el pie de página.

85
00:04:10,786 --> 00:04:12,740
‫Pero aquí, en realidad es correcto, por

86
00:04:12,740 --> 00:04:15,690
‫lo que no estoy seguro de qué salió mal en esta situación.

87
00:04:17,010 --> 00:04:19,073
‫Pero de todos modos, intentémoslo de nuevo ahora.

88
00:04:20,560 --> 00:04:22,230
‫Y aquí vamos.

89
00:04:22,230 --> 00:04:26,100
‫De todos modos eso es simplemente incluir algunos archivos, uno

90
00:04:26,100 --> 00:04:27,283
‫dentro del otro.

91
00:04:28,382 --> 00:04:30,380
‫En el siguiente video, haremos

92
00:04:30,380 --> 00:04:35,120
‫algo un poco similar, pero al mismo tiempo más complejo y también más útil.

93
00:04:35,120 --> 00:04:37,580
‫Entonces, si tienes curiosidad sobre qué es eso,

94
00:04:37,580 --> 00:04:39,963
‫únete a mí en el siguiente.