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

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

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

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Telegram: el puente de Crypto Island hacia el continente

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Telegram: el puente de Crypto Island hacia el continente

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps