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

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

Muito longo; Para ler

Join to Learn About Storytelling for Startups

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

HackerNoon Mobile

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

Muito longo; Para ler

People Mentioned

Companies Mentioned

Coin Mentioned

@terieyenike

HISTÓRIAS RELACIONADAS