Crea sitios web rápidos con el generador de sitios estáticos y el correa de arranque 5 (introducción)

1. Introducción: Hola, me llamo Shawn, y llevo más de 10 años enseñando diseño web y desarrollando sitios web . Y en el último par de años me he especializado en diseño web estático. Muchas personas que son nuevas en el diseño web por sí mismas aprendiendo sobre los conceptos básicos de los sistemas de gestión de contenidos como WordPress y Joomla. Tendré que encontrar que necesitan pagar por costosos plugins y temas. Al bajar por esa ruta, también te resultará difícil desarrollar temas y plantillas. También terminarás con un sitio web lento y muchas vulnerabilidades potenciales de seguridad. Esto creará una mala experiencia del cliente, pero también te dará verter clasificaciones de motores de búsqueda debido a velocidades de carga de página lentas. Sitios web estáticos y Hugo te ofrecen sitios web rápidos y seguros que son fáciles de crear, baratos de hospedar, y proporcionan el potencial para buenos rankings en motores de búsqueda. Dado que los algoritmos SEO prefieren sitios web que se cargan rápidamente, este curso hace que empezar con el diseño web estático sea fácil. Te guía al proceso de configuración de tu primer sitio estadounidense y también te introduce en HTML y CSS usando Bootstrap, debes tomar esta clase si eres nuevo en el diseño web estático. También estaremos viendo los conceptos básicos de Bootstrap. Por lo que no necesitas tener mucha experiencia con HTML o CSS. El proyecto para esta clase está construyendo un sitio web estático básico usando Hugo y Bootstrap junto con algún JavaScript básico. Espero que disfruten de este curso tanto como disfruté creándolo. Nos vemos en la primera lección. 2. Comencemos: Te voy a mostrar todo el software que necesitas para este curso en el siguiente video, este video se trata de mostrarte cómo acceder a cualquier archivo que necesites. Entonces lo primero que necesitarás por unas lecciones de tiempo es algunas imágenes y puedes descargarlas aquí desde un archivo zip en la sección de recursos. Lo único que necesitas es una copia de los archivos terminados para cada lección. He dejado un enlace aquí al repositorio de GitHub. Y una vez que estés en el repositorio de GitHub, tienes que elegir la sucursal que requieres para la lección particular en la que estás trabajando. Y todas las lecciones tienen sucursales asociadas a ellas. Después de haber elegido la sucursal, hay un botón de código y puedes descargar un archivo zip. Esa es la forma más fácil de hacerlo. Si decides clonar con una utilidad get CLI o un escritorio de GitHub, asegúrate de eliminar la carpeta dot git. Pero sí te recomiendo encarecidamente que acabes de presionar Download Zip, agarrar esa carpeta, y luego puedes revisar mi versión del código para problemas-resolver cualquier problema que pueda surgir de otra manera, solo envíame un mensaje en el sección de discusión. 3. Instalar HUGO y software requerido: Bienvenido a la primera lección. No sólo vamos a estar instalando Hugo, sino todo el software amarillo que necesitas para poder desarrollar sitios web con Hugo. Al finalizar esta lección, podrás instalar el siguiente software en Windows, Mac o Linux. En primer lugar, NodeJS. Y también estarás instalando chocolate al mismo tiempo si estás usando Windows. Así que cuidado con cuidado para eso. La interfaz de línea de comandos de Git. Estarás instalando Homebrew si estás usando Mac o Linux, entonces estará instalando Hugo e irá Lang a través de chocolate o homebrew, dependiendo del sistema que estés usando. Código Visual Studio. Y también GitHub Desktop, que es un software opcional que puedes instalar y no está disponible en Linux para sí hace que sea mucho más fácil para los principiantes. Todos los enlaces para estos paquetes de software se pueden encontrar en la sección de recursos a continuación. Lo primero que tenemos que hacer es instalar Visual Studio Code. Y la razón por la que hacemos eso primero es porque en el siguiente paso vamos a estar instalando puerta. Y dentro del instalador git, vamos a elegir Visual Studio Code como nuestro editor de código preferido. Quién encontró este enlace a continuación en la sección de recursos para la página de descarga de Visual Studio Code. Hay descargas para Windows, Linux y Mac. Y Linux. Tienes que asegurarte de que estás tratando el tipo correcto de instalador. Ahora voy a pasar por los pasos que implica instalar Visual Studio Code en Windows, pero las opciones son muy iguales en Linux y Mac. Me gusta tener la acción abierta con código para el menú contextual del directorio. Por lo que puedo abrir toda una carpeta de código arriba y también el código de ancho abierto para los menús contextuales de otoño. Puede abrir archivo individual en Código VS. Ahora necesitamos instalar la interfaz de línea de comandos de Git. Llega al sistema de comprometer o subir tu progreso mientras escribes código en un servidor remoto. Y hace un seguimiento de cada cambio que hagas siempre cuando cometas tus cambios a medida que los hagas. Si estás ejecutando Linux o Mac, es realmente importante que instales bien en esta etapa porque es necesario para Homebrew o brew. Enlace a continuación para la página de descargas para la interfaz de línea de comandos de Git, Empecemos con Linux. Ahora. Cada distribución diferente de Linux tiene su propio instalador de paquetes. El más común es el Administrador de paquetes de Debian Ubuntu. Tenemos el código aquí. Probablemente tendrás que escribir pseudo antes de estos comandos que tienes permiso para instalar el software. La mayoría de la cuenta de usuario no te permitirá instalar el software. Aquí hay un montón de diferentes ejemplos de diferentes sistemas y el código en particular para que puedas instalarlo con su gestor de paquetes. Si estás en Mac, es un poco más fácil. Aquí sí dice usar brew, brew, homebrew todo elabora tiende a depender del propio Git. Y si no te has almacenado, podrías tener algunos problemas para instalar Homebrew en esta etapa. Por lo que puedo recomendar. Y he dejado el enlace de esta página a continuación. No obstante, es bastante simple. Si estás en Mac OS 10.9 o superior, que es una adición de Maverik. Tendríamos que hacer es ejecutar el comando GIT en la terminal. Si no te has instalado, en realidad se instalará automáticamente cuando termines de instalarlo para verificar que se haya instalado escribiendo GIT space dash, versión dash. Y si se ha instalado, te dirá qué versión tienes. Si estás en Windows, es un caso de descargar el instalador y ejecutar manualmente el proceso. Enlaces a continuación. Y ahora voy a pasar por el proceso de instalación de Windows. Voy a desmarcar, obtener GUI y obtener la integración tímido del Explorador de Windows. Elija Visual Studio Code. El editor de texto predeterminado. Voy a dejar obtener, decidir el nombre predeterminado de la sucursal. Voy a permitir que se ejecute desde la línea de comandos, pero también desde software de terceros. Voy a elegir la opción para usar consigue propio paquete OpenSSH. Utilizamos la biblioteca OpenSSL. Voy a echar un vistazo como 0s y cometer terminaciones de césped de estilo único. Algunas personas prefieren pagar como estilo Windows. Compromete un estilo único. Prefiero el checkout tan fácil, que suele ser el estilo único. No tuve ningún conflicto en VScode. Usa la consola predeterminada de Windows, deja el comportamiento predeterminado git pull y usa el núcleo Git Credential Manager. Y dejaré la configuración predeterminada a la pantalla para la moda de otoño y enlaces simbólicos. Con el fin de habilitar cualquiera de las características. Si eres un Windows, puedes omitir este paso. Pero ahora vamos a instalar Homebrew, y eso es para Mac o Linux. Y Homebrew es un gestor de paquetes que te permite instalar otro software que vamos a usar en este tutorial. Vamos a enlazar para el sitio web cervecero. Es brew.sh TSH. Una vez que estás en la página de inicio, tienen un script aquí, y funciona tanto en Linux como en Mac. Entonces tienes que, en primer lugar , copiar ese guión. Y luego te mostraré la instalación en Linux si eres Mac, es exactamente el mismo proceso. Mi máquina Linux, voy a pegar en ese comando. Recuerda que debes tener almacenado, que es lo que hicimos en el paso anterior. Y luego golpeó Enter. Entonces hay que confirmarlo. Compruebe que los cerveceros instalados correctamente. Se puede utilizar el comando brew. Doctor. Como se puede ver, parece que la cerveza no está en el camino. Fijando eso. Voy a copiar y pegar en un comando y lo dejaré en la sección de resultados para usted a continuación. Y estos deberían agregar brew al archivo de path shells. Vamos a darle un tipo ahora. Ve a Bruce trabajando. Así que ahora que has instalado brew, si eres usuario de Linux o Mac, ahora estás listo para instalar Node.js. Si tu usuario de Windows, no necesitas cerveza, pero estarás instalando trochlear como parte de este proceso. Así que asegúrate de prestar una atención muy cuidadosa a los pasos. El siguiente enlace a esta dirección. Y es para instalar Node.js con gestores de paquetes. Si bajas a macOS, hay dos opciones que puedes usar curl, que es un script bastante largo. Quieres copiarlo y pegarlo, eso está bien. Pero la otra opción es usar Homebrew, que ya deberías haber instalado. Y tenemos que hacer es tipo en brew install Node. Y te guiará a través del proceso. Si estás en Linux, hay muchas opciones diferentes Él, dependiendo de la distribución que estés utilizando, tendrás que ir cuidadosamente al enlace correcto e instalarlo específicamente para tu distribución. Ahora voy a pasar por el proceso de instalación de Node.js con windows desde la pantalla principal de descarga. Voy a descargar el instalador de Windows. Puedes hacer click en el botón Windows o bajo Windows Installer MSI, podemos descargar la versión de 64 bits. Puede haber algunos usando 32 bits. El EBIT, es más probable que necesite la versión de 64 bits. Por esa razón, sólo puede hacer clic en el botón instalador de Windows. Ahora te mostraré las opciones que necesitas seleccionar durante todo el proceso de instalación. Muy bien. Por lo que acuerdan el acuerdo de licencia. Voy a elegir la carpeta de instalación predeterminada, componentes predeterminados. Y entonces tengo que marcar esta casilla aquí, y esto es realmente importante. También vamos a instalar chocolaty. Vamos a hacer clic en cualquier clave para continuar con este script de instalación. Siempre que sigue siendo Hugo e ir de tendido y eso es para Linux, Mac, y Windows. Se requerirá curling más adelante si está utilizando módulos Hugo. Y los modelos Hugo en realidad es requerido por bastantes temas. Es realmente importante que instales ir tendiendo al momento, al mismo tiempo que instalas Hugo. Si estás en Mac OS, puedes usar el comando brew install Linux, puedes usar el mismo comando porque deberías haber instalado brew también. Pero la ventana es ligeramente diferente. Vamos a estar usando chocolate y eso es algo que deberías haber instalado de nuevo en los pasos de instalación de Node.js alrededor a través de windows para empezar, sería bastante rápido, y luego yo ejecutar a través de la opción Linux o Mac después de eso. Entonces el comando para el té de chocolate es el chocolate. Y de esta manera instantánea instalando. Por lo que ejecutamos install y la aplicación es Hugo extendida. Podrías simplemente instalarlo de vuelta. Hay otras características que más probable que necesites adelante que están en Hugo extendido, como el soporte SAS te dará una confirmación y puedes hacer una para todos. Lo siguiente que tendrás que parar es el idioma Go y esto es útil para los módulos Hagen. Entonces estamos en Chaco instalar go Lang. Nuevamente, tendrás que hacer un 44 excepto toda la línea go ha terminado de instalarte. Hay un mensaje explicando que las variables de entorno incluyendo ruta de cambio a medida que hemos instalado software y hay un comando ahí para refrescarse, pero he captado comúnmente tienen problemas con eso. Así que voy a abrir un nuevo PowerShell. Entonces el nuevo PowerShell, vamos a comprobar que tanto Hugo extendido como el tendido de oro se han instalado. Tenemos instalado extendido con el comando sigue siendo Hugo. Y podemos hacer versión Hugo para comprobar la versión. Como se puede ver, tenemos Huo extendido instalado y para ceñir el comando estos van luego versión. Y podemos ver que tenemos instalado el lenguaje Go más ligero. Linux o Mac. Las siguientes instrucciones serán idénticas para usted. En Linux y Mac, el comando que vamos a usar es brew install. Muy bien, ustedes fueron instalados a través de creció. Ahora vamos a instalar ir. Y el comando para eso es brew install go. Y ese es el lenguaje Go que necesitamos para ejecutar módulos Hugo, que son utilizados por temas de cantidad y probablemente lo estés usando tú mismo también. Chicos instalados. Ahora vamos a revisar nuestras instalaciones tanto Hugo como vamos. Podemos ejecutar versión Hugo. Se puede decir ahí por defecto. En Linux y Mac, se extendió estos instalados. Por lo que es ligeramente diferente a la instalación de Windows. Después ve versión para revisar el idioma Go. Tenemos, a partir de ahora tengo instalado el idioma Go actual. El último paso es instalar GitHub Desktop. Es opcional, pero es muy recomendable, aunque solo está disponible para Mac y Windows, hace que el proceso de uso sea mucho más fácil. Y es algo a lo que nos referiremos en futuros videos, donde estoy usando la marcha como todos los paquetes de software. En esta lección, he dejado el enlace para el sitio web, la página de descargas en la sección de recursos a continuación. Después de que GitHub Desktop se haya instalado, tendrás que iniciar sesión con tu cuenta de GitHub.com. Serás redirigido al navegador de ancho para iniciar sesión en tu cuenta de GitHub, cual puedes registrarte de forma gratuita. Una cosa que tienes que comprobar es que visual Studio Code esté configurado como tu editor de código, entra en Archivo y luego Opciones. En la pestaña de integraciones, asegúrate de haber elegido Visual Studio Code como editor externo y que hayas elegido tu shell de elección. Enseñemos la primera lección. Felicidades por llegar hasta aquí. Espero verte en la próxima lección donde vamos a ver cómo empezar con Hugo y hacer tu primer proyecto Hugo. Has tenido algún problema con cualquier paso en esta lección, por favor rebobinar y revisar dos veces. Éxito. A continuación hay una sección de discusión y me pondré contigo y te ayudaré en cuanto pueda. 4. Configurar el proyecto HUGO en el código VS: En esta lección, vamos a ver cómo montar un proyecto Hugo desde cero. Ustedes muy personalizables, pero desafortunadamente fuera de la caja, no les da mucho con qué trabajar. Después de completar esta lección, podrás configurar un proyecto Hugo sin depender de un tema. Y podrás emitir texto básico a través de ti ve a nuestro archivo HTML. Lo primero que vamos a ver es el comando Hugo nuevo sitio. Lo primero que hay que hacer es comenzar con una carpeta vacía. Y dentro de esa carpeta, si configuras Visual Studio Code, la forma en que indiqué en la lección anterior, podrás hacer clic derecho y luego abrir con código. Puede recibir un mensaje preguntando si confía en el autor de las caídas y tiene que hacer clic en sí, lo contrario no obtendrá todas las características de Visual Studio Code. Entonces vamos a ejecutar una nueva terminal dentro de esa terminal. En primer lugar, vamos a comprobar que Hugo se ha instalado correctamente. Y podemos hacer versión Hugo. Como se puede ver, tengo la versión 0.89 extendida instalada en windows. Para crear un nuevo sitio, tenemos que usar Kingo nuevo sitio y hay que especificar el directorio que quiero acreditar en la carpeta o directorio actual. Entonces usaré la barra de puntos para indicar eso. Ahora podemos ver que estamos listos. Ustedes nos preguntan si nos gustaría descargar el tema y ponerlo en la carpeta de temas, o agregar algún contenido. Y nos da una pista de que podemos usar un nuevo comando Hugo para crear contenido. Y te lo estaré mostrando en breve. El siguiente que tenemos que hacer es crear algunas plantillas de diseño. Ahora desgraciadamente, no viene con ninguno de estos fuera del libro, fuera a crear nuestras plantillas de diseño. Lo que vamos a hacer, lo convertiremos en una nueva terminal y correremos nueva fama. Y simplemente lo llamaremos temp, cierra la terminal. Y si miras en tu carpeta de temas, verás que tenemos una carpeta temporal y se ha creado un tema básico para nosotros. No van a que podamos hacer es todo en la carpeta Layouts. Haga clic en él y lo arrastraremos a nuestra carpeta Layouts. Y luego iremos y eliminaremos esa carpeta Temp. Vamos a echar un vistazo rápido. Veremos cómo funcionan estos. Entonces voy a empezar con la base off dot HTML. Ese es nuestro diseño HTML básico. Esa es la más alta en la jerarquía. Es donde empieza todo. A cabeza parcial. Lo que eso hace es que estamos mirando los parciales aguantan. Va a tirar en el header.html, esta unidad de conteo, nada ahí dentro, pero van a ser arrastrados a nuestra base fuera. Entonces vamos a tirar de nuestra cabecera. Y luego tenemos block main, que en realidad configuramos en nuestra lista, sencillo o índice del que hemos hablado en un momento. Y entonces tenemos nuestro pie de página siendo tirado ahora marcado para hacer algunos cambios a esto para ponerlo a la altura de los estándares. Entonces si ponemos un signo de exclamación, diremos que es una m y abreviatura, podemos golpear Tab. Te darás cuenta que tenemos nuestras etiquetas Meta, tenemos nuestro conjunto de personajes, UTF-8. Y eso es realmente importante porque eso significa que puedes acceder básicamente a cualquier personaje en un idioma. No tendrías a nadie detectar errores. Pensamos lo que nuestra etiqueta de compatibilidad con Internet Explorer y borde, cuál es nuestra etiqueta de ancho de viewport predeterminada, que es muy importante para los sitios web responsivos. Lo que haremos es agarrar todas esas meta etiquetas. haremos estallar en la cabeza para que nos adelantemos. Estúpido del antígeno. Agarra el título, pop que a continuación. Notarás que tenemos nuestro idioma predeterminado. Cortaremos eso y lo pegaremos en la etiqueta HTML por ahora y volveremos a eso un poco más tarde. Entonces eliminaremos a todos mis críticos. Lo salvará. Voy a quitar estos div alrededor del bloque principal. Entonces cogeremos todo el contenido, cortaremos eso, y lo colocaremos en el header.html. Nos libraremos de ese espacio. Podemos quitar esa doble sangría. Ahorra eso. Echa un vistazo a cómo se insertará nuestra página de inicio, nuestro HTML en el bloque principal. Abre el index.html, poniendo llaves dobles rizadas y sí definiremos main, obteniendo comas dobles invertidas. Entonces pondremos en una etiqueta final. Lo primero que vamos a mostrar es sitio de puntos con un título mayúscula de punto S. Y tirará en el título de la página web. Entonces volveremos a hacer algunas llaves dobles rizadas y vamos a hacer contenido de puntos con un C. mayúscula Lo que eso hará es cuando creamos algún contenido en un momento, tirará ese rebajado y lo convertirá en HTML para nosotros. Hugo nuevo comando crea contenido para nosotros y utiliza plantillas para que nuevo contenido. Entonces echemos un vistazo a cómo funciona. Atrás cuando creamos el nuevo sitio. Vas a darnos las pistas de que podemos crear nuevo contenido con Hugo nuevo comando. Ahora, la forma en que funciona es. Se ve en la carpeta de arquetipos, y utilizará este archivo, el punto de falla MD como plantilla para crear nuestro nuevo contenido. Ahora antes de seguir adelante, hay una cosa que me gusta cambiar y es que voy a tener que cambiar de borrador de verdadero a falso para que cada página que creamos sea viva. De lo contrario tendrás que cambiarlo manualmente de borrador true a dibujar, false para que se muestre. Así que lo he guardado en los arquetipos por defecto. Pero md archivo, voy a correr, Hugo lo sabía. Voy a seguir en cajón es slash underscore index.html y eso es MD de markdown. Así que corre eso. Entonces echaremos un vistazo en nuestra carpeta de contenido y verás que tenemos un índice de punto MD. Desafortunadamente, debido a que es el archivo de índice en el directorio raíz, pocos chicos no saben cuál es el título. Por ahora solo lo llamaremos hogar. Vamos a hacer estallar algún contenido. Ahora necesitamos hacer algún contenido. Te voy a dar algún contenido de marcador de posición y una versión realmente popular del contenido de texto de marcador de posición. Se llama Lorem Ipsum tiene esta incorporada, pero desafortunadamente, por defecto, la versión actual de Visual Studio Code emiten no está habilitada para caídas de markdown. Ahora podemos arreglar eso. Si vamos al menú Archivo, entonces llegamos a las preferencias y configuraciones. Para que puedas ver el atajo es Control plus coma o en Mac sería Command Post comma. Abre eso, ve a Extensiones. Y lo primero que tienes que hacer es si miras bajo excluir idiomas por defecto emiten excluye markdown. Entonces vamos a elegir las reglas extra que sí tenemos para establecer algunas opciones más, sin embargo, porque vamos a tener algunos temas. Simplemente desplácese hacia abajo. Dice mostrar abreviatura expandida. Tenemos que cambiar eso a en las hojas de maqueta y estilo. Yo sólo dice ahí que sólo mostrará abreviaturas expandidas en HTML, Hamel, Jade slim XML, excelente, CSS, SCSS, SCSS menos instalaciones. Pero no va a estar haciendo ninguna reducción y ese es el comportamiento después. Lo otro que tenemos que hacer es activar expansión en pestaña. Vamos a guardarlos en médicamente para que podamos cerrar eso. Y ahora dentro del archivo R Markdown, podemos probar esto si está tocando cuotas y luego tab, verás emiten estas funcionando. Lo que vamos a hacer es que estemos en alarma. Y luego 100. Y pestaña. Verás que es crédito unas 100 palabras para nosotros. En cambio, lo que podríamos hacer es intentar lorem 50 y vamos a correr eso dos veces. Poner un espacio entre los dos para hacer un párrafo, eliminaría ese espacio extra al final. A pesar de que es buena práctica tener una nueva línea en el expediente. lo guardaremos. Ahora voy a ver cómo habilitar el contenido HTML en Markdown. Por defecto, no te permite poner HTML en la boca abajo como una característica de seguridad, pero ocasionalmente no podrás lograr lo que quieres solo tenemos la sintaxis de Markdown, que veremos en un momento. Esto te permitirá poner en contenido HTML también, mezclando tu markdown. Entonces si miras en tu proyecto abajo abajo, verás un archivo de configuración. Ahora, la ópera FAT es YAML. Es mucho más fácil para los principiantes. Entonces cambiaremos el nombre de ese archivo dos puntos YAML. Entonces vamos a tener que cambiar el formato de la misma. Entonces la forma más fácil de hacerlo es resaltar el signo igual y el espacio ante él. Haga clic derecho en él, cambie todas las ocurrencias. Retroceso, y cambiar eso a un colon. Ahora en YAML, no es necesario rodear cadenas con cotizaciones y detectadas automáticamente para que podamos eliminar esas cotizaciones. Ahí es donde el tipo, Hagamos ahora a Markdown. Es un poco complicado. El primer ingreso que tenemos que poner es Mockup. Después pulsa Enter y sangró una pestaña. No tuvimos que ponerlo en una entrada para Goldmark. Goldmark es el renderizador de markdown predeterminado actual que Hugo usa. Después ponemos en renderer el colon, y luego una sangría más. Y esta es la importante, insegura. Cierto. Muy bien, así que guarde eso, regresa a tu index.html y pongamos un poco de descuento. Markdown le permite crear encabezados y modificar sus textos. Por ejemplo, negrita, cursiva, crea listas y así sucesivamente realmente simplemente y sin HTML. Voy a proporcionar este enlace. ¿ Por qué los recursos del curso? Vamos a tener un ir a algunos de estos ahora. Por ejemplo, ir a tratar de hacer algunos encabezados usará contenido en negrita o cursiva de Ababa. Y ya tenemos el título para el sitio. Entonces vamos a hacer un encabezado H tres, hacer una especia a los hashes T3, y luego lo llamaremos texto de marcador de posición. Debes hacer una interrupción a ese golpe. Entonces lo que vamos a ver algunos audaz y cursiva. Tienes que tener cuidado. Se supone que no debes usar negrita para encabezados. Personalmente obtuve un diccionario habilitado en el código VS y creo un encabezado usando negrita. Me dirá que ese es un tema. Si yo, por ejemplo, donde texto en negrita, parada de una línea, eso está bien. Y luego para cursiva, solo hacemos la estrella única. Sé texto en negrita con asteriscos dobles. Entonces vamos a echar un vistazo. Se puede decir que sólo harán una inspección. Podemos ver que tenemos un CH3. Hicimos las 3.5 canciones y él consiguió automáticamente crea identificaciones para tus encabezados para ti. Se saca un poco ****** y minúsculas todo para ti y te pone guiones en caso de peice del ******. Ustedes crearon automáticamente un párrafo para nosotros y es crédito algún texto fuerte o en negrita y luego es acreditar el texto cursiva con etiqueta BEM. Son increíblemente etiquetas de párrafo para nosotros de nuevo, para todas las secciones de textos y eso es todo a través de la reducción en Hugo. Ahora que tenemos la configuración básica, vamos a ejecutar los chicos clave incorporado en el servidor de recarga en vivo para comprobar que todo está funcionando la manera que pretendíamos. Entra en tu terminal y escribes Hugo server, pulsa Enter. Y echemos un vistazo a lo que dice. Entonces podemos decir que está construido para verlo. Hay cuatro páginas que está construido. Un mapa del sitio, que entraremos en otra lección y esperando los cambios. Por lo que tiene activado la recarga en vivo. Ahí está nuestro archivo de configuración que acabamos de modificar. Quieres entorno de desarrollo que se esté ejecutando en rápido aleatorizado. Y si usan el comando, ustedes están con la bandera de renderizado rápido deshabilitada. Reconstruirá cada archivo cuando detecte un cambio. Entonces si controlas, da clic en ese enlace. Puedes abrir la página en un navegador. Aquí está nuestra página en el navegador habría rendido el nombre del sitio. Tenemos nuestro golpeando dos texto marcador de posición involucrado, inclinada y fuera Lorem Ipsum. Si hacemos clic derecho e inspeccionamos, echemos un vistazo al HTML que ustedes generaron. Así que tenemos nuestra bateando dos y una etiqueta h2. Y obtuviste automáticamente genera identificaciones para nosotros para que podamos apuntarlas con enlaces. Está en párrafos de crédito para cada parte de la rebaja y se usa para esa frase ahí. Voy a montar algunas parciales y algunas etiquetas semánticas para envolverlos. De vuelta en vital al HTML. Nuestro top de bloque principal en Maine y hit tab y eso te dará la etiqueta semántica principal y lo que hace, le dice a los motores de búsqueda y posiblemente guionistas también que están mirando Contenido principal del ISI en la página. Lo haremos es por nuestro encabezado, ponemos en una etiqueta oculta y eso deja que el motor de búsqueda apunte que es el encabezado y es totalmente los encabezados y posiblemente algunos enlaces en mayo. Entonces para la foto, pondremos una etiqueta de pie de página. Arrastraremos eso ahí dentro. Después abre el encabezado y el footer.html. Por ahora solo vamos a poner un poco de textos cerca que dicetexto de textos cerca que dice encabezado en pie que dice que se ajustaría para identificar eso. Sí, en realidad está funcionando. Guarda todo eso y vuelve a tu sitio. Echemos un vistazo. Como pueden ver, tenemos nuestro encabezado que se está tirando y nuestro pie de página, obviamente el formato no es donde nos gustaría, pero eso es para videos posteriores. De vuelta en la base fuera de HTML, arreglaremos esta etiqueta de idioma. Lo que vamos a hacer, sacaremos la EN, pondremos unas llaves dobles rizadas y haremos el lenguaje de puntos. Dot lang y eso tirará en el código de idioma que está configurado así. Y para cambiar tu configuración de idioma, bombeo tu config.xml. La configuración es el contenido predeterminado con el lenguaje C mayúscula. Por ejemplo, el sitio de AN AU a en inglés australiano tiene que estar en minúsculas el código de idioma, no se puede utilizar mayúsculas totalmente últimos dos caracteres. Entonces abre la cadera parcial en cuanto al título. Si hacemos título de punto con una T mayúscula, obtendremos el título de la página que aparece. Echemos un vistazo. Ves ahí arriba en la pestaña que tenemos Inicio apareciendo ahora podemos hacer mucho mejor que eso. Haremos dot, dot, title, luego un guión, y luego el título. Se puede ver cualquier otro. Un paso más podemos hacer, y si es la página de inicio, vamos a quitar el tablero a casa. Si el punto, punto, dot title. Ella consiguió un espacio ahí. Pondremos en nuestras llaves rizadas y lo haremos, si no es en casa. Entonces tenemos lo que se muestra. Si no estamos en la página de inicio y entonces pondremos en el etiquetado. ¿ Es verdad el regreso de casa? Si estamos en la página de inicio. Ahí vas. No estamos mostrando el título de la página. Si estamos en la página de inicio, solo inspeccione nuestro HTML. Dirán que son el idioma es el defecto DE US English, English. Adherirse al archivo config.xml. Puedes cambiar eso. Por ejemplo, estoy en Australia, así que voy a cambiar eso personalmente a E en AU o podría usar ENG sea para Gran Bretaña. Pueden ver ahí ustedes actualizaron el HTML. Y hay una última cosa que tenemos que hacer y eso es correcto. Algunos archivos CSS y JavaScript externos. Y la razón por la que hacemos eso es mucho más fácil depurar tu código si se trata de un archivo externo. Si usas archivos externos para CSS y JS, por ejemplo, si estás usando Chrome, te dirá la línea exacta del archivo donde se encuentra tu selector CSS o el error en tu archivo JS se desliza a través de eso. Ahora, vamos a ir a la carpeta estática. Pensaba la foto estática, o puede hacer una nueva carpeta llamada JS. Dentro de eso crearemos un archivo llamado main.js. Volvemos a la carpeta estática y hacemos otra carpeta dentro de la llamada CSS. Dentro de eso lo llamaremos principal punto CSS. Por lo que podría tener falso. No vamos a poner nada en ellos por ahora. Sí tenemos que importarlos, entrar en Layouts, luego parciales, y luego header.html. Necesitamos usar la etiqueta de enlace para importar la hoja de estilo. Si tecleamos enlace y se le ocurrirá sus abreviaturas y la mejor para nosotros podemos hacer para usar luz Lincoln. Pero si usamos enlaces de dos puntos CSS, incluirá automáticamente el riel de la hoja de estilo y también incluirá un nombre por defecto para la hoja de estilo. Ahora no vamos a usar eso. Vamos a retroceso que hacia fuera y usar slash CSS, slash main.css. Y ahí es donde se establece nuestro archivo. La carpeta estática no se expone en el sitio compilado. Sólo necesito las caídas dentro de la carpeta estática. Gracias. Gracias. Tenemos que hacer es importar el archivo JavaScript. Podrías ponerlo en la foto. Pero el problema es que si miras en la base de ese HTML, veremos que nuestro pie de página se sienta parcial dentro de las etiquetas de pie de página. No queremos que nuestra importación de JavaScript viva en esto. Lo que vamos a hacer, haremos un nuevo parcial, llamaremos a esa nueva foto parcial de guión. Y usaremos este metraje solo para guiones. Dentro de ese guión para ellos, haremos nuestro guión importante. Entonces si escribimos en script y luego tabulador, ahí no es donde después necesitamos definir el tipo de fuente. Pones una colonia. Incluso puedes simplemente presionar Tab ahora porque es solo una opción disponible, podríamos escribir en SRC o parte de ella terminará con una fuente para el script puede ser slash js slash main.js. Y lo guardaremos. Ahora sí necesitamos importar este parcial, así que volveré a nuestra base de debajo del pie de página. Haremos nuestras llaves dobles rizadas y función parcial. Y luego Script pie de página. Debe proporcionar la parada completa para que pueda acceder a todos los contextos del sitio dentro de eso. Marshall. Ejecutemos el servidor y revisemos que todo funciona. Así que vamos a teclear el servidor de los chicos. Entonces lo controlaremos. Haga clic en el enlace. Volver a un diseño de sitio realmente básico. Haga clic derecho e inspeccione. En primer lugar, entra en la cabeza. Se puede ignorar ese primer script porque esa es la biblioteca que carga el servidor Hugo. Pero luego nos desplazaremos hacia abajo y verás que tenemos el enlace a nuestro archivo CSS. Y si seguimos desplazándonos hacia abajo, verás debajo del pie de página tenemos nuestro archivo JS. Si entramos en fuentes, dirás que los dos archivos, ambos se meten en el sitio, actualmente están vacíos, pero les estaremos agregando contenido en lecciones posteriores. Realmente importante. Has tenido éxito en cada paso de este proyecto. Antes de seguir adelante, si no está seguro, por favor rebobinar y verificar dos veces. De lo contrario hay un enlace a continuación. Si las discusiones, haré todo lo posible para ayudarle en cuanto pueda verle en la próxima lección. 5. Añadir Bootstrap 5: Bienvenido a la siguiente lección. Estos campo, será mucho más corto que la última clase. Ahora es importante que entiendas todo en la última clase si aún tienes alguna pregunta y no puedes resolverlo. A continuación hay una sección de discusión y haré todo lo posible para que te responda tan pronto como pueda. Al finalizar esta clase, podrás agregar importaciones de Bootstrap, CSS y JS a tu proyecto Hugo. Lo primero que vamos a hacer es ir a la página web Bootstrap cinco y encontrar la información. Tienen que ser muy cuidadosos porque si usas una búsqueda en Google, puedes terminar en el sitio web Bootstrap cuatro o tres. Y al trabajar con bootstrap cinco, que es una versión actual, tenemos un docs y la introducción, verás que te dice que aquí hay un código CSS que puedes bajar de su CDN, que es la forma más fácil de ejecutarlo. Lo mismo con el SIG. puede acceder a ella desde su CDN. Ahora, si seguimos desplazándonos hacia abajo, verás esto como una plantilla y explica cómo todas estas importaciones encajan en el archivo HTML más amplio. Ya hemos configurado este expediente. Simplemente tomamos un poco el componente CSS y lo ponemos dentro de la cabeza. Entonces vamos a tomar el componente GPS y ponerlo en el pie de página. Empezaremos con el componente CSS copiará también el comentario. Es un recordatorio de lo que es. Vamos a copiar eso. Entonces iremos a la carpeta Layouts y parciales, y nos iremos a la cabeza. Entonces debajo de nuestro enlace a nuestra hoja de estilo. Los estilos personalizados pegarán en el enlace el Bootstrap CSS phi allí CD en. Y lo guardaremos. Luego copiará todo su código JavaScript, incluidos los comentarios. Entonces iremos a nuestra comida de guiones o debajo de nuestro archivo JavaScript personalizado. Vamos a pegar en su código y podemos resaltar y usar Shift Tab para eliminar esa sangría. Hay dos opciones. Sólo vamos a ir con la primera opción por ahora. Voy a quitar toda esa especia extra. Y si aún no tienes el servidor Hugo funcionando desde el último video, el terminal bombea el servidor hago y ejecuta ese control. Haga clic en el enlace. Entonces comprobaremos que todo está funcionando. Por lo que haremos clic derecho e inspeccionaremos la cabeza. Ya puedes ver ponemos nuestro enlace al archivo CSS y luego nos desplazaremos hacia abajo hasta debajo del pie de página, y verás que también tenemos el archivo JS. Eso es todo por este video. Prometí que eso será corto. Recuerda que si tienes alguna pregunta, hay una sección de discusión a continuación. De lo contrario, te veré en la próxima lección. 6. Página principal con rejilla, botones y diseño receptivo: Bienvenido a la siguiente lección. Aquí es donde empezamos a hacer contenido con Hugo y bootstrap. Tendrás que descargar los archivos para esta lección en la sección de recursos, podrás acceder a la imagen que vamos a usar desde la foto estática. Iré a eso más tarde. Si te encuentras con algún problema, siempre puedes mirar mi código en los archivos que vas a descargar. Después de completar este video, podrás usar el siguiente bootstrap, cinco clases, cuadrícula, botones, clases de imágenes receptivas y espaciado. Y podrás combinar estos elementos para crear contenido para sitios web. También podrás usar condicional si tuviéramos declaraciones. Aquí adentro. El primer paso, bootstrap cinco grid. Bootstrap utiliza un sistema de contenedor, fila y columna, y hay que usar esos elementos en ese orden. Entonces vamos a golpear a nuestro proyecto ¿quién instalará esos tres elementos? Y vamos a empezar. Abre la carpeta Layouts y el índice o HTML. Y ya verás en lecciones anteriores nosotros en cambio el título de la página web y el contenido del archivo markdown. Dejaremos eso por ahora. Voy a trabajar por debajo de él. Vamos a empezar con nuestro contenedor. Entonces escribimos div dot container y pulsamos tab, y eso creará el div para ti con esa clase pulsamos automáticamente Enter, luego div dot rho en. Ahora, tenemos que llamarlos. Entonces si escribes div dot col, podemos conseguir eso, pero no solo queremos una sola columna, queremos dos columnas que estén uniformemente espaciadas. Ahora para conseguir que hagamos col dash seis. Pero en pantallas pequeñas, no queremos dividir la pantalla por la mitad. Queremos dividirlo solo en pantalla tan grande, definida como grande o más grande. Y te mostraré lo grande que significa en un segundo. Así que voy a llamar a Dash, guión seis. Queremos dos de esos. Podrías repetirte o puedes usar la estrella t2 y esto es para imagen. Después viene instalado por defecto en Visual Studio Code. Voy a golpear Tab. Entonces anti, y luego puedo insertar mi contenido ahí. Y luego lo mismo para el segundo. El Internet a nuestro contenido va a ir. Ahora tenemos una fila y tenemos dos columnas y un ancho uniforme. Pero sólo en pantalla que la clase tiene mayor o mayor. Echemos un vistazo a los puntos de ruptura en Bootstrap significan. Estoy aquí en la página de puntos de ruptura Bootstrap bajo layout. Si desplázate hacia abajo, verás puntos de ruptura de SAM para pequeños, medianos, grandes, excelentes XT Excel. Entonces en pantalla a la no-línea dos píxeles de pantalla de ancho o más grande se va a dividir en dos con dos columnas. Si es más pequeño que eso. Sólo tendremos una columna. Así que déjame apilar verticalmente. Lo siguiente que vamos a hacer es colocar una imagen. Querrías esas columnas. Vamos a usar la clase de imagen receptiva bootstrap cinco para eso. Estoy en el bajo el, bajo la sección de contenido de los docs Bootstrap, me refiero a imágenes. Y se ahorra si usamos la clase de unidad fluida de tablero IMG necesita un punto que diciendo si estás usando el archivo CSS CSS, automáticamente asignará las propiedades de max-width un 100%. Es tu imagen cambiará su ancho dependiendo de la cantidad de espacio disponible para ella. Y la altura será automática y eso será relativo al ancho. Vamos a darle una vuelta a eso. En la primera columna, voy a tocar en IMG. Y luego Tab. Nos darás una fuente, que haremos en un momento y un texto alt en un momento. En primer lugar, vamos a ver la clase. Clase equivale a comas invertidas. Y si enseñamos en IMG Dash fluid, eso cambiará automáticamente el tamaño de la imagen para nosotros. Ahora, en cuanto a la fuente, puedes descargar a continuación los archivos para esto a este video pero terminado. De lo contrario está el enlace para la imagen misma. En la carpeta estática. Crea una nueva carpeta llamada IMG. Entonces dentro de esa carpeta tendrás que pegar la imagen que realmente puedes pegar desde tu código de Studio individual de File Explorer o Finder. Tienes que hacer clic derecho sobre la imagen e ir a buscar en carpeta y pegarla ahí. Tengo mi imagen, pegarla. No voy a volver a la fuente. como discutimos en el video anterior con importaciones de CSS y JS, no hacemos referencia a una carpeta estática. Son las carpetas dentro de static las que aparecerán en tu sitio web compilado y deshacer slash IMG slash Bootstrap themes dot PNG. Para el texto alt, lo voy a nombrar temas Bootstrap. Voy a sumar unas clases más. En primer lugar, voy a añadir una clase del bloque, que significa bloque de visualización. Voy a usar el orden MX dash. Lo que hace es que crea un margen a cada lado, x, es decir, el plano horizontal. Imagina a cada lado de tu imagen y es en proporción uniforme que eso enfoca tu imagen, pero también tienes que usar la clase de bloque de visualización. Todo eso no va a funcionar. Ahora llegamos a crear algunos golpes y contenido en nuestra segunda columna. Segunda columna. Voy a teclear en altura uno. Y luego pestaña. Y dentro de eso voy a importar el título de esta página. Dentro de ese golpeando en lugar de importar el título del sitio o el título de la página, voy a tratar de parámetro personalizado, que punteamos params para parámetros personalizados. Y va a estar golpeando. Y entonces voy a cerrar mis corchetes y te mostraré cómo insertar eso en tus páginas de frente materia en un momento. Entonces debajo del H1, voy a crear un párrafo con P. Y dentro de eso vamos a poner nuestro contenido para que sólo podamos cortar y pegar contenido en ese párrafo. Y voy a eliminar ese título de punto, punto, punto de la parte superior. ¿ Qué va a pasar aquí? Hemos dividido nuestra página a la mitad con nuestras dos columnas. Vamos a tener nuestra imagen a la izquierda y ahora garrapatas a la derecha. Si estamos en una pantalla que es pequeña y grande, ya sea extra pequeña, pequeña, mediana. Vamos a tener la imagen en la parte superior, el texto a continuación en el orden del HTML que definirá que con Bootstrap, siempre tenemos que escribir HTML y CSS sin dispositivos móviles primero, que es la forma en que se alinean aquí. Tenemos nuestra foto primero y tomamos segundo. Entonces podemos ajustar el diseño para pantallas más grandes, luz en Eso es ayuda con SEO, optimización de motores de búsqueda y obtendrás un rango mucho mejor en Google si estás diseñando tu sitio web para adaptarse a los móviles dispositivos primero, lo que quiero que la segunda columna muestre primero en pantallas que sea LIGO más grande. Y la forma en que hacemos eso, su clase de música de Bora, dash, LG, dash, primero, una pantalla a la l-o-g o más grande. Esta columna aparecerá primero. Echemos un vistazo a la inserción de algunos botones. Ahora. Debajo del párrafo que acabamos de insertar, vamos a crear un espacio en blanco. Stephen detendrá esa luz apagada, golpeará Enter, y luego vamos a hacer un botón. Ahora. No tiene que hacer esto, pero es fácil ID de consulta especificar el tipo de botón para ser un botón estándar. Realmente no importa mucho por el momento. Pero si este fuera un formulario que omitiría enviar en mi botón de poner arriba, nos estamos librando de esos comportamientos no son obligatorios, pero sí escribió todo el día para hacerlo. Ahora, por defecto, ese botón no va a mostrar de la manera que queremos que lo haga. Entonces tenemos que sumar la clase equivale a la clase bootstrap para el botón btn. Voy a copiar y pegar todo lo que acabamos de hacer a continuación. Ahora el primer botón, vamos a hacer que sea un botón primario por defecto será azul, lo que no tuvimos que agregar primaria BTN. El de abajo, lo voy a hacer un botón secundario, pero también delineado por defecto que será gris. Entonces ponemos en btn dash secundario porque quería que fuera un botón de contorno, no uno sólido. Tengo que poner primero la palabra esbozada. Lo siguiente que voy a hacer es que voy a hacer estos botones grandes. Mantén pulsado el botón alt y haciendo clic en ambos botones y poniendo BT, dash, LG y una especia. Para el texto del botón y el enlace. Voy a referirme a algunos parámetros personalizados en las páginas markdown. Entonces para hacer eso al igual que nos hemos referido, dot params dot Hitting, comenzó a ponerse unos tirantes rizados y serán params de punto con un mayúscula P dot BTN uno para botón, un punto txt. Te mostraré cómo lo configuramos en un minuto. Después copie y pegue eso en el botón de abajo. Y lo cambio para batir en. Después copia y pega eso otra vez. Y vamos a poner en un enlace, por lo que HREF equivale a comentarios incrustados. Entonces lo cambio a URL. Voy a copiar y pegar. Todo ese lote será vencido en URL de dos puntos. Eso se ve genial. Ahora tenemos que configurar el pulsando el botón de contenido, un botón de punto txt a punto txt botón, un botón URL a URL, entrar en contenido y luego abrir índice dot md. Ya tengo algo de contenido aquí. Vamos a cambiar eso en un segundo. En primer lugar, pondremos nuestra sanación y tendremos unos parámetros personalizados. Todo lo que tienes que hacer es solo top y marcar ese rumbo. El rubro de esta página. Lo vamos a hacer primero Bootstrap. Y buscado. Entonces voy a quitar uno de estos párrafos porque es un poco demasiado texto para lo que estamos haciendo. Y voy a deshacerme de esa audaz alianza metálica. Deshazte de esa marca ahí abajo también. Los botones debajo del encabezado, vamos a poner algunos parámetros más personalizados en y vamos a hacer BTN un dos puntos en luego una pestaña. Y no lo haríamos de texto, creo que para el primer botón se enlazará a la URL de los cinco docs Bootstrap. Vamos a pegar eso en. Y por golpear también, estamos poniendo texto se vinculará a los docs y al ARRA. Vamos a pegar eso en. Vamos a guardarlo. Nos libraremos de esa línea extra en la parte inferior primero, solo debes tener una línea en blanco e innovar, marcar y caer. Y luego iremos a la terminal, nueva terminal y servidor tonto controlarán click en el archivo. Y hablaremos del servidor ego, y luego controlaremos click en la URL. Se puede ver que aún tenemos una cabecera y pie de página ficticia, pero los dejaremos para más tarde. Y por ahora tenemos nuestro golpeando uno sólo va a inspeccionar. Y como se puede ver, ahora que la página se estrecha, tiene la imagen en la parte superior, el contenido en la parte inferior. Y a medida que la ampliamos hasta el punto donde se hace más grande que el gran punto de ruptura se puede ver luego pone la imagen a la derecha, que es el reverso de lo es el HTML y te pone un texto y ascensor. Entonces si miramos en el HTML, tenemos nuestro H1. Entonces debajo de eso, el párrafo que hicimos, hey chicos, en lugar de ese contenido para nosotros desde el archivo markdown. Entonces ve a nuestro div y tenemos nuestros dos botones. El primero es azul y sólido, que es el BTN primario, también grande, y el segundo es un gris hueco y eso se llama BTN, troquel de contorno secundario y secundario por defecto, color gris. Y también es un botón grande. Los siguientes pasos, agregando algún relleno y márgenes a los botones, volver al índice o archivo HTML y ir al primer botón. Y luego mantendremos presionada Alt y pulsaremos en un segundo uno Kusto realmente va a aplicar la misma clase a ambos. Y haremos px por lo que eso va a hacer. P para relleno x es para el eje horizontal, tanto a la izquierda como a la derecha. Y para es la cantidad que vamos a aplicar. El relleno va a ser el interior del botón a la izquierda y a la derecha de los tics. Más espacio ahí. La última clase que voy a añadir es añadir algún margen al final del primer botón. Y eso significará que hay algo de espacio entre ellos. Entonces para hacer eso, hacemos MA por margen final a. Lo opuesto al margen en estos márgenes es MS para stop de margen. Yo lo guardaré. Y luego revisaremos el sitio. Vamos a hacer clic derecho en el primer botón e inspeccionarlo. Se puede ver que tenemos nuestro px para el cual está relleno a cada lado del texto. Y si te desplazas hacia abajo por esta parte de las Herramientas de Desarrollador, puedes ver que tenemos nuestro relleno de 24 y el lateral que aumenta el tamaño del botón. También conseguimos marginalmente final de ocho y luego agrega un poco de espacio extra entre ellos. Luego inspeccionaré el botón por segundo. Verás también qué margen de 24 para hacer el botón un poco más largo. Este último paso es bastante importante y eso es mostrar condicionalmente botones. Echemos un vistazo. Dentro de estos dos botones, se basan en la URL del punto final de PBT para el botón uno y el botón dos, y punto txt para el botón uno y el botón dos. Nuevamente, vamos a entrar en index dot md, e intentemos deshabilitar uno de estos parámetros y ver qué pasa. Verás esto sin texto dentro del botón uno y se ve bastante feo. Es un poco de un error realmente. No querríamos eso en nuestro sitio si no hubiera texto. No voy a desactivar la URL para el segundo botón aquí que con la clave hash porque estamos trabajando en YAML. Se puede ver en el segundo bajo H ref, dice desconocido, eso es un poco de un error también. Entonces lo que vamos a hacer es que vamos a configurar Hugo, que si alguno de esos parámetros falta, el botón no se mostrará o si desactiva todo el lote, el botón en blanco pantalla. En primer lugar, voy a usar el comando width. Y pensamos que eso hace su condicional. Busca el parámetro que has insertado. Entonces vamos a poner en punto params, punto BTN uno. Entonces si algunas garrapatas entre previstas en uno. Entonces eso significa verdad. Y va a mostrar lo que hay dentro de los soportes. Entonces nos metemos en un botón y pondremos una etiqueta final, si algo está presente dentro de BT y uno. Y actualmente tenemos URL presente, que devolverá verdadera. Y va a poner esos datos ahora con también asigna esta información al contexto del significado. Podemos borrar este texto aquí, params dot BTN uno porque ya lo hemos proporcionado aquí arriba en trigo. De hecho, esta parte, esto no funcionará que params dot btn one dot txt porque eso no existe dentro de puntos params dot BTN uno, pero dot txt sí existe en ahí y punto URL sí sí. Vamos a salvar eso. Y en realidad no deberíamos ver un cambio. Echemos un vistazo. Nada ha cambiado, todo funciona, pero aún tenemos el problema de no tener texto y eso es porque deshabilitamos el texto. Volvamos y pongamos una declaración condicional. Y eso es si punto txt, si final. Entonces tenemos dos cosas sucediendo, IV y dot txt, URL. Entonces esto sucederá y tenemos que poner una ingesta. Y después de eso, si a, el punto txt no está presente o la URL de punto no está presente, entonces este botón no se mostrará. Echemos un vistazo. Como se puede ver, ese botón ha desaparecido. Vamos a volver a habilitar sobre los parámetros y el botón debe reaparecer. Vuelve al archivo de markdown y volveré a habilitar el texto. Volveré a habilitar el botón a URL. lo guardaremos. Ahora tenemos el texto y todos ustedes están presentes. Eso es dentro entre uno. Voy a echar un vistazo. Ahí vas. Tenemos nuestro botón, arreglaremos nuestro HTML para el segundo botón, y luego haremos otra prueba. Copiaré ese código. Aquí abajo. Voy a poner mi n tagging. Va a cambiar eso para ser TM2. Voy a eliminar ese código que ya hemos especificado. El ancho. Ponemos un etiquetado N para la declaración if. Vamos a guardar eso y revisar la página web. Tenemos ambos botones trabajando solo para la prueba final, vamos a desactivar uno de los parámetros para el segundo botón. Y luego te mostraré cómo podemos simplemente apagar los botones completamente, correctamente. Entonces yendo al markdown, solo voy a desactivar la URL para el segundo botón. Se puede ver que desaparece. Y echemos un vistazo a cómo desactivar el botón correctamente. Desactivar el botón correctamente. Todo lo que tienes que hacer si solo destacamos todas estas primitivas y esa es la forma correcta. El atajo y Visual Studio Code es Control K, C. Luego ordena las tres líneas para ti una vez. Como se puede ver, para quitar el botón. Y esa es probablemente la forma intencional de desactivar los botones. Controla KU para descomentar. Descomentar el botón. Por lo que está habilitado de nuevo, y lo guardaremos y estamos listos para el próximo tutorial donde miramos la personalización de la pantalla de ese bloque que acabamos de hacer Birmania. Has tenido algún problema con cualquier parte de esta lección, rebobinar e inténtalo de nuevo. Y si sigues teniendo problemas, hay un enlace a continuación para las discusiones y haré todo lo posible para ayudarte lo antes posible es realmente importante. Entiendes todo lo que hace lección antes de continuar con la siguiente. Nos vemos en la siguiente lección. 7. Personalizar la página principal con Bootstrap 5: Bienvenido a la siguiente lección. En esta lección, vamos a estar personalizando el contenido que previamente acreditamos usando clases de Bootstrap. Después de completar esta lección, podrás limitarte el ancho de cinco contenedores de bootstrap. Ser capaz de usar canaletas, relleno, y clases de margen Bootstrap. Para justificar contenido en línea para centrar, tuvimos que usar las clases grid y GAP. El primer paso es que vamos a frenar el ancho del contenedor, pero sólo para exhibiciones muy grandes. Tienes que volver al punto índice, el archivo HTML de la lección anterior. Y dentro de la clase container vamos a sumar la clase de col dash XX L dash. Lo que eso va a hacer en pantallas de ancho XX L, va a limitarse el contenedor al ancho de ocho. Ahora, bootstrap usa 12 unidades. Estamos usando ocho de cada 12 de esas unidades. Echemos un vistazo a lo que significa XX L. Si nuestra pantalla es de 1400 encurtidos o agua, el ancho será el 1 12 º de eso. El siguiente paso es justificar y aprender contenido. Vamos a hacer esto en nuestra fila para que ambas columnas estén alineadas a Santa y justifiquen los centros que centraron tanto en la dirección horizontal como vertical. Si miras los documentos Bootstrap bajo flicks en utilidades, verás para justificar contenido que necesitas tener habilitado el curso d flex o display flex. Y además, si te desplazas hacia abajo para alinear elementos, también verás, debes tener d flex habilitado. Así que volvamos al proyecto y veamos algunos justificantes y guarnidos. Queremos que nuestra imagen, nuestra columna de imagen se muestre tanto centrada en el eje vertical como horizontal. Ahora, en realidad no tienes que poner d flex porque fila ya tiene flex habilitado. Lo que utilizamos alinear elementos dash centro y justificar. Contenido Dash Center. Pondré la sal en una pantalla más grande. Puede que tenga problemas para ver Lacey si está en un dispositivo móvil como su resolución bastante grande. Pero actualmente tenemos el ancho establecido en menos de 1400 pixeles. Y esta es la exhibición original prevista del sitio. Se puede ver un poco de relleno ya sea izquierda y derecha a medida que aumentamos y disminuimos el tamaño. Pero ese es el comportamiento predeterminado de Bootstrap si estás usando contenedor predeterminado, si aumentamos el ancho a más de 1400 pixeles, verás que de repente se encaja en este bastante espacio aquí, el lateral, y eso está limitando nuestro contenedor para que el contenido no se vuelva demasiado grande porque no queremos que este bloque aquí sea el ancho completo de la página si es una pantalla grande y si pasamos el cursor sobre el contenedor, verás que hay esa gran cantidad de relleno a cada lado. Si bajamos al CSS, verás que tenemos un ancho mínimo a 1400. Esa es la consulta de medios y pasaste más de 1400, usa flicks para frenar el ancho al 66%, que es de ocho doceavos, añadiría de 12 columnas. Ciudades comportamiento extraño después, porque no queremos este bloque aquí que hemos creado sea demasiado ancho en una pantalla grande, como se puede ver, se ve bastante bien en una pantalla grande. Y si nos encogemos a menos de 4800, también se ve bastante bien en una pantalla más pequeña. Ahora vamos a mirar agregando algún relleno y canaletas. Y ese es el relleno. Estaremos creando algún espacio por encima y por debajo la fila y las canaletas es un espacio general genérico. Ir a su archivo index.html en el div para la fila al final de la misma agrega P dash f5. Eso va a agregar algún relleno por encima y por debajo de la fila, tendrá algo de espacio dentro de la fila y potencialmente la página de la barra de navegación y algún espacio debajo de la fila y potencialmente cualquier contenido futuro. También vamos a agregar g dash f5 para agregar una canaleta todo el camino alrededor. Si miramos nuestra fila, dirás que tenemos nuestro relleno P Y5 top e inferior cinco, y hemos especificado G5. Bajamos a columna, verás que tenemos el Gatorade, el costado en verde. Eso se traduce en vientos acolchados, la forma más fácil de trabajar con bootstrap. Pues ahora mira la creación diferentes tamaños de columna en diferentes puntos de ruptura. Esto es para nuestra imagen especificada llamada LG G6 en el gran punto de ruptura, la columna para la imagen va a ser seis. Veamos el tamaño inicial bajo buscar. Entonces vamos a hacer col dash estaño. Ahora, eso es por el punto de ruptura extra pequeño. Nunca especificamos el exceso, solo lo dejamos fuera y ese es el predeterminado cuyo bootstrap, fácil mobile-first. Si se trata de un dispositivo pequeño, llame, SAM. Queremos que sea un estatal sea ocho de 1012. Columnas de ancho en una pequeña pantalla. Entonces por mucho hasta grande y luego para Lodge y más grande, va a ser seis de 12, así que la mitad de la pantalla. Así que vamos a salvar eso. Echemos un vistazo con el botón derecho del ratón e inspeccionemos. Lo llevaremos hasta el tamaño más pequeño. Y haremos click en la primera columna, que es para nuestra imagen. Y verás que está usando la columna diez, que es 83% del ancho de la pantalla. Tienes esas barras verdes a cada lado. Entonces vamos a arrastrarlo más grande y lo veremos cambiado. Ahora hemos golpeado el pequeño punto de ruptura y ahora lo está mostrando 66% porque en ese gran punto de ruptura, no queremos que la imagen sea demasiado grande. Entonces subiremos al gran punto de ruptura. Verás que ha cambiado a seis, que es la mitad del ancho de la pantalla. ¿ Ayudaste a la fila? Verás tenemos el PY cinco, que tiene relleno arriba y abajo en verde. Y si vas a la columna, verás que hay algún relleno izquierda y derecha, y eso es desde la cuneta. El siguiente ABG es usar grid and gap para mostrar los botones en un dispositivo móvil. Ahora originalmente en Bootstrap, si quisieras mostrar un botón como el ancho completo de su contenedor, eso es en Bootstrap cuatro, usarías un botón, una clase de botón de bloque. Pero en Bootstrap cinco, tenemos que usar la rejilla D para la rejilla de visualización, y luego brecha para especificar el espacio entre ellos. Así que vamos a ir a eso. Hay un div que envuelve los botones en lugar de antes dentro que especificará clase. Entonces usaremos d dash grid para la rejilla de visualización. Y luego usaremos un hueco de dos. Así gap dash T2. Ahora eso va a arrancar de ninguna oferta. Entonces eso es una especie de mostrar un móvil, pero no queremos que eso suceda. Los puntos de ruptura más grandes que hará. Como se puede ver, lo está cambiando el punto de ruptura de lodge. Entonces vamos a hacer d dash, LG, dash, flux. En el gran punto de ruptura. Va a cambiar de la rejilla de visualización a la flexión de visualización en un punto de ruptura por encima del gran punto de ruptura y todo se muestra como de costumbre, y eso es con el flujo. Pero entonces si bajamos por debajo de lo grande, verás que tenemos nuestro diseño de cuadrícula con un botón de ancho completo, pero tenemos un problema aquí y ese es el margen al final de este botón. Entonces si pongo el cursor sobre ese botón, verás que hay ese margen naranja a la derecha del botón. Y eso es porque tenemos la clase en un guión T2. Podemos arreglarlo. Podemos hacer una vista previa de Carlo si quieres. Podemos hacer ME dash LG, dash T2. Como se puede ver a continuación LG, no hay margen, pero si aumentamos por encima de LJ, entonces tenemos ese margen. Volvamos a Hugo y arreglemos eso. Entonces vamos a entrar en nuestro primer botón. Queremos que nuestro margen entre, así que vamos a hacer un guión LG que esté arreglado. Ahora en realidad es espacio en estos punto de ruptura medio tener los botones uno al lado del otro. Así que lo vamos a configurar para que sólo en una inferior más pequeña, los botones estén alineados verticalmente. Vuelve aquí y estableceremos el flex para que ocurra en MD y más alto. Y luego estableceremos nuestro margen para que solo se aplique en MD o superior. Eso lo guardaremos. Como se puede ver, actualmente estamos en MD. Somos verticales sin imagen y nuestros textos, pero nuestros botones están de lado a lado. Bajaremos al pequeño punto de ruptura. Verás que son verticales, todo es vertical. Y luego subiremos al gran punto de ruptura. Verás que tenemos el diseño lado a lado para todo. Eso es todo por este video. Si tienes nuevos problemas, rebobinarlo y haz tu mejor esfuerzo. De lo contrario, ahí está la discusión a continuación y trataré de volver a la mayor brevedad posible. De lo contrario, puedes entrar en la sección de recursos y descargar el código para esta lección y hacer todo posible para depurar lo que has hecho. Y te veré en la próxima lección. 8. Bootstrap 5 Tarjetas e Iteración (bucle) con rango: Bienvenido a la siguiente lección. Vamos a estar creando bootstrap cinco tarjetas, y estaremos generando extremidad iterando sobre datos con la función de rango de Hugo, necesitarás algunas imágenes para esta lección. Si entras en la sección de recursos, verás una carpeta zip para esta lección. Si lo extraes, encontrará las imágenes requeridas en la carpeta estática. Al completar esta lección, podrás crear una tarjeta usando archivos Bootstrap, clases de utilidad. Podrías crear datos para diferentes tarjetas en la materia de portada de las páginas. Y sería capaz de generar múltiples tarjetas iterando sobre metadatos frontales de las páginas usando la función de rango chicos. Lo primero que vamos a hacer es crear una tarjeta usando clases de utilidad Bootstrap cincos. Lo primero que tenemos que hacer es abrir nuestro archivo index.html. Vamos a crear algunas secciones y estas HTML, cinco etiquetas semánticas. Por lo que hemos enseñado en sección y una pestaña. Entonces vamos a cortar y pegar todo el contenido de lo que creamos en la última lección. Cortaremos eso con Control o Comando X y pegaremos eso en. Y vamos a agregar una clase por si acaso necesito apuntar esto en un futuro con CSS, queremos modificar esa sección en particular que no fuera una clase, y la llamaremos héroe. A continuación, utilice el atajo Alt Shift F to Format sección. El formato se ve bien. Entonces vamos a hacer una nueva sección para este video. Nuevamente en otra sección, tags. Por lo que escribiremos sección y pestaña. Entonces tenemos que crear el contenedor, la fila y la columna. Haz ese contenedor. Pestaña, pestaña div dot tab. Esta columna en particular. En este punto del video, vamos a dividir la pantalla en tres, para que podamos tener tres cartas. Ahora si divides 12 por tres, obtienes cuatro. Si sólo quisiéramos tener lugar si la pantalla es el medio, el punto de ruptura medio o más grande, no queremos tratar de aplanar tres en una pantalla pequeña. Añadir guión, MD, guión cuatro. Echemos un vistazo al código de la tarjeta en el sitio web de los docs Bootstrap bajo componentes que tenemos tarjeta. Simplemente desplácese hacia abajo y justo desde el primer ejemplo de arriba aquí, eso es lo que estamos tratando de crear. Copiaremos ese código, lo pegaremos en nuestra columna. Y usamos Shift Alt F para arreglar el formato hacia arriba. Ahora, esta parte es la etiqueta de estilo. No queríamos eso porque vamos a estar empezando en puramente tenemos clases CSS en lugar de sobrescrituras de estilo. Ojalá también pudieras llamar estilos en línea. En la clase de la imagen vamos a agregar IMG dash fluid dijo que la imagen cambiará de tamaño para nosotros en función del espacio disponible. No nos vamos a preocupar por el texto alt por ahora. Pondremos la fuente de la imagen. Ahora, tendrás que descargar los archivos para esta lección y extraer las imágenes completas de marcador de posición de ese archivo zip. Y luego pega en habitación donde no se puede pegar directamente el código de Visual Studio. Tienes que abrir la carpeta de imágenes con el explorador de archivos, averiguarlo y pegarlo ahí. Ahí están mis cuatro imágenes de placeholder. Voy a retroceder la fuente y poner slash IMG slash place holder one dot JPEG para que coincida con ese archivo allí. Dejaré todo el texto predeterminado y el enlace predeterminado para el botón. Pongamos un rumbo en primer lugar y despertemos también copiar y pegar estas tres veces, dos veces más. Vamos a poner en un rubro y copiaremos y pegaremos la columna dos veces más. Entonces teníamos un total de tres columnas. Y luego por encima de la fila y por debajo del contenedor, hablaremos tú bro, y div dot col hará nuestro rumbo, nuestro H2, pero usaremos un tamaño de fuente de uno, así que usaremos el tamaño de nuestro H1, pero vas a usar una etiqueta H2 porque es el segundo golpe más importante en la página. Para hacer eso hacemos un dot FS dash one. Esa es una clase Bootstrap para el tamaño de fuente uno, que es un encabezado un tamaño también pondrá algún relleno debajo. Entonces vamos a hacer punto p, b guión tres. Por ahora vamos a poner un manual de rumbo adentro y eso será fuera servicios. Vamos a guardarlo y echar un vistazo. Se ve genial, pero creo que deberíamos enviar al encabezado y deberíamos poner algún relleno debajo de esta fila para que no choque con la foto que estamos haciendo en una lección futura. Copia de seguridad en nuestra columna aquí usaremos el guión de texto. Papá Noel lo ha enviado todo, todo el texto dentro de esa columna. Entonces en nuestra fila aquí vamos a hacer PB dash tres. Eso se ve mucho mejor. El siguiente paso es que vamos a crear algunos datos para que podamos generar múltiples tarjetas. Abra la carpeta de contenido y el index.html. Y luego debajo de los datos del botón, vamos a poner una entrada para el título de las tarjetas. Llamaremos a eso nuestros servicios como ya lo hemos nombrado. Y luego vamos a poner en la entrada de las cartas y están golpeando pestaña, golpean el guión. Y luego pondremos en el título. Lo llamaremos a cabo tarjeta uno nos tituló para mantenerlo sencillo, esta pestaña no silenciada. Y especificaremos la imagen para esa tarjeta en particular. Así que va a ser IMG es lo que usaremos. Y luego la dirección será barra inclinada IMG marcador de posición. A continuación, un punto JPEG hará nuestros textos. La columna. Podemos usar Lorem Ipsum para esto, pero no va a funcionar arriba en la sección de metal frontal que teníamos abajo a nuestro contenido aquí podemos teclear en lorem e intentaremos 20. Ese es probablemente un buen eslabón. Así que vamos a cortar eso. Retire la línea extra. Lo pegaremos en nuestro texto. A continuación tenemos que hacer es el botón, así que vamos a hacer ese BTN colon. Entran y tabbing harían texto. Vamos a tirar de esa caja y uno toma y luego URL y lo haremos un hash por ahora. Llevemos todo eso y utilicemos retroceso para llegar al inicio de esa línea y pegarla y luego entrar nuevo retroceso, pegarlo de nuevo. El segundo hará clic en nic sobre el conductor número uno, mantendremos pulsada Alt y pulsaremos a la derecha de los otros números y los cambiaremos a dos y azules, lo mismo con la tecla Alt para el tercera entrada. Una última cosa, comúnmente la gente usa un hash si no quieren especificar URL, qué estamos usando Markdown y en Markdown y los hashes para comentar. Entonces vamos a tener que poner algunas comas invertidas alrededor estos hashes para que funcionen. Ahora vamos a iterar sobre el Dato, solo crédito por tres tarjetas usando la función range. Ponemos nuestros datos él el primer elemento que es importante para nosotros ya que las cartas totales dentro del rango sobre el propio otoño cartas pidiendo a cerca de tres cartas para encontrar aquí. Y una vez que nos vamos extendiendo dentro de las tarjetas, vas a tener acceso a dot title, dot IMG, dot txt, dot BTN dot txt y dot BTN dot URL. Así que en primer lugar, las tarjetas totales eliminan las garrapatas de los servicios EL, poniendo dos llaves rizadas y debido a que no son parámetros estándar de la página Hugo, tenemos que usar params de punto para empezar. Y luego tarjetas título y luego cerrar los dos corchetes rizados. Entonces encuentra las tres columnas diferentes para las cartas. Y eliminaremos los dos últimos. Entonces por encima de la columna. Nueva línea. Y usaremos el rango. Y vamos a abarcar params de punto, cartas de puntos. Entonces debajo de la columna, tendrás que poner en una intacta. Vamos a pasar por un paso a la vez. Lo primero que haremos es la imagen. Vamos a eliminar eso. Y va a ser punto. Img será el parámetro porque estamos dentro del objeto tarjetas. Y luego vamos a poner en el título abajo HE dot title. Y copiaremos y pegaremos el título en el texto alt para la imagen. Y eso es justo si el usuario sostiene el mouse sobre la imagen o si el usuario tiene tecnología de lectura de pantalla, entonces eliminará el texto en el párrafo e insertará punto txt. Entonces por el botón porque tenemos batir ese BTN dot txt. Url usará una instrucción width y será width dot btn. Entonces tendrá URL de punto, la deriva de altura, el enlace. Y luego tendremos puntos toma para el texto de los botones. Entonces tendremos que eso. Ahora como viste en el video anterior, si no pones texto en la URL, todos los campos de texto, vas a tener un problema con la pantalla o la etiqueta a. Ahora, arregla eso. Podemos usar una declaración if. Entonces si requerimos tanto URL como garrapatas, tres presentes. Entonces si final punto URL puntea ticks, y luego pondremos la etiqueta final debajo. Porque hemos mostrado tres cartas y sólo van a estar de lado a lado. En el punto de ruptura medio, Ohio. Tenemos que añadir algún margen por debajo de las cartas para que cuando estén apiladas verticalmente en puntos de corte extra pequeños y pequeños, eso va a ser algún espacio entre ellas. Entonces vamos a hacer em, guión tres la tarjeta. Vamos a guardarlo y ver cómo se ve. Se está mostrando genial. Tenemos nuestras imágenes únicas para cada tarjeta. Hemos sacado el rumbo desde la materia frontal de markdown. También tenemos botones únicos. Vamos a inspeccionarlo y ver qué pasa cuando bajamos los puntos brillantes. Por lo que ahora estamos en nuestro punto brillante más pequeño. Como se puede ver, tenemos el espacio entre las tarjetas y solo lo traeré en el CSS. Si pasas el cursor por encima, puedes decir esto, el relleno naranja debajo de la tarjeta. Y a medida que lo sacamos, lo sacaremos al punto de ruptura de MD y lo verás encajar a tres. Squishing en tres allí. Eso es todo por la lección. Teniendo algún problema, revisa dos veces el video y si aún no puedes hacer que las cosas funcionen, hay una discusión a continuación y trataré de ponerme en cuenta lo antes posible. También puedes descargar los archivos de esta lección en la sección de recursos. Entonces puedes depurar tu código desde ahí. Gracias por ver. Nos vemos en la siguiente lección. 9. Bootstrap 5 Navbar con Hugo: En esta lección, estamos buscando incorporar el bootstrap cinco navbar en el sitio web y generar elementos de menú con ustedes sistema de menú chicos. Al finalizar este video, podrás crear un menú usando las cinco clases de utilidad de Bootstrap navbar. Podrías generar elementos de menú usando los parámetros de menú chicos. Sería capaz de configurar los elementos del menú que se mostrarán usando barreras a la materia frontal de las páginas para cada página individual y también utilizando un archivo de configuración. La primera parte de este video, vamos a crear el bootstrap cinco navbar usando las clases de utilidad de Bootstrap. A momento sección Navbar de los componentes parte de la página web bootstrap cinco Docs. Si desplázate hacia abajo hasta el primer ejemplo, vamos a copiar eso y pegarlo directamente todo el proyecto. Vamos a ir a la carpeta Layouts y luego a los parciales, y vamos a ir a header.html. Vamos a eliminar el texto del encabezado y pegaremos en lo que acabamos de copiar de la página web de Bootstrap. lo guardaremos. Asegúrate que ustedes sirvan como correr y vamos a echar un vistazo. Agradable y navbar ahora está apareciendo, pero hay una diferencia en el color de fondo. Si inspeccionamos la barra de navegación, notamos que tiene luz BG como color de fondo. Así que eso es lo primero que arreglaremos. Eso por mucho está bien. Eso significa que los colores del texto se adaptan mucho al fondo. Vamos a cambiar la luz de fondo y cambiar eso a cuerpo de BG. Bg cuerpo hace es a fondo con el color del cuerpo? Estoy en la sección de utilidades y antecedentes del sitio web de los docs Bootstrap. Y ya verás antes estábamos usando bg light, que es un blanco muy claro. También puedes elegir bg white, pero el más útil para nosotros porque específicamente queremos que la barra navbar coincida con el color de fondo del cuerpo, lo cambiará a cuerpo BG. cuerpo Bg se puede modificar. Pero ese no es el punto de este tutorial. Como se puede ver, la barra navbar ahora se mezcla en nuestro fondo. Antes continuamos el texto navbar, que en realidad lee navbar. Vamos a reemplazar eso con algunas llaves rizadas, sitio de puntos de películas, título de punto, y ese es el nombre del sitio web. Y luego bajaremos a la barra de búsqueda y vamos a eliminar eso para que nos deshacemos de toda esa forma. Entonces eliminaremos el enlace nav disabled autumn eliminará todo el elemento desplegable, dejará sólo el enlace activo y estándar formato Shift Alt F2. Y lo guardaremos y lo revisaremos. Creo que estamos listos para el siguiente paso. Ahora vamos a configurar nuestra plantilla para aceptar elementos de menú que ustedes generarán. Entre la página de plantillas de menú en el Hugo doxy es bastante compleja. Vamos a usar partes para este ejemplo. Estaremos variando ya sea dot, dot, dot menu es dopamina. No nos preocuparemos por eso. Tiene hijos. Estaremos utilizando el marido nuevo parámetro actual para insertar y clase activa. También estaremos incluyendo el nombre y la URL. Esto nos pareció demasiado complicado en los Hugo Docs. Entonces sigue con mucho cuidado y te mostraré cómo hacerlo. Vamos a empezar con este enlace activo. Él, el elemento de lista con el enlace activo arriba de eso. Crédito cualquier línea. Y vamos a utilizar el rango como antes usábamos. Y es sitio de puntos con un mayúscula S dot menús y luego dominio. Y luego después de ese elemento de la lista tenemos que hacerlo. Y luego tenemos la clase de enlace nav y la clase activa siempre toma t No queremos que se muestre si no es la página actual. Entonces lo que vamos a hacer es antes de que esté activo, le pondremos unos tirantes rizados. Usamos si tenemos que poner un signo de dólar en porque un signo de dólar se refiere a los contextos de página que está aquí arriba, pero dentro del rango, no son los contextos de página. Estamos tratando con los elementos del menú, por lo que usamos un signo de dólar y luego el menú de puntos actual. Bueno con capitales, el menú al que estamos apuntando es mío. Entonces debes poner una parada completa después de eso. Tenemos un espacio antes activo porque no quiero activo para chocar con el enlace de navegación. Nos estamos quedando sin espacio. Si utiliza Control V o Comando B elimina el explorador de archivos de la izquierda. Entonces justo antes entre un on page y los comentarios invertidos, tenemos que poner en una etiqueta final. La forma en que puedes resolver esto si es correcto o no. Si resalta todo, desde esos primeros tirantes rizados hasta lo intacto y lo retrasas, verás que coincide con el Ejemplo a continuación, voy a hacer Control Z porque quiero quedártelo Ejemplo a continuación, voy a . Ahora tengo que poner en mi link y usamos la variable, es todo mayúsculas URL. Entonces para el texto, voy a retroceder eso. Entonces usamos la variable dot capital N. No voy a eliminar esa segunda entrada porque no es necesaria. Todo se generará a través del rango y ahorre eso. Echemos un vistazo. Actualmente no se muestra nada porque tenemos que configurar los elementos del menú y lo vamos a hacer con materia frontal y también un archivo de configuración. Configurando con frente Meta significa que entramos en cada página individual y le decimos a Hugo en qué menú queremos que se muestre esa página. También podemos configurar el blanco de la página, que es el orden en el que se muestra. Control Beta abre el Explorador de visualización de archivos o puedes hacer clic en el primer botón, entrar en contenido. Y sólo tenemos una página en este momento, y eso es índice de puntos MD. Golpea por la parte superior. Lo pondré cerca de la parte superior para que sea fácil encontrar bajo borrador, tenemos que poner una entrada llamada menu, y llamaremos a eso principal y luego blanco. Y vamos a poner eso en sus diez ahora con la camiseta blanca mejor fuera haciéndolos en incrementos de diez. Y de esa manera si necesitas cambiar, tienes nueve números ahí para menear espacio. No tienes que reordenar todo. Eso lo guardaremos. Y vamos a echar un vistazo. Enlace a casa tiene brillo. Hacemos clic derecho sobre él e inspeccionamos. Veremos que tenemos la clase activa. También tenemos la página actual de RA y la RA actual hasta guionistas que, que enlaza para la página actual. Ahora vamos a configurar el menú usando un archivo de configuración. Y también vamos a mí información la plantilla que el enlace se pueda abrir en una nueva página si especifica eso en el archivo de configuración. En primer lugar, abriremos nuestro archivo de configuración. Y en la parte inferior se llama config dot YAML. Dejar un espacio en paz va a poner en ese hash para comentar y vamos a explicar lo que estamos haciendo. Y estamos creando enlaces de menú a través del archivo de configuración. El primer menú de facilidad de otoño con un colon y anti y pestaña. Estamos configurando nuestro menú principal, así que lo pondremos primero. Entonces en el auto, no le pegó a Tab, te metes en un guión. ¿Qué son los nombres? Y el primer enlace que pondrá es la página web de GitHub. Yo uso mucho y luego uso una URL de pestaña, y va a ser HTTP. Debes poner el HTTP adentro, lo contrario no enlazará externamente. Pensará que es, creo que en realidad es parte del sitio web, http punto y coma slash slash slash www.github.com. Tenemos que darle un blanco. Ese es el orden en el que se muestra. Así que vamos a dar ese 90 para que sepamos que está en la extrema derecha. Entonces vamos a poner otro, y esta vez, enlazaremos a Google estas pestañas URL. daremos un blanco de un 100. Entonces vamos a salvar eso. Y lo guardaremos funciona. Eso está funcionando. Y si miramos los enlaces de Github y Google, poseen un arma de fuego como queríamos que estuvieran con el blanco. Notarás el enlace de casa, tiene un color mucho más oscuro. Y eso es porque el enlace home tiene la etiqueta activa. Si nos fijamos en los otros dos enlaces, dirás que no han conseguido etiqueta activa. Y notarás que si hace que la página sea más estrecha, desaparecen los enlaces de navegación. Y luego ahora en un otoño desplegable, y ese es el comportamiento predeterminado. Si vas, puedes personalizar eso. Si vas a tu HTML. Tenemos navbar expandir LG, podemos cambiar eso a navbar expandir md por ejemplo, si no tenías muchos enlaces en días, generalmente bien. Ahora podemos hacerlo mucho estrecho antes se rompa y se convierta en un menú móvil. Lo siguiente que haremos es crear algún código en nuestra plantilla para que podamos abrir estos enlaces en nuevas ventanas. Porque actualmente si golpeamos esos enlaces, se cargan en la misma pestaña o ventana y no queremos eso porque fácilmente nunca se alejan de nuestro lado. Lo primero que haremos es volver a nuestro archivo de configuración. Voy a definir algunos parámetros. Ahora, si estamos viendo parámetros en Markdown para una página o tienes que hacer es simplemente empezar a tocar la media. Pero estamos mirando la configuración de Menu. En realidad tenemos que decirte chico, que queremos ponerlo en un parámetro, parámetro personalizado. Entonces haremos params con dos puntos y luego tocamos y llamaremos a este parámetro en blanco. Y lo haremos realidad si deseamos abrir ese enlace en una nueva ventana o en una pestaña. Y vamos a hacer estallar eso para el siguiente también. Lo guardaremos y luego iremos a hacer que nuestro código de plantilla vaya a entrar en nuestro encabezado. Y crearemos el código que enlaza hasta nuestro parámetro true en blanco. Bastante un tiempo enlace. Lleva nuestro viaje de altura a una nueva línea. Y después de la deriva de altura se pondrá como si AQ y AQ signifique igual. Entonces si es igual a punto params dot blank, true. Entonces si el punto params dot blank es verdadero, ingresará algunos textos y eso es objetivo igual a guión bajo, en blanco. Grill es igual a no, abierto en él a riesgos de seguridad que estamos tratando de comunicar usando la nota, abrimos, y luego pondremos nuestros antagonistas y lo guardaremos. Vamos a echar un vistazo. Voy a hacer click en mi enlace de GitHub y verás que se abre en una nueva pestaña. Y lo mismo con Google. Hacemos clic derecho sobre eso e inspeccionamos. Se dirá que tenemos objetivo igual a carril en blanco igual saber abridor que entra y eso es genial. Ese es el final de la lección básica de Bootstrap navbar. Si tienes alguna pregunta y no puedes resolver algo, por favor. Esta sección de discusión a continuación, e intentaré volver a la mayor brevedad posible. También puedes descargar los archivos fuente para es menor que la sección de recursos y depurar desde ahí. De lo contrario, te veré en el siguiente video. 10. Pie de pie con año de copyright automático: En esta lección, vamos a crear un pie de página y vamos a generar el año para el copyright automáticamente usando Hugo, que genera en tiempo de ejecución estáticamente y también JavaScript que dinámicamente actualiza el año con base en el año que el usuario está navegando por la página web. Al finalizar este video, podrás crear un pie con un fondo sólido. Podrás introducir el signo de copyright usando código compatible con HTML. Y podrás generar la IBA estáticamente con Hugo como un buen viaje, sin respaldo de script y también usando JavaScript de forma dinámica. Lo primero que vamos a hacer es crear el pie de página. Entonces abre el proyecto y entra en la carpeta Layouts y luego entra en parciales. Y lo que vamos a trabajar durante esta lección es el pie de página. Ayuda a retomar ese texto. Lo primero que vamos a hacer es crear un div, el contenedor de abuso pasado, pero esta vez vamos a usar fluidos de contenedores. Por lo que su contenedor de salpicaduras fluido. fluido contenedor ocupa el ancho máximo de la página y cambia de tamaño con la página. Siempre es la página completa o el ancho. Con una ayuda para poner en fila y una columna. Esa columna vamos a usar un fondo oscuro. Entonces para hacer eso, hacemos doc, BG dash doc. También voy a necesitar algunos textos blancos. Así lo hacen dot txt, guión blanco. Voy a poner algún relleno arriba, abajo y hacia la izquierda, a la derecha del texto. Entonces usaremos dot py dash tres. Hay muchas clases. Vamos a guardar eso y echar un vistazo. Vamos a ejecutar hey guys server. Abajo en la parte inferior de la página. Tenemos nuestra barra negra. Ahora si te estás preguntando sobre los diferentes colores de fondo y garrapatas, si miras aquí en fondo, estos son todos los diferentes colores de fondo entre los que puedes elegir. Por defecto, puedes especificar la tuya propia, ya sea anulando las clases Bootstrap o creando tu propia clase o escribiendo las variables bootstrap son, pero para los efectos es menor que, sólo estamos eligiendo uno de estos colores y estamos eligiendo Oscuro. Bg discontinuado oscuro. En cuanto a los colores de garrapatas, ahora estamos en la sección de color de utilidades. Y estos son todos los colores predeterminados de Bootstrap. Y para algunos de estos los han puesto sobre un fondo oscuro, pero eso no sucede automáticamente. Tienes que especificar el color de fondo. Estas clases sólo realmente cambian el color del texto y vamos a usar garrapatas. Lo que podríamos tratar nos lleva la vida también. Creo que se necesita blanco podría ofrecer el impacto. A menudo lo estamos. Vamos a crear el texto para el pie de página. Pongámoslo en mi texto básico. Haremos derechos de autor. Entonces necesitamos el signo de copyright para hacer eso. Ponemos copia final. Verás que el nombre de la sugerencia entonces pondrá solo en un análisis GIF básico y haremos 2022. Entonces vamos a poner en el nombre de la página web. Entonces vamos a hacer dot, dot title. Vamos a guardar eso y echar un vistazo. Vamos a buscar realmente bien ahora decir por ejemplo, no quieres usar el nombre de tu sitio web para el aviso de copyright. Echemos un vistazo a poner algunos mensajes de texto alternos. Ahora hay otra pieza de variable que podemos usar, ese sitio dot copyright. El modo en que hacemos este trabajo es que lo haremos con dot, dot dot dot copyright. Entonces haremos el punto que va a mostrar ese contenido. Y entonces podemos hacer otra cosa. Veamos si los derechos de autor no están disponibles. Else mostrará punto, punto, punto título y luego terminaremos con eso, lo guardaremos. Y antes de ir a comprobarlo entrará en nuestro config.xml. Y definiremos las garrapatas de los derechos de autor. Pon un poco de hashing y pon un pequeño comentario, copia alterna, texto de la empresa. Y luego haremos copia, ¿verdad? Y vamos a hacer Diseño Web, inc. Y guardar eso, y guardarlo funciona. Ahí está tu texto alternativo. Yo el montón no está automatizado, así que vamos a volver a través y lo haremos. Eso nos lleva a nuestro siguiente paso y eso se genera en levadura estáticamente usando Hugo. Ahora, esa es una función bastante compleja para hacer ejercicio, pero voy a hacerla realmente simple para ti todo lo que tienes que hacer, poniendo los tirantes rizados, haz ahora formato de punto. Entonces entre paréntesis 2006 abajo, hay que hacer el año 2006. Nadie va a trabajar. Hay muchas maneras en que puedes formatear fechas, pero solo voy a mantenerlo realmente simple para este tutorial. Lo guardaremos y lo inspeccionaremos. Año rodaje es 2021. Se puede ver que está funcionando a la perfección. Eso nos lleva a la siguiente sección que está generando el dinámicamente usando JavaScript. Entonces entonces estoy en realidad significa que sucedió cuando el usuario navega al sitio y se carga en el navegador en ese punto se va a generar la E. Por ahora voy a conseguir esa función, la función, voy a cortar eso. Voy a pegarlo por el fondo. Voy a poner en algunos comentarios, slash star, la estrella. Y luego empieza a cortar la respuesta. Voy a comentar eso. Pero voy a poner en un lapso, sólo hablando palmo. Un ID de span ID es igual a js. Ahora, siempre prefijo mis ID, que son para fines JavaScript con el prefijo J, S, dash. Y de esa manera sé que si cambio eso, JavaScript es una especie de dejar de funcionar. ¿ Qué son span? Y luego vamos a usar algún JavaScript para escribir la fecha dentro de ese lapso. Entonces lo guardaré por ahora y abriremos nuestro archivo JavaScript que hicimos antes. Primero que nada apuntaremos el lapso que acabamos de crear y lo usamos con punto de documento. Obtener elemento por ID. Asegúrate de usar mayúsculas en todos los sentidos excepto el primero. Después abrimos el soporte hacia arriba. Dentro de ese corchete, tenemos que especificar el ID real del lapso. Por lo que hay que usar apóstrofes. Y luego vamos, estamos buscando JS STAT3, esa es la identificación. Nos hemos dirigido a nuestro elemento y lo hemos seleccionado con JavaScript. Y queremos cambiar el HTML interno. Entonces vamos a hacer punto. Interior. Html es el HTML es todas las capitales. Vamos a usar una señal igual, así que voy a cambiarla ahora. A qué lo vamos a cambiar, y esto es otra vez, esto es bastante complejo, pero lo vamos a quedar. La explicación es realmente simple para este tutorial. Vamos a crear una nueva fecha y luego conseguir abierto completo, cerrar el soporte, terminar con dos puntos. Antes de que te olvides de lo que has escrito, vamos a crear un comentario. Ahora comentar el JavaScript es ligeramente diferente a Hugo o YAML. Utilizamos una barra doble para un comentario de una sola línea. Muy bien, lo guardaremos. Es posible que tengas que reiniciar tu servidor para que esto funcione y vamos a revisar el sitio web ya ha sido, en lugar de dinámicamente, nos lleva al siguiente paso, necesitamos crear un nuevo script completo de vuelta. En swipe Mei Ti. Explica lo que es un buen script para Becky's si entramos en inspeccionar y luego el comando de menú de tres puntos y ejecutar, que también es Control Shift P, superando Java, y luego deshabilitamos JavaScript. no va a pasar nada. Tienes que refrescar la página. Puede controlar R o hacer clic en el botón Refrescar. Ya verás que no tenemos nada al lado autor porque JavaScript no está funcionando. Un buen respaldo de script es algunos textos que se mostrarán solo si JavaScript está deshabilitado o no es compatible en ese navegador. Es tan simple como crear una etiqueta llamada un buen guión. Se puede hacer eso automáticamente con emit. Y luego ahí dentro, comenzaremos con un buen ejemplo sencillo. Pondremos en el año 2025, por ejemplo, lo haremos una u en el pasado vamos 2020. Lo salvará. Refresca nuestro navegador. Verás que sale el año 2020. Si JavaScript TCC etiquetado, haz que sean mejores, vamos a usar Hugo degenerado que te lleves los comentarios. Este código de aquí abajo. Lo cortaremos y luego lo pegaremos en la nueva sección de script. Y ahora va a insertar el año en curso en esa etiqueta sin script. Pero aquí está la captura. Él va sólo hacer eso cuando construyas tu sitio. No vas a construir tu sitio todos los días. Probablemente lo construyes todos los años. Pero comenzó alrededor de enero, febrero, marzo tiene una gran probabilidad que tengas el año anterior. Y así es como estamos usando JavaScript para generar dinámicamente el dydt. Tenemos nuestra espalda completa por si acaso refrescar el sitio. Y se acerca como 2021. Y luego habilitaremos JavaScript, Java y lo habilitaremos y actualizaremos el otro derecho, habilitó JavaScript para que simplemente cierre las herramientas del desarrollador y actualice. Y funciona muy bien. Eso es todo para el video. Hay mucho que tomar. Existe tanto una generación dinámica como la estática de la foto. Tienes alguna pregunta en la sección de discusión a continuación. De lo contrario, puede descargar el código fuente de esta lección terminada. Te veré en la próxima lección. 11. Crear una sola página: A lo largo de este proyecto hasta ahora hemos estado trabajando solo en la página de inicio. Ahora vamos a ver cómo acreditar páginas adicionales y términos de Hugo que llamamos a una sola páginas. Al finalizar esta lección, podrás crear una plantilla de una sola página. Podrías crear un simulacro de caída para una sola página. Y sería capaz de generar un enlace de menú a partir de una sola materia de portada de páginas. Lo primero que vamos a hacer es corregir una sola plantilla de página. Tu proyecto necesita entrar en una carpeta Layouts y luego por defecto, tenemos que tener suficiente single.php HTML y en realidad no hemos tocado ve todavía. Lo primero que tenemos que hacer, es muy similar al index.html. Tenemos que definir el bloque que estaban apuntando enteramente al bloque principal, solo bloque de lijado. En realidad tenemos suficiente por sí mismo. Y entonces vamos a dejar unas cuantas líneas y vamos a poner ahora y etiquetar, podemos poner un etiquetado de sección. Le daremos una clase mía. acaso necesitemos apuntar a esa sección con algún CSS por la pista. Voy a poner en nuestro Contenedor. Pestaña primera fila, fila. Lo pondremos en una columna. Es realmente importante si querías bootstrap para funcionar correctamente, debes seguir ese orden cada vez. Y luego pondremos en un rumbo. H1 insertará el título de la página. Entonces usamos eso con el título de punto mayúscula T. Entonces lo vamos a poner en un subtítulo. Ahora bien este subtotal podría no siempre un P. Tenemos que usarlo dentro de un tags condicionales que si no aparece, el código no se ejecutará porque no quieres generar una flecha o tener una etiqueta vacía en nuestro sitio. Por lo que usamos con params de punto con un título mayúscula P dot sub. Entonces correremos un H2. Y lo haremos en cursiva. Haremos dot FST para el estilo de fuente italic, y también haremos tamaño de fuente de tres. La tercera etapa hará texto silenciado también, sólo mucho y arriba un poco. Pensé que las garrapatas se apagaban. Entonces vamos a poner en unos tirantes rizados con un punto. Ese punto estará generando los datos a partir de puntos params dot subtítulo. Ahora debajo pondremos en el etiquetado. Lo siguiente que tenemos que hacer es el contenido de la página. Vamos a hacer un div. Haremos relleno por encima y por debajo de la de tres. Entonces vamos a hacer dot py, guión tres, eso es arriba y abajo. Haremos nuestros tirantes rizados. Hemos pensado en el contenido. Si configuramos nuestra plantilla básica ahora necesito crear un simulacro de caída para el contenido de la página. Cuanto mejor cómo hacer esto es usar un comando controlará el comando CEO decir para cerrar el servidor hacia abajo. Quiero decir, arquetipos. Al inicio del curso. Lo configuramos para que el borrador fuera falso. Por defecto cuando creamos una nueva página usando Guigo, no será borrador. Por defecto fuera de la caja todas las páginas se crea un borrador y en realidad haciendo un p.sit. El comando es Hugo sabía que usamos slash sobre slash, índice dot, MD en. Después verás en la carpeta de contenido que tenemos nuestra carpeta Acerca y index.html. Puedes, por ejemplo, Hugo lo sabía. Y entonces se podría hacer proceso. Terminarás con un archivo aquí llamado proceso. Trabajan muy similares en materia de navegación. Los prefiero en su propia carpeta porque más adelante, estarás mirando recursos de páginas e imágenes y almacenando imágenes con los archivos. Y es mucho más fácil si creas una subcarpeta para cada página. Voy a eliminar esa ahí. Ahora echemos un vistazo a la caída simulada. Entonces lo primero que vamos a crear es el subtotal. Vamos a poner aquí, por ejemplo, sirviendo a la comunidad local. Desde 1999. Entonces vamos a crear algunos textos. Si sigues las indicaciones en la lección anterior, podrás usar Emmet dentro la falsa alarma de knockdown. Entonces escribiremos 100 al mes una línea y volveré a correr eso. Ir a correr lorem 90 días tiempo. Ahora como cerramos el servidor hago para luego ejecutar el nuevo comando Hugo tendrá que ejecutaros nunca más. Y luego echaremos un vistazo a la página web y diremos, Mira, aún no hemos configurado los elementos del menú. Tendremos que navegar manualmente para cortar About. Se puede decir que estamos usando la plantilla que acabamos de crear sin subtitulada. Deshabilitó el subtítulo, por ejemplo. Pondré un hashing antes de que el subtotal, digamos que no lo quieres para que desaparezca esa página. Pero si inspeccionamos, notarás que las recetas de etiquetas también. Y por eso utilicé el comando width. Eso nos lleva al último paso y eso es crear un elemento de menú y un blanco. Volvemos a nuestro índice dot m d, El principal con el guión bajo en la raíz de la carpeta de contenido. Notarás que está asignado al menú principal y tiene un peso de lata o copia eso. Volverán a encender nuestro subtotal. Y luego lo pegaremos, pero tenemos que cambiar el blanco y lo haremos darle un peso de 20. De esa manera es el segundo elemento del menú. Si estamos mirando el archivo de configuración, verás que también tenemos un otoño con el peso de 1900. Por lo que tenemos estaño 2019 cientos que debo saber, mostrar en orden. Echemos un vistazo. Siempre están peleando en el orden correcto y el estado activo también está funcionando muy bien, porque nuestra página sobre, que es las páginas actuales, dot-com. Si tenemos un hogar, verás que también es Docker. Algunas personas usan JavaScript para hacer esa función, pero es mucho más fácil con ego ser un generador de sitios estáticos. Podemos hacerlo automáticamente. Eso es todo por esta lección. Puedes hacer tantas páginas individuales como quieras y todas usarán esa plantilla. Veremos plantillas personalizadas en un curso posterior. Viendo la siguiente lección. 12. Crear una página de lista: Bienvenido a la siguiente lección. En esta lección, estamos buscando crear páginas de lista. Esta lección será un poco más larga que la anterior. Y eso es porque las páginas de listas son bastante complejas y también estamos mirando la paginación. Al finalizar esta lección, podrás crear un parcial para mostrar encabezado de cada página de forma consistente. Podrás crear al menos plantilla de página. Podrás crear un archivo de markdown para al menos página. Podrías generar un enlace de menú para la página de lista a través de su materia frontal. Podrías crear un marcador páginas individuales para el paquete de sucursal. Y esto es sólo para fines de demostración. En este tutorial, has tenido una paginate, la menor visualización de páginas individuales en tu página de lista. Mejor controlas el número de páginas mostradas en cada página paginada y podrás controlar la longitud de la visualización del resumen de la página para cada página de tu lista. Paso uno, hagamos un parcial. Así que cada página tiene su título, se muestra consistentemente. Vuelve a nuestro HTML single.php y arrastrará todos los textos utilizados para mostrar el título. Vamos a cortar eso y en su lugar, pondremos dos llaves rizadas. Y ejecutaremos un comando llamado parcial. Y lo vamos a llamar título. Y entonces hay que poner una parada completa para que las páginas enteras contextos, estos pass-through a ese parcial. Ahora, si golpeas Save, verás un error generado y eso es porque aún no hemos hecho eso parcial. Entraré en tu carpeta de parciales y creo un nuevo archivo llamado HTML titulado dot dentro de ese parcial, pegando ese código que acabamos cortar hace unos momentos y guardarlo. Echemos un vistazo para ver si todo funciona como se esperaba. Nunca lo llevo a las páginas Acerca. Se puede ver que el total sigue siendo mostrado a pesar de que se está sacando de lo parcial. Ahora en el segundo paso, tenemos que crear una plantilla de página de lista para mostrar menos páginas. Si buscas más información sobre cómo funcionan las páginas de lista, enlazaré la página de Hugo docs para paquetes de páginas y verás que un paquete de sucursal tiene una caída de índice con un subrayado. Antes de eso, usaremos el menor diseño de tipo que se está trabajando en esta lección. La lección anterior fue usar un índice de punto MD con el guión bajo y que se utiliza el tipo de diseño único. Las plantillas de arrendamiento también muestran al menos todas las otras páginas dentro de esa carpeta entrarán en el list.html dentro de nuestra carpeta predeterminada, dentro del diseño. Y según la sola página, necesitamos o bien encontrar mi regla, sólo copia todo el archivo. Vamos a cambiarlo. Entonces lo primero que vamos a hacer es debajo del contenido, vamos a usar range. Y vamos a pasar por todas las páginas. Tenemos que poner en la etiqueta final para acabar con ese océano cualquiera de los dos. Y luego ahí dentro mostraremos el golpe de esa página. Entonces vamos a usar H2. Ya hemos acostumbrado a H1 previamente dentro este T2 parcial y luego Tab. Entonces usaremos un enlace i en un guión. Y el enlace vamos a usar llaves rizadas que pensamos enlace permanente con un P. mayúscula Y luego en medio de la apertura y cierre de una etiqueta, vamos a insertar el título de esa página, así que usa el título de punto con un mayúscula T. Entonces por debajo de eso vamos a mostrar un resumen del texto en esa página, usaremos las dos llaves rizadas y va a ser resumen de puntos. Vamos a envolver todo eso dentro de una etiqueta de artículo. Mock down fall. Ahora, la página de lista que podemos conseguir que muestre se detendrá aquí chicos alguna vez con Control C o Comando C con Hugo sabían slash products slash underscore index.html. Vemos qué carpeta nuestros productos y nuestro index.html, lo que estoy poniendo en algún contenido. Lo guardaremos para, continuamos, lo asignaremos al menú principal y luego un colon y buscaremos a main. Y le daremos un peso de 30. Por lo que está a la derecha del elemento de menú existente que tenemos para sobre reiniciar el servidor Hugo y echar un vistazo nuevo elemento de menú para productos como los encabezados APEDE siendo tirados correctamente. Y así como el contenido pero nada más tiene su vuelo. Y eso es porque aún no hemos creado el elemento de una sola página. Ahora voy a crear algún marcador de posición. Vamos sólo temporal. Las páginas van a ser páginas individuales y van a vivir dentro del paquete de sucursal donde nuestros productos index fall leaves detendrán al servidor de nuevo. Vamos a correr Hugo sabía slash productos slash autos dot md. Dos formas en que podemos hacer esto. Podemos tener lo siguiente en autos dot MD, o si vamos a estar usando fotos más adelante, puedes hacer una carpeta llamada autos y luego cambiar el nombre del archivo a indexar punto m d. Recomendar este método porque es mucho mejor para la expansión más adelante. Index.html. Vamos a agregarle algún contenido. Vamos a correr lorem. Creo que es mañana en un párrafo de 30 palabras y luego alarma en un párrafo de 50 palabras. Y entonces alarma tal vez cientos esta vez. Y entonces lo guardaré. múltiples productos para que podamos conseguir que la paginación funcione. Entonces lo que voy a hacer es que voy a copiar y pegar. Causa unas cuantas veces. Voy a cambiarle el nombre a barcos. Y luego cambiaré el nombre de las siguientes 12 bicicletas y la pondré en la carpeta correcta. Y luego cambiaré el nombre de la última mezclada a caja de motor. Seguiré haciendo eso y te veré en un minuto. Tengo un montón de carpetas cerca de ellos o qué índice dot archivos MDT y decirles qué voy a entrar y renombrar el título de cada una para que coincida con la carpeta. Ustedes a través de nueve nueves y los veré en un minuto. Muy bien, así que voy a asegurarme de que estén todos salvados y cerrados. Entonces volveremos a ejecutar el servidor y ver qué pasa. Chicos está encontrando un resumen de todas esas páginas que existen. ¿ Cómo crees que necesitamos un poco de espacio entre ellos? Necesitamos algo de especia entre el resumen y el pie de página en la parte inferior. Vuelve a nuestra sección list.html. Haremos P B3 o relleno inferior tres. Y vamos a envolver nuestro resumen en un div con un relleno inferior tres. Por lo que Pb tres prefabricados F3 dirán eso y echarán un vistazo. Es bastante básico, pero por ahora es lo suficientemente funcional. Acreditar una larga lista de todas las páginas individuales que existen dentro de la carpeta de productos. Ahora tenemos que paginar que muestre que sólo un cierto número que mostré por página. La forma en que podemos hacer eso es donde arreglamos a través de todas las páginas dentro de agregar paginate de puntos o al lado de eso. Si guardamos eso, fuimos diferentes porque por defecto Hugo muestra diez páginas cuando pagina. Así que ahora vamos a crear los controles de paginación en la parte inferior de la página y volveremos y cambiaremos el número de páginas que mostró por página. Para mostrar los controles de paginación tiene una plantilla incorporada y podemos copiarla y pegarla desde esta página. Y he vinculado a estos docs pagina. En la sección de recursos. Después de la etiqueta, voy a crear un div porque vamos a darle estilo en un minuto. Se piensa que Dave, voy a pegar en ustedes paginación plantilla interna para aparezcan los controles de paginación, vamos a tener que limitar el número de páginas que se muestran por página. Va a copiar esta piramidal. Entonces abriremos nuestro archivo de configuración. Lo pondremos en un comentario, pondremos en paginate, y lo pondremos en cinco. lo guardaremos. Ahora puedes ver que tenemos productos 12345 y luego tenemos nuestros controles en la parte inferior. Y estas en realidad son clases de Bootstrap por defecto, si vas, podemos ir a nuestra segunda página. Notarás en la parte superior los cambios de URL. Estamos en la página dos. Y si volvemos, es sólo en la página de índice. Podemos hacer un poco de trabajo para que estos exhiban un poco mejor. Volveremos a la página de lista que creamos antes. Lo pondremos en clase igual. En primer lugar, vamos a hacer em dash tres al margen de crédito por todo alrededor para mantener otros objetos alejados de él. Y luego para enviar a través de ella, tenemos que hacer d dash flux para display fix. Una vez que hayas habilitado copos, podemos hacer justificar el centro de contenido. Vamos a salvar eso. Como se puede ver, se ve genial. Lo siguiente que veremos es cómo controlar la longitud del resumen de la página utilizado en nuestra página de índice. Tenemos un poco demasiado texto que se muestra para cada producto. Volvamos y arreglemos eso. Ahora, hay algunas formas en que podemos hacer esto. La forma más sencilla de hacerlo con una configuración que está utilizando el parámetro de longitud de resumen. Entonces vamos a copiar eso. Entra en la caída de configuración. Pondremos en un comentario Pi establecido en. Y esto no sólo hace palabras, sino que Hugo ronda a dos frases ya que de esa manera poniendo siete palabras por ejemplo, Chicos, estamos agregando eso a la frase más cercana. Por lo que sólo voy a cambiar la frase alrededor. Entra en botes. Agarró su sentencia de él pone el sitio de inicio que se puede ver cómo ustedes chicos, pesar de que solo teníamos siete palabras, se redondea a la frase más cercana, mientras que habría conseguido siete palabras. Ahora, por ejemplo, crees que eso se ve terrible para tus productos. Hay dos, de lo contrario podemos generar resúmenes manualmente. La primera alternativa al resumen automático es la división manual. Ahora, debes copiar y pegar esto exactamente. Esto etiquetas. Vamos a copiar eso. Entonces iremos a R Markdown para nuestro producto de barcos. Se pegará eso y lo guardará. Se puede ver ahí que todos los textos anteriores esa etiqueta se muestran como resumen para embarcaciones. El siguiente que llegué para resumen es usar tapete frontal y vamos a usar una variable de resumen en nuestro prado frontal. Así que voy a copiar eso. Voy a entrar en la caja. Producto sacará resumen y copiará una o dos frases en ese resumen. Y luego lo guardaremos. Comenzó con el cuadro de palabras. Entonces tenemos nuestra anulación sumaria para bicicletas usando el metal frontal. Las tres formas en que podemos generar resúmenes, Hugo TID para la Lección diez. Enhorabuena, has llegado hasta el final de la parte principal del curso. Te veré en la próxima lección. Recuerda, si tienes alguna pregunta, puedes preguntarlas a continuación e intentaré volver lo antes posible. 13. Construir y subir el sitio web: Esta lección se trata de construir el sitio web. Ahora, hasta ahora en este curso, han estado trabajando con ustedes servidor de desarrollo. Ahora vamos a construir realmente el sitio web, generar algunos archivos HTML, probarlos, y luego subirlos a través de FTP. Al finalizar este video, podrás construir un sitio web a la carpeta pública. También podrás modificar HTML para reducir su tamaño. Podrías probar la aplicación del sitio web antes de subirla a través de FTP. Y podrás subir los archivos de los sitios vía FTP. Lo primero que vamos a ver es cómo construir con los archivos de salida de encabezado Hugo. Antes de construir el sitio usando Hugo, tenemos que decirle a su ego, el nombre de dominio al que vamos a estar enviando esto. De esa manera, Hugo puede construir correctamente las URL. Si entras en tu archivo de configuración, verás que hay un elemento llamado URL de sesgo. Ahora, antes de hacer estallar en la encuesta, tienes que revisar el nombre de dominio. Por ahora vamos a usar localhost. Ella puso una rebanada después de eso. Hay un entorno más que tenemos que hacer antes de construir el sitio. Y eso es que necesitamos desactivar la generación de la carpeta de categorías y la carpeta tags. Podemos hacerlo con tipos discapacitados. Pon el código exacto y luego tengo aquí, he puesto mi comentario arriba de él. Incluso si no tenemos taxonomías ni categorías o etiquetas, estas carpetas se generarán de todos modos. Ahora levanta este enlace en la sección de recursos, hay un comando llamado Hugo, y hay que darle algunas banderas. Opcionalmente. Acabamos de ejecutar el comando Hugo. En realidad se construirá de manera inmediata. Entonces vamos a darle una vuelta a eso. De vuelta en nuestro proyecto. Hablaremos en Hugo. Y sólo voy a hacer ese término un poco más grande. Es muy similar a lo que normalmente obtienes excepto en realidad salidas de archivos para ti. Corrí Hugo sin la configuración de tipos discapacitados solo para mostrarte lo que sí obtienes. Como se puede ver, tenemos una carpeta de categoría y una carpeta de etiquetas. Y ahí dentro tenemos nuestro index.html. No queremos eso para este sitio web. Voy a volver a ejecutarlo con esa configuración en su lugar como acabo de mostrar vas echar un vistazo a la diferencia. Ahora, voy a usar un comando llamado DIR de destino limpio. Necesitan usar esto dijo que los ítems de la carpeta eliminados. Si haces cambios en tu sitio web, digamos por ejemplo, eliminas una página y luego reconstruyes su ego. Esa página eliminada seguirá ahí a menos que elimines manualmente todo en la foto o ejecutes este comando. Ahora no teníamos esos archivos innecesarios y si usas un tiempo para navegar a ellos, probablemente no tendría sentido. Y parecería que si un error de página, echemos un vistazo dentro de uno de los archivos y veamos lo que ustedes salieron. Como se puede ver, hay mucho espacio en todo el archivo. Podemos quitar ese espacio. Estaremos reduciendo el archivo no por mucho, pero tendrá un impacto en los tiempos de carga para usos. La ampliación elimina todos los espacios en blanco adicionales y los nuevos caracteres de línea para reducir el tamaño del archivo. Eso a su vez creará una descarga más rápida para el usuario. Puedes mirar la página de docs. Existe una opción que podemos usar llamada minify. Tenemos que ingresar dash, dash minify después del comando de Hugo. Ampliará cualquier formato de salida soportado, que es básicamente solo HTML. No es compatible con JavaScript ni CSS. Echemos un vistazo. Entonces abriremos el archivo index.html. Como se puede ver, todos los espacios en blanco si quitan hueso, desafortunadamente, no quita los personajes de nueva línea. Antes de ir a la molestia de subir tus archivos con un software FTP a un servidor remoto. Te recomiendo probarlo localmente y es bastante fácil de hacer. El paquete de software que vamos a utilizar para ejecutar un servidor de prueba es XAMPP. Es una suite gratuita de software y se puede utilizar para una variedad de propósitos. También lo estaré usando para hacer una prueba de carga FTP. También puedes intentarlo tú mismo si no tienes un servidor FTP para subir los archivos. A. El inicio de este curso, te mostré cómo instalar Hugo y todo el software asociado. Es súper fácil de instalar XAMPP. No voy a pasar por ese proceso. Tiene versiones disponibles para Windows, Linux y Mac. Entonces es bueno para todos. He abierto la muestra x m doble p.stance. Vamos a poner en marcha el servidor Apache. No necesitamos MySQL porque estamos haciendo un sitio estático. Entonces tienes que navegar a la carpeta y te dice aquí abajo en los registros que está instalado en C slash x y pieza vieja, vamos a navegar a esa carpeta. Y luego una vez que estés en esa carpeta, tienes que entrar en HT docs. Mccartney consiguió un sitio web de muestra. Así que volvamos a Chrome y veremos si podemos encontrar eso. En Chrome. Hablaré en anfitrión local ahora, ten cuidado por la foto de día va a querer ir a puerto ciento treinta y ciento tres ese tipo, pero no queremos eso. Sólo queremos el puerto predeterminado de 80. Ahí está el sitio que acabamos de mirar. Vamos a eliminar este sitio porque no lo necesitamos. Vamos a subir los nuestros propios. Hey chicos lo vieron. Puedes Platón como falso, volver a ti o hugo carpeta pública necesita Control I, o puedes resaltar todos los archivos. Hacer Control C. Y luego golpear en la carpeta docs, pegarlos con Control V o Comando V. Luego regresaremos a nuestro navegador y lo revisaremos. Entonces actualizaremos la página. Deshazte de esa página de tablero. Como se puede ver, tenemos nuestro lado Hugo y eso está emulando su sitio subido a un servidor FTP y poner nuestra paginación funcionando. Tenemos que nuestra sola página está funcionando. Estamos listos para subir esto a un siete vía FTP. Eso nos lleva al último paso en todo el tutorial y eso es subir tu nuevo sitio a través de FTP. Ahora voy a comer cuando SEP para subir FTP, sin embargo, solo está disponible en Windows si estás usando un Mac o Linux. Un ejemplo de un buen software que puedes usar. Esto cae mucho. Tengo un soporte multiplataforma, pero todos los programas FTP son bastante similares. ¿ Quieres emular la carga a FTP en tu propio equipo sin usar un servidor web. Xampp incluye mucho las caídas. Servidor Ftp, si inicias eso y luego vas al botón Admin, estamos configurando el servidor en uno a 7 punto 0 No.1, que es localhost. Entonces en la configuración, yendo al botón de usuarios, creas un usuario, le das una contraseña simple, y asegúrate de haber compartido algunas carpetas. Estoy compartiendo las diapositivas, exams slash HT docs carpeta. Voy a dar todos los permisos porque necesitamos poder hacer eso. FTP violeta. Establecer eso como el directorio home. lo guardaremos. Ahora podríamos software FTP. Voy a crear una nueva sesión. Voy a conectarme a uno a siete punto 0 punto punto uno. Ahora eso puede cambiar dependiendo de dónde esté subiendo a sus falsos testigos. Esto es sólo para la prueba localhost. Voy a poner en el nombre de usuario y contraseña para mi servidor de prueba golpeará Login. Ahora estas son las viejas caídas que previamente copiamos en la carpeta HT docs. Voy a resaltar esos y golpear delete. Eliminar este falso. Ese es el servidor remoto. Y esta es nuestra carpeta pública donde construimos los archivos para resaltar todos los archivos de nuestra carpeta pública. arrastramos a través. Si fuera servidor remoto, probablemente les tomará un tiempo subir y luego podemos ir y podemos navegar a la página y ver si funciona. Parece que está funcionando después de que hayamos subido vía FTP. Grandes felicitaciones a quienes lo hicieron hasta el final del tutorial. Has hecho un gran trabajo. Has aprendido muchas habilidades y espero verte en mis otros tutoriales de Hugo donde exploramos todos estos conceptos y muchos más con mucho mayor detalle. 14. Resumen: Entonces espero que hayas disfrutado del curso y te hayas sacado mucho de él. Bueno, muchos de los temas no fueron tan en profundidad aunque diseñados para ser una introducción minuciosa. Pero no te preocupes, mois, liberando más cursos que cubren todos los aspectos del diseño web estático. Nos vemos en el siguiente curso. 15. Extra: automatiza las tareas de Hugo con scripts de la NPM: Esta es una lección de bonificación. He tenido mucha retroalimentación. La gente que pide características adicionales como esta que vamos a estar haciendo es crear una lista de scripts que se ejecutarán con el gestor de paquetes NPM para que podamos automatizar las tareas que necesitarán ejecutar con Hugo. Así que empecemos. Vamos a una nueva terminal y lo primero que vamos a correr es npm. En ella. Debe tener instalado npm. Si descargas Node.js, tendrá NPM incluido para usted. Lo primero que haremos es pediremos el nombre del proyecto. En este caso particular, el nombre de la carpeta está perfectamente bien. Tiende a versión en solo configurarlo en 0.1 para un proyecto en el que acabo de empezar. El último es para parches. El dígito medio es de cuatro características tan fijas como el cambio. Y el primer dígito principal es para romper cambios. Y generalmente no lo etiquetas como versión uno hasta que sea un lanzamiento de producción estable. Así que sólo me voy a quedar con 0.1 por ahora. Descripción. Opcionalmente puedes poner una descripción para tu proyecto. Esto es principalmente si estás publicando tu proyecto el Repositorio NPM y generalmente no publicas sitios web en el repositorio npm. Pero no tiene que poner una descripción ahí solo para recordarse de qué se trata este proyecto en particular. En realidad no tenemos un punto de entrada ya que estamos usando Qie Gei para compilar el sitio web. Pero lo que podrías poner ahí es barra pública index.html, pero realmente no importa. No tenemos un comando de prueba. Y ya ejecuté git init en este proyecto porque lo estoy subiendo a GitHub. Entonces ya es para tomar eso y tiene la dirección ahí del repositorio de Git. Es bastante práctico tener esa dirección en tu archivo package.json, qué manera creando ahora mismo palabras clave. No lo quieres. Y eso es principalmente si estás subiendo a NPM. Para que la gente pueda buscar tu proyecto. Autor. Nuevamente, es un inestable puede buscar tus proyectos, por lo que realmente no importa. Y tiempo nos licenciaríamos. Y luego tenemos que confirmar el lado izquierdo. Verás package.json yendo a cerrar la terminal para que podamos echar un vistazo. Para que puedas eliminar cosas que no necesitas. No me voy a preocupar por el guión principal de prueba Olivia ahí por ahora. Me desharé del autor. Glicinos bichos en homepage. Ten en cuenta que no puedes tener comas finales en Jason's tener que deshacerte de esa coma final. Entonces estamos listos para empezar con los guiones. Primero vamos a mirar es div. Voy a retroceder todo esto. Vamos a ejecutar el servidor de desarrollo. Como saben, estábamos en el servidor Hugo, pero hay algunas cosas más que podemos hacer para hacernos una idea de todas las opciones disponibles para ustedes chicos. Servidor. Si abrimos una nueva terminal y hablamos Hugo, servidor, espacio, dash, dash, ayuda. Enumerará todas las banderas que podamos aplicar. En lo que realmente nos interesa, él es dash, dash G, C. Y eso ejecuta algunas tareas de limpieza después de la construcción, lo cual es genial para mantener las cosas limpias carril listas para subir para conseguir, por ejemplo, para salvar su progreso. Y el siguiente que nos preocupa es el render rápido discapacitado. Y lo que hace es que habilita renders completos en los cambios, así que ralentiza tu servidor dev. Tristemente, el romboédrico es extremadamente rápido. Y si te has desactivado más rápido y estás habilitado, significa que siempre vas a conseguir la versión más actualizada del sitio. En términos generales, lo haremos es ejecutar dash, dash G, C. Entonces dash, dash, desactiva un fast con F mayúscula y renderizamos con mayúscula R. Y esa, para mí, es la forma óptima de ejecutar el script dev. La siguiente parte de eso es para previsualizar archivos. Hay dos formas en que hago eso. El primero es construir borradores, y eso es para construir contenido que está marcado como borrador verdadero. Y el otro es construir futuro. Y eso es para el contenido que tiene una fecha que es en el futuro en comparación con la fecha en la que se están ejecutando las compilaciones como hoy. Por lo que suelo combinarlos en una llamada vista previa. Vamos a seguir adelante y hagamos eso. Y en realidad es un atajo. Lo que vamos a hacer, pondremos una coma después de ese guión, y luego haremos la vista previa de dev colon. La forma en que usamos el atajo es npm. Ejecutar dev. Y luego dash, dash, space, dash, dash. Construye borradores con D mayúscula, guión, guión, construir futuro. Debes poner dos puntos después del nombre del guión para que sea válido. Json dirá eso y antes de continuar, lo probaremos. Ahora en lugar de escribir cue guys server, cada vez, en realidad puedes bajar a la parte inferior izquierda donde dice scripts npm y ellos aparecerán ahí para ti. Esta es la forma automática. Te mostraré esto primero y luego te mostraré cómo hacerlo manualmente. Por lo que tenemos que hacer es presionar el botón de reproducción. Esto no está habilitado de forma predeterminada en Visual Studio Code. Y luego si miras más arriba, verás que el comando real, pero deshabilitó el render rápido y la recolección de basura. Y el sitio ha sido construido. A continuación, puede usar Control C para detenerse o simplemente puede golpear el ícono de la basura para matar el terminal. Entonces obtuvimos nuestro avance. También ejecuta una tarea. Te das cuenta de que es de dos pasos. Tenemos nuestro primer comando, y luego le hemos agregado nuestras opciones. Ahora, la forma manual de ejecutar las tareas, si obtenemos una nueva terminal, normalmente no hago esto, pero tendrás que hacerlo ocasionalmente, sobre todo para instalar NPM run. Y luego si miras dentro de tu package.json, verás a Dev. Está escribiendo div, al igual que hemos escrito aquí. Npm run dev, ese es el comando exacto o usado para ejecutar el primero. Si quieres hacer el segundo, sería dev colon, vista previa. Y eso ejecutará el mismo script, pero generalmente solo puedes usar la opción lado izquierdo de Visual Studio Code. Hagamos algunos guiones más. Algunos van a hacer es por el edificio Q va, voy a poner una coma en. Y luego correremos construir un colon para que se voten los comentarios. Así que estamos aquí, tienes que empezar. Entonces te mostraré las opciones. Así que corremos Hugo, guión, guión, ayuda. El primero por el que me preocupa es verboso. Y lo que hace es te muestre todo lo que está pasando porque ocasionalmente cuando estás ejecutando el servidor, todo está bien. Pero entonces cuando quieras construir todo el sitio, tendrás un problema. Ahí es donde uso dash, dash, verboso. Podrías usar dash v. Dash v es realmente útil cuando lo estás escribiendo y quieres presionar Enter. Pero cuando lo pones en un expediente, tendríamos que escribirlo cada vez. Te recomiendo usar la versión completa. De esa manera es mucho más fácil de entender. Entonces poniendo Hugo dash, dash, verbose, luego usamos recolección de basura. Entonces dash, dash G, C. Entonces usaremos minify. Y que vamos a minificar todos los archivos HTML XML, modificar cualquiera de los JavaScript HTML CSS para el minify porque es para producción. Y el último lo haremos porque lo estamos sacando a la carpeta pública. Vamos a usar dash, dash destino limpio. Dir dirá que X1 es uno que me parece realmente útil para el desarrollo. Eso es render en disco. Y yo he CamelCase eso. Sin embargo, lo que haremos para empezar con es que copiaremos y pegaremos el comando del servidor Hugo. Pega eso en. Volveremos a la terminal del símbolo del sistema y veremos las opciones. Y una opción, render en disco, y eso servirá todos los archivos del disco. Por defecto, todos los archivos se colocan en la memoria del equipo y se sirven en el navegador. No hay registro de ellos ahí para que los mires mientras sucede, todo está sucediendo instantáneamente. Si usamos enjuagues disco, todos los archivos que colocamos en el directorio público, y en realidad puedes entrar ahí. Se puede consultar el tamaño de los archivos. Puedes abrirlos mientras se está ejecutando. Por lo que te ahorra tener que presionar el botón Construir varias veces. Entonces lo rentaría a disco, en realidad CamelCase, por lo que es capital T, capital D. Y luego porque estamos usando el directorio público, ahí es donde los archivos son subidos por Hugo copiará y pegar destino limpio DIR también. Y junto con eso, uso otro comando que es muy similar. Y eso es Brenda a este tipo de poner un colon adentro. Y vamos a hacer un adelanto. Y eso va a ser algo parecido a nuestro guión anterior. Para div. Podemos pegar eso en, excepto que esta vez no estamos ejecutando el comando, estamos ejecutando render en disco. El siguiente que utilizo, probablemente la más frecuente es render a esta producción y esta es la principal que utilizo. Copiar y pegar. Excepto esta vez. No vamos a hacer borradores de proyectos de ley y construir futuro. Vamos a estar usando el medio ambiente. Vamos a poner eso a la producción. Entonces en fuego en la producción de menta y también minificar porque estamos tratando de emular esa construcción de producción que se ha levantado más. Utilizamos minify. No tenemos que preocuparnos por el DIR de destino limpio porque ya lo he hecho en el script de disco de estudio de sala principal. Y el último no es del todo obligatorio tener a mano, sino versión hugo. Eso es bastante simple honesto. Es un poco un recordatorio. Versión Hugo. Y eso te permitirá saber qué versión de Hugo estás corriendo. Entonces por ejemplo, podemos bajar, presionar el botón de reproducción. Y te dirá de inmediato qué versión de Hugo. Y siempre he usado Hugo extended porque tiene la funcionalidad ahí para CSS y JavaScript building built-in. Pero me dice qué versión estoy usando, 1.11010. Eso es un bono. Vacaciones útiles. Recomiendo encarecidamente que configures esto, personalízalo a lo que más te convenga. Me encantaría que pudieras tomar algunas capturas de pantalla y pop en la sección del proyecto y mostrarme cómo has configurado personalmente tu propio entorno de desarrollo Hugo. 16. Extra: archivo de configuración de división: Esta es otra lección de bonificación que estoy liberando en base a la retroalimentación de los estudiantes que van a hacer es cuando mirar a romper el archivo de punto de config YAML en múltiples archivos para que sea más fácil encuentra la sección del archivo de config que está buscando. Hacemos eso es que creamos una carpeta de archivos en la raíz de tu proyecto llamada config. No hicimos una carpeta llamada subrayado predeterminado. Entonces arrastraremos nuestra config dot YAML a esa carpeta. Ahora de inmediato, eso funcionará perfectamente bien. Pero lo que vamos a hacer es que vamos a dividir la sección de menú. Vamos a hacer para resaltar todo eso y lo vamos a cortar. Se hará un archivo llamado menu dot YAML y lo pegaremos en. Pero lo que tiene que pasar ahora es que tenemos que quitar el elemento de menú y resaltar toda la config y traerla de vuelta un nivel con pestaña Shift porque ya no los necesitamos en tu I20 porque estaban en menu.html. Eso se hace automáticamente por nosotros. Hay un archivo más que usas con bastante frecuencia y que es params dot YAML. Normalmente tendrías un artículo de params por ejemplo. Por aquí podrías ir, params podrían hacer algo así como el autor del sitio, por ejemplo. Pero no necesitábamos eso. Acabas de poner el autor del sitio en el nuevo archivo. Ese de ahí sólo para rápido uno. Eso te ahorrará mucho tiempo. Mantendrá tus sitios mucho más minosos.