Transcrições
1. Introdução ao curso: Olá a todos e bem-vindos. Meu nome é aquela cela e serei seu instrutor neste curso. Vamos construir um blog de pilha completa. Então, antes de entrarmos nas diferentes tecnologias usadas, vamos primeiro dar uma olhada no que vamos construir. Então é assim que o nosso site vai parecer. É muito básico, muito minimalista, amigável
para iniciantes, como você pode ver aqui. E basicamente você vai ter apenas um cabeçalho, como você pode ver aqui, uma barra de navegação que contém um logotipo, e aqui estão algumas categorias. E então nós vamos ser encaixados em postagens. E para cada post vamos ter sua categoria aqui. Então, se clicarmos em uma dessas postagens, veja aqui, é
assim que vai parecer uma telha básica, uma data. E nós vamos estar trabalhando com a data F e S biblioteca para gerar na data. A maneira que queremos é 100% personalizável. E este é o conteúdo. É assim que ele vai se parecer com o conteúdo do nosso site. Não vamos usar markdown. Vamos usar para o nosso conteúdo, HTML
simples, para que ele seja 100% personalizável também. Para que possamos trabalhar com ele como quisermos. Além disso, se formos a qualquer um desses aqui. Então, por exemplo, se formos para subir é, você pode ver aqui que para o roteamento, vamos ter pequenas histórias e isso vai gerar para nós apenas os posts, por exemplo, que tem a categoria de histórias. Então, para este site, para o backend, vamos usar gráficos EMS, como você pode ver aqui, graficamente, CMS é um CMS sem cabeça, um sistema de gerenciamento de conteúdo. E é o que vamos usar para o conteúdo do nosso site. A razão pela qual vamos com gráficos EMS dizer que é 100% livre, como você pode ver, um livre para sempre. Além disso, ele nos dá uma API GraphQL, não uma API de descanso. Graphql API, é muito, muito bom. Em palavras simples, pedimos apenas os dados de que precisamos. Não temos que buscar todos os dados. Além disso, ele nos dá um API Playground, o
que torna mais fácil de perguntar e usar mesmo se você não tem idéia sobre GraphQL. Para o front-end, vamos usar o próximo JS. Próximo JS é um framework React JS. Isso nos dá tantas características. É como Reagir com esteróides. Então, para o roteamento de páginas degeneradas e dinâmicas, você não precisa usar outros recursos como o reator depois ou qualquer um desses. Além disso, podemos usar o index.js para gerar páginas estáticas. E isso é exatamente o que vamos fazer com nosso site. Vamos gerar páginas estáticas em tempo de
construção usando a regeneração estática incremental. Então você deve estar familiarizado com o Next JS. Se você não conhece Next JS e você pode ir para o site oficial, dê uma olhada na documentação, ou você pode verificar meu curso anterior, que chamou Nix ab.js para iniciantes para aprender os fundamentos. E você pode agarrar, defender os músculos das pernas em menos de uma hora. Nós vamos usar em outras tecnologias ao longo do caminho. Porque para o CSS, por exemplo, não
vamos usar qualquer framework, vai ser, como você pode ver aqui, CSS simples para tudo. Então você deve estar familiarizado com CSS e HTML, é
claro, JavaScript e reagir também. Dito isso, vamos começar.
2. Crie uma conta graphcms: Primeiro, vamos começar com o preto e todo o site. Podemos simplesmente construir o backend usando gráficos, EMS. Vamos começar a criar uma conta. É assim que vai parecer. Você pode criar uma conta usando Facebook, GitHub, Google, ou simplesmente ir com um e-mail normal. Depois disso, certifique-se de que concorda com os termos de serviço e política de
privacidade e inscreva-se quando entrar no site. É assim que vai parecer. Você pode ver que temos algum modelo boilerplate e iniciantes para não para nós, vamos estar construindo nosso site a partir do zero. Então, vamos clicar em Blank. Dê um nome ao seu projeto para mim. Vou chamá-lo de “compartilhar”. Como você pode ver. Você pode dar uma descrição também, o que vai ser para mim, fantástico. Blog. Novamente. Vá aqui e escolha a cidade onde você quer que seu projeto seja hospedado. Para mim, vou com Frankfurt na Europa e criar um projeto. Leva alguns segundos. E você pode ver agora que temos que escolher um plano para mim, eu vou ficar livre para sempre. E a propósito, é um plano incrível. Vamos selecionar apenas este plano. Aqui. Podemos convidar os membros da sua equipe apenas digitando seu endereço de e-mail. E você pode selecionar a partir daqui, eles são todos se você quer que eles sejam um administrador ou medula. Para nós, não seremos inviolados em nenhum membro da equipe. Vamos clicar em convidar mais tarde. Tudo bem, então agora como você pode ver, acabamos de terminar o processo de inscrição no gráfico CMS. No próximo capítulo, vamos começar a construir blocos de nosso site.
3. Como criar esquemas: É hora de construir os blocos do nosso site. Para isso, precisamos criar alguns esquemas. Para nós. Vamos criar apenas dois esquemas, um para as postagens e outro para as categorias. Então vamos aqui para modelos, e vamos clicar em adicionar o nome de exibição. Vamos chamá-lo de postagens. E como você pode ver aqui, ele será pluralizado automaticamente. E vamos criar este modelo. Você pode dar uma descrição como uma dica para editores de
conteúdo e usuários de API para que eles possam saber com o que estão lidando. Vamos criar este modelo. O segundo esquema que vamos precisar é um esquema para as categorias. Então, para o nome de exibição, vamos chamá-lo de grau de categoria. O primeiro esquema que vamos começar com é o esquema de categoria. A primeira coisa de que precisamos é de um objectivo. Então vamos para um texto de linha única aqui, e vamos chamá-lo de nome de exibição, nome. Podemos e validações aqui e tornar este campo obrigatório, o que significa que precisamos definir uma categoria. Você não pode ir sem definir e tinta para a nossa categoria. Precisamos definir este campo como único também. Porque não queremos que as categorias tenham o mesmo nome. Você pode ir para eles mais e limitar a contagem de células cardíacas ou Mitch combinar um padrão específico ou restringir um padrão específico. Para nós, vamos manter as coisas simples. Vamos criar isto. A segunda coisa que precisamos dar às nossas categorias é uma cor. Então vamos descer aqui e você pode ver a cor, o nome de exibição. Vai chamar-se “Cor”. E vamos para validações e tornar este campo obrigatório também. Fantástico, isso é tudo o que precisamos para o nosso esquema de categorias. Vamos agora para o nosso esquema de postagem. E a primeira coisa que precisamos para um cargo é um título. Vamos às validações. Os analistas tornam este campo obrigatório. Não queremos enviar o título é exclusivo porque podemos criar outras postagens com o mesmo título. Você pode limitar a contagem de caracteres de um título. Assim, por exemplo, para nós, podemos ir com o mínimo de seis letras, por exemplo, no máximo de 20. A mensagem de erro personalizada que podemos dar é, por exemplo, o título pode ir, ele pode ir apenas entre 620 caracteres. Não vai fazer isso. Vamos apenas criar. Ótima. A segunda coisa que precisamos para o nosso esquema post é um slug. Slug é a URL que será responsável por gerar uma postagem de blog. Então vamos para o nome de exibição e logístico que lesma. Podemos ir aqui e verificar uma opção chamada gera sorte do modelo. O que significa que podemos gerar automaticamente um slug a partir de um modelo que já definimos. Para nós. Podemos gerar isso a partir do título. Como sabemos, a maioria das lesmas lá fora na web que podem ser geradas a partir do título. E mesmo que se marcarmos esta caixa, podemos personalizar slug mais tarde quando começarmos a criar uma postagem. Então vamos para a validação aqui e vamos fazer a esfera necessária. E você pode ver que ele automaticamente selecionado como um único porque não podemos ter o mesmo slug para diferentes posts. A terceira coisa que precisamos é de uma miniatura. Isso vai ser diferente, que vai definir o nosso post. Então vamos para o seletor de ativos aqui, e vamos chamá-lo a partir de agora. Vamos para a validação. E vamos tornar este campo obrigatório. Por último, mas não menos importante, precisamos de um texto rico. Podemos ir com Mark aqui também. Mas vamos com quais textos que podem gerar para nós e conteúdo HTML, o nome de exibição aqui ele vai ser chamado de conteúdo. E podemos ir para validações e tornar este campo aqui obrigatório. Finalmente, queremos que cada postagem tenha uma categoria. Então, queremos algum tipo de ligação entre a vangloriação na categoria. Podemos simplesmente fazer isso indo para a relação aqui e ir para a referência. E você pode ir para o modelo para referenciar e selecionar a categoria. Aqui queremos que seja uma referência bidirecional. E você pode ficar com muitos posts para uma categoria. Para nós, queremos que os mileposts estejam relacionados a muitas categorias. Vamos continuar, continuar e apenas criar. E é isso. Acabamos de criar um esquema para um post e um esquema para a categoria. No próximo capítulo, vamos estar criando nosso primeiro post.
4. Como criar uma postagem: Agora é hora de começar a criar o conteúdo do nosso bloco. Para fazer isso, vamos ao conteúdo aqui. E como você pode ver aqui, podemos começar criando as categorias do nosso site, ou podemos começar criando um post. Vamos para posterior e vamos criar um item. A primeira coisa que precisamos definir é um título. Então, por exemplo, vamos chamá-lo. Este é o nosso primeiro posto. Aqui. Como você pode ver, seu slug é gerado automaticamente a partir do título. Claro, podemos até modificá-lo, o primeiro post e talvez outra coisa. Mas para nós, vamos gerar a bala a partir do título. Podemos simplesmente clicar em regenerar, e isso será regenerado novamente a partir do título. Vamos falar com outra pessoa aqui. Ainda não temos nenhum ativo. Então, vamos e clique em Upload. Selecione os arquivos a serem carregados. E vamos aos documentos aqui. Eu tenho aqui em ativos. E como você pode ver, eu tenho aqui e uma imagem. Vamos fazer o upload. E agora temos uma fórmula aqui. Podemos criar, podemos começar a criar o conteúdo deste bloco. Este é o conteúdo do primeiro bloco. E vamos fazer, por exemplo, isso como um cada um. E mais tarde podemos ganhar algum conteúdo para este bloco. Aqui para as categorias, não
podemos adicionar categorias existentes, já que não temos nenhuma. Vamos aqui e criar uma nova categoria. Vamos chamá-lo, por exemplo, de histórias. E pela cor. Vamos com qualquer cor que você gosta. Fantástico. Vamos salvar isso e publicá-lo ao mesmo tempo. Fantástico. Agora temos nosso link de Postagens para categorias de história. Então vamos agora salvar e publicar. Você pode ver aqui que ele está nos dizendo que o ativo que nós carregamos, ainda
é apenas um rascunho. Queremos que publique esta miniatura ou não? Então, eu vou checar. E vamos clicar em Salvar e publicar. Vamos e como postar. E como podem ver aqui, acabamos de fazer a nossa primeira vangloria. Se formos para a categoria aqui ao mesmo tempo, você pode ver que agora temos uma categoria chamada histórias. E esta é a cor.
5. Crie um aplicativo em Nextjs: Ok, então vamos começar a criar o front-end da nossa aplicação web. Para fazer isso, vamos para o terminal. E a primeira coisa que eu quero que meu projeto seja na área de trabalho. Então vamos CD para a área de trabalho. E depois disso, vamos criar um aplicativo x js. Para fazer isso, vamos clicar em MDX, criar o próximo aplicativo, e vamos dar um nome para mim. Vou chamá-lo de gerar, aperte Enter. E agora vamos esperar que o npm instale todas as dependências que o próximo JS precisa para executar corretamente. Como você pode ver agora, ele está instalando dependências ES fiapos. Oh, ótimo. Então, como você pode ver aqui agora, ele diz que sugerimos que você comece digitando CD para compartilhá-lo e executar o servidor de desenvolvimento, ou apenas 38 casaco, compartilhá-lo para abri-lo com o Visual Studio Code. E como você pode ver aqui agora, temos nosso projeto no Visual Studio Code. No próximo capítulo, vamos começar a mexer com esses arquivos aqui.
6. Configurando o projeto: Vamos nos livrar de todos os arquivos desnecessários para configurar nosso próximo aplicativo JS corretamente. A primeira coisa, vamos para estilos aqui e para a pasta aqui. Vamos deletar. Vamos para a pasta pública aqui. E vamos deletar isso também. Vamos para as páginas e vamos excluir esta pasta API. Outra coisa que index.js. Vamos deletar isso também. Fantástico. Vamos agora para este app.js e vamos remover solos de importação da ingestão global de css dot. Vamos para as páginas agora e vamos criar a página de índice. Vamos para Extensões e procurar o ES 7. Apenas digitando ES 7. Você pode ver aqui que há uma extensão chamada S7 React redux GraphQL, e React nativos snippets. Porque vamos usá-lo para criar todas as funções. Então apenas digite SFC. Agora, quando você tem a adição de sal. E você pode ver que isso vai gerar para nós um componente funcional apátrida. E vamos chamá-lo de índice. E isso vai voltar para nós em cada um. Isso diz: “Olá, Mundo, Hit Save”. Ótima. Agora vamos para o terminal. E vamos executar o servidor local digitando npm, execute dev. Então isso vai iniciar um servidor local em nossa máquina onde podemos ver nossa próxima aplicação JS. Você pode ver aqui que o servidor será iniciado no localhost e na porta 3000. Então agora você pode ver que compilado com sucesso logistic out. Clique nisto. E como podem ver aqui, temos agora o nosso mundo de olá. No próximo capítulo, vamos começar criando o cabeçalho.
7. Criando o cabeçalho: É hora de criar nosso primeiro componente, e esse será o outro componente. Para fazer isso, vamos criar primeiro uma pasta, e vamos chamá-la de componentes. Dentro desta pasta, vamos criar nosso primeiro componente. E essa vai ser Heather NodeJS, SFC mais uma vez. E vamos chamá-lo de cabeçalho. Por favor, tenha cuidado, este é um componente React. Precisa ser capitalizado. Então a primeira coisa que vamos fazer é que queremos gerar um cabeçalho. Dentro do cabeçalho, vamos fazer uma div com o nome da classe fora do contêiner. E depois disso, vamos montar duas coisas. A primeira coisa é um link. E vamos importar link de x js. Ótimo. Então agora este link aqui, nós queríamos ter um árbitro H que vai nos levar apenas para a página inicial. Dentro deste link, que é fazer uma tag. E dentro da etiqueta a, digamos que compartilhe, assim. Então este vai ser o nosso logotipo. A outra coisa que queremos é uma lista desordenada. E dentro dessa lista desordenada queremos algumas listas. E cada lista aqui vai conter uma etiqueta I. Então, antes de fazer uma tag, vamos apenas obter o link primeiro. Dentro de cada HREF. Isso não vai a lugar nenhum por enquanto. Dentro dele. Vamos fazer uma etiqueta. E dentro dessa marca logística ETag, por exemplo, particularmente. Ótimo. Vamos agora importar este cabeçalho dentro da nossa aplicação, vamos para o índice. E aqui vamos fazer uma div. E dentro dessa div, vamos chamar o outro. Aqui. Não se esqueça de importar o outro de componentes barra cabeçalho. Então agora vamos para o nosso aplicativo, atualizar. E como você pode ver, nós temos compartilhá-lo em nós temos categoria 1. Vamos para fontes dot google.com para obter algumas fontes para o nosso aplicativo. Para mim, eu vou apenas com Open Sans. Fantástico. Então agora vamos para Importar. E vamos importar este link. Vamos voltar à nossa candidatura. E vamos criar uma nova pasta. E vamos chamá-lo de estilos dentro de solos, vamos fazer um novo arquivo. E isso vai ser o nosso CSS de ponto global dentro dele. Vamos Control V, esse link que acabamos de importar do Google Fonts. A primeira coisa que vamos começar com é definir a margem como 0 e o preenchimento como 0 na caixa de dimensionamento border-box, assim. Depois disso, vamos para o corpo e vamos fazer a cor de fundo para ser 000,
000 e a cor para ser FFF. Queremos que o fundo seja preto e a cor seja branca. Outra coisa é que o tamanho da fonte, a família da fonte. Queremos que seja o sentido oposto ao que importámos. Então, agora, se formos para a nossa aplicação web, não
podemos ver o estilo porque ainda não importamos o CSS ponto global. Vamos para o Pages e vamos para este aplicativo. E como você pode, nós novamente importamos estilos, slush CSS global. Aqui podemos torná-lo global, não global. Vamos voltar à nossa candidatura. E como você pode ver aqui agora, o fundo é preto. E aqui temos nossos links. Eles não são brancos porque são links. Então vamos fazer com que todos os links. Queremos dar-lhes uma cor de fff. E agora podemos ver nossos links. Ótimo. Outra coisa que queremos adicionar são as listas não ordenadas. Queremos o estilo da lista. Tipo para ser nenhum. Uma coisa que queremos também, é que o recipiente, queremos que seja uma largura de 60%, por exemplo. E a largura máxima para ser de cem, cem pixels e a margem para auto. Então isso vai centralizar tudo para nós. Pode até dar um pano de fundo para dar uma olhada nisso. Como você pode ver aqui, este é o recipiente que vai embrulhar toda a nossa aplicação. Ótimo. Então agora queremos começar a estilizar D'Azur. Vamos usar os modelos. Então vamos criar o nosso primeiro módulo, e isso vai ser o modelo de ponto de cabeçalho, dot css. Fantástico. Vamos voltar agora para o cabeçalho e vamos importar estilo, estilos barra cabeçalho, módulo ponto, ponto CSS. Então agora temos qualquer coisa nele ClassName que podemos adicionar aqui. Podemos importá-lo dos lados aqui. Ótimo. Então a primeira coisa que queremos é começar a manipular, por exemplo, esta é uma tag aqui. Vamos dar-lhe um nome de classe de estilo, logotipo. Vamos para o módulo de cabeçalho aqui. E vamos criar um nome de classe local. Depois de criar que só lhe dará um tamanho de fonte, por exemplo, de três rems. Aperte Salvar, volte. E como você pode ver aqui agora, o silencioso é aplicado ao logotipo. Vamos voltar ao CSS global. Para todas as tags a, não
queremos qualquer decoração de texto para que removamos esses sublinhados. Vamos voltar para o módulo de cabeçalho aqui. E vamos dar a este logotipo uma fonte diferente. Vamos voltar para as fontes aqui. Remova todas as fontes que temos. Volte para casa. E vamos escolher outra fonte. Vamos com lagosta. Vamos adicionar isto ao solo aqui. Vamos clicar em Importar e vamos importar este link. Vamos colocá-lo em nosso módulo de cabeçalho. E vamos voltar para a família Ford aqui. E vamos adicioná-lo ao nosso logotipo. Volte para a nossa candidatura. E como você pode ver aqui, acabamos de mudar os fóruns do nosso logotipo. A outra coisa que queremos, Vamos voltar para o cabeçalho aqui, e vamos adicionar alguns aliados, porque podemos ter muitos aliados. Neste. Vamos chamá-lo, por exemplo, categoria dois. E como você pode ver aqui agora nós temos a categoria 1 e nós temos o link. Então, outra coisa que queremos é para este recipiente aqui, queremos dar-lhe uma exibição de conteúdo flexível e justificado para ser espaço entre nós para que possamos definir um espaçamento entre o logotipo na UL. Para fazer isso, podemos envolver tudo dentro de outra div, ou podemos simplesmente voltar aqui para os nomes das classes e manter esse contêiner fazer um espaço. E então vamos fazer aqui recipiente ponto estilo. E vamos voltar ao cabeçalho aqui. E vamos criar um contêiner que vai ter uma exibição de flex. E deixe conteúdo justificado para ser espaço entre. E vamos alinhar os itens também no centro. Vamos voltar. E como podem ver aqui agora temos este espaço entre os dois. A outra coisa que queremos acrescentar é esta lista aqui. Queremos que eles fiquem um ao lado do outro. Então podemos simplesmente, vez que temos apenas uma lista ordenada e listas não ordenadas dentro do nosso cabeçalho, podemos simplesmente ir aqui. E em primeiro lugar, vamos fazer uma classe de cabeçalho. E eu só vou dar-lhe uma borda, fundo de um px, CCC
sólido, e então nós podemos escolher a cor de nossa escolha. Para mim. Eu só vou dar uma transparência aqui, como você pode ver aqui. Então agora precisamos voltar ao cabeçalho. Vá para o cabeçalho aqui, dê-lhe um nome de classe do ponto de estilo Heather. E você pode ver que agora temos um fundo de fronteira. Vamos dar-lhe também, um preenchimento de 20 pixels e 0. De modo que dissemos o estofamento apenas do topo e do fundo. Agora podemos simplesmente digitar o cabeçalho para o recipiente, a lista não ordenada para ser exibição de flex. E agora você pode ver que temos cada categoria ao lado da outra. Vamos voltar aqui. E agora queremos chegar ao cabeçalho dos aliados da UL. E vamos dar a cada um deles Homologene esquerda. Por exemplo, 20 pixels. Então agora podemos ver que há um espaçamento. Vamos fazer 30 pixels. Então agora podemos ver que há um espaçamento entre as categorias. Outra coisa que queremos adicionar é a transformação de texto, mas vamos adicioná-lo ao cabeçalho ETag, UL LI a, e vamos dar-lhe uma transformação de texto. Capitalizar. Outra coisa é o tamanho padrão, logística. Torná-lo um pouco maior. Como você pode ver aqui. Assim, muito maior. Vamos apenas dar-lhe um peso de fonte também de 100 para torná-lo muito, muito leve. E vamos diminuir o tamanho diferente. Ótimo. Então agora temos as categorias e já temos tudo configurado. Na próxima sessão, vamos finalmente ligar o nosso backend ao front-end, trazendo todas as categorias aqui.
8. Fetching as categorias: Agora queremos integrar nosso conteúdo em nossa aplicação para que possamos obter todas as categorias aqui. Mas primeiro, precisamos tornar nossa API acessível. Vamos voltar ao Graph CMS. Vamos para as configurações. E depois disso, vamos para API Access. E vamos criar uma permissão. As regras que queremos dar só para ler. Para os locais, só temos um. Ela é inglesa. Em quatro etapas, vai querer ler apenas o conteúdo publicado. E vamos criar. Ótimo. Então, agora, se formos para o topo aqui, você pode ver a API de conteúdo. E vamos copiar isso. Vamos voltar à nossa candidatura. E a primeira coisa que queremos fazer é criar uma variável de ambiente. Então, quando você foil e vamos chamá-lo de ponto E e V local, queremos que nossa variável de ambiente seja acessível a partir do navegador também. Para fazer isso, temos que inicializar o nome do nosso ambiente com o próximo público, e depois o nome para nós. Podemos chamá-lo de I. E depois vamos dar-lhe o link. Fantástico. Vamos voltar agora para os nossos componentes, o perigo. E a primeira coisa é que queremos buscar as categorias. Então, vamos importar duas coisas do projeto React. A primeira coisa é um gancho de efeito americano. E você diz Turk. Ótimo. Agora vamos descer aqui, sendo a primeira coisa a criar, por exemplo, links de categoria. E defina os links de categoria assim. E isso será igual a um estado americano. E como um valor inicial, vamos apenas dar-lhe uma matriz vazia. Depois disso, vamos para os EUA. Efeito parece assim. E vamos criar uma função, uma função de retorno de chamada. A primeira coisa que queremos é adicionar aqui uma matriz vazia, que significa que queremos que este enorme efeito seja executado quando a página é carregada uma vez. Vamos voltar aqui. E queremos agora algo para entrar em contato com nossa API. E como nossa API está usando GraphQL, precisamos da biblioteca para isso. Há uma biblioteca chamada GraphQL solicita Controle G aqui. Vamos para este controle de erupção C para excluir tudo ou Controle L. E então podemos npm instalar algo chamado GraphQL solicitações. Pressione Enter. Posso ver aqui. Agora temos solicitações GraphQL instaladas. Vamos para o pacote. JSON. E como você pode ver aqui, temos solicitações do GraphQL como um grau de dependência. Então, queremos criar uma instância. Então nós vamos estar usando repetidamente em nossa aplicação. Vamos voltar aqui. Vamos criar uma nova pasta, e vamos chamá-la de lib. Dentro desta pasta aqui, vamos fazer um novo arquivo. E vamos chamá-lo, por exemplo, gráfico CMS dot js. Dentro disso, Vamos importar de solicitações GraphQL. Queremos importar algo chamado cliente GraphQL, como você pode ver aqui. Vamos descer aqui. Vamos exportar uma constante chamada por exemplo, gráfico CMS mais uma vez. E esse será um novo cliente GraphQL. E aqui ele precisa de uma URL que é uma string. O URL com queijo confidencial para nós. Podemos obtê-lo a partir desta variável de ambiente. Então vamos voltar e copiar o nome. Vamos voltar para o gráfico CMS dot js instância. E aqui vamos digitar o ponto de processo E e V ponto. Em seguida, API pública. Fantástico. Agora podemos importar essa instância, sólidos importados do gráfico TMS, como você pode ver aqui. E vamos importar esse gráfico de grau CMS. Então, agora dentro do efeito dos EUA, queremos fazer uma função assíncrona porque gostaríamos de esperar que isso se conecte. Então vamos fazer com que contem os dados que queremos. E vamos esperar. Esse gráfico CMS pontos pedidos. Mas como podemos solicitar os dados. Vamos voltar aos gráficos EMS ao longo de um ano. E podemos ir a este parque de jogos API. Depois disso, queremos obter todas as categorias. Então vamos ao Explorer. Vamos para as categorias aqui. E queremos obter a cor e o CSS da cor. E queremos obter também o nome das categorias que temos. Acerte a peça aqui. E você pode ver a forma dos dados que receberemos. Você pode ver que para as categorias temos apenas uma que é histórias, e esta é a cor CSS. Vamos copiar tudo isso. Vamos voltar para a nossa candidatura aqui. Vamos fazer alguns backticks. E dentro desses backticks, vamos colar nossa consulta, como você pode ver aqui. Então, agora a partir dos dados, se você der uma olhada aqui, nós temos as categorias, que significa que podemos destruir para elas. Então, a partir desses dados aqui, vamos obter as categorias. E o depois de enviar este pedido e obter um categorias antigas, queremos definir os links de categoria para essas categorias. Ótimo. Então, já que temos todas as categorias, podemos descer aqui. Vamos apenas remover este LI. Vamos manter apenas um, e vamos cortá-lo. Então agora dentro desta URL, queremos obter todas as categorias para os links da categoria crítica. E queremos mapear através deles. Quando nós mapeamos através deles, nós vamos ter um link, por exemplo. Neste link queremos que ele volte para nós. Desculpe-me. Quando mapearmos, podemos ter um link. E este link vai retornar para todos nós o que acabamos de cortar taxa. Então, agora dentro deste link, já que estamos mapeando aqui, precisamos fornecer uma chave. Então a chave, por exemplo, vai ser nome de ponto lync. É único se você se lembrou. Então agora dentro deste link portas cada href também, queremos que ele seja barra o nome da parte do link. E para a categoria um aqui, queremos obter nomes. Bem, então vamos fazer o nome do Lync Dot. Fantástico. Tudo está configurado agora, a única coisa que precisamos é dizer ao nosso servidor e executá-lo novamente. Então, dentro do controle do terminal C para matar o agitador. E vamos executá-lo novamente. Fizemos isso para carregar nosso arquivo ENV que acabamos de criar. Então agora diz compilado com sucesso. Vamos voltar ao nosso dedo de replicação cruzado que não vamos ser enfrentados em nenhum erro. Vamos esperar por isso. E como você pode ver aqui agora nós temos histórias. Vamos voltar ao gráfico CMS. Vamos para o conteúdo. Vamos para a categoria aqui. E vamos adicionar outra categoria. Por exemplo, é programação colorida. E para a cor, o que lhe dá esta cor? E vamos ver, vamos clicar, Salvar e publicar. Vamos voltar ao nosso aplicativo, atualizar. E como podem ver aqui, agora temos histórias e programação. Queremos que a cor destes seja a cor que definimos aqui. Então vamos voltar à nossa candidatura. Vamos para os componentes D3.js. E para esses links aqui, logicamente do músculo e da cor para ser o elo. Mas cor dot CSS, ele salvar. Volte para a nossa candidatura. E como você pode ver aqui agora nós temos histórias e nós temos programação também. Se clicarmos em qualquer um desses, como você pode ver, ele nos leva para localhost slash histórias. E se clicarmos em um desses anos de programação, por exemplo, nos leva a cortar programação. Mas há um problema aqui. O cabeçalho, só podemos ser encontrados na página inicial. Queremos que o cabeçalho seja encontrado em todas as páginas dentro da nossa aplicação. Então, como resultado, precisamos criar um wrapper. E é isso que vamos criar no próximo capítulo.
9. Como criar um invólucro: E o problema que enfrentamos, foi que o cabeçalho pode ser encontrado apenas na página inicial. E isso é normal. Porque se formos para o nosso índice de páginas de aplicação e aqui temos
o cabeçalho, o cabeçalho temos um único na página inicial. Para superar esse problema, podemos ir para componentes. Vamos fazer um novo arquivo. E vamos fazer, por exemplo, um rapper que vai envolver todo o nosso aplicativo SFC mais uma vez. E vamos chamá-lo de embrulho. Dentro deste invólucro, por exemplo, vamos fazer uma div. E vamos esperar. Vamos voltar para a pasta de páginas aqui, e vamos para a loja de aplicativos js. Dentro do app.js aqui, queremos importar nosso wrapper para que ele possa envolver toda a nossa aplicação. Vamos a tudo o que temos aqui, e vamos cortar. E Ryan um ano, Vamos abrir esses suportes e dentro deles, Vamos chamar o invólucro, como você pode vê-lo como radicalmente importado de componentes invólucro. Dentro deste invólucro, vamos basear o que cobrimos. Aperte o botão Salvar. Então agora temos esses componentes dentro do nosso invólucro. Mas como podemos chegar até eles daqui, podemos chegar a uma propriedade chamada crianças. E o que nós queremos é que dentro desta div todas aquelas crianças como células. Se voltarmos agora ao nosso aplicativo, você pode ver que nada mudou. E se formos para a programação ou algo assim, ainda
estamos enfrentando o mesmo problema. Não conseguimos ver o cabeçalho. Para ultrapassar este problema, tudo o que precisamos fazer é voltar ao índice. Vamos remover D daqui. E vamos voltar ao nosso invólucro e colocar o cabeçalho aqui. Vamos importá-lo. Eu sou componentes Slash aqui, eles são ótimos. Então, agora, se voltarmos para a nossa inscrição, vamos para a página inicial. Vamos às histórias. Podemos ir para a programação. E agora nosso cabeçalho é encontrado em todas as páginas. No próximo capítulo, vamos estar buscando as postagens da nossa aplicação.
10. Posts recheios de recheio: Certo, agora queremos buscar todas as postagens na nossa página inicial. Para fazer isso, vamos voltar ao nosso aplicativo e vamos criar um componente post, componentes novo arquivo, e vamos chamá-lo postdoc JS, grande SFC novamente. E vamos chamá-lo de postagem e ética. Então, agora dentro desta caixa, a primeira coisa que queremos fazer é uma div. Dentro desta div aqui, podemos fazer uma imagem assim. Esta imagem, temos que importá-la da próxima imagem barra. Ótimo. Então a imagem precisa de um SRC. Ele vai estar vazio por enquanto em suas necessidades, bem como, uma largura, qualquer altura. Para nós, vamos apenas dar-lhe o layout de cinza. E agora queremos fazer outra div, que vai levar o título como tão bom. E mais tarde vamos fazer outra div para o distintivo. O distintivo que vai indicar
a categoria dos posts como você vai vê-lo mais tarde. Então vamos primeiro voltar. Vamos salvar isso. E vamos para a página de índice. Aqui. Temos um div, podemos dar-lhe um nome de classe de recipiente. Dito isso, vamos aqui e vamos exportar uma função assíncrona que vai ser chamada get static, adereços, assim. Não requer parâmetros. Então, a primeira coisa que precisamos é importar a instância CMS gráfico. Então vamos fazer uma constante chamada de dados que será igual a esperar pelo gráfico. Solicitação de ponto de instância Cms. Vamos primeiro importar parágrafos instância
EMS do gráfico CMS. Então agora podemos ir para Graphs EMS aqui. E se pedirmos, e vamos pedir os dados. E assim como fizemos com as categorias. Então vamos voltar ao gráfico CMS aqui. Vamos para a API Playground aqui. E vamos remover tudo o que usamos antes do Explorer. Mas na verdade nós podemos escrever, podemos digitar o que queremos apenas por nós mesmos. Então aqui está como é simples. Está aberto os parênteses para todos os postes. E dos posts queremos obter o título. Queremos pegar o projétil, queremos a miniatura também. E para a salmonela, queremos a URL da imagem. O que mais? Queremos a categoria também. E das categorias, queremos apenas o nome e, claro, a cor. Da cor. Queremos o CSS. Ok, então agora se nós acertarmos isso, você pode ver que nós temos apenas um post. Ele nos dá o total e nos dá um slug, o URL da miniatura. E aqui, como podem ver, é para os sauditas, temos categorias. Temos apenas uma categoria que pertence a este post, que é as histórias e esta é a cor. Então vamos levar isso com uma cópia. Vamos voltar aos nossos pedidos e vamos colar isto aqui. Ótimo. Então, a partir dos dados, se você vê aqui nós temos postagens, para que possamos destruir essas postagens. Assim. Depois disso, vamos descer aqui e voltar. Adereços. Adereços que queremos retornar são os posts cinza. Outra coisa que queremos implementado também é
revalidar isso a cada dez segundos, por exemplo. Isto é, isto é o que vai ser realmente, isto é o que vai ser responsável por gerar esses posts uma e outra vez mesmo depois de construirmos nossa aplicação, isto é o que é chamado de regeneração estática incremental. Fantástico de saber, já que
temos os posts aqui, podemos ir aqui e podemos obter os posts das propriedades aqui. Ótimo. Então agora ainda não usamos. Podemos simplesmente descer aqui. Vamos fazer outra div. E dentro desta div aqui, vamos pegar todos os postes. Mapeie através deles. E quando os mapeamos, vamos conseguir um post. E para isso queremos retornar que se orgulha assim. Este post aqui componente, precisamos importá-lo. Então vamos importar. De componentes barra hosts. Ótimo. Então, para esta pose aqui, a primeira coisa que queremos adicionar a ela é uma chave que vai ser a lesma pós ponto. Sabemos que a lesma é única para cada posto. Outra coisa que queremos adicionar a este post é uma propriedade post que vai tomar o post em si. Ótimo. Vamos voltar agora para o posto em si em componentes. Então aqui podemos alcançar esses fantasmas. E depois disso podemos destruir o que queremos. Então a primeira coisa que queremos é o título. Queremos a miniatura. Queremos trabalhar, e queremos as categorias também da costa. Então agora podemos ir para o total aqui, versado em apenas você escolher a propriedade que é chamada de constante, que é chamado de título. Vamos comentar esta imagem por enquanto. Porque para a imagem, precisamos realmente adicionar o domínio para o config dot js. Vamos salvar isso, volta para a nossa aplicação, fresco. E vamos aqui. Como você pode ver, temos os primeiros gabaritos, que é o título de nossos posts. Ótimo, como você pode ver, vamos adicionar outra coisa, por exemplo. Agora queremos a salmonela. A fim de fazê-lo, Vamos primeiro ir para o SRC aqui, e queremos miniatura URL. Mas aqui, como podem ver, vamos enfrentar um erro. Ele diz que para as imagens, precisamos adicionar o nome do host do gráfico de ponto de mídia CMs.com ao nosso ponto de configuração próximo arquivo JS. Então vamos copiar isto. Vamos para o próximo ponto, JS. Vamos descer aqui. E vamos fazer imagens assim. Então isso vai ser um, um objeto que leva domínios. E aqui podemos adicionar todos os domínios de nossas imagens que temos dentro de nossa aplicação. Então agora temos que fechar este controle G aqui, como você pode ver, o terminal agora está nos dizendo que há uma mudança no próximo conflito de pontos ou JS. Então precisamos reiniciar o servidor, Controle C para parar o servidor. E então npm execute dev mais uma vez para iniciar o servidor novamente. Ótimo. Então, agora vamos voltar ao nosso pedido. Aguarde até que ele atualize. E como você pode ver aqui, temos nossa imagem que preenche toda a página. Nós vamos realmente chegar a isso mais tarde com este CSS. Então agora vamos para Styles e novo arquivo, e vamos chamá-lo de Post dot módulo dot CSS. Vamos importar isso aqui. Importar de estilo barra post módulo ponto ASS. Fantástico. Então a primeira coisa que queremos é, por exemplo, para esta div aqui, Vamos dar-lhe um nome de classe de posts de estilo. E vamos para os postos aqui. Vamos fazer uma postagem e deixá-la vazia por enquanto. Queremos modificar esta imagem. Então, como podemos fazer isso? E podemos simplesmente ir para a imagem fantasma aqui. E podemos dar-lhe uma posição de absoluta. E para o posto em si, queremos dar-lhe uma posição de relativa Controle S. Vamos voltar à nossa aplicação. E como você pode ver aqui, agora, isso preenche apenas os posts. Ótimo. Outra coisa que queremos é que este posterior lhe dê uma altura. Então, para mim, vou dar-lhe uma altura de 300 pixels. Vamos voltar aqui e você pode ver essa imagem. Para a posição da imagem, vai ser absoluta. E queríamos ter uma largura de 100%. E a altura também. Para 100% Para o índice Z, queremos dar-lhe como um índice de um. Então agora queremos detectar o título a ser exibido aqui em cima da nossa imagem. Então, para isso, esta div aqui, Vamos dar-lhe um nome de classe de prosa,
estilo, sobreposição de pontos, por exemplo. Então vamos voltar aqui. Vamos fazer uma sobreposição aqui. Nome da classe. E vamos dar-lhe uma largura de 100%, uma altura para um 100%, uma posição de absolutos. E queremos dar-lhe uma cor de fundo de zeros 0000 e a cor branca. Então, agora, se voltarmos aqui, aperte a atualização. E acho que há um problema aqui. Então, qual é o problema? É o índice Zed. Vamos dar como um índice de dois para estar no topo da imagem. Então, como você pode ver, podemos ver apenas a barra de título, podemos ver a imagem. Então vamos para a cor de fundo, e vamos dar-lhe uma opacidade. Assim. Vamos voltar agora. E como você pode ver, podemos ver a imagem na parte de trás de nossos posts. Ótimo. Então, para esta sobreposição aqui, queremos dar-lhe uma exibição de flex. E queremos que a direção flexível seja coluna. E vamos justificar o conteúdo para ser extremidade flexível para que tenhamos o título na parte inferior do post. Vamos agora ao título em si. Vamos fazer sobreposição a cada um. E podemos, por exemplo, primeiro dar-lhe um preenchimento de pixels Searcy, por exemplo. Então você pode ver aqui agora que os posts tem um preenchimento, podemos ir mais longe. E vamos dar um peso de fonte, por exemplo, de apenas 200. Ótimo. Então agora queremos lidar com esses posts. Nós não queremos que eles levem apenas um post para levar toda a largura do recipiente. Para fazer isso, vamos voltar ao índice aqui. E para o índice, esta div, Vamos dar-lhe um nome de classe de Maine, por exemplo. E podemos modificar isso apenas a partir do mundo. Não queremos criar um módulo inteiro para a página. Então podemos chegar aqui e fazer o principal. Vamos dar-lhe, por exemplo, uma exibição de grade e as colunas de modelo de grade para repetir duas vezes um FR. E vamos dar-lhe uma lacuna de grade, bem como de três ou quatro amperes. Vamos continuar com três rampas. Agora, se voltarmos aqui, vocês podem ver que teremos duas postagens para cada coluna. Outra coisa que queremos dar é um espaçamento. Então vamos dar-lhe uma pintura, por exemplo, de 50 pixels 0. Então isso vai dar a ele 50 pixels de cima e de baixo também. Ótimo. Então, para esta pose aqui queremos quando clicarmos nele, para nos levar para os posts em si. Por essa razão, vamos dar um link. Então vamos voltar para os postos. Como você pode ver aqui. Queremos que tudo isto aqui seja um elo. Então cartão tudo aqui. E vamos fazer uma ligação com um href. Isso vai nos levar a cortar postagens, por exemplo, lama, a lesma, assim. E dentro deste link, vamos fazer uma etiqueta. E dentro disso uma etiqueta, vamos fazer tudo assim. Fantástico. Então, agora, se
voltarmos, podemos ver que o link ainda não está definido. Então vamos importar link do próximo link barra. Vamos voltar aqui. Espere alguns segundos. E agora podemos ver que temos um link para nossos posts. De modo que quando clicamos
nele, ele nos leva a postar barra o primeiro post. Ainda não temos essa página. Então você pode ir ainda mais longe com o estilo em Harvard para ele e manipulá-lo como quisermos para nós. Na próxima sessão, vamos adicionar um emblema que vai criticar a categoria e indicar a categoria deste post.
11. Como adicionar um emblema de categoria: Ok, então agora queremos exibir uma vantagem que vai indicar a categoria do post. Vamos para o posto. E aqui vamos adicionar uma div. Por exemplo, com um nome de classe de emblema de ponto de estilo é fechado div. E dentro desta div aqui, vamos fazer, por exemplo, NH3. Nh3 vai simplesmente nos dizer as categorias. E uma vez que é um array, vamos pegar o primeiro. E das categorias ali, vamos pegar o nome, assim. Então vamos voltar aqui e não podemos ver por enquanto. Vamos ao Styles. E vamos para o poço pós-moderno mais de um ano. E vamos dar um nome de classe para o distintivo, como você pode ver aqui, crachá de ponto. Ok, a primeira coisa que queremos dar-lhe como uma posição de absolutos, como índice de três. Eu acho que agora vamos ver histórias como você pode ver aqui. Ótima. Então vamos dar-lhe uma largura, por exemplo, de 50 por cento. Do topo, deixe-o ser 20 pixel e da esquerda para ser mentes 20 pixels. E como você pode ver aqui, queremos dar-lhe uma cor de fundo da cor da terceira categoria. Por isso, vamos aqui. E vamos dar um estilo. E vamos dar-lhe uma cor
de fundo das categorias 0 cor de ponto, ponto CSS. Vamos voltar aqui. E como você pode ver, leva a mesma cor da categoria. Vamos voltar e continuar com a expedição silenciosa. Vamos dar, por exemplo, um preenchimento de pixels de pesquisa. Vamos ver como isso vai parecer. Isso é demais. Mas basta dar-lhe um preenchimento da parte superior e inferior de cinco pixels e da esquerda e da direita. Vamos dar, por exemplo, 20 pixels. Como você pode ver aqui. Ótima. Outra coisa que queremos é adicionar o efeito de falha. Para fazer isso, vamos descer aqui. E vamos fazer uma div com um nome de classe de psi dot, por exemplo. Efeitos. Ótima. Vamos para o posto aqui. E vamos fazer o efeito ClassName. Então, para esse efeito, ele terá uma largura de 20 pixels, uma altura de 20 pixels também. E da esquerda, queremos que seja 0. E de cima, vamos
dar 20 pixels. Ótima. Então agora vamos para esse efeito em si e dar-lhe uma posição de absoluta. Se lhe dermos uma cor de fundo agora, por exemplo, vermelho, podemos vê-lo como você pode ver aqui. Não queremos que esteja ali. Vamos dar de baixo. No fundo. Queremos que sejam mentes, 20 pixels para que tenhamos bem debaixo do solo é DIV aqui. Ótima. Queremos fazer um caminho de clipe. Então vamos ao Clippy. Como você pode ver, se formos para Bennett Philly.com cortar Clippy, nós podemos fazer uma ovelha. A ovelha que queremos, vai ser assim como você pode ver aqui. Então vamos copiar isto. Vamos voltar à nossa candidatura. E vamos trazer isto para cá. Fantástico. Então agora você pode ver aqui que nós temos este retângulo. Tudo o que precisamos fazer para que a cor de fundo seja inerte para que tenhamos a mesma cor de fundo. E outra coisa que queremos é a dada uma opacidade, por exemplo, de 0,6. Então agora podemos ver aqui que temos esse efeito agradável, como você pode ver. Ótima. Outra coisa que queremos adicionar também é vamos para o processo em si. E vamos dar um pairo. Assim, tanto pairar transformar em escala 1.1. Por exemplo. Vamos voltar aqui. Então, agora, quando vamos para cima dos postes, como você pode ver, nós temos este efeito agradável. A única coisa que precisamos para torná-lo ótimo é dar uma transição de três segundos, por exemplo, está fora. Então, agora, se tivermos a cremalheira aqui, podemos ver que é assim que vai parecer. Cinza fantástico. Então, o que queremos, Vamos adicionar outro post. Vamos criar, por exemplo, um novo item. Aqui. Vamos ver como fazer um bloco. Por exemplo, vamos adicionar um túnel existente ou vamos importar outro, por exemplo. E deixe-o correr, por exemplo, este. E vamos fazer o upload. Grande visão de como fazer um blog. Digamos como ganhar dinheiro. Por exemplo, online. São mais de 20 personagens, então vamos manter como ganhar dinheiro. Podemos ver que a bala é regenerada automaticamente. E aqui podemos fazer algum conteúdo. Como ganhar dinheiro. Vamos para as categorias aqui e vamos adicionar um acordo existente. Temos uma categoria chamada programação. Então, vamos escolher este e vamos adicionar a categoria selecionada. Vamos salvar e publicar. Isto é um rascunho. Queremos publicá-lo também. Então vamos verificar e clicar em Salvar e publicar. Ótima. Então, agora, se voltarmos ao nosso aplicativo, vamos atualizar. E vocês podem ver aqui que temos um para programação e outro para as histórias. Mas precisamos consertar algumas coisas. Este crachá de categoria aqui, a fonte parece horrível, assim como a escala. Não parece tão bom. Então, vamos voltar aqui. E para o lote, temos um CH3. Distintivo. Eu acertar isso. Borda. Logística faz com que o peso da fonte seja 100, por exemplo, grau. E queremos que a transformação de texto seja capitalizada, bem como você pode ver aqui. E para a escala, Vamos voltar ao pairar e fazer a escala 0, por exemplo, 1,05. É isso. Vamos voltar agora. E como você pode ver aqui agora parece muito, muito melhor. Podemos até dar a sobreposição e opacidade de um pouco mais escura, assim. Então agora, como você pode ver aqui, temos tudo configurado corretamente. Então vamos criar, vamos clicar por exemplo agora em um post, e como você pode ver aqui, não podemos vê-los. A próxima coisa que queremos fazer é começar a gerar uma única linha para uma única página. Para cada posto.
12. Fretando um post único: Então, antes de começar a buscar um único post, pêssego, eu estraguei um pouco com o CSS, assim por diante. Para os posts ao longo do ano. Eu dei-lhe um estilo, como você pode ver, seus vars ou com um px sólido eo fundo dessa borda, a cor da água. Serão as categorias, CSS
cor como você pode. E outra coisa que fiz foi dar ao crachá da categoria uma largura de 60% de 15%. E outra coisa é que em vez de dar uma div inteira aqui que chamamos de efeito, eu apaguei essa div e eu fui para o emblema aqui e eu dou um depois e apenas adicionar um conteúdo como esse e manter todo, todas as propriedades. E, a propósito, você é livre para fazer o que quiser com o seu blog post k. Então agora queremos buscar realmente um único gaba-se de quatro horas para cada post que temos em nossa aplicação. Então, agora, se clicarmos, por exemplo, neste primeiro post, você pode ver aqui que ele nos leva a cortar postagens em densas, exuberantes. Isso é sorte. Então vamos criar isso primeiro. Vamos voltar aqui e vamos para as páginas. Vamos fazer um novo arquivo. Vamos chamá-lo de postagens em den slash, slug dot js dentro de colchetes encaracolados. Ok, Aqui vamos fazer um SFC e vamos, por exemplo, chamá-lo de pose única. Assim como. Ótima. Então, agora dentro desta única postagem aqui ,
por enquanto, vamos fazer uma div. E dentro desta div, vamos dar um cada um. E digamos que esta única página de postagem, assim. E para este Devi, religiosos dar-lhe um nome de classe de recipiente para que tenhamos tudo recipiente de calçada. Então, agora, se voltarmos, vamos nos refrescar. Então agora, em vez deste 40, 40 é suposto ver que esta é uma única página de post. Ok. Mas mesmo se formos a qualquer animal de estimação, como se assemelham a ambos slush, qualquer coisa que fosse aparecer. Como você pode ver, você não vai ser visto nenhum 40 por 40, 44 agora. E o motivo? Porque você ainda não tem as almofadas da nossa aplicação. Então vamos voltar aqui e a primeira coisa que vamos começar com é o morcego, então exportações e função assíncrona, e isso vai ser chamado de estático. Isso é ótimo. Então, a primeira coisa, vamos fazer um custo aqui. E os dados mais uma vez. Então, nós queremos pegar na verdade agora apenas todas as lesmas. Isto é o que precisamos. Então vamos ao Graph CMS aqui. Vamos para a API Playground. Vamos apagar tudo. Então o que queremos é apenas dos postes, queremos pegar todas as balas. Então, se clicarmos aqui, como você pode ver aqui, nós temos apenas dois posts, um com o primeiro orgulho no segundo é como ganhar dinheiro. Então vamos copiar isso, voltar aqui. E para os dados, vamos esperar pelo gráfico CMS e vamos importá-lo. Importar. Acho que precisamos voltar mais uma vez e depois ir ao vivo aqui. E do gráfico CMS, vamos importar gráfico CMS assim,
então gráfico CMS solicitação ponto. E vamos colar os nossos pedidos aqui. Ótima. Então agora vamos pegar todas as balas, certo? E aqui não queremos os dados, mas queremos isso devido à estrutura, postagens
dos dados. Assim como. Ótima. Então o que queremos agora, vamos apenas fazer uma constante chamada apostas. E aqueles apostam, eles vão ser simplesmente os posts dot map. Então, o que mapeamos através desses postes? Teremos postagens assim. E o que queremos retornar, queremos retornar apenas um objeto que será chamado parêntesis e rampas aqui, que vai ser a lesma. Então, em vez de apenas fazer params
lesma, lesma, vai ser, por exemplo, repostar ponto slug como célula que, isso é demais. Então, vou pular aqui. Parece que sim. E vamos destruir a bala dos postes aqui. Ótima. Então agora podemos descer aqui e vamos voltar. A primeira coisa que queremos retornar em todos esses caminhos e outra coisa, que é cair para frente e para trás, cair para trás. Vamos ser bloqueadores de cores, assim. Ótima. Então agora temos todos os caminhos. O que precisamos fazer agora é apenas exportar outra função assíncrona. E isso vai ser chamado obter adereços estáticos. E precisamos chegar a esses caminhos por aqui. Então vamos formar os params. Vamos destruí-lo dos animais de estimação. Aqui temos os caminhos e podemos destruir estes parâmetros daqui. Então vamos mais uma vez para o câncer. E é chamado, Vamos trazer todos os dados assim. E vamos esperar mais uma vez para a solicitação de ponto CMS gráfico. Ok, então agora nós queremos solicitar o posto em si. Vamos voltar para aqui e começar tudo de novo. E dos postes, na verdade, queremos obter os posts com a lesma. Ok, nós queremos obter, por exemplo, quando vamos para barra post último, os primeiros posts, queremos obter os gabaritos que tem postagens de controvérsia antipática. Para fazer isso, precisamos criar, por exemplo, uma consulta. E vamos chamá-lo, por exemplo, de postagens individuais. E isso é realmente preciso uma lesma, por exemplo, em que vai ser uma corda assim. Ok, e dentro dele nós vamos conseguir, nós podemos realmente usar o Explorador. Podemos ir, por exemplo,
para escolher apenas não se orgulha, desculpe-me por um pai. E sabe ler. Sim, está bem. Então, nós queremos conseguir postagens na verdade. Onde a bala é igual a essa bala, assim. E quando conseguirmos isso, vamos apenas dar, temos o título. Nós também queremos ir. Por exemplo, criado em que é automaticamente fornecido de fato a partir da API. Não temos que adicioná-lo. Então, criado anúncio, por exemplo,, queremos obter também o conteúdo. É isso. E a partir do conteúdo, podemos escolher se queremos que seja HTML, marcar linha ou textos. Para mim, vou usar HTML, assim. Então vamos copiar tudo isso. Então agora, na verdade, se executarmos
isso, ele vai nos dar um erro porque slug realmente capaz deve ser definido. Então, se fizermos para consultar variáveis aqui e fazer, por exemplo, um slug, que é a variável aqui. E vamos copiar por enquanto este olhar. E vamos colocá-lo aqui. Vamos executar isso. E como você pode ver aqui, isso me dá o posto. Então vamos copiar isto. Volte aqui, e vamos colá-lo aqui. Precisamos fornecer essa variável de bloqueio, certo? Então é exatamente isso que vamos fazer. Vamos voltar aqui. Vamos copiar isto. E vamos fazer uma vírgula e colá-la aqui. Mas nós não queremos chegar apenas para os primeiros posts. Queremos que o projétil seja uma variável. Depende da lesma em si. Então vamos apagar tudo isso. E dos params ali, ali podemos chegar a gramas. Os pontos parecem tão fantásticos. Então, agora, quando conseguirmos
isso, isso será, se voltarmos aqui os dados, poderemos chegar a um posto, que
possamos destruir esses postos daqui. Ótima. Então agora aqui podemos devolver o post e
também podemos revalidar isso a cada dez segundos. Ótima. Então, agora, se nós apenas gostamos, por exemplo, logar isso. Vamos apenas registrar, vamos fazer login em suas postagens, assim. Vamos voltar aqui. Refresque. Vamos esperar que não vamos ser vistos nenhum erro. Aqui diz que as chaves adicionais foram devolvidas de bons adereços estáticos. Propriedade é destinado para o seu componente deve ser aninhado e plops, ok, vamos ver o que está errado aqui estamos. Então nós retornamos automaticamente isso. Só precisamos devolver adereços, desculpe-me por isso. E vamos colar isto aqui. Ótima. Agora vamos voltar aqui. Hotel não vai ser visto em erros. E como você pode ver aqui, nós não vamos ver nenhum erro. Vamos inspecionar isso. Vamos para o console, atualizar. E eu acho que nós não podemos console desconectado ainda. Mas se formos aqui, vamos apenas chegar ao posto a partir do próprio componente. Então vamos para os postos daqui. E, por exemplo, aqui neste, vamos apenas fazer um título de post dot como este. Vamos voltar aqui. E como você pode ver aqui, ele me dá o primeiro post, que significa que nós buscamos nossos dados com sucesso. Vamos voltar para a página inicial e aqui vamos como ganhar dinheiro. E como você pode ver aqui, me dá o título de como ganhar dinheiro. E se eu estou tentando ir para qualquer outro slug que não existe, isso é realmente ele vai dizer um erro porque nós não podemos chegar a qualquer slug ou quaisquer posts que ainda não existe. Então, vamos voltar aqui. E como você pode ver aqui, então agora nós buscamos nossos dados corretamente. No próximo eleitor realmente, nós vamos estar realmente fazendo, nós vamos estar fazendo uma única página para isso e dar-lhe o CSS também.
13. Como personalizar a página de post: Ok, então vamos começar a personalizar na única página de postagem. E a primeira coisa, vamos voltar para onde CMS, e vamos adicionar algum conteúdo. Então, para mim eu vou para os posts e mais fraco, Eu realmente vou para como fazer mensagens de dinheiro. E eu adiciono algum conteúdo aqui, como você pode ver. Ótima. E, em seguida, salvar e publicar e apenas publicou isso. Fantástico. Então, agora o que queremos fazer é voltar para a nossa candidatura aqui. E vamos, por exemplo, fazer uma div. E dentro desta div aqui, a primeira coisa que queremos é um, e esse será o título. E depois disso, vamos dar um exemplo e são três. E isso vai ser criado, criado em um chapéu criativo assim. E vamos fazer outra vida. E vamos dar-lhe uma propriedade chamada perigosamente definir HTML interno. Então é assim que vai ser, vamos receber as nossas mensagens ricas. E aqui isso vai ser HTML. E para o conteúdo, ele vai ser conteúdo me para isso e conteúdo dados de grau HTML. Então vamos começar a destruir todas essas doses orais realmente querem tão const. E vamos pegar o Tirol, Vamos ser criados em, e vamos obter o conteúdo também. Da costa. Como tão incrível. Então, vamos voltar agora para a nossa aplicação. Vamos, por exemplo, como
ganhar dinheiro aqui. E diz que o anúncio criado não está definido. Então vamos ver aqui. Nós cometemos um erro. Não está claro que com T maiúsculo, com T pequeno, como você pode ver aqui. Então agora temos o nosso título. Como podem ver, temos a data e temos aqui tudo o que queremos. Então vamos começar realmente a perder com o CSS disso. Vamos para Styles novo arquivo, e que será chamado de postagens individuais, por exemplo, módulo de
ponto, ponto CSS. Vamos copiar isto. E vamos voltar para a bala aqui. E vamos importar de arquivos cortar a taxa ESS única post module.js. A primeira coisa, vamos para este div. Vamos dar um nome de classe de ponto de estilo. Por exemplo, postagem única. Vamos copiar isto. E vamos voltar para o módulo de postagens individuais aqui, e vamos Controle V. E a primeira coisa que queremos dar-lhe como um preenchimento de 20 pixels e 0. Então isso vai lhe dar algum espaçamento. Vamos esperar alguns segundos. E eu acho que o problema do motivo aqui, vamos voltar a este style.css. Suponha que decidimos ClassName ou postagens únicas. Há algo errado aqui. Não sabemos porquê. E vamos começar, por exemplo, a este título aqui. E vamos dar-lhe um nome de classe do título de ponto estilo Tirole. E vamos levá-lo de volta para você. Vamos dar um título a isto. Por exemplo, uma cor de vermelho. Volte para a nossa aplicação e vamos ver se isso vai ser aplicado. Sim, é aplicado e advocacy, sabe, até o espaçamento é aplicado agora. Então, para o título, vamos dar-lhe uma cor, por exemplo, de laranja. Eu não sei. Laranja parece ser bom. E eu vou dar-lhe também um tamanho de fonte de três RAM. Quero torná-lo maior. Ótimo, fantástico. E não se esqueça da transformação de texto a ser maiúscula. Como assim. Vamos agora para a data. Vamos para aqui. Vamos dar um nome de classe de estilo, data ponto. E vamos nos certificar de que eles comem. E vamos dar primeiro o preenchimento, por exemplo, de 10 pixels do topo, 0 da direita e da parte inferior. Vamos dar 30 pixels, por exemplo, 0 da esquerda. Veja como vai parecer, como agora. E sim, como você pode ver sua neve, temos algum espaçamento e podemos até definir a cor para ser CCC. Tipo, eu nunca vou esquecer que o peso da fonte pode fazê-lo um pouco. Apenas 300, por exemplo, portão. Então agora aqui podemos ver que temos a data, vamos, vamos realmente manipular a data na próxima sessão. Então, por enquanto, podemos ficar apenas com isso aqui. E como você e nós temos aqui alguns links, mas não podemos vê-los. Porque na verdade nós fizemos, se você se lembra no CSS global aqui, nós fazemos que todas as tags a com uma cor de branco não há decoração de texto. Então agora isso é o que é bom sobre um CMS sem cabeça. Podemos personalizar tudo como quisermos. Então agora vamos personalizar nosso formatador e como vamos fazer isso. E vamos para a lesma aqui. E vamos, por exemplo, dar a isso um nome de classe de pontos, por exemplo, o formatador. Está bem. Vamos aqui e vamos fazer esse formatador. Formato assim. A primeira coisa que queremos é como você pode ver que temos, estamos enfrentando um problema com a imagem. A imagem passa por cima do recipiente. Então a primeira coisa que queremos é que a imagem do formatador tenha uma largura máxima de 100%. Vamos voltar aqui. E como você pode ver aqui, então agora temos a imagem alinhada também com o nosso conteúdo. Ótimo, dê-lhe realmente uma largura máxima também. Existe uma altura máxima? A altura máxima, por exemplo, de, vamos torná-lo 400 pixels. Vamos ver, é assim que vai parecer um 100 pixels,
isto é, torná-lo 600 pixels, por exemplo. E como você pode ver aqui, então agora isso parece muito melhor. Outra coisa que queremos, por exemplo, para o formatador é ter uma cor de fundo. Vamos fazer isso agora CCC. E aqui no fundo, vamos dar essa cor bonita. Então agora você pode ver que podemos distinguir entre o líder, os textos ricos no conteúdo, e o fundo de nossa aplicação. Outra coisa que queremos é isto. Vamos dar uma coisa ruim. Por exemplo, de 20 pixel. Veja como vai parecer agora. Dois pixels agora isso não é demais. Isto é uma habilidade. Por exemplo, 30 pixels e não para a imagem, desculpe-me. Para a matéria estranha. Como assim. Fantástico. E vamos apenas dar-lhe um raio de borda, por exemplo, de taxas de dez pixels. Agora podemos ver que isso vai ser tudo em que podemos começar a perder com o formatador. Então, por exemplo, para a matéria e o H1 aqui e tudo, não apenas o H1, todos os títulos. Então vamos fazer, por
exemplo, pois são dois, são três. E uma tarefa. Por exemplo, queremo-los. Vamos remover esta vírgula na última. E vamos dar a eles, por exemplo, eles sempre têm que adicionar uma margem inferior, por exemplo, de 20 pixels. Então agora podemos ver que podemos distinguir, como você pode ver aqui, todos os cabeçalhos, eles vão ter uma margem inferior de 20 pixels, como você pode ver aqui. Então agora vamos para os parágrafos, todos os parágrafos que temos dentro do nosso formatador. O P, por exemplo. E podemos dar-lhes uma margem, inferior apenas de 10 pixels. Então agora você pode ver que todos os parágrafos, e você vai ver agora todos os parágrafos, eles vão ter uma margem inferior parece adicionar talvez eu tenha escrito errado este formato que eu gosto assim. E você pode ver aqui que os parágrafos agora podemos ver que no riza, uma margem inferior para todos, de todos os formatadores, de todos os parágrafos. Então, por exemplo, vamos até encaminhar a imagem aqui para ter sempre uma margem, inferior também, por exemplo, 20 pixels. E como você pode ver aqui, então agora nós temos essa margem inferior. Bem, nós podemos realmente manipular os parágrafos aqui, por exemplo, para ter que manipular sua maneira de fonte para manipular a cor de nossos parágrafos. Você pode fazer um monte de coisas. Então, agora a última coisa que eu vou estar personalizando é, por exemplo, as tags a porque não podemos ver links. Então vamos à formatação, assim. Os links. E vamos começar as coisas contra a decoração do texto. Vamos fazer um subjacente, como você pode ver aqui. Então agora podemos ver todos os links do discurso. E outra coisa, podemos até definir suas cores. Então, por exemplo, a cor de todos esses. Vamos com CCC e depois escolher a cor de nossa escolha. Por exemplo, todos os links. Nós queremos que eles sejam como. Por exemplo, como você pode ver. Então agora podemos ver que todos os links dentro deste, eles estão mostrando em cores diferentes. Então esta é apenas a idéia e você pode até ir mais longe e começar a perder com todos os elementos que você vai ter dentro do nosso dentro do seu formato. Como, por exemplo, as listas desordenadas, as outras manchetes, os parágrafos, div, tags, tudo, tudo. No próximo capítulo,
na verdade, vamos estar trabalhando com data se ns para manipular esta data aqui para que possa ser um pouco legível.
14. Personalizando a data: Ok, então isso aqui não é 100% legível. Queremos torná-lo legível um pouco. Então é aí que vamos usar uma biblioteca chamada D a F e S. É uma biblioteca incrível a propósito, e pode ser usada em qualquer projeto e é uma biblioteca famosa e famosa. Então vamos voltar para o nosso controle de projeto G para chegar ao comando, Vamos adicionar outro terminal, e vamos fazer npm instalar data F e S, assim. Então vamos esperar até que termine. E anos de advocacy agora ele terminou de nosso package.json. E podemos ver aqui que temos encontro F e S. Ótimo. Então, o que queremos ir? Queremos fazer agora é ir para Pages e vamos para a laje dentro deste post. Vamos para aquela lesma. E onde está a data? Este é o nosso encontro. Então o que queremos fazer agora primeiro, apenas para ir e importar das datas F e S, queremos importar algo chamado formato, assim. Ótimo. E vamos a esta cada três aqui. E aqui temos nossa data criada que vamos deletar isso por enquanto. E vamos fazer aqui o formato assim. Como você pode ver, e aqui vamos estar fazendo um novo encontro. E dentro dele, nós vamos, nós vamos criar o criado em. E depois disso aqui podemos realmente definir o que queremos. Então vamos para Formatar, formatar aqui. E a primeira coisa com que podemos começar a trabalhar é o dia. Certo, então vamos ao dia. Queremos saber o nome do dia. E aqui como você pode ver, dia das semanas. E nós queremos esse E. Então vamos voltar aqui e fazer U0 v0 4 vezes o Controle S. Vamos ver o que temos agora. Refresque. E como podem ver aqui, temos sábado. Hoje é sábado. Ótimo. Outra coisa que queremos é o dia do ano. Então aqui não queremos que o dia do ano ganhou o dia do mês. Então podemos usar esse DiDi aqui. Depois uma vírgula. E queremos obter o D. E vamos ver agora qual é. Como você pode ver aqui, 11, nós queremos obter o mês. Então vamos sair com F e S. e vamos olhar para o mês e como queremos que eles sejam. Então, vamos adicionar quatro LLL. Vamos voltar à nossa candidatura. Vamos ver o que vamos conseguir. Então, como você pode ver aqui, sábado e viver em setembro, e nós queremos obter o ano também. Então vamos para o ano. O ano, eu acho que vai estar no topo por aqui. E podemos conseguir isto. Porquê, porquê, porquê? Sim, quatro vezes y, y, y, e isso vai nos dar o ano também. Controle S. Vamos voltar à nossa candidatura. E como você pode ver aqui, então agora temos a data que é sábado 11 setembro 2021. Então é assim que podemos trabalhar com a data F e S. Você pode conferir mais se você ir até a data FSIs.org barra e ir para o formato. E aqui você pode ver que você pode obter o número do dia, a demanda trimestral, a semana ISO do ano, e você pode mexer com a data como quiser.
15. Como criar a página de categoria: O problema que ainda estamos enfrentando e em nossa aplicação é que eles adicionam quando clicamos em uma das categorias aqui, por exemplo, para obter todos os posts que têm que pertencem à categoria, por exemplo, histórias ou programação, Temos um 40 por. Então vamos fazer isso. Vamos para as páginas aqui. E dentro dessas páginas, vamos fazer um novo arquivo e vamos chamá-lo de nome assim dentro de colchetes, SFC novamente. E isso será chamado, por exemplo, página de
categoria como assim. Então, dentro desta página de categoria por agora, novamente, pode apenas fazer uma div com um nome de classe de recipiente. E dentro dela, vamos fazer outra div com um nome de classe de Maine. E, por enquanto, só queremos um H1 que diga “Olá”. Ótima. Então agora o que podemos fazer é que podemos descer aqui e vamos primeiro pegar todos aqueles animais de estimação. Então exporte uma função assíncrona que é chamada obter apostas estáticas, como contagem de células aqui. E isso será todos os dados categóricos primeiro. E vamos esperar pelo gráfico CMS. Vamos importar esta instância CMS gráfico. Então importar de, eu acho que é chamado lib barra gráfico CMS, assim. E aqui podemos importar essa instância CMS gráfico. Vamos fazer você ler pedidos. Ótima. Assim, os pedidos aqui queremos solicitar todas as categorias. Então, como podemos fazer isso? Vamos voltar ao Graph CMS aqui. Vamos ao parque de diversões da API. Então podemos simplesmente ir para as categorias ao longo de um ano e solicitar todos os seus nomes, assim. Então, como você pode ver aqui, temos duas categorias até agora. Vamos copiar isto e colá-lo aqui. Ótima. Então o que mais podemos fazer é descer aqui e fazer os caminhos. E isso vai ser a partir dos dados. Podemos destruir as categorias. E então podemos ir para as categorias aqui, mapeadas através delas. Então, quando mapearmos, vamos encontrar uma categoria. E nós queremos retornar daqui um, na verdade um, um objeto que tem parâmetros. E para esses parâmetros, queremos obter o nome e o nome que podemos distrair da categoria aqui. Ótima. Então, já que temos tudo isso agora, podemos voltar sobre essas apostas. E o que mais? vez, queremos ter uma alternativa de bloqueio. Nós não usamos aqui a queda ou falso. Usamos fallback lock-in. Então ele funciona corretamente com a regeneração estática incremental. Muito melhor do que os lanços de recua. Vamos descer aqui e exportar uma função assíncrona mais uma vez. E isso vai ser chamado fica estática. Adereços. Aqui, dos params, dos pais iam destruir os params que estabelecemos. E nós podemos ir aqui e fazer uma const dados em que vamos esperar para a solicitação de ponto CMS gráfico. Então, queremos agora solicitar apenas o post seria a categoria mencionada. Então vamos apagar tudo aqui. Vamos para o Explorer, e vamos para as postagens. E queremos os posts onde as categorias, cada nome de categoria. Como você pode ver aqui. Queremos, por exemplo, se escrevermos aqui cara, Remington, queremos obter todos os posts que tem uma categoria chamada programação. Então vamos digitar aqui apenas o título, cabeça que e como você pode ver aqui, ele diz como ganhar dinheiro. Se mudarmos isso por, por exemplo, sauditas. Você pode ver aqui o primeiro post. Funciona muito bem. Então o que precisamos aqui é apenas para definir um, Digamos que o principal aqui seja uma string. E podemos usá-lo aqui. Ótima. Então o que queremos não é apenas o título, queremos a bala também. Queremos pegar a fontanela. Queremos obter as categorias também. E a partir das categorias que queremos obter o nome, a cor, e da cor que queremos o CSS, a
partir da miniatura aqui, queremos a URL também nesse conjunto. Então vamos agora copiar tudo isso. E vamos colá-lo aqui. Precisamos adicionar também esse nome. Será realmente a partir do nome do ponto params, assim. Fantástico. Então agora podemos ir aqui e voltar, talvez. E esses avisos que queremos retornar estão aqui, não apenas os dados. Queremos devolver os postos. Podemos distraí-los do ano, devolver todos os posts assim. E vamos definir a revalidação para 10. Ótima. Vamos voltar aqui. Agora podemos chegar aos postos. E aqui, no principal, podemos ir a esses posts, mapeados através deles. E quando os
mapeamos, vamos encontrar o posto. E podemos obter os componentes dos postos assim. Vamos importar os componentes de postagem
de componentes . E então podemos chegar à cabine aqui. E vamos primeiro dar-lhe uma chave. E a chave pode ser ponto de impulso. Ambas as filhas podem trabalhar com lesma aqui porque é única. E o que mais queremos fazer é apenas dar-lhe vangloriações. Vangloriar-se, assim, vamos salvar isso. Vamos voltar à nossa candidatura. Vamos para a página inicial. Vamos mais uma vez à programação. Desculpe-me por isso. Vamos para a programação. E acho que ainda estamos enfrentando um problema aqui. Vamos esperar. Não, não estamos enfrentando nenhum problema. Então, como você pode ver aqui agora quando vamos para a programação, ele me dá os posts que tem a programação categoria. Se eu for a histórias aqui, você pode ver aqui ele me dá os posts com as tags de história. É clicar nele. E esses medidores tecnológicos, desculpe, é que ainda não temos nenhum conteúdo para isso. Podemos ir agora para a programação. Clique neste ano. E podemos ir ao posto de como ganhar dinheiro. Então é assim que funciona.
16. Ordene posts por data: Ok, Então eu acabei de adicionar realmente outro post e é chamado,
por exemplo, o que é GraphQL? E você pode ver aqui, lá estamos enfrentando um problema. Nós não classificamos essas postagens. Y dy dt. Estes são os últimos livros que eu acabei de adicionar em, em que não são os primeiros posts. Então, como podemos fazer isso? Podemos simplesmente fazer isso se formos agora, por exemplo, para o índice que é a página inicial aqui nos posts, podemos simplesmente fazer reverso. Ok, então é um array, podemos revertê-lo. E se acertarmos o Save aqui, vamos voltar à nossa candidatura. E como você pode ver aqui agora temos o post ordenado por data se formos para Programa e, por exemplo, aqui você pode ver que ainda
estamos, não temos esse tipo. Então o que podemos fazer é ir para o nome aqui, ir para esses posts e revertê-los também. O Mike. Então, desculpe-me por isso. Reverta assim, vamos voltar aqui. Aperte o botão Atualizar. E como você pode ver aqui, então agora temos todo o nosso tópico ordenado por data.
17. Como adicionar títulos às páginas: Ok, então agora vamos tentar lidar com algum SEO usando Next JS. A primeira coisa que queremos fazer é que talvez você tenha mencionado que para todas as páginas dentro da nossa aplicação, não
há título. Temos apenas este localhost e isso não é bom para o SEO e nem mesmo para os usuários que vão visitar nosso site. Então o que vamos fazer agora é trabalhar com a etiqueta de cabeça fora do próximo JS. Vamos às páginas. E, por exemplo, vamos começar primeiro com a página inicial. Vamos importar a cabeça da próxima barra. E, a propósito, podemos usar a cabeça dentro deste recipiente e isso não vai afetar, isso não vai afetar o que podemos ver agora. Não vai estar ligado, na verdade visto na página. Mas só para sentir que estamos usando apenas uma página HTML normal, eu vou colocar tudo isso dentro. Estou dentro de algumas etiquetas vazias. Então o que eu vou fazer agora é cortar para todo este ano, abrir alguns suportes vazios assim, e fechá-los aqui. E vamos descer aqui. Então isso vai ser como o corpo do nosso site, como você pode ver aqui. E agora vou colocar a cabeça aqui. Assim. Então, como você pode ver aqui, então agora temos a cabeça e que pode ser neste realmente aqui pode ser considerado como o corpo da nossa página HTML. Então agora dentro da cabeça aqui, por exemplo, vamos com um título. E o quiral, por exemplo, vai ser compartilhá-lo. E por exemplo, assim e vamos dizer bem-vindos para compartilhá-lo. E isso é realmente crucial para, para aqueles eram multidões lá fora e motores de
busca como Google e Yahoo e garota de documentos, é
assim que eles podem reconhecer seu site e isso é o que vai mostrar, o que vai ser mostrado de fato nos resultados da pesquisa. Então agora com isso, se apertarmos Salvar, Vamos voltar para a nossa aplicação. Dissemos para refrescar. E como você pode ver aqui, podemos ver que agora o título mudou. E, por exemplo, agora vamos passar para o espaçoso. E para essas páginas, por exemplo, não queremos ver isso também. Então vamos voltar para eles. Vamos importar a cabeça também aqui. Acho que entendeu a ideia agora. Então vamos importar a cabeça da próxima cabeça de barra, assim. E vamos aqui por este tempo, só para ilustrar como sósia podemos colocar a cabeça aqui sem usar esses colchetes vazios. E dentro de sua cabeça, por exemplo, vamos dar um título. E para este ano, será por exemplo, Sarit. E então aqui nós queremos obter realmente o nome do, o depreciado, ok, como podemos obter isso, como você pode ver aqui nós temos aqui posts e aqui nós podemos chegar aos postos. Então, o que podemos fazer aqui é assim que eu acho que talvez assim se digitarmos aqui se orgulha. E, em seguida, a partir dos posts, queremos obter apenas o primeiro. E para os primeiros posts, podemos ir aqui e chegar às categorias, os zeros. Bem, e podemos chegar aqui com o nome. Vamos ver se acertamos. Então, vamos refrescar. E como você pode ver, nós agora compartilhamos suas histórias. Então, não há necessidade de realmente esses sinais de dólar de, desculpe-me, nós podemos simplesmente fazer alguns suportes e estamos prontos para ir. Então, como você pode ver aqui. Então agora temos histórias compartilhadas. Se formos para a programação, podemos ver compartilhamento de programação de TI. E se formos, por exemplo, para JavaScript, você pode ir compartilhá-lo JavaScript. E, a propósito, para o JavaScript aqui, eu manipulei um pouco as categorias aqui, como já mencionamos antes. E eu só para a parte posterior diz, o que é GraphQL? Eu mudei para, por exemplo, essa categoria chamada JavaScript. E eu estraguei um pouco com as cores também. Então, como você pode ver aqui, podemos chegar ao título. Além disso, podemos até trabalhar com algumas Meta tags. Assim. Por exemplo, podemos adicionar um meta, por exemplo, com o nome da descrição, por exemplo, descrição assim. E aqui podemos dar-lhe o conteúdo também. Isto é crucial para o ensaio. Ok? Então o conteúdo, por exemplo, onde a programação, por exemplo, tópicos compartilhados todos os dias, por exemplo, isso é realmente crucial e este é, este é um fator importante quando se trata de classificar primeiro em motores de busca. Então podemos dar, podemos ir ainda mais longe com os posts também. E aqui podemos dizer que para as postagens aqui, vamos importar a cabeça também. Próxima cabeça de corte, e podemos usá-los aqui. Então vamos usar o chapéu aqui. E então podemos usar o título, desculpe-me, para este quiral assim. E aqui, por exemplo, queremos compartilhá-lo também. Três palavras. Então compartilhá-lo e depois queremos o título de nossas costas. Então podemos simplesmente obter isso vendo aqui título. Então agora eu acho que se nós formos a qualquer postagem dentro de nosso braço, dentro de nossa aplicação, como por exemplo, o que é GraphQL aqui, você pode ver aqui que ele diz compartilhá-lo em. Ele diz, o que é GraphQL. Então você pode dar uma olhada na verdade, você pode procurar na web
as Meta tags e como você pode lidar com as palavras-chave e como você pode melhorar o SEO fora de seu site apenas usando HTML. E isso é realmente uma coisa boa que Next JS fornece para nós. Então, será bom usá-lo também.
18. Adicione um favicon personalizado: Ok, então agora queremos adicionar o ícone ao nosso projeto. Nós podemos basicamente ir para o nosso projeto aqui, e vamos fazer uma nova pasta. Vamos chamar isso de público. Assim. Dentro desta pasta pública, queremos adicionar o nosso ícone fab. Então vamos voltar aqui. Como você pode ver aqui, eu acabei de baixar um ícone básico fav. Tem S e H , então quero que nós queiramos entrar na nossa pasta aqui. E como você pode ver aqui, podemos ver a pasta pública que acabamos de criar. Por isso, se entrarmos, podemos arrastar agora a nossa despedida, como podem ver aqui. Portanto, certifique-se de parar o servidor. Então agora vamos para o terminal e vamos fazer a corrida NPM. Gostas de desenvolvimento são grandes para que você possa ver um compilado com sucesso. Então vamos ao nosso site. E agora você pode ver aqui que temos nosso ícone favorito. Se você quiser gerar ícones fav, tudo que você precisa fazer apenas para ir a um site chamado gerador de ícones fav. Então você pode converter suas imagens. Como por exemplo, se nós temos, se você tem uma imagem PNG ou JPEG ou mesmo não Ico imagem, você pode simplesmente escolhê-lo a partir daqui e você pode criar seu ícone de bandeira para mim para isso ali, Eu apenas procurar aqui para S e H. E como você pode ver aqui, ele me dá este ícone fav e eu não carregá-lo. E isso é o que acabamos de usar em nosso projeto.
Atlas C., Professional Web developer
