Crea un BLOG rápido y totalmente personalizable con Hugo y Bootstrap 5.

1. Introducción: Hola, estoy cuando estoy mostrando, soy desarrollador web y profesor. Bienvenido a mi curso de construcción de un blog con Hugo. Este curso. Entonces la gente a la que le gustaría aprender sobre todos ustedes funciones incorporadas para que puedan construir su propio tema de blog y mantener su blog. El proyecto del curso incluye la creación de las plantillas HTML y bootstrap requeridas con Hugo. Crear widgets para la navegación de blogs, manejar imágenes para entradas de blog, mostrar datos de blog en lista y plantillas de una sola página. Y por último, personalizando las plantillas de blog para tus propias necesidades. Salvando el curso. 2. Empezando con el Proyecto: Para empezar con el proyecto, debes tener instaladas las versiones más ligeras del siguiente software. Código de Visual Studio. Node.js, que incluye NPM, get CLI, y GitHub Desktop. Todos estos paquetes de software están disponibles en Windows, Linux y Mac, a excepción de GitHub Desktop, que no está disponible en Linux, aunque es muy recomendable si estás usando Windows o Mac. Para copiar los archivos requeridos para iniciar el curso y el proyecto en la página de recursos donde se puede descargar un archivo zip. También puedes acceder a él desde el repositorio de GitHub en la sucursal principal. Si has descargado los archivos para una lección particular, ve al repositorio de GitHub y cambia la rama que requirió la lección. Después puedes descargar un archivo zip y te mostraré cómo hacerlo en un momento. Si modificas alguno de mis archivos y deseas subir tu propio trabajo para conseguir hub, debes seleccionar el pato, plegado para quitar mi buena información. luego puedas vincular tu propio trabajo, hacer tu propia cuenta. Tendrás que ejecutar el comando para generar tu propia carpeta de documentos antes de vincularla a tu propia cuenta. Solo quiero girar el repositorio de GitHub. Se puede elegir el maestro de sucursal es para empezar. Y luego he puesto cada lección bajo su propia rama. No está la opción. Esa no es la opción con el botón verde para descargar un archivo zip. Y eso descargará todos los archivos para ti. Una vez que hayas descargado los archivos de GitHub o Skillshare, necesitarás descargar las dependencias y luego estos paquetes de software que se requieren para el curso. Puedes hacer esto con el comando npm install. Una vez que hayas abierto la carpeta en Visual Studio Code, tengo un nuevo terminal y luego escribo npm install. Esto instalará todos los paquetes de software requeridos para el curso. Si vas a la carpeta de módulos de nodo, verás todos los paquetes de software aquí. Y la forma en que funciona es que tenemos un archivo llamado package.json. Ya ves tenemos un montón de guiones que corren desde aquí abajo y te los mostraré en un minuto. Pero los paquetes reales instalados desde la sección de dependencia. Y ya te he puesto todo esto y he pasado por ellos en todos mis cursos anteriores y he dejado enlaces a ellos en la sección de recursos. Si quieres saber más sobre todos estos paquetes, lo que realmente nos preocupa es en otras dependencias. Se puede controlar la versión de Hugo que se instala y S aquí se actualiza. Puede actualizar el número de versión. Entonces si vuelves a ejecutar npm install, instalará una versión más nueva de Hugo para ti. De vuelta a los guiones solo se ampliará esta sección aquí. El dolor de scripts NPM se incluye por defecto en las versiones más recientes de Visual Studio Code. Estarás usando mucho el JavaScript. Lo que eso hace es que ejecuta un servidor de recarga en vivo para ti. La vista previa de Dave es para cargar páginas que tienen un estado publicado para el futuro o configuradas a borrador. Construir coloca todos los archivos para el sitio en la carpeta pública y realidad no ejecuta un servidor dev. Puedes subir esos archivos con FTP. El disco es igual que div, excepto que también pone los archivos en público mientras que en realidad son poco servidor de carga de biblioteca. Por lo que en realidad se pueden inspeccionar los expedientes al mismo tiempo. Quería simplemente previsualizar opera exactamente lo mismo que la vista previa de Dave y escrita en la reducción de disco, donde es exactamente como la construcción tiene un servidor de recarga en vivo. He incluido cheques MPM. Puede actualizar dependencias NPM fácilmente gráficamente. Y la versión de Hugo te muestra la versión de Hugo la cual está instalada por npm. Instala en realidad no ejecutes eso. Eso se ejecuta de forma predeterminada cuando ejecuta npm install. Después de que se hayan instalado todas las dependencias, los posts y la tienda instalarán quienes vayan por ti. 3. Diseño de blog responsivo: Entonces, si miras dentro de la carpeta Layouts, notarás que no hay index.html y probablemente te estés preguntando por qué falta eso. El motivo por el cual es que si no proporcionas un index.html en la carpeta Layouts, entonces el list.html en la carpeta de valores predeterminados se utilizará en su lugar. El motivo por el que estamos haciendo eso, y eso es porque para nuestra lista de todas las diferentes publicaciones de blog, no tiene sentido definir esa plantilla dos veces. Podríamos definirlo en el index.html. También podríamos definirlo en list.html, y eso implicaría duplicar. Entonces lo que vamos a hacer es que vamos a agregar una tarjeta extra al list.html más adelante para que se muestre correctamente en la página de inicio. Vamos a ejecutar el script dev abajo abajo en él guiones. Y luego echaremos un vistazo en el navegador. En realidad se puede controlar. Haga clic en el enlace que usted consiguió proporciona. Una vez que se ejecuta el servicio en vivo. En nuestra página de inicio, tenemos una lista de todas las páginas de la página web que no es muy útil. Pero más tarde vamos a mirar a contratar eso en. Si vas a cortar postes. Vamos a hacer una lista de publicaciones que vienen y vamos a personalizar el código más adelante para que solo se muestren las publicaciones en la página de inicio. Por ahora, lo que nos preocupa es crear un diseño receptivo. Entonces vamos a tener un panel en el lado derecho, o puedes poner en la izquierda arriba a ti con enlaces a diferentes partes del sitio y diferentes entradas de blog. Y la razón por la que te estoy mostrando todo desde cero para que puedas personalizarlo de la manera que te guste. Entonces mira hacia arriba la basal al HTML. Y notarás que tenemos nuestra sección principal, y tenemos nuestro encabezado de bloque de contenido principal y nuestro pie de página arriba y abajo. Lo que nos preocupa ahora es configurar el bloque principal, pero también una columna a su derecha. Entonces lo que haremos es que colocaremos un contenedor de fluidos. El fluido del envase hará una fila. Y verás que vienen las abreviaturas y eso está incluido y habilitado por defecto en Visual Studio Code. Entonces haremos una columna. Lo que vamos a hacer ahora es que vamos a probar col, dash, dash nueve y puedes personalizar estas cosas. Y en Bootstrap tiene un total de 12 columnas. Por lo que eso nos deja con llamada que m d dash. Tres. Lo que eso significa es más cálido en el punto de quiebre medio o superior. Vamos a tener nueve unidades o columna con nueve unidades y abajo en el punto de ruptura medio o agua hidroeléctrica, se podría decir, vamos a tener tres unidades. Si estás por debajo del medio, solo va a colapsar y vas a tener columnas de ancho completo entonces agregarán algún margen en la parte inferior de esos dos. Dash tres, usé alt y hice clic por esas líneas para poder hablar de ambas. Y luego conseguiremos nuestra clase principal. Pega nuestra etiqueta semántica principal ahí. Voy a deshacerme del margen inferior porque ya he incluido eso. Por ahora. Apenas pondremos algún texto aquí. Por lo que escribiremos Lorem y luego estallará y enviaremos mensajes de texto para nosotros automáticamente. Y una última cosa que haremos es agregarle un poco de color. Entonces vamos a hacer bg secundaria. Y luego aquí haremos BD dash info, por ejemplo. Lo guardaremos y echaré un vistazo en el navegador. Por lo que sumar el color al fondo ha hecho bastante evidente la división entre las dos columnas. Echemos un vistazo a lo que sucede cuando reducimos el tamaño de la pantalla hacia abajo. Por lo que se puede ver que se derrumbó en una columna. Pero cuando lo traemos por encima de MD, terminamos con las dos columnas. Para que podamos ajustar eso con nuestro código. Como puedes ver, eres puntos de ruptura MD, Si realmente quisieras, podrías cambiar eso a PyME va a estar bien. No tendrás espacio. Y algo a tener en cuenta es cuando lo tengas abajo debajo de MD, que estarás usando el ancho completo de la pantalla para tu menú de blog. Lo último que haremos es quitaremos los colores de fondo para que estemos listos para irnos. Lo veré en la próxima lección. 4. Plantilla de Lista de Blog: Ahora estamos buscando crear nuestra plantilla de lista para que pueda mostrar una lista de todos nuestros posts. El primer problema que tenemos es aquí mismo. Estamos extendiendo por todas las páginas de la sección 94 en particular de la página de inicio que se va a encontrar en todas las páginas. Lo que haremos es porque también estamos trabajando en la paginación. Crearemos una variable llamada podómetro. Y por ahora solo vamos a hacer que sea una cuerda vacía. Y luego pondremos el condicional si dot es hola, yo soy. Y luego vamos a poner en otro. Y luego en lo que haremos por lo demás. Esta es la fácil. Puedes hacer paginate igual al podómetro de puntos. Y entonces tenemos que poner esa variable, SG&A, que el rango. Y qué vamos a hacer por ti donde en la página de inicio estará oscuro, paginate. Entonces en paréntesis donde sitio dot páginas regulares. Tipo serán postes y carteles en minúsculas porque eso es algo que hemos definido colocando todo el contenido en el titular del poste. Considerando que el tipo no está incorporado Hugo variable. Entonces vamos a echar un vistazo a lo que tenemos, nuestro contenido. Nuestro contenido. Todavía tengo el rango y no queremos mostrar el título en la página de inicio, así que nos lo llevaremos y lo colocaremos en el else nos libraremos de ese espacio y luego echaremos un vistazo cómo se ve la página de inicio. Para contar con la página de inicio. Sólo estamos mostrando post ahora, lo cual es genial. Si vamos a cortar publicaciones, notarás que salen los encabezados, pero ahí tenemos la misma lista exacta. Entonces mira hacia abajo nuestra paginación y solo queremos que se muestre si hay suficiente puesto para justificar realmente la paginación para estar ahí. Entonces lo haremos es que usaremos un condicional si asignarán páginas paginadas. Y entonces tendré que qué son los antagonistas? Entonces si la paginación en realidad no está teniendo lugar porque cada entrada de blog, entonces no tendremos nuestro menú de paginación afilado en la parte inferior de la página. Ahora echemos un vistazo al artículo y cómo podemos personalizarlo un poco. Entonces empieza por poner en una clase para el artículo. Y lo llamaremos resumen de publicaciones. De esa manera se puede apuntar con CSS. Y vamos a poner algún margen en el fondo de la misma. Y luego entrará el guión tres y pondremos un diseño de columna en. Así que vamos a empezar con una fila y luego pondremos en un col, guión, guión cinco. Y siempre podemos personalizar esto. Y el sobrante será un guión col, guión siete. Y pondremos todo el contenido actual en la segunda columna. Y luego trabajaremos en cómo mostrar la imagen del post. Si existe. Empezaremos asignando la variable de contextos post y lo usaremos para obtener el ImageResource. Asegúrate de poner un guión ahí y para que no genere ningún espacio porque es solo una variable. A continuación, buscará una imagen con params de punto imágenes de puntos. En el etiquetado para eso. Entonces comprobaremos si el índice está disponible. Entonces podemos hacer si dot, dot es rebanada y poner el punto después. Poner una etiqueta final, verificando si es, si es un segmento se ha proporcionado para las imágenes de parámetros, si hay un error tipográfico que causará un error con su sitio web. Así que vamos a comprobar que en realidad es una matriz. Y luego lo haremos con el índice 0. Simplemente usando width para asegurarnos de que realmente queremos elegir el primer elemento en los params, el segmento de parámetros de imágenes. Estamos tratando de obtener la primera imagen usando width solo en caso de que eso falle. Y vamos a poner una etiqueta final ahí dentro. Entonces aquí está el pedacito complicado. Por lo que vamos a crear una imagen variable. Habrá signo de dólar, puesto. Recursos, consigue partido. Después pasaremos en los contextos de puntos. Estamos mirando el primer elemento de la matriz, y usaremos una con eso también. Supongo que falla. Nada va a pasar. Entonces pondré un etiquetado N antes poner nuestra imagen y veremos sinterización subiendo en caso de que la imagen no sea el ancho completo de la columna. Por lo que vamos a hacer d dash flux para display fix, y luego podemos usar justificar centro de contenido. Agradable. Si la imagen es más alta de lo que es amplia, vamos a poner el etiquetado de la imagen ahora. Entonces si escribieras en IMG y se le va a subir y poner una imagen tomada para ti, para la fuente, le pondremos unos tirantes rizados y será signo de dólar, image.All rail permalink con capital R y capital P, se puede cerrar las llaves rizadas entonces pondrán en ancho, y esto ayuda con el reflujo. Se puede poner unos tirantes rizados, oscuros con un W. mayúscula Cerrando llaves rizadas y puestas en altura. Y estará oscura la altura. Capital H. Entonces poniendo un alt y título, lo hará, podemos usar múltiples líneas. Entonces para alt, lo haré en un segundo. Poner en un título. Y podemos simplemente poner en página de signo de dólar, post doc title, mayúscula T porque es una variable incorporada. Entonces para todos los títulos, lo que el usuario real verá en la pantalla si pongo el mouse sobre él, alt para la tecnología SHS. Entonces lo que haremos es que vamos a hacer imprimir F y vamos a poner en nuestra plantilla. El plantilla será que necesites publicar y luego por ciento S para una cadena. Y la cadena será el título del post. Lo pegas después de tu plantilla para imprimir f. Entonces necesitamos poner una clase en clase. Haremos IMG dash flow para empezar. Y luego crearemos nuestra propia clase. Por lo que tenemos a nuestro padre de post resumen. Entonces en resumen, entonces usaremos el estándar BIM de ganar una imagen de subrayado, subrayado. El radio es doble guión bajo es porque vas a correr un puntaje y el padre real, eso estaría bien usar doble guión bajo y guiones dobles para diferenciar entre el padre y el modificador real. Eso es BM, entonces sangrará todo en la etiqueta multilínea. Entonces lo guardaré y echaremos un vistazo al CSS. Si ingresas a la carpeta Activos y echa un vistazo a la main.css. Ahora tengo un main.css configurado para ti. Y tenemos un enlace a la parte inferior a nuestro CSS personalizado. Entonces para empezar, dark post dash, resumen abrirá nuestras llaves rizadas y luego usamos el guión bajo final, subrayado imagen abriendo cerca para calibrarnos lo que sucederá cuando eso se compila, terminará siendo oscuro post dash resumen. Entonces a continuación eso tendrá oscuro post deuda resumen subrayado, imagen de subrayado. Pondrá los dos juntos por la enzima. Por lo que es mucho más fácil usar SPSS, podemos anidarla. Por lo que la primera regla tiene que sumar. Vamos a tratar max, dash, height, digamos por ejemplo, diez llanta. Entonces vamos a hacer ajuste de objetos. Y sí vamos a contener. Decir que la imagen no termina siendo demasiado alta en caso de que sea más alta de lo que es amplia, que esas imágenes o no queremos que se derrame demasiado abajo. Estas son cosas que no puedes hacer con Bootstrap y eso es lo que estamos usando nuestro propio CSS. Eso se ve muy bien. Si hacemos clic derecho sobre la imagen e inspeccionamos, verás clase viene ahí, fluido IMG y nuestra clase personalizada , ancho y una altura entrando, lo cual es genial para minimizar el reflujo, el navegador puede mirar la relación de aspecto de la misma. Tenemos nuestro texto alt que viene imagen para los posts en el nombre del post. Y tenemos nuestro título, que es sólo el título del post. Y notarás que la imagen se ha centrado. Si es más estrecho que la columna real en sí, está sacándola más amplia. Y verás cómo se está centrando la imagen misma. Hasta conseguimos nuestro título y nuestro resumen. Podríamos mirar a quitar subrayado de ese título para que quede un poco más limpio. Y te mostraré cómo desaparece la paginación también. Si mostramos más publicaciones en la portada. Volvamos a la página de inicio y verás que no tengo nuestro rumbo. Vamos a sumar a nuestro golpear la etiqueta a. Pondremos en una clase. Y lo haremos textos, guión, decoración, guión, ninguno. Y entonces lo guardaremos. Y he abierto el Bravo Eso se ve mucho más limpio y luego vamos a echar un vistazo para asegurarnos de que la paginación está funcionando. Entraremos en el fichero de configuración. Aviso Pongo un comentario ahí para ti, controlar el número de páginas es páginas spinalis. Así que vamos a cambiar eso a 50 por ahora. Entonces tenemos todos nuestros posts siendo mostrados y no hay paginación en la parte inferior. Volveremos a cambiar eso a cinco. Y luego iremos a nuestro contenido y a nuestros posts. Vamos a este y vamos a quitar la imagen. Parece un poco extraño tener el espacio ahí cuando es inmutable. Todo lo que estamos haciendo es que estamos buscando revertir las imágenes de los posts a la derecha, solo en la vista de escritorio, pero en la vista móvil todavía queremos que la imagen aparezca por encima de la publicación. Hola. Haremos eso es por nuestra columna de siete anchos, donde está todo el texto, usaremos una clase que es ordenar guión, guión primero. Lo que eso hace para MD, es medio o más grande. Hará que esa columna sea la primera que se muestre. Echemos un vistazo a eso. Ahora es un poco más natural cuando tienes la imagen que me vemos. Podrías configurar tus imágenes para que muestre una imagen de marcador de posición. Si no te han proporcionado una imagen. Creo que lo que estamos haciendo, esto es mucho más limpio. Probablemente preguntándose cómo se puede controlar la longitud de los resúmenes que se muestran? Déjame hacer eso. Pondré un comentario sobre la duración del resumen. Se trata de dos frases, pero también redondeó las frases. Solo di que quieres un ligero más tiempo que podrías poner en diez, por ejemplo, echar un vistazo a eso. Es posible que notes que algunos son un poco más largos, pero sí intenta y corrió a frases. Por lo que es un poco complicado tratar de configurarlo exactamente como quieras con él. Es un poco más o menos cosa. Sólo voy a volver a cambiar la mía. Y te veré en la próxima lección. 5. Datos de la plantilla de lista: Echemos un vistazo a agregar algunos datos a la plantilla de lista. Entonces estamos tratando de hacer es sólo para la plantilla de lista, vamos a agregar la fecha los artículos publicados abajo al final del artículo en la plantilla de lista. Y vamos a conseguir eso a partir de la fecha publicada. No estamos viendo la fecha del artículo ha sido revisada, aunque puedes personalizarlo como quieras. Resumen de plantilla List.html. Pondremos unos tirantes rizados. Y usamos con fecha de publicación de punto. Nos pondremos intactos. Y luego pondremos en un div. Y queremos forzar la fecha publicada al fondo del resumen y también a la derecha. Entonces vamos a hacer dot S dash auto y eso es por el margen al inicio. Y oscuro orden de guión vacío y ese es el margen por encima. Y para que eso funcione en nuestra columna, tenemos que usar el flex, display flex y aflige columna por lo que obliga a todo a mostrar hacia abajo. Entonces lo que haremos es por qué la fecha, y yo haré eso es que ya tenemos la fecha publicada como contexto actual. Por lo que usamos formato de punto. Entonces tenemos que usar la cadena de formato Go Time. Y la forma en que funciona, si quieres mostrar el día, será O2 y el mes será R1, y la e será 20106. Si quieres mostrar tu mes primero, tendrías que poner el R1 al inicio. Tienes que usar estos números. Entonces funciona. Entonces lo guardaremos y echaremos un vistazo en el navegador. Tenemos nuestras fechas siendo jaladas ahí en la parte inferior de cada puesto y se están forzando al fondo. Si hacemos clic derecho e inspeccionamos, notarás que tenemos la fuerza hacia abajo y fuerza hacia la derecha. Ve exactamente cómo lo quiero. Ese es un mejor ejemplo. Ellos consiguieron el margen a izquierda y el margen arriba, por lo que lo obliga a la parte inferior derecha. Echemos un vistazo ahora a cómo podemos reutilizar la variable. Por lo que también vamos a estar buscando poner esta fecha por dinero en nuestro puesto real para ti en un momento. Entonces iremos a nuestro archivo de config. Y al fondo, vamos a meter a los padres. Y luego crearemos un nuevo formato de fecha de parámetro. Podemos pegar en ese formato que acabamos de usar. Copiar eso, pegarlo ahí. Y entonces lo haremos es realmente podemos acceder a ella con sitios dot params, formato de fecha de punto. Probablemente te preguntes por qué he usado sitio con S minúsculas y no sitio de puntos con los capitalistas. Y eso es porque estamos dentro una declaración width y con reasigna el contexto y la forma más fácil mostrar las variables del sitio si no tienes acceso al sitio maíz uso de Texas minúsculas S para el sitio. Veamos ahora poner en una etiqueta de tiempo, tiempo y escribirla. Y luego haremos fecha y hora. Voy a mostrar la hora en un formato que el navegador entiende como si fuera realmente claro para el navegador. Entonces lo que haremos es usar formato de punto. Y el formato será el primer guión para 2006, el mes, que será i1, y la jornada será O2. Y de esa manera los navegadores despejan sobre la hora de la que estamos hablando. que el navegador sepa interactuar con eso y posiblemente leerlo al usuario. Si es necesario estar en un lugar particular. Entonces arrastraremos la etiqueta de tiempo. Hola. Lo guardaremos y echaremos un vistazo en el navegador. Así que haga clic derecho e inspeccione. Fecha y hora. He conseguido un formato, año, mes, día. Ese es un formato que el navegador entiende. Y mira, depende del país donde tus audiencias. He puesto el mío al cielo y al formato. Tenemos el día primero y el mes y el año. Puedes formatear como quieras con tu archivo de config. Sólo va allí y puedes reorganizar las cosas. Puedes cambiar el guión dos guión o guión lo que quieras. Echemos un vistazo ahora a poner un ícono al inicio del. Entonces, lo que vamos a hacer, vamos a crear un parcial primero para crearlo, y lo llamaremos SV, g, dash, icon, HTML. Lo primero que haremos es crear una variable llamada SVG. Y habrá recursos dot n dot, poco de contexto para proveer. Y luego mostraremos contenido SVG. Y eso va a ser seguro HTML al calor no se escapa de él. guardaremos para cada búsqueda en la carpeta de activos. Ya te he proporcionado algunos iconos. Entonces creo que el uso normal es el calendario a la fecha del guión. Entonces lo haremos en lista. Es un icono parcial de plato SVG. Entonces le proporcionaremos. Nos desplazamos de nuevo hacia arriba. Ya sabe de la carpeta de activos. Entonces vamos a estar usando iconos slash, bootstrap slash calendar a Daesh, date dot Vg. Y los puse en una carpeta Bootstrap. que sepas que si quieres encontrar más de estos iconos, puedes ir a los iconos de Bootstrap, puedes Google eso. Y puedes conseguir tantos como quieras. No estoy usando una fuente de icono es porque eso crearía sobrecarga usando algunos iconos. Si solo incluimos los iconos reales que quieres en línea, no tenemos la sobrecarga de toda la fuente del icono. Así que guardemos eso y echemos un vistazo. Entonces ahí está nuestro ícono de calendario. Echemos un vistazo a agregar el tiempo estimado de lectura al lado izquierdo. Entonces lo hará es un poco de reordenamiento por ahora. Vamos a agarrar el parcial, lo pegaremos en. Revisaremos nuestra carpeta Iconos y esta vez usaremos el reloj. Por lo que vamos a cambiar eso a reloj y abrir esta arriba por encima de la fecha parcial donde debería estar. Y lo usaremos con tiempo de lectura, capital R, T mayúscula en el etiquetado. Y empieza con la guerra a pesar de su tiempo de lectura con un punto. Y luego usaremos minuto. Y si mayor de uno, mayor de un minuto, entonces pondremos una S al final. Vamos a ver cómo lo vamos a mostrar. Entonces vamos a poner un demonio y haremos que el tiempo de lectura pase. Para ese div. Usamos una clase de orden vacío para obligarla a bajar. Margen superior. O también tengo que colocar el flujo porque todo lo que estamos usando el margen start auto en un momento. Entonces convertiremos eso en un lapso y lo colocaremos dentro de ahí, dentro de nuestro div. Y luego colocaremos la etiqueta span dentro con tiempo de lectura. En el tiempo de catering por alguna razón no funciona. Entonces pasemos qué? Vamos a arreglar que algunas hendiduras de espacios para hacer todo un poco más fácil de leer. Entonces lo guardaremos y echaremos un vistazo en el navegador. Estaba mirando tal y como lo queremos. Sin Tom y a la izquierda terminan nuestra cita a la derecha. Y solo revisaremos eso en una pequeña ventana. No van a chocarse. Baje eso a pequeño. Y eso está bien. 6. Plantilla single para entradas de blog: Para hacer nuestro diseño para cuando estás viendo una sola entrada de blog. Tenemos nuestro diseño único en nuestra carpeta predeterminada, pero queremos mantener eso donde está porque eso es genial para ver páginas como la página sobre nosotros o contactar con nosotros. Entonces lo que haremos es copiar ese HTML de punto único y vamos a hacer una nueva carpeta en layout llamada posts. Y lo pegaremos ahí. Y luego vamos a trabajar en eso. Y solo se mostrará cuando se esté viendo una sola publicación. Lo primero que haremos es agregaremos la imagen del post. Entonces volveré a list.html. Y tenemos algún código aquí para la imagen. Vamos a copiar eso y regresaremos. Entonces tenemos nuestro título. Y luego vamos a poner en una nueva fila, dot dot dot col. Entonces lo volveremos a hacer. Pondremos nuestra imagen aquí. Y entonces debería funcionar bien. Entonces vamos a salvar eso. Voy a echar un vistazo rápido. Asegúrate de haber habilitado la imagen para este post en particular que fue deshabilitado previamente para fines de prueba. Entonces tenemos nuestro título, tenemos nuestra imagen, tenemos nuestros textos, vamos a añadir un poco de relleno debajo de la imagen. En esa fila habrá PIP3. Y eso se ve bastante bien. Ahora estoy listo para entrar y añadir algunos datos al post, las etiquetas o categorías de fecha, la fecha en que podamos haber revisado el post. 7. Datos de una sola plantilla: Para agregar algunos datos a nuestra plantilla de diseño de publicación única. Entonces si alguna vez miras bajo tu título, agregaremos algunas filas más. Entonces vamos a hacer fila. Y luego vamos a hacer dot col dash md seis veces arriba por dos con el asterisco y toque eso y hacer algo de espacio. Y luego podemos agarrar todo lo que acabamos de crear. Y podemos pegarlo dos veces. Si entras en tu lista, notarás que tenemos nuestro tiempo de lectura y tenemos nuestra cita. Vamos a aplicarlos en el orden inverso esta vez. Vamos a poner primero en la fecha publicada. Y eso es porque también vamos a poner en la opción de cuándo fue modificada por última vez. Pega eso en. Nos libraremos del lapso. Solo quiero los datos reales por ahora. Entonces volveré. Y mientras estamos haciendo eso, pegaremos en el tiempo de lectura. Nos libraremos de ese lapso por ahora. Y entonces las cosas un poco diferentes aquí. Entonces vamos a poner en una última actualización adicional en textos net depende de Get siendo usado para su proyecto. Tienes que estar usando Git para confirmar actualizaciones en tu blog. Y entonces ustedes sacarán la información de bien para cuando se actualizó por última vez. Entonces lo hará es que tenemos nuestro tiempo aquí. Vamos a cortar eso y crearemos una variable. Lo llamaremos fecha de publicación, colon igual. Y vamos a pegar eso en. Y la razón por la que estamos haciendo esto es porque vamos a tener que comparar la última actualización en la fecha y la fecha actual publicada. Y si se actualizó por última vez el mismo día de la fecha publicada, en realidad no vamos a mostrar esa última vez EditText. Entonces aquí abajo mostraremos fecha de publicación. Hará sibilancias si esta vez, mantener las cosas un poco más simples. Entonces entonces vamos a tener que, en lugar de formato de punto, será publicado formato de punto de fecha. Entonces vamos a crear otra variable llamada Last-Modified. Todo en minúsculas. Vamos a hacer copiar ese texto hacia abajo. Y usaremos el modo dot last, todo en formato de punto minúscula. Entonces podemos bajar y poner en un condicional, si no igual fecha publicada y el mes pasado. Estoy poniendo en el etiquetado. Lo pondré en algunos textos cursiva. Última actualización en etiqueta de tiempo. Entonces tómate tiempo. Y por dentro aquí podemos hacer, vamos a arreglar esto arriba. Por lo que sería formato punto estado punto. Entonces vamos a copiar eso en B dot el mes pasado. Y acabamos de llegar al modo de impresión. que tener en cuenta cuando estamos comparando fecha de publicación y último modo. Donde formatear la fecha publicada y el último modo con un formato de fecha que es día, mes y año. No estamos tomando en cuenta horas, minutos y segundos. Y eso es realmente importante porque si hemos modificado la página el mismo día que hemos publicado inicialmente. No queremos mostrarlo. Se actualiza por última vez el mismo día en que en realidad se ha publicado. Y así es como ganar comparando fechas aquí. Y es realmente importante cuando estás haciendo esta comparación que tu formateo con una fecha, solo día, mes y año solamente. Echemos un vistazo en el navegador. Por lo que tenemos trabajando nuestros últimos textos actualizados y tendrás que asegurarte de que tu proyecto se haya inicializado como repositorio de Git. Y has hecho dos commits y también tienes que probablemente retroceder tu Taylor publicado si estás usando los datos, proporcioné una visión general con fecha atrás, y tienes que hacer un cambio y un comprometerse a uno de tus posts. Vamos a empujar el tiempo a través y luego vamos a echar un vistazo a hacer el post y las etiquetas y categorías para el post. Entonces lo haremos, tenemos que empujar nuestro tiempo de lectura a través. Entonces vamos a poner una clase flex display en y luego ponerla en un span dot MS dash Burdeos para el margen auto. Y luego colocaremos en ese lapso esa parte tiene razón. Entonces vamos a echar un vistazo a poner en fuera categorías y etiquetas. Vamos a usar el ancho. Y luego en paréntesis, dot get terms, capital G, mayúscula T. Y vamos a mirar categorías, estas categorías porque es para un blog. Si hicieras mi curso de búsqueda, eso habría sido empresas y especies, pero acabo de renombrar todo a categorías en términos para este curso en particular. Entonces tendremos que poner en el etiquetado. Y entonces tenemos que poner nuestro ícono. Entonces vamos a copiar el parcial hacia abajo y echar un vistazo a los activos e iconos. Y usaremos una carpeta para categorías, cambiaremos reloj la carpeta. Después llegó a abarcar las categorías. Entonces será rango sobre el punto, pero queremos usar índice y los elementos. Entonces vamos a hacer coma de índice. Y incluso podríamos usar, en lugar de usar elemento, podríamos usar categoría si lo deseas. Llámalo es igual a punto. Entonces pondré una etiqueta final para nuestra gama. Para mostrar nuestra categoría. Usaremos el título de punto. Poner en una olla, usaremos ocho guiones humanizados restantes, y usamos titulado para capitalizar cada palabra. Voy a poner una tubería entre o usar coma si quieres entre cada categoría. Y la forma en que vamos a hacer eso es por favor si entonces índice 0, por lo que no es la primera vez a través del espacio de rango, espacio de tubería. Y así salva eso. Y vamos a echar un vistazo en el navegador obviamente para poner en agonía. Entonces esos son punnett express. Agregaremos una categoría extra y veremos qué pasa. Entonces vuelve a nuestro contenido. Y en categorías. A la vista, agreguemos ahora un enlace alrededor de nuestro título. Pondremos un ion lo haré voy a enlazar en llaves rizadas. Y luego haremos una clase de decoración de texto. Ninguno. Apaga, cerrando una etiqueta. Debajo del título. Esa pequeña mirada. He salido a Cadbury subiendo con el pop entre ellos. Por lo que voy a quitar esa segunda categoría. Pondré un segundo etiquetado por ahora. Entonces vamos a configurar etiquetas y echar un vistazo a eso. Entonces lo que haremos es copiar todo ese texto. Acabamos de hacer el código abajo en el siguiente. Cambiamos categorías a etiquetas. Y luego esa etiqueta, aunque en realidad no la estamos usando, solo usamos el punto en su lugar. Y cambiaremos nuestra carpeta. Dos etiquetas. Si lo desea, podría hacer signo de dólar, título y le asignaré etiqueta dot title, etiquetar ese enlace permanente. Realmente no importa. Ahorra eso. Y vamos a echar un vistazo. Tenemos dos etiquetas apareciendo con la pipa. Simplemente lo empujará hacia la derecha. Entonces al igual que antes, en la columna pondremos d flux y luego pondremos un lapso en. Entonces vamos a hacer d dash, flex. Tenga en cuenta con el lapso. No queremos que eso empuje hacia la derecha en un sitio móvil. Por lo que vamos a hacer MA stash MD orden. Copia eso abajo. Asegúrate de que todo lo que esté dentro de las etiquetas. Eso se ve genial. Sólo voy a quitar esa segunda etiqueta. Y luego se completan estos pasos. Copia de seguridad se deshará de esa segunda etiqueta. Pondremos un alias para las pruebas. Y así es como lo queremos. 8. Entrada en el blog: Ahora vamos a crear un shortcodes. Podemos llamar fácilmente a una imagen dentro del markdown de un post. Entonces, lo que haremos, iremos a nuestra carpeta Layouts y crearemos una nueva carpeta llamada shortcodes dentro que hará nuestro código corto y lo llamaremos IMG, dash, index dot HTML. Lo primero que haremos es comprobaremos si hay parámetros de página para las imágenes. Por lo que usamos con página de punto de signo de dólar con una P. mayúscula Y luego podemos acceder a params dot imágenes. Y pondremos un antagonista para eso. Uno. Lo siguiente que vamos a hacer es que vamos a comprobar si hay una rebanada. Use if reflect dot is cut and put the dot in porque ya hemos asignado el parámetro de página de imágenes al punto. Y vamos a poner nuestra ingesta y para eso, vamos a establecer nuestro índice predeterminado en 0. Entonces si no proporcionamos un índice, por defecto, estará obteniendo la primera imagen en la imagen es parámetro. Entonces lo que haremos es que vamos a hacer si el signo de dólar punto consigue 0, eso significa el primer parámetro que se proporciona. Y te mostraré que funciona en un minuto. En el etiquetado. Entonces en ese caso, índice de signo de dólar será igual a punto y lo cambiaremos a una Estamos pensando, vamos a escribir. Y hay que recordar que esto vendrá como una cadena de texto. Entonces entonces tendremos que cambiar eso a un entero. Lo que podemos hacer, podemos hacer un con punto índice. Entonces al hablar de la rebanada de imágenes, y vamos a estar mirando la variable índice. Entonces por defecto estamos mirando a 0, que es la primera imagen de la lista. De lo contrario, si se proporciona un número, cuando les llamemos el código corto, estará mirando el primer, segundo, tercer ítem de índice de esta lista. Pondré un etiquetado N. Entonces veremos cómo conseguir la imagen. Por lo que vamos a hacer con signo de dólar, punto, página , puntos, recursos , puntos, obtener partido capital G, capital M para ese. Entonces solo podemos proporcionar un punto. Pondré un etiquetado N. Y aquí es donde pasa toda la acción. Volveremos a nuestro solo post. Mira genial la imagen Código. Y vamos a copiar ese código. Lo pegaremos y sangraremos EIS, nos estamos refiriendo a las variables de imagen. Entonces lo que podemos hacer es que podamos imagen columna igual. Nos referimos al título del postdoc. En esta instancia particular, será una página de puntos de dólar con un título mayúscula P dot, y veremos cómo personalizar eso en un momento. Vamos a cambiar nuestra clase CSS y luego echaremos un vistazo a agregar el código corto a una publicación para que podamos probarlo. Entonces vamos a entrar en nuestro primer post, Amy. Ahora lo hacemos es ponerlo en llaves rizadas abiertas y cercanas, y abrir y cerrar las flechas. Entonces proporcionas el nombre de los shortcodes va a ser IMG dash, index o lo que quieras nombrarlo. Por defecto, busca que el índice es 0, o puedes proporcionarlo. Si quieres hacer un número diferente, lo dejaremos en blanco por ahora. Y luego veremos sumar un número. Entonces voy a conseguir eso en el navegador. Tía Amy, y se está tirando la imagen. Echemos un vistazo a agregar algo de CSS para que podamos centrarlo y limitarle el tamaño para que no sea demasiado grande. Lo haremos es copia en una fila. Hacer d, flexionar, justificar el contenido. Así que arriba. Y luego vamos a hacer una fila con las películas, justificar el contenido. Y haremos nuestra columna llamada Bash MD. Adiós por ahora. Y luego saltaremos Imaging. hoy. Vamos a comprobar eso. Eso está funcionando hasta ahora. Entonces veremos la restricción de la altura de la misma porque actualmente, pero la restricción de ancho, si lo echas un vistazo, eso es un ancho de columna completo porque están por debajo de MD. Eso entonces si lo comprobamos de esta manera, ves que son cinco de 12 de ancho. Ahora mira a la restricción de la altura. Entonces vuelve a nuestros activos y luego CSS personalizado. Te mostraré cómo hacer el estilo M. Echemos un vistazo ahora al costo de la utilidad también hará por ejemplo dot IMG, dash H, dash diez. Y vamos a copiar ese código en. Y luego vamos a tener un ir al decir 15 para éste. Entonces vamos a hacer dot IMG, dash, dash 15. Y cambiaremos nuestro corazón a 15. Ahorra eso. Y luego talón trasero. Deshazte de ese estilo de viga. Voy a hacer IMG dash H dash 15. Y podemos volver a nuestra lista. Entérate imagen IMG h dash ten. Y podemos deshacernos de ese resumen de post porque actualmente no lo estamos utilizando. Comentar ahí. Depreciado. Así que comprobaremos eso. Por lo que ahora se está limitando a una altura de 15 llanta a 40 píxeles de alto, es decir 16 píxeles por 15, por lo que 15 o apuntan alto. Y luego te mostraré cómo puedes usar SPSS para generar estas clases completamente. Lo que haremos es, en primer lugar, definiremos nuestras alturas. Ejemplo 5101520, tratando de hacer demasiadas porque terminará contaminando tu archivo CSS con demasiadas clases va a hacer. A cada altura, en alturas. Ahora tienes que copiar y pegar básicamente abajo tu altura exactamente, pero puedes elegir lo que pones aquí. Podrías hacer cada H y alturas si quieres. Sólo estoy haciendo cada altura, altura en el sistema de altura lo hacen agradable y limpio. Hacemos el corsé y vamos a hacer dot, IMG, dash, altura, H dash. Después hacemos un signo de hachís, abrimos, cerramos llaves rizadas, y le asignaremos altura. Entonces va a tirar de esos cinco y ponerlo ahí para la clase. Entonces vamos a conseguir IMG dash H y S5, IMG delta H dash diez y así sucesivamente. Y cada vez que iteramos a través, luego ponemos unos tirantes rizados. Y luego copiaremos y pegaremos en reglas CSS. Por nuestra altura. Haremos hash. Cuartos, abraza un corsé y luego doodle asignan altura, luego cierre el corsé. Y luego comentaremos y lo guardaremos. Y luego inspeccionaremos. Y lo está tirando. Si haces clic en él, en realidad te mostrará la fuente. Pero si entramos en el puntaje de salida justo al fondo, verás que están nuestras clases generadas, 5101520, porque tienes que resolver lo que funciona para ti. Pero no genéricos demasiados porque solo vas a llenar tu CSS con clases extra. Echemos un vistazo a la charla. Aquí servirá un poco de jabón. Título de signo de dólar es igual a blanco. Y lo haré si signo de dólar punto consigue uno. Si tenemos un segundo parámetro. Y vamos a hacer total igual ancho total. De lo contrario. Título es igual a dólar signo dot py página. Título para inicializar título ahí. En lo que estamos haciendo, estamos comprobando si se proporciona un segundo parámetro con un atajo y les mostraré cómo configurar una enmienda. Y eso es por el título personalizado real de la imagen. De lo contrario, sólo vamos a usar el título de la página. Entonces entonces aquí abajo para el título, podemos hacer clic Alt para ambos. Será título de signo de dólar para el título. También echemos un vistazo a la configuración. Figura. Lo que vamos a hacer. Haremos una figura. Y vamos a establecer la clase para averiguar para Bootstrap. Pondremos nuestro interior inmediato. Habla hasta la sangría. Y pondré una imagen de clase de figura. Tenemos que sacarlo subtítulo de higo. La clase será figura dash subtitulado para Bootstrap. Y los textos sólo serán el título. Podemos establecer. Lo que hacemos es poner en nuestro primer parámetro, que es el número de índice. Y luego haremos nuestro segundo y esa será, por ejemplo, foto mía. Crocker. Guarda eso y echa un vistazo. Y estamos tirando de la imagen de cualquier calambre y notamos que es mucho más débil y está alineado inmediato porque es una leyenda de figura. Hacemos una inspección. verás tenemos Cómo figura que bootstrap figura, pero me imaginé la imagen. Y luego tenemos nuestro título a continuación. Notarás que está usando el color más claro, tamaño más pequeño. Y las tecnologías de asistencia podrán recoger eso. Eso es un epígrafe para el título de figura real para la imagen. Ejemplo, pondremos una segunda imagen en. Amy, tomará el nombre de la misma, nombre de archivo. Y luego dos imágenes, 1 segundo 1 pulg. Pondremos algunos mensajes de texto y luego tienes corto periodo. Buscamos el segundo ítem. Y esa va a ser foto de Bender. lo guardaremos. Y entonces antes de echarle un vistazo, es posible que desee desactivar la imagen predeterminada aquí. Así que vamos a hacer un poco de toda esa fila que hemos sacado, esa imagen superior podría poner algún relleno en. Pero así es como sacé imágenes de la matriz de imágenes. Y eso funciona bien con cosas como Netlify, CMS. Subimos imágenes y se colocan automáticamente en la matriz permanente de imágenes para usted. Vamos a añadir algo de relleno. Entonces iremos a nuestra fila de contenidos. Haremos P t tres. Ahora tengo algo de relleno ahí y puedes pasar y puedes agregar tanta personalización es como. Y pondré una lección rápida al final de este curso sobre cómo puedes personalizar más las cosas. Sólido deja la configuración con las dos imágenes y el código corto ahí. Entonces tienes un ejemplo de cómo funciona eso. 9. Widget: Entradas recientes: Echemos un vistazo a los widgets. Vamos a entrar en nuestro titular de diseños y luego parciales. Y crearemos una nueva carpeta llamada widgets. Y luego comenzaremos con index.html. Y luego haremos un Dash reciente, HTML postdoc. Los llamaré en el índice es que vamos a hacer un rango y vamos a hacer el sitio dot. Params dot widgets pondrán la integrina. Vamos a correr cualquier parcial, y lo será, que es cortante por ciento. Esto usará print f para eso. Oye, puede que sólo le proporcione el punto. Y los contextos que parciales es donde es complicado. Con un signo de dólar. El signo de dólar se remonta a la raíz de este archivo en particular, por lo que no asignas 0s antes de que terminemos en el rango. El rango que tenemos razón de contextos. Sí, eso sí se complica un poco. Podríamos poner punto HTML aquí, pero no es necesario. Bueno entonces entra y configura nuestro archivo de configuración. Entonces bajo params y vamos a hacer widgets. Y la forma más fácil de hacerlo es que comenzaremos con nuestro reciente Dash. Podemos empezar con nuestro HTML. Hablemos de lo básico de ello. Haremos una variable llamada reciente. Y será un punto o Páginas Amarillas. Top de capital T porque es variable incorporada es Posts. Y estamos viendo, por ejemplo, primeros cinco entran y si son recientes porque no queremos mostrar el parcial si hay si no hemos conseguido el post ahí, vamos a poner en el etiquetado. Y luego para que los huesos descalzos solo para empezar las cosas variará más reciente. Él. Haremos una a y será real. Y luego usaremos el título de punto. Simplemente haremos un etiquetado final final con sangría. Y luego para que las cosas funcionen y tienes que ir a la base, deshazte del Lorem Ipsum para tu dolor de lado. Y ejecutamos widgets parciales slash index y analizamos los contextos de puntos. Tenemos una lista ahí de posts con links que funcionan. Vamos a pasar y vamos a poner en algún HTML. Haremos div dot. Widget también hará widget dash, guión, reciente. Entonces usando CSS estilo BM allí de nuevo. Y dash, dash es modificar el tipo. Y eso será para que los recientes posts de Dash sean más correctos. Por lo que estamos haciendo un reciente tipo de post de widget, entonces miraremos los encabezados. Entonces, por ejemplo, podemos hacerlo H3, y vamos a hacer widget oscuro, subrayado, encabezado de subrayado. Entonces pondremos en publicaciones recientes. Glenn puso en una URL. Conseguiremos nuestra gama. Hágalo. Arreglaremos algo de la sangría, podemos tirar de eso hacia atrás si quieres guardarlo y echar un vistazo. Y luego haremos algo de CSS. Tenemos nuestros cinco posts recientes por ahí con sus títulos. Y van a escuchar mirar algunos CSS ahora para hacer que esto funcione un poco mejor, volveremos a los activos y CSS en nuestro CSS personalizado. Entonces haz widget de puntos. Y luego vamos a hacer algún relleno de fondo. Voy a poner uno permanecer por ahora. Entonces, por ejemplo, si quieres cambiar el encabezado, podrías hacerlo. Y encabezamiento de subrayado. Dejaremos eso vacío. Es sólo un ejemplo. Entonces tenemos nuestra UL y vamos a poner en el relleno izquierdo 0 para anular el margen predeterminado. 0 estaba tratando de anular todos los restablece CSS que Bootstrap está incluyendo para nosotros. estilo de lista de hacer es ninguno. Entonces haremos un LI dentro de la lista, agregaremos algún relleno debajo de I 0.5, rem por ahora. Y luego veremos los enlaces de adentro hacia afuera widget en lugar de b, a, y vamos a hacer texto-decoración. Ninguno. Entonces no conseguimos subrayados. Entonces digamos por ejemplo, queríamos modificar la anulación para el widget de publicaciones recientes. Podrías hacer dash, dash, dash, si no. Vamos a dejar eso vacío por ahora, pero podrías anular cualquier cosa dentro de eso. Y eso ha cambiado mucho. Vamos a echar un vistazo ahora podemos poner la fecha por debajo. Y luego veremos pasar al siguiente widget y podrás personalizar este CSS para que se adapte a tus necesidades. Vuelve a nuestros recientes posts. Hagamos un poco de reformateo. Entonces este título dentro de dividendos para obligarlo a su propia línea. Entonces vamos a hacer un pequeño guión de texto de punto silenciado. Por lo que significa que el texto también lo hace pequeño. Y luego vamos a hacer publicamos fecha. Estoy poniendo en el etiquetado antes de que nos olvidemos. Vamos a subir eso por encima nuestro texto. Siempre debe ser fecha de publicación, pero por si acaso no hay datos en absoluto. Y luego ponemos en un tiempo y vamos a hacer datetime como W4 ser formato oscuro. Haremos 2006 dash, uno, dash O a un formato legible por máquina. Y luego pondremos el tiempo y volveremos a nuestra lista. Podemos sacar el formato de ahí. Entonces usando nuestro formato de archivo de configuración y puedes cambiarlo a tu ubicación. Lo guardaremos y echaré un vistazo justo al comercio invertido ahí que faltan. Y lo guardaremos y echaremos un vistazo a las fechas que aparecen a continuación. 10. Widget: Mensajes relacionados: Vamos a hacer un widget en publicaciones relacionadas. Este es un poco más complejo. Sí tenemos que configurar alguna configuración para ello. Tenemos una configuración predeterminada aquí. Vamos a copiar eso, entrar en nuestro archivo de configuración. Y por encima de los params. Pondremos una pequeña nota ahí dentro. Para adiposo, incluye nueva app. Vamos a poner eso a verdad. Vamos a cuatro páginas que son más nuevas que la actual. Y luego aquí están todos los términos de búsqueda. Entonces estamos mirando categorías, y luego estamos mirando las etiquetas, establecerlas tanto en una consulta de 100 como en búsqueda. Eso a la verdad. Hace que las cosas se ralenticen un poco. Lo guardaremos y luego echaremos un vistazo a la configuración de nuestro widget. Entonces vamos a widget, así que vamos a hacer uno nuevo relacionado con post.html. Lo que vamos a hacer es copiar más de comer fuera de las publicaciones recientes. Entonces pega eso en. Y luego iremos a config y agregaremos precio de guión iluminado. Diremos las dos. Mira en el navegador, comprueba que está funcionando. Tenemos nuestros dos IOPS altos post recientes ahora podemos personalizarlo y convertirlo en postes con plomo. Entonces lo que haremos es que pasaremos por todo sobre duloxetina reciente y cambiaremos todas las ocurrencias a relacionadas. Y cambiaremos nuestro CSS. Y rumbo a puestos relacionados. A continuación, se librará de nuestra fecha publicada. Podemos deshacernos del div alrededor del título. Voy a revisar cómo van las cosas hasta ahora. Hasta ahora, tan bueno. Y luego nos libraremos del dónde, la parte superior de los postes. Y vamos a hacer sitio dot páginas regulares, relacionadas con puntos. Después agregaremos un punto como los contextos para la función relacionada. Así que guarda eso y echa un vistazo. Voy a uno de los posts y verás publicaciones relacionadas aparecen debajo de él. Tenemos a cinco de esos tirados también. Echemos un vistazo a poder configurar el número de dispositivos. Entonces vamos a hacer sitio dot, params dot posts relacionados. Vuelve aquí. Y haremos publicaciones relacionadas. Cinco, o el control de comando, el número de widgets. Entonces vamos a configurar uno para los posts recientes, hará que 15 también. lo guardaremos. Y todavía tenemos cinco y vamos a entrar en eso por publicaciones recientes también. Podemos copiar ese texto. Precio reciente. Y eso está funcionando muy bien. 11. Widget: Categorías de publicación: Suena un widget para las categorías de correos. Por lo que vamos a crear un nuevo archivo HTML llamado post Dash. Tuvo que reiniciar HTML. Y lo agregarán a nuestro archivo de config. Ahorra eso. Volveremos a entrar. Otro widget, copiará el código, lo pegará, y se puede ver que lo tenemos funcionando y luego veremos personalizarlo ahora. Por lo que va a hacer, cambiará signo de dólar. Recientes categorías de signo de dólar, cambiarán CSS, post dash, bayas. Y luego cambiaremos nuestro rumbo también. Entonces. O cambiar categorías a taxonomías de punto del sitio, categorías de puntos T mayúscula. Entonces vamos a hacer un rango sobre él, vamos a hacer punto por cuenta y la capital B, mayúscula T. De esa manera pone primero las categorías con mayor cantidad de puesto. De esa manera hay una mayor probabilidad de que un usuario haga clic en la categoría real. Nos libraremos de la fecha publicada. Y nos libraremos de ese div, que está a su alrededor. Limpia eso. Entonces lo que vamos a hacer es pondremos en la página dot real permalink, título de página con mayúsculas. Y si lo desea, puede, entre paréntesis entre paréntesis, puede poner en el número real de páginas, para que pueda hacer estos conteos de puntos. Veamos eso. Tenemos el número de páginas por categoría y como se puede ver, se las ordenan por cuenta. 12. Widget: Etiquetas de publicación: Esto es un poco similar a la lección anterior. Lo que haremos es crear un nuevo archivo. Lo llamaremos post dash tags, pensó HDL, a nuestra configuración. Etiquetas Dash. Ahorra eso. Y luego copiaremos el código de categorías en etiquetas y lo guardaremos. Se puede ver que tenemos a los dos subiendo en la página web. Ahora puedo hacer algo de personalización, resaltaré todas nuestras puertas en categorías y cambiaré todas las ocurrencias para dar asignar etiquetas. Y serán las etiquetas de puntos de taxonomía. Ahora, vamos a cambiar nuestro encabezado para posar etiquetas y clase CSS. Esta vez lo que vamos a hacer es limitaremos el número que se está mostrando. Entonces pon aquí primero y usaremos Sitios, puntos, params, posts de puntos, tags. Antes de golpear Save, entra en nuestro archivo de configuración. Pondremos en post tags, digamos por ejemplo diez. Y simplemente cambiaremos nuestro comentario a la cantidad de ítems. lo guardaremos. Vuelve a nuestro parcial. lo guardaremos. Y apareciendo bien ahora nuestro personalizador. Y pondremos algunos botones a través de cada una de las etiquetas. Lo que vamos a hacer es por nuestro enlace va a hacer una clase igual. Voy a poner en btn, btn dash, primaria, BTN dash m. eso es para un pequeño botón y un color primario. Y luego vamos a hacer margen, final de uno y un margen inferior de dos pasos para multilínea tiene que poner en un rol igual botón. Entonces es un cliché a las tecnologías de apoyo a lo que esto vincula. Y diremos que ahora mira, botón está funcionando. Acabamos de sacar la lista y enumerar elementos. Entonces nos libraremos de las dos etiquetas UL. Y nos libraremos de la LI y de la etiqueta LI de cierre, etiqueta final luciendo genial. Entonces puedes entrar y reordenarlos si quieres. Creo que lo último que haremos es poner en algunos valores predeterminados para cuando estemos usando la primera función. Haremos poner unos corchetes alrededor. Ahora. Perímetro. Entonces lo que podemos hacer es que podemos poner en un default pipe, cualquier cosa sensible por defecto por su ejemplo estaño. Puedes ahorrar eso. Y luego si no tuviste ese elemento de configuración en particular presente, no obtendrás un error porque aquí tiramos a través del valor predeterminado, entonces volveremos a los posts recientes y publicaciones relacionadas. Y añadiremos algunos impagos ahí también. Vamos a publicaciones recientes. Y tenemos nuestro primero, pondré paréntesis alrededor. Y vamos a hacer default y cinco. Y luego Reddit publica. Lo mismo. Eso es realmente importante al usar elementos de configuración que sí establece valores predeterminados para ver si recibo un error. Comprueba, todo sigue funcionando. Y sigue funcionando. 13. Widget: Búsqueda: Último widget que te estaré mostrando lo que haremos para mantenerlo sencillo. Vamos a bajar a, y he dejado el enlace a esta página en la sección de recursos, la barra de navbar Bootstrap, y sacaremos su entrada de búsqueda. Entonces copia ese texto. Y luego haremos un nuevo archivo de widget llamado search.html. Y lo pegaremos y haremos un par de cambios. Lo primero que vamos a hacer es por el rol formal equivale a búsqueda. Y luego para la entrada, haremos un nombre igual a Q. y luego lo que vamos a hacer, lo guardaremos y iremos a config dot YAML y agregaremos búsqueda para ser el primero. Eso lo guardaremos. Tenemos nuestro trabajo de búsqueda y queremos que agreguemos nuestras clases de CSS para que consigamos algún relleno debajo. Entonces para nuestra clase y vamos a hacer widget y obtenemos dash, dash, buscamos y echamos un vistazo. Ahora está tirando del estilo global. Ahora. No funcionará el widget de búsqueda. Tendrás que mirar mi curso de búsqueda con Hugo. Es bastante por pasar muy rápido y desafortunadamente demasiado grande para este curso. Pero si vas a ese curso, aprenderás todo lo que necesitas para implementar una función de búsqueda en tu blog. Así que la mejor de las suertes con eso. ¿ Cuál es el enlace a continuación en la sección de recursos? Para que puedas encontrar mi curso sobre cómo implementar una función de búsqueda con Hugo. 14. Crear nueva publicación: Por lo que ustedes son un gran comando incorporado para crear una nueva página, o en este caso una nueva publicación. Por lo que ejecuta el comando que Hugo sabía, y tenemos que decirle dónde colocar el expediente. Entonces si vamos a Contenido, te das cuenta que hay una carpeta de correos, la colocará ahí dentro. Y te darás cuenta dentro de cada una de las carpetas tenemos un índice dot MD creará una barra en tostadas. Entonces usamos la fecha de hoy en formato ISO. Por lo que usamos 2022, dash 05, dash 30. Puedes poner lo que quieras aquí, pero solo estoy usando un sistema para que sea fácil encontrar los postes en estos doble guión. Y pondré el título del puesto. Entonces vamos a hacer test dash, post, slash, index dot, md para que entre. Si entramos en el póster de vacaciones de pulpo postes arquetipo, Eso es todo en la carpeta de correos. Y esta es una plantilla que se utilizará. El total sería bastante lo que queremos, pero podemos modificar eso. Tenemos nuestra fecha o inset hasta la fecha de hoy y esa también la fecha publicada también estará sosteniendo a la fecha que es genial para exhibir en posts. El borrador se establece en false, lo que significa que la página se mostrará por defecto, que es lo que quiero. Pero no se quiere poner borrador de la verdad. No quieres cosas que tengamos probablemente de inmediato, pero no suelo tener tantas cosas. Correcto. Esperando alrededor. Usualmente solía uno publicado una vez y luego lo publico subiendo el FTP o comprometiéndome a obtener. Y tendremos que configurar nuestras categorías, etiquetas e imágenes manualmente. Enter luego irá a nuestra foto, cual es fácil de encontrar porque tanto la fecha como el aire total a buscar en términos de la foto, Él es nuestro índice punto MD, o copiar y pegar en imágenes. Si hacemos clic derecho y cambiamos el nombre, podemos agarrar el nombre del archivo. Lo pegaré en la matriz y las etiquetas. Lo copiaré aquí. Entonces tenemos humanos y las categorías van a copiar. Uno, va a hacer punnett express para que puedan vincularlo. Ahora vamos a poner unas comas invertidas alrededor de eso porque es más de una palabra. Entonces pondremos nuestro texto en algún Lorem Ipsum en el Moran, ejecutaremos nuestro servidor. Buscamos en el navegador. Aquí está nuestro post de prueba. Y está tirado en la fecha publicada y los textos. En realidad no lo tenemos configurado para mostrar automáticamente las imágenes. Entonces si volvemos a Amy Wong, así es como vamos a sacar imagen para mostrar. Eso está listo para irse. Tenemos nuestro título sobre mí. 15. Resaltado de sintaxis de código: Es un código que resalta realmente funciona fuera de la caja de inmediato, aunque en realidad podemos eliminar los estilos en línea y moverlos a una hoja de estilo, probablemente tengas una ligera reducción en el tamaño de tu código. Y la otra razón por la que quieres hacer es que si estás usando CSP por razones de seguridad, no lo eres, tienes bloqueando estilos en línea por ejemplo. Y por lo tanto tendrás que mover tu código resaltando estilos a una hoja de estilos. De todos modos, sólo vamos a meterlo en el método predeterminado, funciona fuera de la caja. Así que hay que poner en tres backticks. Entonces vamos a poner en nuestro código. Entonces te mostraré un ejemplo. Hay algún código Hugo en caso de que estés corriendo y Hugo blog. Entonces iremos a nuestros parciales y luego tomaremos algo un poco más interesante. Por ejemplo, aquí, copia eso, péguelo en otros tres backticks en. Entonces necesitamos proporcionar un lenguaje para el resaltado de la sintaxis. El hipo de la página para resaltar la sintaxis y deja el enlace a esta página en la sección de recursos. Si te desplazas hacia abajo, notarás que tenemos las plantillas HTML y tienes que copiar ese texto exacto. Pega eso en. Lo guardaremos. Miraré en el navegador. Y ahí está nuestra sintaxis destacando. Y eso está configurado para funcionar fuera de la caja siempre y cuando usted proporcione. No tenías que hacerlo, pero se recomienda que proporciones el lenguaje real de tratar de resaltar. Veamos ahora cómo eliminar los estilos en línea. Porque si haces clic derecho e inspeccionas, he mirado nuestro código, notarás que tenemos todo un montón de tramos sucediendo con diferentes estilos. Para cada lapso, en realidad podemos usar unas hojas de estilo que, por ejemplo, si has bloqueado estilos en línea. Entonces el resaltado de la sintaxis, hemos puesto un enlace para configurar resaltado. Y lo que nos interesa, estos son todos los impagos es el no clases. Por lo que actualmente está configurado para no incluir ninguna clase. Queremos cambiar eso también un tipo con probablemente dije eso a mí, eso es sólo una preferencia personal. Pero creo que te sentirás mucho más en la página de esa manera. Así que copia toda esa configuración. Y luego iremos a nuestro archivo de configuración. Y por encima de params. Lo pegaremos en. Y luego verás que ya tengo alguna maqueta aquí arriba, pero eso es para Goldmark. Actualmente estamos configurando la herramienta de resaltado, recortamos todo mucho y deshaznos del marcado y lo pegaremos. Gracias. Seguramente no lo hizo entonces probablemente bajo Goldmark. Ahora, lo que estamos tratando de cambiar es el no clases. Así que lo pondré en falso. Pondremos un comentario ahí. False necesita una hoja de estilo. Actualmente consiguió el Sistema de Estilo WannaCry. Depende de qué hoja de estilo proporcionemos. Así que de vuelta en la página de resaltado de sintaxis, tenemos la generación del CSS. Por lo que hemos puesto las clases de no ser falsas. Lo que ahora tenemos que hacer es generar el CSS. Entonces aquí estamos generando un estilo de WannaCry. Puedes echar un vistazo a todos los diferentes estilos. Él haría el enlace. Sólo me voy a quedar con WannaCry porque personalmente me gusta. Esto generará un archivo CSS de punto de sintaxis y vamos a mover eso. Por lo que vamos a copiar ese texto al comando. Creando nueva terminal. Se pegará en el comando. Buscará nuestra sintaxis punto CSS. Vamos a cortar eso, ponerlo en nuestra carpeta de activos. Y el SCSS. Probablemente tengas un momento más fácil si lo cambias el nombre a SCSS. Entonces tenemos que importarlo. No se verá importación de comentarios, sintaxis resaltando CSS. Utilizamos en Import. Y es la misma foto. Entonces esto es punto de sintaxis SCSS realmente puso un punto y coma al final. Entonces nos aseguraremos de que tenemos nuestro servidor dev funcionando. Y se está quejando del hecho de que es UTF 16. Entonces entrando en sintaxis, CSS, y luego podemos cambiar nuestra codificación, UTF-8, que es más o menos el Lego estándar en el navegador. Y vamos a echar un vistazo. Ahora, se puede decir que sigue mostrando, lo cual es una gran noticia. Hagamos una actualización rápida para asegurarnos de que no fui e inspeccionar a nadie más. Ahora tenemos todas nuestras clases configuradas con span. Y si miras a la derecha, verás que tenemos croma como clase de padres, y luego Sam es el niño y croma dot cm te dará esa configuración de color SetSpeed con clases. Para que puedan ser reutilizados. Si tienes mucho resaltado de sintaxis y vas a usar la ventanilla única para todo ello. Incluso podrías personalizarlo si lo necesitas. Eso definitivamente te ayudará. Si has desactivado estilos en línea con tus encabezados de seguridad. 16. Personalizar los estilos: Apenas unas cuantas formas diferentes podemos cambiar los estilos. La primera forma es usar las clases de utilidad. Entonces si entras, por ejemplo, iremos a nuestros posts y solo punto HTML. Y si estamos buscando cambiar la forma en que los encabezamientos, a pesar de que vamos a entrar en nuestro parcial total. Y actualmente es un H1, pero quiero hacerlo un poco más pequeño. Estoy poniendo esa clase H2. lo guardaremos. Ahora haga clic derecho en el post. Vamos, tenemos nuestra clase H2 ahí, y eso va a ser reduciendo el tamaño de la fuente para nosotros. Pero lo realmente importante es mirar variables y también Hojas de Estilo. Si vas a los activos y SPSS, verás que he configurado una página llamada Variables personalizadas. Y es aquí donde empieza a ponerse realmente interesante. Entonces tenemos aquí nuestro color primario. Podrías usar una de estas variables incorporadas, pero seamos realistas. Todos los demás por ahí ya lo han hecho. Y no quieres que tu sitio web parezca un sitio web de Bootstrap por defecto. Entonces lo que podemos hacer es que podamos cambiar el color y hay que tener mucho cuidado. Tiene que ser algo de buen gusto. De lo contrario probablemente no funcionaría, pero puedes usar trial y error. Entonces esa es mi primaria. Eso lo guardaremos. Y puedo ver que todos los colores primarios han cambiado, pero podemos hacer mucho más que eso. Por ejemplo, aquí abajo tenemos nuestra paginación. Hay dos formas en las que puedes ir trabajando en qué variables cambiar. Puedes entrar en nuestra carpeta de módulos de nodos, luego Bootstrap, SCSS, y luego variables abajo abajo. Y puedes hacer Control F y buscar paginación. Entonces es un caso de copiar y pegar toda esa sección hacia abajo en la parte inferior de tus variables. El problema con el que puedes entrar es cuando estas variables se refieren a otra variable que no tienes. Por ejemplo, tenemos un color de enlace. Ya tenemos blanco en la parte superior. Entonces eso no debería ser un problema. Pero por ejemplo, el color del enlace probablemente no haya conseguido eso en el ya. Entonces lo que te recomiendo que hagas es resaltar todo el lote y comentar, y luego resolver qué parte realmente quieres usar. Ejemplo. Tenemos aquí hover fondo de gris 200 y flotar el color del borde. Así que voy a sacar ésos. Quiero que mi acuarela sea el fondo más oscuro de 500 omega, un poco más oscuro a los 300. Entonces vamos a salvar eso. Y ahora tenemos nuestro fondo oscuro y el contorno, otra vez más oscuro. La otra forma que lo puedes hacer es buscar los documentos para la paginación Bootstrap. Asegúrate de estar en el bootstrap de cinco páginas. Es extremadamente potente. Prácticamente en la parte inferior de cada página de documentos en Bootstrap, tenemos una sección variable y puedes copiar y pegar directamente fuera de ahí. El problema con esto es, por ejemplo, aquí tenemos color vinculado y tú preparaste y lo tienes en tus variables ya. Entonces lo que tienes que hacer es volver las variables bootstrap caen de los módulos de nodo y hacer un Control F para el color del enlace. Y tendrás que ir al primero porque ahí es donde primero se define. Y tendrás que copiar y pegar. Esa línea. Irá como arriba. Aquí es donde comienza a ponerse un poco desordenado. Y entonces podemos tener esa línea en comentada. Pero en realidad, probablemente no quieras tener, si estás tratando de cambiarlo, ya sea puedes cambiar el color del enlace o si quieres hacerlo diferente, solo puedes poner algo más en esta línea. Por ejemplo, podrías simplemente poner un color ahí si quisieras, un Hicks y así sucesivamente. De lo contrario, se puede utilizar una de estas variables aquí, primaria, éxito secundario, etcétera. O si quieres cambiar todos tus enlaces a la vez, es simplemente ir a cambiar el color del enlace. Ni siquiera necesitas tener esa línea habilitada porque solo nos importa cambiar el color del enlace. Es posible que desee hacer que ese secundario, por ejemplo, deshacerse de la etiqueta predeterminada. Esos. Así que se supone que debes hacerlo. Y lo guardaremos. Y ahora todos nuestros enlaces están utilizando el color secundario. Y la última forma es usar hojas de estilo para que pueda hacer estilos. Tenemos nuestro CSS personalizado, y tenemos widgets, por ejemplo. Y más o menos te he mostrado esto a lo largo del, a lo largo de cuando los estamos haciendo. He usado una especie de estilo de haz híbrido aquí. Y echemos un vistazo rápido a nuestros widgets. Entonces digamos por ejemplo, quiero tener menos relleno por debajo del encabezamiento. Vamos a hacer clic derecho e inspeccionar y veremos cómo está configurado. Y ahí está nuestro golpe. Se trata de margen inferior ahí, 0.5 rem bajo el rubro. Por lo que voy a hacer margen dash fondo. Señalo a REM, lo guardaremos. Y eso se acaba de reducir el otro poco de espacio lateral en la página. posible que quieras deshacerte de todo para que podamos anular los estados usando Bootstrap tres, pero actualmente lo estás anulando con 0.2. En realidad podemos simplemente poner 0 en una calefacción 0. No usas una unidad como Remy acaba de poner en 0. Y verás ahí está encogido de nuevo y nos hemos librado de todo el relleno por completo. No hay nada entre el encabezado y el contenido. Y eso podría ser útil si estás tratando ahorrar algo de espacio en la página.