Ter um blog para escrever e compartilhar nosso conhecimento na internet é fundamental para ter visibilidade e nos tornar conhecidos em nossa área como autoridade no assunto.  Este artigo ensinará como criar um blog com páginas dinâmicas para cada artigo.   Índice  Pré-requisitos  Começando  O que é Nuxt?  O que é o Nuxt Content?  O que é Cloudinário?  Criando um blog com o Nuxt  Criando as notas do blog  Obtendo as postagens  Criando Páginas Dinâmicas  Pensamentos finais  Saber mais  Para acompanhar, veja a base de código e seu repositório no   e a   para referência. GitHub demonstração   Pré-requisitos  O seguinte é necessário para concluir este tutorial:  Conta Cloudinary.   é gratuita A inscrição  Conhecimento básico de JavaScript  Familiaridade com Vue  Começando  Para começar, abra o terminal e execute o comando:   npx create-nuxt-app blog-for-developers  O comando acima iniciará um prompt de interface de linha de comando (CLI) que nos permitirá configurar vários aspectos do nosso projeto.   Agora que o clichê está configurado com todos os arquivos e pastas, vamos rodar o servidor de desenvolvimento que está acessível em  dentro do projeto.   http://localhost:3000   # change directory to project folder  cd blog-for-developers  # start the development environment  npm run dev    O NuxtJS é um framework Vue intuitivo de código aberto que nos permite construir interfaces de usuário, tornando o desenvolvimento web simples e poderoso. O que é Nuxt?    Durante a configuração inicial deste projeto, selecionamos o módulo de conteúdo Nuxt. Este módulo nos permite usar nossa base de código como um CMS headless baseado em Git para acessar markdown, JSON, YAML, XML e até mesmo arquivos CSV por meio de uma interface semelhante à API. Com este módulo  , ele injetará o  instância globalmente em nosso projeto para acessá-la em qualquer lugar em um projeto. O que é o Nuxt Content?   @nuxt/content   $content    Cloudinary é uma ferramenta de gerenciamento de imagem e vídeo de serviço em nuvem para aplicativos da web e móveis. Com o Cloudinary, podemos carregar, criar e gerenciar experiências digitais em qualquer navegador e dispositivo. O que é Cloudinário?   Criando um blog com o Nuxt  Antes de criarmos o conteúdo do blog em markdown usando o conteúdo do Nuxt, vamos primeiro criar a página inicial do blog que incluirá os links de navegação e algum texto.    No  , podemos adicionar nossa fonte favorita à seção head e usar uma família de fontes específica, conforme mostrado abaixo: Adicionar estilo de fonte   nuxt.config.js file  O bloco de código acima não terá efeito na página até que escrevamos o CSS que usará a fonte.  Agora, adicione o seguinte código ao  que incluirá os links de navegação e algum texto na página inicial. Remova o 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 >  No bloco de código acima, incluímos um  com a fonte do vídeo armazenada no Cloudinary com atributos como reprodução automática, loop e mudo que silenciam o vídeo quando ele é carregado. Para obter a mídia armazenada no Cloudinary, carregamos o vídeo desejado na guia da biblioteca de mídia. Em seguida, copie a URL que será anexada ao  do  .    <video>   src   <video>  Além disso, referenciamos os links no cabeçalho de navegação com o  componente tanto para a casa  e a  rotas que iremos criar para visualizar todos os nossos blogs.  Para garantir que nossa página seja estilizada com CSS, crie uma pasta na raiz do projeto,  , e inclua o seguinte desta   .  No  arquivo, atualize o arquivo para incluir o arquivo CSS criado com o seguinte:    nuxt-link   /   /blogs   assets/styles/main.css essência   nuxt.config.js         ...             ... } export   default  {        css : [ '@/assets/styles/main.css' ],  Aqui está como nossa página deve ficar:   Criando as notas do blog  Para construir nosso site de blog, precisamos ter conteúdo para exibir e renderizar no  página. Primeiro, crie um  diretório e, em seguida, o diretório do blog que conterá todos os arquivos markdown. Escrever todo o conteúdo em markdown oferece suporte a vários padrões de sintaxe de markdown, como cabeçalhos, links e blocos de código com realce de sintaxe para diferentes linguagens de programação.  PS: O conteúdo do Nuxt utiliza a pasta de conteúdo para armazenar todos os arquivos.  Aqui está um exemplo de um arquivo markdown no diretório de conteúdo. Adicione o seguinte ao arquivo  .    /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!    Os arquivos Markdown têm a capacidade de adicionar metadados usando o conceito de matéria inicial, que é denotado com a sintaxe de traço triplo no início e no fim da matéria inicial. Os metadados, é o que é exibido para os leitores como a hora da publicação e o trecho do conteúdo do blog, é o que é exibido para os leitores. Outras várias propriedades podem ser incluídas.  PS: Dentro da matéria inicial, ele usa a sintaxe YAML.    Para buscar as postagens da página do blog, vamos criar uma nova rota em  . Crie uma pasta, chamada blogs, e nela crie  arquivo para o diretório, blogs.  Em seguida, copie e adicione o seguinte código ao  para exibir os arquivos de remarcação renderizados.  Obtendo as postagens   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 >  O bloco de código acima faz o seguinte:  : usado para gerar nossa página do Nuxt, pois gera arquivos individuais estaticamente para os usuários. Nós passamos no  método onde as notas do blog são armazenadas, o  função, e o  método.   asyncData   $content   sortBy()   fetch  : leva dois parâmetros,  (classificar por data) e os atributos desc sobre como você deseja que o conteúdo apareça com base no conteúdo mais recente publicado   sortBy()   publishOn  Para tornar cada artigo do blog dinâmico, vamos atribuí-lo a um URL, onde é  o slug do blog no botão Leia mais usando o  componente.   /blogs/   <nuxt-link>    A última etapa para visualizar o snippet das postagens renderizadas do diretório de conteúdo é usar a diretiva v-for e percorrer os blogs e renderizar cada artigo em um cartão. Renderizando as postagens  Aqui está como a página do blog deve ficar agora:   Criando Páginas Dinâmicas  Agora vamos criar páginas para cada postagem de blog para ter rotas de URL dinâmicas. No Nuxt, para criar páginas dinâmicas, acrescentamos um sublinhado antes do nome do arquivo .vue para não tornar a URL codificada.  Criamos então o  arquivo no diretório blogs e adicione o seguinte 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 bloco de código faz o seguinte:  : Usamos o conteúdo para buscar um arquivo específico do diretório blogs usando o parâmetro de rota e o slug que mapeará para o nosso nome de arquivo real   ${route.params.slug}  Para renderizar o markdown como conteúdo real definido no arquivo markdown, usamos o componente nuxt-content e passamos o prop do  com o inteiro  objeto   document   note  : Definindo o escopo para o elemento de estilo, certifique-se de que o estilo se aplica apenas a uma página específica   scoped  Pensamentos finais  A criação de um blog é ótima quando você deseja compartilhar seus pensamentos com um público mais amplo e o Nuxt nos forneceu uma maneira de fazer isso neste artigo. Ainda existem outros recursos que ainda podemos explorar para garantir que tenhamos um site de blog robusto.   Saber mais   Nuxt content   Documentação do Nuxt  Experimente a   ao vivo demonstração

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 áudio é produzido no idioma original da história!

Muito longo; Para ler

Como construir seu próprio blog com Nuxt, Nuxt Content e Cloudinary

Como construir seu próprio blog com Nuxt, Nuxt Content e Cloudinary

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Uma breve introdução à teoria do cérebro de Boltzmann

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Uma breve introdução à teoria do cérebro de Boltzmann

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps