Crie um BLOG rápido e totalmente personalizável com Hugo e Bootstrap 5!

1. Apresentação: Oi, estou quando estou mostrando, sou desenvolvedor e professor da web. Bem-vindo ao meu curso sobre como construir um blog com Hugo. Este curso. Então, as pessoas que gostariam de aprender sobre todas as funções integradas para que possam construir seu próprio tema de blog e manter seu blog. O projeto do curso inclui a criação dos modelos HTML e bootstrap necessários com o Hugo. Criando widgets para navegação de blog, manipulação de imagens para postagens de blog, exibindo dados de blog na lista e modelos de página única. E, por fim, personalizar os modelos de blog para suas próprias necessidades. Salvando o curso. 2. Introdução ao Projeto: Para começar com o projeto, você deve ter as versões mais leves do software a seguir instaladas. Código do Visual Studio. Node.js, que inclui NPM, get CLI e GitHub Desktop. Todos esses pacotes de software estão disponíveis no Windows, Linux e Mac, exceto no GitHub Desktop, que não está disponível no Linux, embora seja altamente recomendado se você estiver usando o Windows ou o Mac. Para copiar os arquivos necessários para iniciar o curso e o projeto na página de recursos onde você pode baixar um arquivo zip. Você também pode acessá-lo no repositório do GitHub na ramificação principal. Se você baixou os arquivos para uma lição específica, vá para o repositório do GitHub e altere a ramificação necessária. Você pode baixar um arquivo zip e eu mostrarei como fazer isso em um momento. Se você modificar qualquer um dos meus arquivos e quiser carregar seu próprio trabalho para obter hub, você deve selecionar o pato, dobrado para remover minhas boas informações. Então você pode vincular seu próprio trabalho, fazer sua própria conta. Você precisará executar o comando para gerar sua própria pasta de documentos antes de vinculá-la à sua própria conta. Só quero transformar o repositório do GitHub. Você pode escolher o branch master é começar. E então coloquei todas as lições sob seu próprio ramo. Não existe a opção. Essa não é a opção com o botão verde para baixar um arquivo zip. E isso baixará todos os arquivos para você. Depois de baixar os arquivos do GitHub ou do Skillshare, você precisará baixar as dependências e, em seguida, esses pacotes de software necessários para o curso. Você pode fazer isso com o comando npm install. Depois de abrir a pasta no Visual Studio Code, tenho um novo terminal e, em seguida, digite npm install. Isso instalará todos os pacotes de software necessários para o curso. Se você entrar na pasta de módulos de nó, verá todos os pacotes de software aqui. E a maneira como funciona é que temos um arquivo chamado package.json. Você vê que temos um monte de scripts que são executados daqui de baixo e eu vou mostrá-los em um minuto. Mas os pacotes reais instalados na seção de dependência. E já configurei tudo isso para você e passei por eles em todos os meus cursos anteriores e deixei links para eles na seção de recursos. Se você quiser saber mais sobre todos esses pacotes, o que estamos realmente preocupados com ele está em outras dependências. Você pode controlar a versão do Hugo que é instalada e o S aqui é atualizado. Você pode atualizar o número da versão. Então, se você executar o npm install novamente, ele instalará uma versão mais recente do Hugo para você. De volta aos scripts, basta ampliar esta seção aqui. A dor dos scripts NPM é incluída por padrão nas versões mais recentes do Visual Studio Code. Você usará muito o JavaScript. O que isso faz é que ele executa um servidor de recarga ao vivo para você. A visualização do Dave é para carregar páginas que têm um estado publicado para o futuro ou definidas como rascunho. Building coloca todos os arquivos do site na pasta pública e na verdade não executa um servidor de desenvolvimento. Você pode carregar esses arquivos com FTP. O disco é como div, exceto que também coloca os arquivos em público enquanto eles são, na verdade, pouco servidor de carga de biblioteca. Assim, você pode realmente inspecionar os arquivos ao mesmo tempo. Eu queria apenas visualizar funciona exatamente da mesma forma que a visualização do Dave e gravada na redução de disco, onde é exatamente como a construção tem um servidor de recarga ao vivo. Incluí verificações MPM. Você pode atualizar as dependências do NPM facilmente graficamente. E a versão Hugo mostra a versão do Hugo que é instalada pelo npm. Instale você não executa isso. Isso é executado por padrão quando você executa o npm install. Depois de todas as dependências terem sido instaladas, postagens e a loja instalarão quem for para você. 3. Layout de Blog Responsivo: Então, se você olhar dentro da pasta Layouts, notará que não há index.html e provavelmente está se perguntando por que isso está faltando. A razão é que se você não fornecer um index.html na pasta Layouts, o list.html na pasta padrão será usado em seu lugar. A razão pela qual estamos fazendo isso, e isso é porque, para nossa lista de todos os diferentes posts do blog, não adianta definir esse modelo duas vezes. Poderíamos defini-lo no index.html. Também poderíamos defini-lo em list.html, e isso envolveria duplicar. Então, o que vamos fazer é adicionar um cartão extra ao list.html mais tarde para que ele seja exibido corretamente na página inicial. Vamos executar o script de desenvolvimento abaixo nos scripts dele. E então vamos dar uma olhada no navegador. Você pode realmente controlar. Clique no link que você recebeu fornece. Uma vez que o serviço ao vivo seja executado. Em nossa página inicial, temos uma lista de todas as páginas do site que não é muito útil. Mas mais tarde vamos olhar para contratar isso. Se você for para postagens de barra. Vamos listar as postagens chegando e vamos personalizar o código mais tarde para que apenas as postagens sejam exibidas na página inicial. Por enquanto, estamos preocupados com a criação de um layout responsivo. Então, vamos ter um painel no lado direito, ou você pode colocar o lado esquerdo para você com links para diferentes partes do site e postagens de blog diferentes. E a razão pela qual estou mostrando tudo do zero para que você possa personalizá-lo da maneira que você gosta. Então procure o basal para o HTML. E você notará que temos nossa seção principal, e temos nosso cabeçalho de bloco de conteúdo principal e nosso rodapé acima e abaixo. O que estamos preocupados agora é configurar o bloco principal, mas também uma coluna à direita. Então, o que faremos é configurar um recipiente de fluido. fluido do recipiente fará uma linha. E você verá que as abreviações estão chegando e que estão incluídas e habilitadas por padrão no Visual Studio Code. Então, faremos uma coluna. O que faremos agora é tentar col, dash, dash nine e você pode personalizar essas coisas. E no Bootstrap tem um total de 12 colunas. Então isso nos deixa com chamada que m d dash. Três. O que isso significa é mais quente no ponto de interrupção médio ou superior. Vamos ter nove unidades ou coluna com nove unidades e abaixo no ponto de interrupção mediano ou água hidrelétrica, você poderia dizer, vamos ter três unidades. Se você estiver abaixo do meio, ele só entrará em colapso e você terá colunas de largura total e adicionarão alguma margem na parte inferior desses dois. Traço três, usei alt e cliquei por essas linhas para poder conversar com as duas. E então teremos nossa classe principal. Cole nossa tag semântica principal lá. Vou me livrar do fundo da margem porque já incluí isso. Por enquanto. Vamos apenas colocar algum texto aqui. Então vamos escrever Lorem e depois aparece e enviando mensagens de texto para nós automaticamente. E uma última coisa que faremos é adicionar alguma cor a ela. Então, faremos bg secundário. E então aqui faremos informações BD dash, por exemplo. Vamos salvar isso e vou dar uma olhada no navegador. Então, adicionar a cor ao plano de fundo tornou a divisão entre as duas colunas bastante aparente. Vamos dar uma olhada no que acontece quando reduzimos o tamanho da tela para baixo. Então você pode ver que ele foi colapsado em uma coluna. Mas quando o trazemos acima do MD, acabamos com as duas colunas. Assim, podemos ajustar isso com nosso código. Como você pode ver, você é pontos de interrupção MD, Se você realmente quisesse, você poderia mudar isso para PME ficará bem. Você não terá espaço. E algo a ter em mente é quando você o coloca abaixo do MD, que você estará usando toda a largura da tela para o menu do seu blog. A última coisa que faremos é remover as cores de fundo para que estejamos prontos para ir. Verei na próxima lição. 4. Modelo de lista de blogs: Agora estamos procurando criar nosso modelo de lista para que ele possa exibir uma lista de todas as nossas postagens. O primeiro problema que temos está aqui. Estamos variando em todas as páginas da seção 94 específica na página inicial que vai encontrar todas as páginas. O que faremos é porque estamos trabalhando na paginação também. Criaremos uma variável chamada pedômetro. E, por enquanto, faremos disso uma corda vazia. E então vamos colocar o condicional se ponto for oi, eu sou. E então vamos colocar um outro. E então, no que faremos pelo outro. Este é o mais fácil. Você pode tornar a paginação igual ao pedômetro de pontos. E então temos que colocar essa variável, SG&A, que o intervalo. E o que faremos por você, onde na página inicial será escuro, paginado. Então, entre parênteses, onde o site pontilha páginas regulares. O tipo será postagens e cartazes em letras minúsculas porque isso é algo que definimos colocando todo o conteúdo no portador da postagem. Considerando que o tipo não é variável Hugo incorporada. Então vamos dar uma olhada no que temos, nosso conteúdo. Nosso conteúdo. Eu ainda tenho o alcance e não queremos exibir o título na página inicial, então vamos tirar isso e vamos colocá-lo no else nos livraremos desse espaço e então vamos verificar como a homepage está parecendo. Para contar com a página inicial. Estamos apenas exibindo postagem agora, o que é ótimo. Se formos a postagens de barra, você notará que os títulos surgem, mas temos exatamente a mesma lista lá. Em seguida, olhe para a nossa paginação e só queremos que isso seja exibido se houver postagem suficiente para realmente garantir que a paginação esteja lá. Então, faremos é usar uma condicional se eles atribuirem páginas paginadas. E então eu vou ter o que são antagonistas? Portanto, se a paginação não estiver realmente ocorrendo porque todas as postagens do blog, então não teremos nosso menu de paginação nítido na parte inferior da página. Vamos agora dar uma olhada no artigo e como podemos personalizar isso um pouco. Então comece colocando em uma aula para o artigo. E vamos chamá-lo de resumo de postagens. Dessa forma, você pode segmentar com CSS. E vamos colocar alguma margem na parte inferior dela. E o traço três entrará e colocaremos um design de coluna. Então vamos começar com uma linha e depois colocaremos um col, traço, traço cinco. E sempre podemos personalizar isso. E a sobra será um col dash, traço sete. E colocaremos todo o conteúdo atual na segunda coluna. E então vamos trabalhar em como exibir a imagem da postagem. Se ele existir. Começaremos atribuindo a variável de contextos de postagem e usaremos isso para obter o ImageResource. Certifique-se de colocar um traço lá e, portanto, ele não gera nenhum espaço porque é apenas uma variável. Em seguida, procurará uma imagem com imagens de ponto params ponto. Na marcação para isso. Em seguida, verificaremos se o índice está disponível. Assim, podemos fazer se ponto, ponto for fatia e colocar o ponto depois. Colocando uma tag final, verificando se é, se foi fornecida uma fatia para as imagens do parâmetro, se há um erro de digitação que causará um erro no seu site. Então, vamos verificar se é, na verdade, uma matriz. E então faremos com o índice 0. Apenas usando a largura para garantir que realmente queremos escolher o primeiro item nos parâmetros, a fatia do parâmetro images. Estamos tentando obter a primeira imagem usando a largura, caso isso falhe. E vamos colocar uma etiqueta final lá. Então aqui está a parte complicada. Então, criaremos uma imagem variável. Haverá cifrão, post. Recursos, obtenha correspondência. Em seguida, passaremos nos contextos de pontos. Estamos olhando para o primeiro item na matriz, e também usaremos um com isso. Acho que isso falha. Nada acontecerá. Então, vou colocar uma marcação N antes colocar nossa imagem e veremos a sinterização subindo caso a imagem não seja a largura total da coluna. Então, faremos o fluxo d dash para correção de exibição e, em seguida, podemos usar o centro de conteúdo justificar. Bom. Se a imagem for maior do que larga, vamos colocar a marcação da imagem agora. Então, se você digitar o IMG e ele surgir e colocar uma imagem tirada para você, para a fonte, vamos colocar alguns aparelhos encaracolados e será cifrão, imagem. Todos os permalink ferroviários com R maiúsculo e maiúsculo P, você pode fechar as chaves encaracoladas, em seguida, colocar em largura, e isso ajuda com o refluxo. Você pode colocar alguns aparelhos encaracolados, escuros com um W. maiúsculo Fechando chaves encaracoladas e colocar em altura. E ficará escuro a altura. Capital H. Em seguida, colocando um alt e um título, ele serve, podemos usar várias linhas. Então, para alt, farei isso em um segundo. Coloque um título. E podemos simplesmente colocar na página de cifrão, título do post doc, T maiúsculo porque é uma variável incorporada. Então, para todos os títulos, o que o usuário real verá na tela se eu colocar o mouse sobre ele, alt para a tecnologia SHS. Então, o que faremos é imprimir F e colocaremos nosso modelo. O modelo será que você precisa postar e, em seguida, por cento S para uma string. E a string será o título da postagem. Você o cola depois do modelo para impressão f. Então precisamos colocar uma aula na aula. Faremos o fluxo de traço IMG para começar. E então criaremos nossa própria classe. Então, temos o resumo do nosso pai de postagens. Então, em resumo, usaremos o padrão BIM de ganhar uma imagem de sublinhado e sublinhado. O raio é sublinhado duplo é porque você vai executar uma pontuação e o pai real, isso seria bom usar sublinhado duplo e hífens para diferenciar entre o pai e o modificador real. Isso é BM, então recuará tudo na tag multilinha. Então vou salvar isso e vamos dar uma olhada no CSS. Se você entrar na pasta Ativos e der uma olhada no main.css. Agora eu tenho um main.css configurado para você. E temos um link para a parte inferior do nosso CSS personalizado. Então, para começar, dark post dash, resumo abrirá nossas chaves e, em seguida, usamos o sublinhado final, a abertura da imagem de sublinhado perto para nos calibrar o que acontecerá quando isso for compilado, ele acabará sendo um resumo do traço do post escuro. Então, abaixo, terá sublinhado resumo da dívida pós-escuro, imagem de sublinhado. Ele colocará os dois juntos por causa da enzima. Portanto, é muito mais fácil usar o SPSS, podemos aninhá-lo. Portanto, a primeira regra tem que adicionar. Vamos tentar max, dash, altura, digamos, por exemplo, dez aro. Em seguida, faremos o ajuste do objeto. E nós vamos conter. Digamos que a imagem não acabe sendo muito alta, caso seja maior do que larga, o que essas imagens ou não queremos que ela seja muito para baixo. Essas são coisas que você não pode fazer com o Bootstrap e é isso que estamos usando nosso próprio CSS. Isso parece muito bom. Se clicarmos com o botão direito do mouse na imagem e inspecionarmos, você verá que a classe está chegando lá, IMG fluido e nossa classe personalizada , largura e altura chegando, o que é ótimo para minimizar o refluxo, o navegador pode observar a proporção dele. Temos nossa imagem de texto alternativo para postagens em nome da postagem. E temos nosso título, que é apenas o título da postagem. E você notará que a imagem foi centralizada. Se for mais estreito que a própria coluna, está trazendo-a mais ampla. E você verá como a imagem em si está sendo centralizada. Até conseguimos nosso título e nosso resumo. Podemos olhar para remover o sublinhado desse título para que fique um pouco mais limpo. E vou te mostrar como a paginação desaparece também. Se exibirmos mais postagens na primeira página. Vamos voltar para a página inicial e você verá que eu não tenho o nosso título. Vamos adicionar ao acertar a tag a. Vamos colocar em uma aula. E vamos fazer textos, traço, decoração, traço, nenhum. E então vamos salvar isso. E abri o Bravo que está parecendo muito mais limpo e então vamos dar uma olhada para garantir que a paginação esteja funcionando. Entraremos no arquivo de configuração. Observe que coloquei um comentário lá para você, controle o número de páginas é spinalis pages. Então, vamos mudar isso para 50 por enquanto. Em seguida, temos todas as nossas postagens sendo exibidas e não há paginação na parte inferior. Vamos mudar isso de volta para cinco. E então entraremos em nosso conteúdo e nossas postagens. Vamos para este e removeremos a imagem. Parece um pouco estranho ter o espaço lá quando ele é imutável. Tudo o que estamos fazendo é estarmos olhando para reverter as imagens das postagens à direita, apenas na visualização da área de trabalho, mas na visualização móvel ainda queremos que a imagem apareça acima da postagem. Olá. Faremos isso para nossa coluna de sete largura, onde todo o texto está, usaremos uma classe que é traço de ordem, traço primeiro. O que isso faz para o MD, é médio ou maior. Isso tornará essa coluna a primeira a ser exibida. Vamos dar uma olhada nisso. Agora é um pouco mais natural quando você tem a imagem que me vemos. Você pode configurar suas imagens para que ela exiba uma imagem de espaço reservado. Se você não tiver uma imagem fornecida. Acho que o que estamos fazendo, isso é muito mais limpo. Provavelmente se perguntando como você pode controlar o comprimento dos resumos exibidos? Deixe-me fazer isso. Vou colocar um comentário sobre a duração do resumo. São duas frases, mas também arredondou as frases. Basta dizer que você quer um pouco mais que você poderia colocar em dez, por exemplo, dê uma olhada nisso. Você pode notar que alguns são um pouco mais longos, mas ele tenta e correu para frases. Portanto, é um pouco complicado tentar defini-lo exatamente como você gosta com ele. É uma coisa um pouco mais ou menos. Só vou mudar a minha de volta. E te vejo na próxima lição. 5. Lista de dados de modelo: Vamos dar uma olhada na adição de alguns dados ao modelo de lista. Então, estamos tentando fazer é apenas para o modelo de lista, vamos adicionar a data os artigos publicados na parte inferior do artigo no modelo de lista. E vamos conseguir isso a partir da data publicada. Não estamos analisando a data em o artigo foi revisado, embora você possa personalizá-lo como desejar. Resumo do modelo List.html. Vamos colocar alguns aparelhos encaracolados. E usamos com data de publicação de pontos. Vamos colocar intacto. E então vamos colocar uma div. E queremos forçar a data publicada para a parte inferior do resumo e também para a direita. Então, vamos fazer dot S dash auto e isso é para a margem no início. E ordem de traço vazia escura e essa é a margem acima. E para que isso funcione em nossa coluna, temos que usar a coluna flex, display flex e aflige display flex e aflige para que tudo seja exibido para baixo. Então o que faremos é por que a data, e farei isso é que já temos a data publicada como o contexto atual. Então, usamos o formato de ponto. Em seguida, temos que usar a string de formato Go Time. E a forma como funciona, se você quiser exibir o dia, será O2 e o mês será R1, e o e será 20106. Se você quiser exibir seu mês primeiro, você teria que colocar o R1 no início. Você tem que usar esses números. Então, funciona. Então, vamos salvar isso e dar uma olhada no navegador. Temos nossas datas sendo puxadas lá na parte inferior de cada poste e elas estão sendo forçadas para o fundo. Se clicarmos com o botão direito do mouse e inspecionarmos, você notará que temos a força para baixo e forçamos para a direita. Veja exatamente como eu quero. Esse é um exemplo melhor. Eles conseguiram a margem para a esquerda e a margem acima, então ela a força para o canto inferior direito. Vamos dar uma olhada agora em como podemos reutilizar a variável. Então, também vamos procurar colocar essa data por dinheiro em nosso post real para você em um momento. Então, entraremos em nosso arquivo de configuração. E no fundo, vamos colocar os pais. E, em seguida, criaremos um novo formato de data de parâmetro. Podemos colar nesse formato que acabamos de usar. Copie isso, cole-o lá. E então faremos é que possamos acessá-lo com pontos de sites, formato de data de ponto. Você provavelmente está se perguntando por que eu usei site com minúsculas S e não ponto com os capitalistas. E isso porque estamos dentro uma instrução width e com reatribui o contexto e a maneira mais fácil exibir variáveis do site se você não tiver acesso ao uso do site corn Texas minúsculas S para site. Vejamos agora colocar uma tag de tempo, hora e digitá-la. E então faremos data e hora. Vou exibir a hora em um formato que o navegador entende como se fosse realmente claro para o navegador. Então, o que faremos é usar o formato de ponto. E o formato será o primeiro traço de 2006, o mês, que será i1, e o dia será O2. E dessa forma, os navegadores esclarecem sobre o tempo que estamos falando. que o navegador saiba como interagir com isso e possivelmente lê-lo para o usuário. Se necessário estar em um local específico. Em seguida, arrastaremos a tag de tempo. Olá. Vamos salvar isso e dar uma olhada no navegador. Então clique com o botão direito e inspecione Data hora. Eu consegui um formato, ano, mês, dia. Esse é um formato que o navegador entende. E olha, depende do país onde seu público. Eu configurei o meu para o céu e o formato. Temos o dia primeiro e o mês e o ano. Você pode formatar como quiser com o arquivo de configuração. Só indo lá e você pode reorganizar as coisas. Você pode mudar o traço dois traço ou hífen o que quiser. Vamos dar uma olhada agora em colocar um ícone no início do. Então, o que faremos, criaremos um primeiro parcial para criá-lo, e vamos chamá-lo de SV, g, dash, icon, HTML. A primeira coisa que faremos é criar uma variável chamada SVG. E haverá recursos dot n dot, um pouco de contexto para fornecer. E então vamos exibir o conteúdo SVG. E isso vai ser seguro o HTML para aquecer não escapa. Salvaremos isso para cada pesquisa na pasta de ativos. Já forneci alguns ícones para você. Então eu acho que o uso normal é o calendário até a data do traço. Então, faremos na lista. Ele é um ícone de prato SVG parcial. Em seguida, forneceremos a ele. Nós rolamos de volta para cima. Já sabe sobre a pasta de ativos. Então, vamos usar barra de ícones, calendário de barra de inicialização para Daesh, ponto de data Vg. E eu os coloquei em uma pasta Bootstrap. Então você sabe que, se você quiser encontrar mais desses ícones, você pode ir para ícones do Bootstrap, você pode pesquisar no Google. E você pode obter quantos quiser. Não estou usando uma fonte de ícone é porque isso criaria sobrecarga usando alguns ícones. Se incluirmos apenas os ícones reais que você deseja em linha, não teremos a sobrecarga de toda a fonte do ícone. Então, vamos salvar isso e dar uma olhada. Então, há nosso ícone de calendário. Vamos dar uma olhada em adicionar o tempo estimado de leitura ao lado esquerdo. Então, ele vai fazer é um pouco de rearranjo por enquanto. Vamos pegar o parcial, vamos colá-lo. Vamos verificar nossa pasta Ícones e desta vez usaremos o relógio. Então, mudaremos isso para relógio e abriremos isso acima da data parcial onde deveria estar. E usaremos com tempo de leitura, R maiúsculo, T maiúsculo na marcação. E comece com a guerra apesar do tempo de leitura com um ponto. E então usaremos o minuto. E se for maior que um, maior que um minuto, então vamos colocar um S no final. Vamos ver como vamos exibi-lo. Então vamos colocar um demônio e faremos o tempo de leitura. Para essa div. Usamos uma classe de ordem vazia para forçá-la a baixo. Margem superior. Ou também tenho que colocar o fluxo porque tudo o que estamos usando a margem de início automático em um momento. Então vamos transformar isso em uma extensão e colocá-lo lá dentro, dentro da nossa div. E então colocaremos a etiqueta de extensão dentro com o tempo de leitura. No tempo de restauração, por algum motivo, não funciona. Então vamos gastar o quê? Vamos corrigir alguns recuos dos espaços para tornar tudo um pouco mais fácil de ler. Em seguida, vamos salvá-lo e dar uma olhada no navegador. Estava parecendo exatamente como queremos. Sem Tom e à esquerda terminamos nossa data à direita. E vamos verificar isso em uma pequena janela. Eles não vão entrar em conflito. Traga isso para baixo para pequeno. E tudo bem. 6. Modelo para publicação única em blog: Para criar nosso layout para quando você estiver visualizando uma única postagem no blog. Temos nosso layout único em nossa pasta padrão, mas queremos manter isso onde ele está porque isso é ótimo para visualizar páginas como a página sobre nós ou a página entre em contato conosco. Então, o que faremos é copiar esse HTML de ponto único e faremos uma nova pasta no layout chamado posts. E vamos colá-lo lá. E então vamos trabalhar nisso. E só será exibido quando uma única postagem estiver sendo visualizada. A primeira coisa que faremos é adicionar a imagem da postagem. Então, voltarei para o list.html. E temos algum código aqui para a imagem. Copiaremos isso e voltaremos. Então, temos nosso título. E então vamos colocar em uma nova linha, ponto ponto col. Então faremos isso de novo. Vamos colocar nossa imagem aqui. E então ele deve funcionar bem. Então, vamos salvar isso. Vou dar uma olhada rápida. Certifique-se de ter habilitado a imagem para essa postagem específica que foi desativada anteriormente para fins de teste. Então, temos nosso título, temos nossa imagem, temos nossos textos, adicionaremos um pouco de preenchimento abaixo da imagem. Nessa linha, haverá PIP3. E isso está muito bom. Agora estou pronto para entrar e adicionar alguns dados à postagem, tags ou categorias de data, a data em que podemos ter revisado a publicação. 7. Dados de modelo único: Para adicionar alguns dados ao nosso modelo de layout de post único. Então, se você olhar para baixo do seu título, adicionaremos mais algumas linhas. Então, vamos fazer linha. E então vamos fazer dot col dash md seis vezes acima por dois com o asterisco e tocar nisso e fazer algum espaço. E então podemos pegar tudo o que acabamos de criar. E podemos colá-lo duas vezes. Se você entrar em sua lista, notará que temos nosso tempo de leitura e temos nossa data. Vamos apenas aplicá-los na ordem inversa desta vez. Vamos colocar a data de publicação primeiro. E isso porque também vamos colocar a opção de quando foi modificado pela última vez. Cole isso. Vamos nos livrar do vão. Só quero os dados reais por enquanto. Então vou voltar. E enquanto estamos fazendo isso, vamos colar no tempo de leitura. Vamos nos livrar dessa extensão por enquanto. E então as coisas um pouco diferentes aqui. Em seguida, vamos colocar uma última atualização adicional sobre textos que a rede depende do Get sendo usado para o seu projeto. Você precisa usar o Git para confirmar atualizações em seu blog. E então vocês obterão as informações fora do bem para quando ela foi atualizada pela última vez. Então, vai fazer é que temos nosso tempo aqui. Vamos cortar isso e criaremos uma variável. Vamos chamá-lo de data publicada, dois pontos iguais. E vamos colar isso. E a razão pela qual estamos fazendo isso é porque teremos que comparar a última atualização na data e a data de publicação real. E se ele foi atualizado pela última vez no mesmo dia da data de publicação, na verdade, não vamos exibir a última vez EditText. Então, aqui em baixo, vamos exibir a data de publicação. Fará chiado se desta vez, manter as coisas um pouco mais simples. Então, teremos que, em vez do formato de ponto, ele será publicado formato de ponto de data. Em seguida, vamos criar outra variável chamada Última modificação. Tudo em minúsculas. Vamos copiar esse texto para baixo. E usaremos o último modo ponto, tudo em formato de ponto minúsculo. Então podemos descer e colocar em uma data de publicação condicional, se não igual e no mês passado. Estou colocando na marcação. Vou colocá-lo em alguns textos em itálico. Última atualização na tag de tempo. Em seguida, tome tempo. E aqui dentro podemos fazer, vamos consertar este. Portanto, seria o formato ponto do estado do ponto. Então, vamos copiar isso em ponto B no mês passado. E acabamos de usar o modo de impressão. Você precisa ter em mente quando estamos comparando a data de publicação e o último modo. Onde formatar data publicada e último modo com um formato de data que é dia, mês e ano. Não estamos levando em conta horas, minutos e segundos. E isso é muito importante porque se modificarmos a página no mesmo dia em que publicamos inicialmente. Não queremos exibi-lo. É atualizado pela última vez no mesmo dia em que foi publicado. E é assim que ganhar comparando datas aqui. E é muito importante quando você está fazendo essa comparação que sua formatação com uma data, apenas dia, mês e ano. Vamos dar uma olhada no navegador. Então, temos nossos últimos textos atualizados funcionando e você terá que se certificar de que seu projeto foi inicializado como um repositório Git. E você fez dois commits e você também provavelmente tem que refazer seu Taylor publicado se você estiver usando os dados, eu forneci uma visão geral datada e você tem que fazer uma alteração e um commit para uma de suas postagens. Vamos passar o tempo e, em seguida, vamos dar uma olhada em fazer a postagem e as tags e categorias da postagem. Então vamos fazer, temos que empurrar nosso tempo de leitura. Então, vamos colocar uma classe flex de exibição e colocá-la em um ponto de extensão MS dash Bordeaux para margin auto. E então vamos colocar nessa extensão que a parte está certa. Em seguida, vamos dar uma olhada em colocar categorias e tags. Vamos usar a largura. E então, entre parênteses, ponto get termos, G maiúsculo, T. maiúsculo E vamos olhar para categorias, essas categorias porque é para um blog. Se você fizesse meu curso de busca, isso teria sido empresas e espécies, mas acabei de renomear tudo para categorias em termos desse curso específico. Em seguida, teremos que colocar na marcação. E então temos que colocar nosso ícone. Então, copiaremos o parcialmente para baixo e daremos uma olhada nos ativos e ícones. E usaremos uma pasta para categorias, mudaremos o relógio da pasta. Em seguida, passou a variar sobre as categorias. Então, ele será um intervalo sobre o ponto, mas queremos usar o índice e os elementos. Então, vamos fazer vírgula de índice. E poderíamos até usar, em vez de usar o elemento, poderíamos usar a categoria se você quiser. Chame-o igual a ponto. Então, vou colocar uma etiqueta final para o nosso alcance. Para exibir nossa categoria. Usaremos o título do ponto. Coloque em um pote, usará oito traços restantes humanizados, e usamos intitulado para capitalizar cada palavra. Vou colocar um pipe entre ou usar vírgula se você quiser entre cada categoria. E a maneira como faremos isso é, por favor, se então o índice 0, então não é a primeira vez através do espaço de alcance, espaço de tubulação. E então salve isso. E vamos dar uma olhada no navegador obviamente para colocar em agonia. Então, esses são punnett express. Adicionaremos uma categoria extra e veremos o que acontece. Então volte para o nosso conteúdo. E em categorias. Para os olhos, vamos adicionar um link agora ao redor do nosso título. Vamos colocar um íon vai fazer Eu vou ligar em chaves encaracoladas. E então faremos uma classe de decoração de texto. Nenhuma. Coloque para fora, fechando uma etiqueta. Por baixo do título. Aquele pequeno olhar. Eu saí para Cadbury subindo com o pop entre eles. Então, removerei essa segunda categoria. Vou colocar uma segunda marcação por enquanto. Em seguida, configuraremos tags e daremos uma olhada nisso. Então, o que faremos é copiar todo esse texto. Acabamos de fazer o código no próximo. Alteramos as categorias para tags. E então essa tag, embora não a estejamos usando, apenas usamos o ponto em vez disso. E vamos mudar nossa pasta. Duas tags. Se você quiser, você pode fazer cifrão, título e eu atribuirei título de ponto de etiqueta, marcar esse link permanente. Isso realmente não importa. Salve isso. E vamos dar uma olhada. Temos duas etiquetas aparecendo com o tubo. Vou apenas empurrá-lo para a direita. Então, assim como antes, na coluna colocará o fluxo d e, em seguida, colocaremos uma extensão. Então vamos fazer d dash, flex. Tenha em mente com a extensão. Não queremos que isso empurre para a direita em um site móvel. Então, faremos a ordem MD do estoque MA. Copie isso para baixo. Certifique-se de que tudo isso esteja dentro das tags. Isso está ótimo. Só vou remover essa segunda tag. E então essas etapas são concluídas. O backup eliminará essa segunda tag. Vamos colocar um alias para teste. E é assim que queremos. 8. Blog Post Image Shortcode: Agora vamos criar códigos de acesso. Podemos chamar facilmente uma imagem dentro do markdown de uma postagem. Então, o que faremos, entraremos em nossa pasta Layouts e criaremos uma nova pasta chamada shortcodes dentro que fará nosso código curto e chamaremos de IMG, dash, index dot HTML. A primeira coisa que faremos é verificar se existem parâmetros de página para imagens. Então, usamos com a página de pontos de cifrão com um P. maiúsculo E então podemos acessar imagens de pontos params. E vamos colocar um antagonista para isso. Um. A próxima coisa que vamos fazer é verificar se há uma fatia. Use se refletir ponto for fatia e colocar o ponto porque já atribuímos o parâmetro page das imagens ao ponto. E vamos colocar nossa ingestão e, para isso, vamos definir nosso índice padrão como 0. Portanto, se não fornecermos um índice, por padrão, obteremos a primeira imagem na imagem é parâmetro. Então o que faremos é que faremos se o ponto cifrão receber 0, isso significa o primeiro parâmetro fornecido. E vou te mostrar que funciona em um minuto. Na marcação. Então, nesse caso, índice de cifrão será igual a ponto e vamos mudar isso para a. Estamos pensando, vamos digitar. E você tem que lembrar que isso estará chegando como uma string de texto. Então, teremos que mudar isso para um número inteiro. O que podemos fazer, podemos fazer um ponto com índice. Então, ao falar sobre a fatia de imagens, e vamos olhar para a variável de índice. Por padrão, estamos vendo 0, que é a primeira imagem na lista. Caso contrário, se um número estiver sendo fornecido, quando os chamarmos de código curto, ele estará olhando para o primeiro, segundo, terceiro item de índice nesta lista. Vou colocar uma marcação N. Em seguida, veremos para obter a imagem. Então vamos fazer com cifrão , ponto, página, pontos, recursos, pontos, obter correspondência maiúscula G, M maiúsculo para esse. Então, podemos apenas fornecer um ponto. Vou colocar uma marcação N. E é aqui que toda a ação acontece. Voltaremos ao nosso único post. Parece legal a imagem Código. E copiaremos esse código. Vamos colá-lo e recuar o EIS, estamos nos referindo às variáveis de imagem. Então, o que podemos fazer é que a coluna de imagem seja igual. Estamos nos referindo ao título pós-doc. Nesta instância específica, será uma página de pontos em dólar com um título de ponto P maiúsculo, e veremos personalizar isso em um momento. Vamos mudar nossa classe CSS e, em seguida, vamos dar uma olhada em adicionar o código curto a uma postagem para que possamos testá-lo. Então, vamos para o nosso primeiro post, Amy. Agora fazemos isso é colocá-lo em chaves curly abrir e fechar, e abrir e fechar as setas. Em seguida, você fornece o nome dos códigos de acesso será IMG dash, index ou o que você gostaria de nomeá-lo. Por padrão, ele procura que o índice é 0, ou você pode fornecê-lo. Se você quiser fazer um número diferente, deixaremos em branco por enquanto. E então veremos adicionar um número. Então, vou conseguir isso no navegador. Tia Amy, e a imagem está sendo puxada. Vamos dar uma olhada em adicionar algum CSS para que possamos centralizá-lo e restringir o tamanho para que ele não seja muito grande. Nós faremos é copiar em uma linha. Faça d, flexione, justifique o conteúdo. Então, no topo. E então faremos uma linha com os filmes, justificaremos o conteúdo. E faremos nossa coluna chamada Bash MD. Adeus por enquanto. E depois iremos destacar a imagem. Hoje. Vamos verificar isso. Isso está funcionando até agora. Em seguida, veremos restringir a altura dela porque atualmente, mas a restrição de largura, se você der uma olhada nela, é uma largura de coluna completa porque eles estão abaixo do MD. Então, se verificarmos desta forma, você verá que é cinco de 12 de largura. Agora olhe para restringir a altura. Então volte para nossos ativos e depois Custom CSS. Vou te mostrar como fazer o estilo M. Vamos dar uma olhada agora no custo do utilitário também fará, por exemplo, dot IMG, dash H, dash dez. E copiaremos esse código para dentro. E então teremos uma chance de dizer 15 para este. Então vamos fazer ponto IMG, traço, traço 15. E mudaremos nosso coração para 15. Salve isso. E, em seguida, salto traseiro. Livre-se desse estilo de feixe. Vou fazer IMG dash H dash 15. E podemos voltar à nossa lista. Descubra a imagem IMG h traço dez. E podemos nos livrar desse resumo da postagem porque atualmente não o estamos usando. Comente lá. Depreciado. Então, vamos verificar isso. Então agora está sendo restringido a uma altura de 15 aro a 40 pixels de altura, ou seja, 16 pixels vezes 15, então 15 ou mira alta. E então mostrarei como você pode usar o SPSS para gerar essas classes totalmente. O que faremos é, antes de tudo, definiremos nossas alturas. Exemplo 5101520, tentar fazer muitos porque acabará poluindo seu arquivo CSS com muitas classes servirá. Em cada altura, em alturas. Agora você tem que copiar e colar basicamente sua altura exatamente, mas você pode escolher o que você colocou aqui. Você poderia fazer cada H e alturas se quiser. Estou apenas fazendo cada altura, o sistema de altura torná-lo agradável e limpo. Fazemos a cinta e faremos ponto, IMG, traço, altura, H dash. Em seguida, fazemos um sinal de hash, abrimos , fechamos chaves e atribuiremos altura. Então, ele vai puxar esses cinco e colocá-lo lá para a classe. Então, vamos pegar IMG dash H e S5, IMG delta H dash dez e assim por diante. E cada vez que iteramos, então colocamos alguns aparelhos encaracolados. E, em seguida, copiaremos e colaremos em regras CSS. Para nossa altura. Vamos fazer hash. Salas, abraça uma cinta e , em seguida, doodle atribui altura, depois feche a cinta. E então vamos comentar e salvá-lo. E então vamos inspecionar. E está puxando para dentro. Se você clicar nele, ele realmente mostrará a fonte. Mas se entrarmos na pontuação de saída direto para o fundo, você verá que há nossas classes geradas, 5101520, porque você tem que descobrir o que funciona para você. Mas não genérico demais porque você só vai preencher seu CSS com classes extras. Vamos dar uma olhada na conversa. Um pouco de sabão serve aqui. título do cifrão é igual a branco. E farei se o ponto cifrão receber um. Se tivermos um segundo parâmetro. E faremos total igual a largura total. Else. título é igual à página ponto py do cifrão. Título para inicializar o título lá. No que estamos fazendo, estamos verificando se um segundo parâmetro é fornecido com um atalho e mostrarei como configurar uma emenda. E isso é para o título personalizado real da imagem. Caso contrário, vamos usar o título da página. Então aqui para o título, podemos clicar em Alt para ambos. Será o título do cifrão para o título. Vamos também dar uma olhada na configuração. Figura. O que faremos. Faremos uma figura. E vamos definir a classe para descobrir o Bootstrap. Vamos colocar o nosso interior imediato. Fala o recuo. E vou colocar uma classe de imagem de figura. Temos que colocá-lo para fora legenda de figo. A classe será figura traço legendada para Bootstrap. E os textos serão apenas o título. Podemos definir. O que fazemos é colocar em nosso primeiro parâmetro, que é o número do índice. E então faremos nosso segundo e isso será, por exemplo, foto minha. Crocker. Salve isso e dê uma olhada. E estamos puxando a imagem de qualquer cãibra e percebemos que está muito mais fraco e está alinhado imediatamente porque é uma legenda de figura. Fazemos uma inspeção. Você vai ver que temos como figura eles bootstrap figura, mas eu imaginei a imagem. E então temos nossa legenda abaixo. Você notará que ele está usando a cor mais clara, tamanho menor. E as tecnologias assistivas poderão captar isso. Essa é uma legenda para a legenda da figura real para a imagem. Por exemplo, colocaremos uma segunda imagem em. Amy, pegará o nome dele, nome do arquivo. E depois duas imagens, 1 segundo 1 pol. Vamos colocar algumas mensagens de texto e , em seguida, você tem um curto período. Procuramos o segundo item. E isso vai ser foto de bender. Vamos salvar isso. E antes de dar uma olhada nisso, talvez você queira desativar a imagem padrão aqui. Então, faremos um pouco dessa linha inteira que retiramos, aquela imagem superior em que você pode colocar algum preenchimento. Mas é assim que eu retiro imagens da matriz de imagens. E isso funciona bem com coisas como Netlify, CMS. Fazemos upload de imagens e elas são colocadas automaticamente na matriz permanente de imagens para você. Vamos adicionar um pouco de preenchimento. Então, iremos para nossa linha de conteúdo. Faremos P t três. Agora eu tenho algum preenchimento lá e você pode passar e você pode adicionar o máximo de personalização. E vou colocar uma lição rápida no final deste curso sobre como você pode personalizar as coisas ainda mais. sólido deixa a configuração com as duas imagens e o código curto lá. Então você tem um exemplo de como isso funciona. 9. Widget: Artigos recentes: Vejamos os widgets. Estamos entrando em nosso detentor de layouts e, em seguida, parciais. E criaremos uma nova pasta chamada widgets. E então começaremos com index.html. E então faremos um Dash, HTML pós-doc recente. Vou chamá-los no índice é que faremos um intervalo e faremos o ponto do site. Widgets de pontos Params colocarão a integrin. Vamos executar qualquer parcial, e será, o que está cortando por cento. Isso usará print f para isso. Ei, eu posso apenas fornecer o ponto. E os contextos que parciais são onde é complicado. Com um cifrão. O cifrão retorna à raiz desse arquivo específico, então você não atribui 0s antes de acabarmos no intervalo. O alcance que temos raison de contextos. Sim, isso fica um pouco complicado. Poderíamos colocar HTML de ponto aqui, mas não é necessário. Bem, então entre e configure nosso arquivo de configuração. Então, sob parâmetros e faremos widgets. E a maneira mais fácil de fazer isso é que começaremos com nosso Dash recente. Podemos começar com nosso HTML. Vamos falar sobre o básico disso. Faremos uma variável chamada recente. E será um ponto ou páginas amarelas. O topo do T maiúsculo porque sua variável incorporada é Postagens. E estamos vendo , por exemplo, primeiros cinco entrarem e , se recentes, porque não queremos exibir a parcial se houver, se não tivermos conseguido o post lá, vamos colocar na marcação. E então, para os ossos nus, apenas para começar as coisas vão variar mais recente. Ele. Faremos um a e será real. E então usaremos o título do ponto. Vamos apenas fazer uma marcação final de recuo. E então, para fazer as coisas funcionarem e você tem que entrar na base, livrar-se do Lorem Ipsum para sua dor lateral. E executamos widgets parciais slash index e analisamos os contextos de pontos. Temos uma lista de postagens com links que funcionam. Vamos passar e colocaremos algum HTML. Vamos fazer div dot. Widget também fará o widget traço, traço, recente. Então, usando o CSS de estilo BM lá novamente. E dash, dash é modificar o tipo. E isso será para as postagens recentes do Dash ficarem mais corretas. Então, estamos fazendo um tipo de widget de postagem recente e, em seguida, analisaremos os títulos. Por exemplo, podemos fazê-lo H3, e faremos widget escuro, sublinhado, cabeçalho de sublinhado. Em seguida, colocaremos publicações recentes. Glenn colocou um URL. Vamos obter nosso alcance. Faça isso. Vamos consertar um pouco do recuo, podemos puxar isso de volta se você quiser salvá-lo e dar uma olhada. E depois faremos algum CSS. Temos nossas cinco postagens recentes por aí com seus títulos. E eles vão ouvir para ver alguns CSS agora para fazer isso funcionar um pouco melhor, voltaremos para ativos e CSS em nosso CSS personalizado. Em seguida, faça o widget de ponto. E então faremos um pouco de preenchimento. Vou colocar um restante por enquanto. Então, por exemplo, se você quiser alterar o cabeçalho, você poderia fazer. E sublinhado cabeçalho. Vamos deixar isso vazio. É apenas um exemplo. Em seguida, temos nossa UL e colocaremos preenchimento à esquerda 0 para substituir a margem padrão. 0 estava tentando substituir todas as redefinições CSS que o Bootstrap está incluindo para nós. O estilo de lista não é nenhum. Então faremos um LI dentro da lista, adicionaremos algum preenchimento embaixo de I 0,5, rem por enquanto. E então veremos os links de dentro para fora do widget em vez de b, a, e faremos a decoração de texto. Nenhum. Então, não recebemos sublinhados. Então, digamos, por exemplo, que queríamos modificar a substituição do widget de postagens recentes. Você poderia fazer traço, traço, traço, senão. Vamos deixar isso vazio por enquanto, mas você pode substituir qualquer coisa dentro disso. E isso mudou muito. Vamos dar uma olhada agora, podemos colocar a data por baixo. E então veremos passar para o próximo widget e você pode personalizar esse CSS para atender às suas necessidades. Volte para nossas postagens recentes. Vamos fazer um pouco de reformatação. Portanto, esse título dentro de dividendos para forçá-lo em sua própria linha. Então faremos um pequeno traço de texto de ponto silenciado. Então, o texto também o torna pequeno. E depois faremos faremos a data de publicação. Estou colocando marcações antes de esquecermos. Vamos mover isso para cima nosso texto. Deve sempre ser data de publicação, mas apenas no caso de não haver dados. E então colocamos um horário e faremos data e hora como W4 seja formato escuro. Faremos 2006 dash, one, dash O para um formato legível por máquina. E então vamos colocar o tempo e voltaremos à nossa lista. Podemos pegar o formato de lá. Então, usando nosso formato de arquivo de configuração e você pode alterá-lo para sua localização. Vamos salvar isso e vou dar uma olhada apenas no comércio invertido lá que está faltando. E vamos salvar isso e dar uma olhada nas datas que aparecem abaixo. 10. Widget: Artigos relacionados: Vamos fazer um widget em postagens relacionadas. Este é um pouco mais complexo. Precisamos configurar alguma configuração para isso. Temos uma configuração padrão aqui. Vamos copiar isso, entrar em nosso arquivo de configuração. E acima dos parâmetros. Vamos colocar uma pequena nota lá dentro. Para adipose, inclua novo aplicativo. Vamos colocar isso em verdade. Vamos quatro páginas que são mais recentes que as atuais. E então aqui estão todos os termos de pesquisa. Então, estamos analisando as categorias e, em seguida, estamos analisando as tags, definimos ambas em uma consulta de pesquisa e de 100. Isso é verdade. Isso diminui um pouco as coisas. Vamos salvar isso e , em seguida, vamos dar uma olhada na configuração do nosso widget. Então, vamos para o widget, então faremos um novo relacionado ao post.html. O que faremos é copiar sobre comer fora sobre postagens recentes. Então cole isso. E então entraremos em configuração e adicionaremos preço de traço iluminado. Nós diremos que ambos. Olhe no navegador, verifique se está funcionando. Temos nossas duas IOPS recentes de postagem alta agora podemos personalizá-lo e transformá-lo em posts com chumbo. Então, o que faremos é passar por tudo sobre a duloxetina recente e mudaremos todas as ocorrências para relacionadas. E vamos mudar nosso CSS. E indo para postagens relacionadas. Em seguida, se livrará da nossa data publicada. Podemos nos livrar da div em torno do título. Vou verificar como as coisas estão indo até agora. Até agora, tão bom. E então vamos nos livrar do onde, o topo das postagens. E faremos páginas regulares do ponto do site, relacionadas a pontos. Em seguida, adicionaremos um ponto como contextos para a função relacionada. Então, salve isso e dê uma olhada. Vou para uma das postagens e você verá postagens relacionadas aparecerem abaixo dela. Temos cinco desses puxados também. Vamos dar uma olhada em ser capaz de configurar o número de dispositivos. Então, faremos postagens relacionadas ao ponto do site, pontos de params. Volte aqui. E faremos postagens relacionadas. Cinco, ou o controle de comando, o número de widgets. Em seguida, configuraremos um para postagens recentes, faremos isso 15 também. Vamos salvar isso. E ainda teremos cinco e entraremos nisso por postagens recentes também. Podemos copiar esse texto. Preço recente. E isso está funcionando muito bem. 11. Widget: Categorias de Post: Som um widget para categorias de postagem. Então, criaremos um novo arquivo HTML chamado post Dash. Tinha que reiniciar o HTML. E eles adicionarão isso ao nosso arquivo de configuração. Salve isso. Vamos voltar para. Outro widget, copiará o código, cola-o e você pode ver temos funcionando e, em seguida, veremos personalizá-lo agora. Então ele vai fazer, mudará o cifrão. Categorias recentes de cifrão, mudarão CSS, pós traço, bagas. E então mudaremos nosso rumo também. Então. Ou altere as categorias para taxonomias de pontos do site, categorias de pontos T maiúsculas. Então faremos um intervalo sobre ele, faremos ponto por conta e o capital B, capital T. Dessa forma, coloca as categorias com a maior quantidade de postagem primeiro. Dessa forma, há uma chance maior de fazer com que um usuário clique na categoria real. Vamos nos livrar da data publicada. E vamos nos livrar dessa div, que está em torno dela. Limpe isso. Então o que faremos é colocar no ponto de página real permalink, título da página com maiúsculas. E se você quiser, você pode, parênteses entre parênteses, você pode colocar o número real de páginas, para que você possa fazer essa contagem de pontos. Vejamos isso. Temos o número de páginas por categoria e, como você pode ver, elas são solicitadas por conta. 12. Widget: Postagens: Isso é semelhante à lição anterior. O que faremos é criar um novo arquivo. Vamos chamá-lo post dash tags, pensamento HDL, para nossa configuração. Tags de traço. Salve isso. E, em seguida, copiaremos o código das categorias em tags e o salvaremos. Você pode ver que temos os dois chegando no site. Agora posso fazer alguma personalização, destacarei todas as nossas portas em categorias e alterarei todas as ocorrências para tags de atribuição de dole. E serão pontotags de taxonomia. Agora, vamos mudar nosso cabeçalho para tags de pose e classe CSS. Desta vez, o que faremos é limitar o número que está sendo mostrado. Então, coloque aqui primeiro e usaremos Sites, pontos, params, postagens de pontos, tags. Antes de apertarmos Salvar, acesse nosso arquivo de configuração. Vamos colocar tags de post, digamos, por exemplo, dez. E vamos apenas mudar nosso comentário para o número de itens. Vamos salvar isso. Volte para nossa parcial. Vamos salvar isso. E aparecendo bem agora nosso personalizador. E vamos colocar alguns botões em cada uma das tags. O que faremos é que nosso link fará uma classe igual. Vou colocar btn, btn dash, primário, BTN dash m. Isso é para um pequeno botão e uma cor primária. E então faremos margem, fim de um e uma margem inferior de duas etapas para multilinha ter que colocar em um botão de função igual. Portanto, é um clichê para tecnologias assistivas para o que isso vincula. E diremos que agora olhe, o botão está funcionando. Acabamos de remover a lista e listar itens. Em seguida, vamos nos livrar das duas tags UL. E vamos nos livrar da LI e da tag LI de fechamento, a tag final parecendo ótima. Você pode então entrar e reordená-los se quiser. Acho que a última coisa que faremos é colocar alguns padrões para quando estivermos usando a primeira função. Vamos colocar alguns suportes ao redor. Agora. Perímetro. Então o que podemos fazer é colocar em um padrão de tubulação, qualquer padrão sensato pelo exemplo dela lata. Você pode salvar isso. E então, se você não tiver esse item de configuração específico presente, você não receberá um erro porque aqui nós puxamos o padrão, então voltaremos para postagens recentes e postagens relacionadas. E adicionaremos alguns padrões lá também. Vamos para postagens recentes. E nós temos nosso primeiro, vou colocar parênteses por aí. E faremos o padrão e cinco. E então o Reddit publica. A mesma coisa. Isso é realmente importante ao usar itens de configuração que você define padrões para ver se recebo um erro. Verifique, tudo ainda está funcionando. E ainda está funcionando. 13. Widget: Busca: Último widget que vou mostrar o que faremos para mantê-lo simples. Vamos entrar e deixei o link para esta página na seção de recursos, a barra de navegação Bootstrap, e vamos tirar a entrada de pesquisa deles. Então copie esse texto. E então faremos um novo arquivo de widget chamado search.html. E vamos colá-lo e faremos algumas alterações. A primeira coisa que faremos é que o papel formal é igual a pesquisa. E então, para a entrada, faremos um nome igual a Q. E, em seguida, o que faremos, salvaremos isso e entraremos ponto de configuração YAML e adicionaremos a pesquisa para ser a primeira. Vamos salvar isso. Temos nosso trabalho de pesquisa e queremos que adicionemos nossas classes CSS a ele para que possamos obter algum preenchimento por baixo. Então, para a nossa classe, vamos fazer widget e obtemos traço, traço, pesquisa e damos uma olhada. Agora está puxando o estilo global. Agora. Ele não funcionará com o widget de pesquisa. Você terá que olhar para o meu curso sobre pesquisa com Hugo. É muito para passar muito rapidamente e infelizmente, muito grande para este curso. Mas se você for para esse curso, aprenderá tudo o que precisa para implementar um recurso de pesquisa em seu blog. Então, boa sorte com isso. Qual é o link abaixo na seção de recursos? Então você pode encontrar meu curso sobre como implementar um recurso de pesquisa com o Hugo. 14. Crie novos posts: Então vocês são ótimos comandos internos para criar uma nova página ou, neste caso, uma nova postagem. Então você executa o comando que Hugo sabia, e temos que dizer a ele onde colocar o arquivo. Então, se formos ao Conteúdo, você percebe que há uma pasta de postagem, a colocará lá. E você notará dentro de cada uma das pastas que temos um ponto de índice MD criará uma barra de brindes. Em seguida, usamos a data de hoje em um formato ISO. Então, usamos 2022, traço 05, traço 30. Você pode colocar o que quiser aqui, mas estou apenas usando um sistema para facilitar a localização das postagens nesses traço duplo. E vou colocar o título da postagem. Então, vamos testar traço, post, barra, ponto de índice, md para que ele entre. Se entrarmos no arquétipo de postagens do programa de férias do polvo , Isso é tudo na pasta de postagens. E este é um modelo que será usado. O total seria exatamente o que queremos, mas podemos modificar isso. Temos nossa data ou inserida até a data de hoje e essa também a data de publicação também será mantida até a data que é ótima para exibição em postagens. O rascunho é definido como false, o que significa que a página será exibida por padrão, que é o que eu quero. Mas você não quer colocar o rascunho da verdade. Você não quer coisas que provavelmente temos imediatamente, mas geralmente não tenho tantas coisas. Certo. Esperando por aí. Eu costumava fazer um postado por vez e, em seguida, eu o publiquei carregando o FTP ou me comprometendo a obter. E teremos que configurar nossas categorias, tags e imagens manualmente. Enter, então, irá para a nossa foto, que é fácil de encontrar porque tanto a data quanto o ar total a procurar em termos da foto, Ele é o nosso ponto índice MD, ou copie e cole em imagens. Se clicarmos com o botão direito e renomear, poderemos pegar o nome do arquivo. Colarei isso na matriz e nas tags. Vou copiá-lo aqui. Então, temos humanos e as categorias serão copiadas. Um, fará punnett express para que eles possam vinculá-lo. Agora vamos colocar algumas vírgulas invertidas em torno disso porque é mais de uma palavra. Então vamos colocar nosso texto em algum Lorem Ipsum no Moran, execute nosso servidor. Procuramos no navegador. Aqui está nossa postagem de teste. E é puxado na data de publicação e nos textos. Na verdade, não o configuramos para exibir imagens automaticamente. Então, se voltarmos para Amy Wong, é assim que vamos tirar a imagem para exibir. Está pronto para ir. Temos nosso título em mim. 15. Realces de sintaxe do código: É um realce de código realmente funciona imediatamente, embora possamos realmente remover os estilos em linha e movê-los para uma folha de estilos, você provavelmente terá uma pequena redução no o tamanho do seu código. E a outra razão pela qual você quer fazer isso é se você estiver usando o CSP por motivos de segurança, você não está, você bloqueou estilos embutidos, por exemplo. E, portanto, você terá que mover seus estilos de realce de código para uma folha de estilos. De qualquer forma, vamos colocá-lo no método padrão, funciona fora da caixa. Então você tem que colocar três backticks. Então vamos colocar nosso código. Então, vou te mostrar um exemplo. Há algum código Hugo no caso de você estar executando e o blog Hugo. Então vamos entrar em nossos parciais e depois pegaremos algo um pouco mais interessante. Por exemplo, aqui, copie isso, cole-o em outros três backticks em. Em seguida, precisamos fornecer um idioma para o destaque da sintaxe. A página de soluço para realce de sintaxe e deixa o link para esta página na seção de recursos. Se você rolar para baixo, notará que temos os modelos HTML e você precisa copiar esse texto exato. Cole isso. Vamos salvá-lo. Vou procurar no navegador. E há nosso destaque de sintaxe. E isso está configurado para funcionar fora da caixa, desde que você forneça. Você não precisava, mas é recomendável que você forneça o idioma real de tentar destacar. Vejamos agora como remover os estilos em linha. Porque se você clicar com o botão direito do mouse e inspecionar, eu olhei nosso código, você notará que temos um monte de vãos acontecendo com estilos diferentes. Para cada extensão, podemos realmente usar folhas de estilo que, por exemplo, se você bloqueou estilos embutidos. Portanto, o destaque da sintaxe, colocamos um link para configurar o realce. E o que estamos interessados, esses são todos os padrões são as classes sem. Então, atualmente, ele está definido para não incluir nenhuma classe. Queremos mudar isso também um tipo com eu provavelmente disse isso para mim, isso é apenas uma preferência pessoal. Mas acho que você vai se sentir muito mais na página dessa forma. Portanto, copie toda essa configuração. E então entraremos em nosso arquivo de configuração. E acima dos parâmetros. Vamos colá-lo. E então você verá que eu já tenho alguma maquete aqui, mas isso é para Goldmark. Atualmente, estamos configurando a ferramenta de destaque, recortamos tudo muito e nos livramos da marcação e vamos colá-la. Obrigado. Claro que provavelmente não estava sob Goldmark. Agora, o que estamos tentando mudar é as classes sem. Então vou definir isso como falso. Vamos colocar um comentário lá. False precisa de uma folha de estilos. Atualmente recebi o Style System WannaCry. Depende da folha de estilo que fornecemos. Então, de volta à página de destaque de sintaxe, temos a geração do CSS. Então, definimos as classes sem como falsas. O que agora temos que fazer é gerar o CSS. Então aqui estamos gerando um estilo de WannaCry. Você pode conferir todos os diferentes estilos. Ele usava o link. Só vou ficar com WannaCry porque eu pessoalmente gosto disso. Isso gerará um arquivo CSS de ponto de sintaxe e vamos movê-lo. Então, copiaremos esse texto para o comando. Criando novo terminal. Ele colará no comando. Procuraremos nosso CSS de ponto de sintaxe. Vamos cortar isso, colocá-lo em nossa pasta de ativos. E o SCSS. Você provavelmente terá um tempo mais fácil se renomeá-lo para SCSS. Então temos que importá-lo. Não parecerá importação de comentários, realce de sintaxe CSS. Usamos em Importar. E é a mesma foto. Portanto, esse é o ponto de sintaxe SCSS realmente coloca um ponto-e-vírgula no final. Em seguida, vamos nos certificar de que temos nosso servidor de desenvolvimento em execução. E está reclamando do fato de que é UTF 16. Então, entrando em sintaxe, CSS, e então podemos alterar nossa codificação, UTF-8, que é praticamente o Lego padrão no navegador. E vamos dar uma olhada. Agora, você pode dizer que ele ainda está sendo exibido, o que é uma ótima notícia. Vamos fazer uma atualização rápida para ter certeza de que não fui inspecionar mais ninguém. Agora temos todas as nossas aulas configuradas com span. E se você olhar para a direita, verá que temos chroma como a classe pai, e então Sam é o filho e chroma dot cm lhe dará essa configuração de cor SetSpeed com classes. Então eles podem ser reutilizados. Se você tem muito destaque de sintaxe e vai usar o balcão único para tudo isso. Você pode até personalizá-lo se precisar. Isso definitivamente vai te ajudar. Se você tiver desabilitado estilos em linha com seus cabeçalhos de segurança. 16. Estilos de personalização: Apenas algumas maneiras diferentes de mudar os estilos. A primeira maneira é usar as classes de utilitários. Então, se você entrar, por exemplo, entraremos em nossas postagens e HTML de ponto único. E se quisermos mudar a forma como os títulos, apesar de entrarmos em nossa parcial total. E atualmente é um H1, mas eu quero torná-lo um pouco menor. Estou colocando essa classe H2. Vamos salvar isso. Agora clique com o botão direito no post. Vamos, temos nossa classe H2 lá, e isso vai reduzir o tamanho da fonte para nós. Mas o que é realmente importante é observar variáveis e também folhas de estilo. Se você entrar nos ativos e no SPSS, verá que configurei uma página chamada Variáveis personalizadas. E é aqui que começa a ficar realmente interessante. Então, temos aqui nossa cor primária. Você poderia usar uma dessas variáveis internas, mas vamos enfrentá-la. Todos os outros lá fora já fizeram isso. E você não quer que seu site se pareça um site Bootstrap por padrão. Então, o que podemos fazer é mudar a cor e você tem que ter muito cuidado. Tem que ser algo de bom gosto. Caso contrário, provavelmente não funcionaria, mas você pode usar tentativa e erro. Então esse é meu primário. Vamos salvar isso. E posso ver que todas as cores primárias mudaram, mas podemos fazer muito mais do que isso. Por exemplo, aqui temos nossa paginação. Há duas maneiras de descobrir quais variáveis devem ser alteradas. Você pode entrar em nossa pasta de módulos de nó, depois Bootstrap, SCSS e, em seguida, variáveis abaixo. E você pode fazer o Control F e procurar paginação. Em seguida, é um caso de copiar e colar toda essa seção na parte inferior de suas variáveis. O problema que você pode entrar para encontrar é quando essas variáveis se referem a outra variável que você não tem. Por exemplo, temos uma cor de link. Já temos branco no topo. Então isso não deve ser um problema. Mas, por exemplo, a cor do link provavelmente não tem isso no. Então, o que eu recomendo que você faça é destacar o lote inteiro e comentá-los, e depois descobrir qual parte você realmente deseja usar. Exemplo. Temos aqui o fundo do mouse de cinza 200 e cor da borda do mouse. Então, vou tirá-los. Quero que minha aquarela seja o fundo ômega 500 mais escuro, um pouco mais escuro aos 300. Então, vamos salvar isso. E agora temos nosso fundo escuro e o contorno, mais escuro novamente. A outra maneira que você pode fazer isso é procurar os documentos para a paginação do Bootstrap. Certifique-se de que você está no bootstrap de cinco páginas. É extremamente potente. Praticamente na parte inferior de cada página de documentos no Bootstrap, temos uma seção variável e você pode copiar e colar diretamente de lá. O problema com isso é, por exemplo, aqui temos cores vinculadas e você preparou e já tem isso em suas variáveis. Então, o que você precisa fazer é voltar as variáveis de bootstrap caem dos módulos de nó e fazer um Control F para a cor do link. E você terá que ir para o primeiro porque é aí que ele é definido pela primeira vez. E você terá que copiar e colar. Essa linha. Vai como acima. É aqui que começa a ficar um pouco confuso. E então podemos ter essa linha comentada. Mas, na realidade, você provavelmente não quer ter, se você está tentando alterá-lo, você pode alterar a cor do link ou se quiser torná-lo diferente, você pode simplesmente colocar outra coisa nessa linha. Por exemplo, você poderia apenas colocar uma cor lá, se quisesse, um Hicks e assim por diante. Caso contrário, você pode usar uma dessas variáveis aqui, sucesso primário, secundário, assim por diante. Ou se você quiser alterar todos os seus links de uma só vez, é apenas mudar a cor do link. Você nem precisa ter essa linha ativada porque nos preocupamos em mudar a cor do link. Você pode querer tornar esse secundário, por exemplo, se livrar da tag padrão. Aqueles. Então você deveria fazer isso. E vamos salvá-lo. E agora todos os nossos links estão usando a cor secundária. E a última maneira é usar folhas de estilo para que eu possa fazer estilos. Temos nosso CSS personalizado e temos widgets, por exemplo. E eu praticamente mostrei isso ao longo do, ao longo de quando estamos fazendo. Eu usei um tipo de estilo de feixe híbrido aqui. E vamos dar uma olhada rápida em nossos widgets. Então, digamos, por exemplo, eu quero ter menos preenchimento abaixo do cabeçalho. Vamos clicar com o botão direito do mouse e inspecionar e veremos como ele está configurado. E há nosso golpe. Esta é margem inferior lá, 0,5 rem abaixo do título. Então, vou fazer o fundo do traço de margem. Aponto para REM, vamos salvá-lo. E isso é apenas encolhido no outro lado pouco de espaço na página. Você pode querer se livrar de tudo isso para que possamos substituir os estados usando o Bootstrap três, mas atualmente você está substituindo por 0,2. Na verdade, podemos colocar 0 em um aquecimento 0. Você não usa uma unidade como Remy acabou de colocar em 0. E você verá que está encolhido novamente e nós nos livramos de todo o preenchimento. Não há nada entre o título e o conteúdo. E isso pode ser útil se você estiver tentando economizar algum espaço na página.