Tener un blog para escribir y compartir nuestro conocimiento en internet es fundamental para visibilizarnos y darnos a conocer en nuestro campo como una autoridad en un tema. Este artículo le enseñará cómo crear un blog que tenga páginas dinámicas para cada artículo. Tabla de contenido requisitos previos Empezando ¿Qué es Nuxt? ¿Qué es el contenido de Nuxt? ¿Qué es Cloudinary? Crear un blog con Nuxt Creación de las notas del blog Obtener las publicaciones Creación de páginas dinámicas Pensamientos finales Aprende más Para seguir, vea el código base y su repositorio en y la como referencia. GitHub demostración requisitos previos Se requiere lo siguiente para completar este tutorial: Cuenta cloudinaria. es gratis registrarse Conocimientos básicos de JavaScript Familiaridad con Vue Empezando Para comenzar, abre la terminal y ejecuta el comando: npx create-nuxt-app blog-for-developers El comando anterior iniciará un indicador de la interfaz de línea de comandos (CLI) que nos permitirá configurar varios aspectos de nuestro proyecto. Ahora que el repetitivo está configurado con todos los archivos y carpetas, ejecutemos el servidor de desarrollo al que se puede acceder en dentro del proyecto. http://localhost:3000 # change directory to project folder cd blog-for-developers # start the development environment npm run dev NuxtJS es un marco Vue intuitivo de código abierto que nos permite crear interfaces de usuario, lo que hace que el desarrollo web sea simple y poderoso. ¿Qué es Nuxt? Durante la configuración inicial de este proyecto, seleccionamos el módulo de contenido Nuxt. Este módulo nos permite usar nuestro código base como un CMS sin encabezado basado en Git para acceder a archivos Markdown, JSON, YAML, XML e incluso CSV a través de una interfaz similar a una API. Con este módulo , inyectará el instancia globalmente en nuestro proyecto para acceder a ella en cualquier parte de un proyecto. ¿Qué es el contenido de Nuxt? @nuxt/content $content Cloudinary es una herramienta de gestión de imágenes y videos de servicios en la nube para aplicaciones web y móviles. Con Cloudinary, podemos cargar, crear y administrar experiencias digitales en cualquier navegador y dispositivo. ¿Qué es Cloudinary? Crear un blog con Nuxt Antes de crear el contenido para el blog en Markdown usando el contenido de Nuxt, primero creemos la página de inicio para el blog que incluirá los enlaces de navegación y algo de texto. En el , podemos agregar nuestra fuente favorita a la sección de encabezado y usar una familia de fuentes en particular como se ve a continuación: Añadir estilo de fuente nuxt.config.js file El bloque de código anterior no tendrá efecto en la página hasta que escribamos el CSS que usará la fuente. Ahora, agregue el siguiente código a la que incluirá los enlaces de navegación y algún texto en la página de inicio. Retire el componente, . pages/index.vue <Tutorial /> <template> <section class =" showcase "> < header > < h2 class =" logo "> < nuxt - link to ="/"> ecosurf </ nuxt - link > </ h2 > < nav class =" nav desktop "> < ul > < li class =" nav__list "> < nuxt - link to ="/ blogs "> Stories </ nuxt - link > </ li > </ ul > </ nav > </ header > < video autoplay loop muted src =" https: // res . cloudinary . com / terieyenike / video / upload / v1651393236 / mixkit - tropical - island - landscape - view - 4692 - large_yanvml . mp4 "></ video > < div class =" overlay "></ div > < div class =" text "> < h2 data - type =" uppercase " class =" stroke "> Never Stop </ h2 > < h3 data - type =" uppercase "> Exploring The World </ h3 > < p > View of the tropical island landscape, from a hill with houses, palm trees and many trees, and in the distance the hills that surround the sea, on a sunny day . </ p > </ div > < ul class =" social "> < li > < a href =" https: // twitter . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img alt =" twitter profile " src =" https: // i . ibb . co / Wnxq2Nq / twitter . png "/></ a > </ li > < li > < a href =" https: // instagram . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img alt =" instagram profile " src =" https: // i . ibb . co / ySwtH4B / instagram . png "/></ a > </ li > </ ul > </ section > </ template > En el bloque de código anterior, incluimos un con la fuente del video almacenada en Cloudinary con atributos como reproducción automática, bucle y silencio que silencian el video cuando se carga. Para obtener los medios almacenados en Cloudinary, subimos nuestro video deseado a la pestaña de la biblioteca de medios. A partir de entonces, copie la URL que se adjuntará al del . <video> src <video> Además, hicimos referencia a los enlaces en el encabezado de navegación con el componente tanto para el hogar y el rutas que crearemos para visualizar todos nuestros blogs. Para asegurarse de que nuestra página tenga estilo con CSS, cree una carpeta en la raíz del proyecto, , e incluir lo siguiente de esta . En el actualice el archivo para incluir el archivo CSS creado con lo siguiente: nuxt-link / /blogs assets/styles/main.css esencia nuxt.config.js ... ... } export default { css : [ '@/assets/styles/main.css' ], Así es como debería verse nuestra página: Creación de las notas del blog Para construir nuestro sitio de blog, necesitamos tener contenido para mostrar y representar en el página. Primero, crea un directorio y luego el directorio del blog que contendrá todos los archivos de rebajas. Escribir todo el contenido en Markdown es compatible con muchos de los estándares de sintaxis de Markdown, como los encabezados, los enlaces y los bloques de código con resaltado de sintaxis para diferentes lenguajes de programación. PD: El contenido de Nuxt utiliza la carpeta de contenido para almacenar todos los archivos. Este es un ejemplo de un archivo de descuento en el directorio de contenido. Agregue lo siguiente al archivo . /blogs content content/blogs/egghead.md title: Egghead author: Teri Eyenike    description: All we need to do is open up our terminal and run the command npm install @nuxt/content. Once it's installed, you'll see that inside of our package.json, we see our Nuxt Content module. Next, to finalize the setup, let's go ahead and open up our nuxt.config.js, and let's go ahead and scroll down to the section that's labeled Modules.    date: May 2, 2021    publishOn: 2021-05-02T00:00:00    tags: ["learning", "platform"] --- --- cover _image: https://res.cloudinary.com/terieyenike/image/upload/v1651446130/pexels-jeremy-bishop-8241100_ oklfpe.jpg [ Egghead ]( https://www.egghead.io ) is a great platform for developers to enhance their skills!  Los archivos Markdown tienen la capacidad de agregar metadatos utilizando el concepto de materia preliminar que se indica con la sintaxis de tres guiones al principio y al final de la materia preliminar. Los metadatos, es lo que se muestra a los lectores, como el momento de la publicación y el extracto del contenido del blog, es lo que se muestra a los lectores. Se pueden incluir otras propiedades diversas. PD: Dentro de la materia frontal, utiliza la sintaxis YAML. Para obtener las publicaciones de la página del blog, creemos una nueva ruta en . Cree una carpeta, llamada blogs, y allí cree archivo para el directorio, blogs. A continuación, copie y agregue el siguiente código al archivo para mostrar los archivos de rebajas renderizados. Obtener las publicaciones pages index.vue pages/blogs/index.vue <template> </template> // pages/blogs/index.vue < main > < header > < h2 class = "logo" > < nuxt-link to = "/" > ecosurf </ nuxt-link > </ h2 > < nav class = "nav desktop" > < ul > < li class = "nav__list" > < nuxt-link to = "/blogs" > Stories </ nuxt-link > </ li > </ ul > </ nav > </ header > < div class = "container section" > < div class = "container__grid" > < div v-for = "blog in blogs" :key = "blog.slug + blog.createdAt" class = "card" > < img :src = "blog.cover_image" alt = "blog photographs" /> < div class = "pad__card" > < div class = "author" > < p class = "author__name" > {{ blog.author }} </ p > < span > | </ span > < p > {{ blog.date }} </ p > </ div > < h2 class = "title" > {{ blog.title }} </ h2 > < p > {{ blog.description.substring(0, 150) }}... </ p > < button > < nuxt-link :to = "`/blogs/${blog.slug}`" > Read More </ nuxt-link > </ button > </ div > </ div > </ div > </ div > </ main > < script > export default { async asyncData ( {$content} ) { const blogs = await $content( "blogs" ).sortBy( "publishOn" , "desc" ).fetch() return { blogs } }, head ( ) { return { title : "Read interesting stories as a nomad" , meta : [ { hid : 'description' , name : 'description' , content : 'Daily and juicy content as you learn, work, and relax. WFH' } ] } } } </ script > < style scoped > header { background : #111111 ; position : unset; } .container { width : 85% ; max-width : 75rem ; margin -inline: auto; } .section { padding : 3em 0 ; } .container__grid { display : grid; gap: 2em ; grid-template- columns : repeat (auto-fit, minmax ( 19rem , 1 fr)); } .card { background : #f0f7f4 ; box-shadow : 0px 4px 3px rgba ( 0 , 0 , 0 , 0.1 ); border-radius : 5px ; } .card img { object-fit : cover; border-top-left-radius : 5px ; border-top-right-radius : 5px ; width : 100% } .pad__card { padding : 2em ; } .author { display : flex; align-items : center; } .author , .title { margin-bottom : 1em ; } .author span { margin : 0 0.3em ; } .author__name { text-transform : capitalize; } button { border : unset; padding : 1em 2em ; margin-top : 2em ; background : #0D5159 ; font-weight : 700 ; cursor : pointer; } button a { color : #fff ; } </ style > El bloque de código anterior hace lo siguiente: : se utiliza para generar nuestra página desde Nuxt, ya que genera archivos individuales de forma estática para los usuarios. Pasamos en el método donde se almacenan las notas del blog, el función, y la método. asyncData $content sortBy() fetch : toma dos parámetros, (ordenarlo por fecha) y los atributos desc sobre cómo desea que aparezca el contenido en función del contenido publicado más reciente sortBy() publishOn Para hacer que cada artículo del blog sea dinámico, lo asignaremos a una URL, donde está el slug del blog en el botón Leer más usando el componente. /blogs/ <nuxt-link> El último paso para ver el fragmento de las publicaciones renderizadas desde el directorio de contenido es usar la directiva v-for y recorrer los blogs y renderizar cada artículo en una tarjeta. renderizando las publicaciones Así es como debería verse la página del blog ahora: Creación de páginas dinámicas Ahora vamos a crear páginas para que cada publicación de blog tenga rutas URL dinámicas. En Nuxt, para crear páginas dinámicas, agregamos un guión bajo antes del nombre del archivo .vue para no codificar la URL. Entonces creamos el archivo en el directorio de blogs y agregue el siguiente código: _slug.vue <template> </template> // pages/blogs/_slug.vue < main > < header > < h2 class = "logo" > < nuxt-link to = "/" > ecosurf </ nuxt-link > </ h2 > < nav class = "nav desktop" > < ul > < li class = "nav__list" > < nuxt-link to = "/blogs" > Stories </ nuxt-link > </ li > </ ul > </ nav > </ header > < div class = "container" > < div class = "return" > < nuxt-link to = "/" > < img alt = "back to home" src = "/home.png" /> </ nuxt-link > < span > / </ span > < nuxt-link to = "/blogs" > Blog </ nuxt-link > < span > / </ span > < p > {{ note.title.substring(0, 15) }}... </ p > </ div > < section > < h1 > {{ note.title }} </ h1 > < nuxt-content :document = "note" cla /> </ section > </ div > </ main > < script > export default { async asyncData ( {$content, route} ) { const note = await $content( `blogs/ ${route.params.slug} ` ).fetch() return { note } } } </ script > < style scoped > header { background : #111111 ; position : unset; } .container { width : 85% ; max-width : 75rem ; margin -inline: auto; } section { padding-bottom : 2em ; } .return { display : flex; margin : 1.5em 0 ; } .return img { width : 20px ; height : 20px ; } .return span { margin : 0 1em ; } h1 { margin-bottom : 1em } </ style > Este bloque de código hace lo siguiente: : Usamos el contenido para obtener un archivo específico de los blogs del directorio usando el parámetro de ruta y el slug que se asignará a nuestro nombre de archivo real ${route.params.slug} Para representar el markdown como contenido real definido en el archivo de markdown, usamos el componente nuxt-content y pasamos el accesorio del con todo objeto document note : al definir el alcance del elemento de estilo, asegúrese de que el estilo solo se aplique a una página específica scoped Pensamientos finales La creación de un blog es genial cuando quieres compartir tus pensamientos con un público más amplio y Nuxt nos ha proporcionado una forma de hacerlo en este artículo. Todavía hay otras características que aún podemos explorar para asegurarnos de tener un sitio web de blog sólido. Aprende más Contenido siguiente Documentación de Nuxt Pruebe la en vivo demostración

Dash

Fetch

Instagram

NuxtJS

Target

Twitter

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Book a call with @terieyenike

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Making security fun one episode at a time

Cómo crear su propio blog con Nuxt, Nuxt Content y Cloudinary

Cómo crear su propio blog con Nuxt, Nuxt Content y Cloudinary

Demasiado Largo; Para Leer

People Mentioned

Companies Mentioned

Coin Mentioned

Teri Eyenike

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

Cómo crear su propio blog con Nuxt, Nuxt Content y Cloudinary

Demasiado Largo; Para Leer

People Mentioned

Companies Mentioned

Coin Mentioned

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS