Crie sites rápidos com o Gerador de Site Estático e Bootstrap 5 (Introdução)

1. Introdução: Olá, meu nome é Shawn, e eu tenho ensinado web design e desenvolvendo sites há mais de 10 anos. E nos últimos dois anos me especializei em web design estático. Muitas pessoas que são novas no web design por si mesmas aprendendo sobre os conceitos básicos de sistemas de gerenciamento de conteúdo como WordPress e Joomla. Preciso descobrir que eles precisam pagar por plugins e temas caros. Seguindo esse caminho, você também terá dificuldade em desenvolver temas e modelos. Você também vai acabar com um site lento e muitas vulnerabilidades de segurança em potencial. Isso criará uma experiência ruim para o cliente, mas também fornecerá classificações de mecanismos de pesquisa devido a velocidades lentas de carregamento da página. Sites estáticos e Hugo oferecem sites rápidos e seguros que são fáceis de criar, baratos de hospedar e fornecem o potencial para bons rankings de mecanismos de busca. Como os algoritmos de SEO preferem sites que carregam rapidamente, este curso facilita o início com o web design estático. Ele orienta você para o processo de configuração do seu primeiro site dos EUA e também apresenta HTML e CSS usando o Bootstrap, você deve tomar essa classe se você for novo no web design estático. Também estaremos analisando o básico do Bootstrap. Portanto, você não precisa ter muita experiência com HTML ou CSS. O projeto para esta classe está construindo um site estático básico usando Hugo e Bootstrap junto com algum JavaScript básico. Espero que você goste deste curso tanto quanto eu gostei de criá-lo. Vejo você na primeira lição. 2. Primeiros passos: Vou mostrar todo o software que você precisa para este curso no próximo vídeo, este vídeo é sobre mostrar como acessar todos os arquivos que você precisará. Então, a primeira coisa que você precisará para algumas aulas são algumas imagens e você pode baixá-las aqui de um arquivo zip na seção de recursos. A única coisa que você precisa é uma cópia dos arquivos concluídos para cada lição. Deixei um link aqui para o repositório do GitHub. E quando estiver no repositório do GitHub, você terá que escolher o branch que você precisa para a lição específica em que você está trabalhando. E todas as lições têm ramos associados a elas. Depois de escolher a ramificação, há um botão de código e você pode baixar um arquivo zip. Essa é a maneira mais fácil de fazer isso. Se você optar por clonar com um utilitário get CLI ou GitHub desktop, certifique-se de excluir a pasta dot git. Mas eu recomendo que você apenas clique Download Zip, pegue essa pasta e, em seguida, você pode verificar minha versão do código para resolver problemas que possam surgir de outra forma, basta me deixar uma mensagem no seção de discussão. 3. Instalar HUGO e software necessário: Bem-vindo à primeira lição. Não vamos apenas instalar o Hugo, mas todo o software amarelo que você precisa para desenvolver sites com Hugo. Após a conclusão desta lição, você poderá instalar o seguinte software no Windows, Mac ou Linux. Em primeiro lugar, NodeJS. E você também instalará chocolate ao mesmo tempo se estiver usando o Windows. Então, observe atentamente para isso. A interface de linha de comando do Git. Você estará instalando o Homebrew se estiver usando Mac ou Linux, instalará o Hugo e vai Lang via chocolate ou homebrew, dependendo do sistema que você estiver usando. Código Visual Studio. E também o GitHub Desktop, que é um software opcional que você pode instalar e não está disponível no Linux para que torna muito mais fácil para iniciantes. Todos os links para esses pacotes de software podem ser encontrados na seção de recursos abaixo. A primeira coisa que precisamos fazer é instalar o Visual Studio Code. E a razão pela qual fazemos isso primeiro é porque na próxima etapa vamos instalar o portão. E dentro do instalador git, vamos escolher o Visual Studio Code como nosso editor de código preferido. Quem encontrou este link abaixo na seção de recursos da página de download do Visual Studio Code. Existem downloads para Windows, Linux e Mac. E Linux. Você tem que se certificar de que está tratando o tipo certo de instalador. Agora vou passar pelas etapas envolvidas na instalação do Visual Studio Code no Windows, mas as opções são muito iguais no Linux e no Mac. Gosto de ter a ação open with code para o menu de contexto do diretório. Assim, posso abrir uma pasta inteira de código e também o código de largura aberta para os menus de contexto de outono. Você pode abrir arquivo individual no VS Code. Agora precisamos instalar a interface de linha de comando do Git. Acesse o sistema de confirmação ou upload de seu progresso à medida que você escreve código em um servidor remoto. E ele acompanha todas as alterações feitas, desde que você confirme suas alterações à medida que as fizer. Se você estiver executando Linux ou Mac, é realmente importante que você instale bem nesta fase porque é necessário para Homebrew ou brew. Link abaixo para a página de downloads para a interface de linha de comando do Git, Vamos começar com o Linux. Agora. Cada distribuição diferente do Linux tem seu próprio instalador de pacotes. O mais comum é o Gerenciador de Pacotes Debian Ubuntu. Temos o código aqui. Você provavelmente terá que escrever pseudo antes desses comandos que você tem permissão para instalar o software. A maioria das contas de usuário não permite que você instale o software. Há um monte de exemplos diferentes aqui de diferentes sistemas e o código específico para que você possa instalá-lo com o gerenciador de pacotes deles. Se você estiver no Mac, é um pouco mais fácil. Diz aqui usar brew, brew, homebrew, tudo fabricado tende a depender do próprio Git. E se você não tiver sido armazenado, você pode ter alguns problemas para instalar o Homebrew nesta fase. Então eu posso recomendar. E deixei o link para esta página abaixo. No entanto, é bem simples. Se você estiver no Mac OS 10.9 ou superior, o que é uma adição do Maverik. Teríamos que fazer é executar o comando GIT no terminal. Se você não tiver sido instalado, ele será automaticamente quando você terminar de instalá-lo para verificar se foi instalado digitando GIT space dash, dash version. E se ele tiver sido instalado, ele lhe dirá qual versão você tem. Se você estiver no Windows, é um caso de baixar o instalador e executar o processo manualmente. Links abaixo. E agora vou passar pelo processo de instalação do Windows. Vou desmarcar, obter GUI e obter uma integração tímida com o Windows Explorer. Escolha Visual Studio Code. O editor de texto padrão. Vou deixar obter, decidir o nome da ramificação padrão. Vou permitir a execução da linha de comando, mas também a partir de softwares de terceiros. Eu escolherei a opção para usar o OpenSSH próprio empacotado. Usamos a biblioteca OpenSSL. Vou verificar como 0s e cometer terminações de gramado de estilo único. Algumas pessoas preferem fazer o checkout como estilo Windows. Commeta um estilo único. Eu prefiro fazer o checkout tão fácil, o que geralmente é o estilo único. Não tive conflitos no VScode. Use o console padrão do Windows, deixe o comportamento padrão git pull e use o núcleo do Git Credential Manager. E deixarei a configuração padrão para a tela para links de moda de outono e simbólicos. Para habilitar qualquer um dos recursos. Se você for um Windows, você pode pular esta etapa. Mas agora vamos instalar o Homebrew, e isso é para Mac ou Linux. E Homebrew é um gerenciador de pacotes que permite que você instale outro software que vamos usar neste tutorial. Vamos criar um link para o site da cervejaria. É brew.sh TSH. Quando você estiver na página inicial, eles têm um script aqui, e ele funciona tanto no Linux quanto no Mac. Então você tem que, antes de tudo, copiar esse script. E então mostrarei a instalação no Linux se você for um Mac, é exatamente o mesmo processo. Minha máquina Linux, vou colar nesse comando. Você se lembra que você deve ter ficado armazenado, que é o que fizemos na etapa anterior. E, em seguida, pressione Enter. Então você tem que confirmar. Verifique se as cervejarias instaladas corretamente. Você pode usar o comando brew. Doutor. Como você pode ver, parece que a bebida não está no caminho. Consertando isso. Vou copiar e colar em um comando e vou deixá-lo na seção de resultados para você abaixo. E eles devem adicionar brew ao arquivo de caminho dos shells. Vamos dar a ele um cara agora. Vá Bruce trabalhar. Então, agora que você instalou o brew, se você é um usuário do Linux ou Mac, agora você está pronto para instalar o Node.js. Se seu usuário do Windows, você não precisa preparar, mas estará instalando trochlear como parte desse processo. Portanto, certifique-se de prestar muita atenção às etapas. O link abaixo para este endereço. E é para instalar o Node.js com gerenciadores de pacotes. Se você for até o macOS, há duas opções que você pode usar curl, o que é um script bastante longo. Você quer copiar e colar, tudo bem. Mas a outra opção é usar o Homebrew, que você já deveria ter instalado. E temos que fazer é digitar no nó de instalação de fermentação. E isso o guiará durante o processo. Se você estiver no Linux, há muitas opções diferentes Ele, dependendo da distribuição que você está usando, você terá que ir cuidadosamente para o link correto e instalá-lo especificamente para sua distribuição. Agora vou passar pelo processo de instalação do Node.js com o windows a partir da tela principal de download. Vou baixar o instalador do Windows. Você pode clicar no botão Windows ou no Windows Installer MSI, podemos baixar a versão de 64 bits. Pode haver alguns usando 32 bits. O EBIT, é mais provável que você precise da versão de 64 bits. Por esse motivo, basta clicar no botão do instalador do Windows. Agora vou mostrar as opções que você precisa selecionar durante todo o processo de instalação. Tudo bem. Portanto, concorde com o contrato de licença. Vou escolher a pasta de instalação padrão, componentes padrão. E então eu tenho que marcar esta caixa aqui, e isso é realmente importante. Também vamos instalar chocolaty. Vamos clicar em qualquer chave para continuar com este script de instalação. Sempre que ainda é Hugo e vai colocar e isso é para Linux, Mac e Windows. curling será necessário mais tarde se você estiver usando módulos Hugo. E os modelos Hugo são realmente exigidos por alguns temas. É muito importante que você instale colocação no momento, ao mesmo tempo em que você instala o Hugo. Se você estiver no Mac OS, você pode usar o comando brew install Linux, você pode usar o mesmo comando porque deveria ter instalado o brew também. Mas a janela é um pouco diferente. Vamos usar chocolate e isso é algo que você deveria ter instalado de volta nas etapas de instalação do Node.js ao redor do Windows para começar, seria bastante rápido, e então eu vou execute a opção Linux ou Mac depois disso. Então, o comando para chá de chocolate é chocolate. E desta forma instantâneo instalando. Então, executamos a instalação e o aplicativo é Hugo estendido. Você poderia instalar o cara dele de volta. Existem outros recursos que você provavelmente precisa mais tarde que estão no Hugo estendido, como o suporte SAS lhe dará uma confirmação e você pode fazer um para todos. A próxima coisa que você terá que parar é a linguagem Go e isso é útil para módulos Hagen. Então estamos no Chaco instalar go Lang. Mais uma vez, você terá que fazer um 44, exceto todos os go line terminaram de instalar você. Há uma mensagem explicando que as variáveis de ambiente, incluindo o caminho do alterado à medida que instalamos software, e há um comando lá para atualização, mas eu peguei normalmente ter problemas com isso. Então, vou abrir um novo PowerShell. Em seguida, o novo PowerShell, vamos verificar se o Hugo estendido e a colocação de ouro foram instalados. Instalamos estendido com o comando ainda é Hugo. E podemos fazer a versão Hugo para verificar a versão. Como você pode ver, temos o Huo estendido instalado e, para girdling o comando, eles vão então versão. E podemos ver que temos a linguagem Go mais leve instalada. Linux ou Mac. As instruções a seguir serão idênticas para você. No Linux e no Mac, o comando que vamos usar é brew install. Tudo bem, vocês foram instalados até cresceram. Agora vamos instalar o go. E o comando para isso é brew install go. E essa é a linguagem Go que precisamos para executar módulos Hugo, que são usados por temas de quantidade e você provavelmente estará usando você mesmo também. Caras instaladas. Agora vamos verificar nossas instalações Hugo e ir. Podemos executar a versão Hugo. Você pode dizer lá por padrão. No Linux e no Mac, ele foi estendido estes instalados. Portanto, é um pouco diferente da instalação do Windows. Em seguida, vá para a versão para verificar o idioma Go. Temos, a partir de agora, tenho a linguagem Go atual instalada. A última etapa é instalar o GitHub Desktop. É opcional, mas é altamente recomendado, embora esteja disponível apenas para Mac e Windows, facilita muito o processo de uso. E é algo que nos referiremos em vídeos futuros, onde estou usando a marcha como todos os pacotes de software. Nesta lição, deixei o link para o site, a página de downloads na seção de recursos abaixo. Após a instalação do GitHub Desktop , você terá que fazer login com sua conta do GitHub.com. Você será redirecionado para o navegador de largura para fazer login na sua conta do GitHub, que você pode se inscrever gratuitamente. Uma coisa que você precisa verificar é que visual Studio Code está configurado como seu editor de código, vá para Arquivo e depois Opções. Na guia integrações, certifique-se de ter escolhido o Visual Studio Code como editor externo e você escolheu o shell de sua escolha. Vamos ensinar a primeira lição. Parabéns por chegar até aqui. Estou ansioso para vê-lo na próxima lição em que veremos começar a usar Hugo e fazer seu primeiro projeto Hugo. Você teve algum problema com qualquer etapa nesta lição, por favor, volte e verifique novamente. Tenha sucesso. Há uma seção de discussão abaixo e entrarei em contato com você e o ajudarei assim que puder. 4. Configurar projeto HUGO no Código VS: Nesta lição, vamos analisar a criação de um projeto Hugo do zero. Vocês altamente personalizáveis, mas infelizmente fora da caixa, não lhe dá muito para trabalhar. Depois de concluir esta lição, você poderá configurar um projeto Hugo sem depender de um tema. E você poderá produzir texto básico através de acessar nosso arquivo HTML. A primeira coisa que vamos ver é o comando Hugo novo site. A primeira coisa que você precisa fazer é começar com uma pasta vazia. E dentro dessa pasta, se você configurar o Visual Studio Code, da maneira que eu instruí na lição anterior, você poderá clicar com o botão direito do mouse e abrir com código. Você pode receber uma mensagem perguntando se você confia no autor das quedas e precisa clicar em Sim, caso contrário, você não receberá todos os recursos do Visual Studio Code. Em seguida, vamos executar um novo terminal dentro desse terminal. Primeiro de tudo, vamos verificar se o Hugo foi instalado corretamente. E podemos fazer a versão Hugo. Como você pode ver, tenho a versão 0.89 estendida instalada no windows. Para criar um novo site, temos que usar o novo site Kingo e você precisa especificar o diretório que eu quero creditar na pasta ou diretório atual. Então, usarei barra de pontos para indicar isso. Agora podemos ver que estamos prontos. Vocês nos perguntando se gostaríamos de baixar o tema e colocá-lo na pasta de temas, ou adicionar algum conteúdo. E isso nos dá uma dica de que podemos usar um novo comando Hugo para criar conteúdo. E vou te mostrar isso em breve. O próximo que temos que fazer é criar alguns modelos de layout. Agora, infelizmente, ele não vem com nenhum desses fora do livro, para criar nossos modelos de layout. O que faremos, tornaremos um novo terminal e teremos nova fama. E vamos chamá-lo de temporário, fechar o terminal. E se você olhar em sua pasta de temas, verá que temos uma pasta temporária e ela criou um tema básico para nós. Eles não podemos fazer é tudo na pasta Layouts. Clique nele e nós o arrastaremos para nossa pasta Layouts. E então iremos e excluiremos essa pasta Temp. Vamos dar uma olhada rápida. Veremos como esses funcionam. Então, vou começar com a base off dot HTML. Esse é nosso layout HTML básico. Isso é o mais alto da hierarquia. É onde tudo começa. Na cabeça parcial. O que isso faz é que estamos olhando para os parciais que aguentam. Ele vai puxar o header.html, esta unidade de contagem, nada lá dentro, mas eles serão puxados para a nossa base. Em seguida, vamos puxar nosso cabeçalho. E então temos o bloco principal, que na verdade configuramos em nossa lista, simples ou índice sobre o qual falamos em um momento. E então temos nosso rodapé sendo puxado agora marcado para fazer algumas alterações nisso para elevá-lo aos padrões. Então, se colocarmos um ponto de exclamação, diremos que é um m e abreviação, podemos clicar em Tab. Você notará que temos nossas metatags, temos nosso conjunto de personagens, UTF-8. E isso é muito importante porque isso significa que você pode acessar basicamente qualquer personagem em um idioma. Você não teria nenhum erro detectado. Pensamos o que nosso Internet Explorer e a tag de compatibilidade de borda, qual a tag de largura da janela de visualização padrão, que é muito importante para sites responsivos. O que faremos é pegar todas essas meta tags. Vamos colocá-los na cabeça para nos tornarmos à frente. Estúpido do antígeno. Vai pegar o título, estourar isso abaixo. Você notará que temos nosso idioma padrão. Vamos cortar isso e vamos colá-lo na tag HTML por enquanto e voltaremos a isso um pouco mais tarde. Em seguida, excluiremos todos os meus críticos. Vai salvá-lo. Vou remover essas div ao redor do bloco principal. Em seguida, pegaremos todo o conteúdo, cortamos isso e o colocaremos no header.html. Vamos nos livrar desse espaço. Podemos remover esse recuo duplo. Salve isso. Dê uma olhada em como nossa página inicial, nosso HTML será inserido no bloco principal. Abra o index.html, colocando chaves duplas e vamos definir principal, obtendo vírgulas duplas invertidas. Em seguida, vamos colocar uma etiqueta final. A primeira coisa que vamos exibir é o site de pontos com um título de ponto S maiúsculo. E ele vai puxar o título do site. Então, faremos algumas chaves duplas novamente e faremos conteúdo de pontos com um C. O que isso fará é quando criarmos algum conteúdo em um momento, ele irá puxar esse markdown e ele irá convertê-lo em HTML para nós. novo comando Hugo cria conteúdo para nós e usa modelos para que novos conteúdos. Então, vamos dar uma olhada em como ele funciona. De volta quando criamos o novo site. Você vai nos dar as dicas de que podemos criar novo conteúdo com o novo comando Hugo. Agora, a maneira que funciona é isso. Olha na pasta arquétipos, e ele usará esse arquivo, o ponto de falha MD como um modelo para criar nosso novo conteúdo. Agora, antes de prosseguirmos, há uma coisa que eu gosto de mudar e isso é que vou ter que mudar o rascunho de verdadeiro para falso para que cada página que criarmos seja ativa. Caso contrário, você terá que alterá-lo manualmente do rascunho verdadeiro para desenhar, falso para que ele seja exibido. Então eu salvei isso nos arquétipos padrão. Mas o arquivo md, eu vou executar, Hugo sabia. Vou seguir na caixa é sublinhado de barra index.html e isso é MD de markdown. Então execute isso. Em seguida, daremos uma olhada em nossa pasta de conteúdo e você verá que temos um ponto de índice MD. Infelizmente, por ser o arquivo de índice no diretório raiz, poucos caras não sabem qual é o título. Por enquanto, vamos chamá-lo de casa. Vamos aparecer em algum conteúdo. Agora precisamos fazer algum conteúdo. Vou fornecer algum conteúdo de espaço reservado e uma versão muito popular do conteúdo de texto de espaço reservado. Ele se chama Lorem Ipsum tem esse embutido, mas infelizmente, por padrão, a versão atual do Visual Studio Code emit não está habilitada para queda de redução. Agora podemos consertar isso. Se formos ao menu Arquivo , chegaremos às preferências e configurações. Assim, você pode ver que o atalho é Controle mais vírgula ou no Mac seria vírgula do Posto de Comando. Abra isso, vá para Extensões. E a primeira coisa que você precisa fazer é se você olhar em excluir idiomas por padrão emit exclui markdown. Então, vamos escolher as regras extras que temos para definir mais algumas opções, no entanto, porque teremos alguns problemas. Basta rolar para baixo. Ele diz mostrar abreviação expandida. Precisamos mudar isso para em folhas de estilo e maquete. Eu só diz lá que só mostrará abreviações expandidas em HTML, Hamel, Jade slim XML, excelente, CSS, SCSS, SCSS menos instalações. Mas não fará nenhum rebaixamento e esse é o comportamento depois. A outra coisa que temos que fazer é acionar a expansão na guia. Vamos salvá-los clinicamente para que possamos fechar isso. E agora dentro do arquivo R Markdown, podemos testar isso se ele estiver tocando em dívidas e, em seguida, tab, você verá emitir isso funcionando. O que vamos fazer é estourar alarme. E depois 100. E guia. Você verá que é crédito de 100 palavras para nós. Em vez disso, o que podemos fazer é tentar o Lorem 50 e executaremos isso duas vezes. Coloque um espaço entre os dois para criar um parágrafo, excluiria esse espaço extra no final. Embora seja uma boa prática ter uma nova linha no arquivo. Vamos salvar isso. Agora vamos ver como habilitar o conteúdo HTML no Markdown. Por padrão, ele não permite que você coloque HTML na boca para baixo como um recurso de segurança, mas ocasionalmente você não será capaz de alcançar o que deseja apenas nós temos a sintaxe Markdown, que veremos em um momento. Isso permitirá que você coloque conteúdo HTML também, misturando seu markdown. Então, se você olhar em seu projeto na parte inferior, verá um arquivo de configuração. Agora, a ópera FAT é YAML. É muito mais fácil para iniciantes. Então, renomearemos esse arquivo YAML de dois pontos. Então teremos que mudar o formato dele. Então, a maneira mais fácil de fazer isso é destacar o sinal de igual e o espaço antes dele. Clique com o botão direito nele, altere todas as ocorrências. Backspace e altere isso para dois pontos. Agora, no YAML, você não precisa cercar strings com aspas e detectadas automaticamente para que possamos remover essas aspas. É aí que o cara, vamos agora habilitar o Markdown. É um pouco complicado. A primeira entrada que temos que colocar é Mockup. Em seguida, pressione Enter e recuou uma guia. Não precisávamos colocá-lo em uma entrada para Goldmark. Goldmark é o renderizador de markdown padrão atual que Hugo usa. Em seguida, colocamos no renderizador o cólon e, em seguida, mais um recuo. E este é o importante, inseguro. Verdade. Tudo bem, então salve isso, volte para o seu index.html e vamos colocar algum markdown. Markdown permite que você crie cabeçalhos e modifique seus textos. Por exemplo, negrito, itálico, crie listas e assim por diante de forma simples e sem HTML. Vou fornecer este link. Por que os recursos do curso? Vamos dar uma olhada em alguns desses agora. Por exemplo, tentar fazer alguns títulos usará conteúdo em negrito ou itálico Abeba. E já temos o título do site. Então vamos fazer um cabeçalho H três, fazer um tempero de hashes T3 e, em seguida, chamaremos de texto de espaço reservado. Você deve fazer uma interrupção nessa batida. Então, o que veremos algum negrito e itálico. Você tem que ter cuidado. Você não deveria usar negrito para títulos. Pessoalmente, habilitei um dicionário no código VS e criei um cabeçalho usando negrito. Isso me dirá que isso é um problema. Se eu, por exemplo, onde eu texto em negrito, pare de uma linha, tudo bem. E então, para itálico, apenas fazemos a única estrela. Seja texto em negrito com asteriscos duplos. Então vamos dar uma olhada. Você pode dizer que eles vão apenas fazer uma inspeção. Podemos ver que temos um CH3. Fizemos as 3,5 músicas e ele conseguiu automaticamente criar IDs para seus títulos para você. Ele tira um pouco ****** e minúsculas tudo para você e coloca traços no caso de peice do ******. Vocês criaram automaticamente um parágrafo para nós e é creditar algum texto forte ou em negrito e, em seguida, credita o texto itálico com a tag BEM. São incrivelmente tags de parágrafo para nós novamente, para todas as seções de textos e isso é tudo através de markdown em Hugo. Agora que temos a configuração básica, vamos executar o servidor de recarga ao vivo integrado para verificar se tudo está funcionando da maneira que pretendemos. Vá para o seu terminal e digitando Hugo server, pressione Enter. E vamos dar uma olhada no que ele diz. Então podemos dizer que ele foi construído para vê-lo. Existem quatro páginas que ele foi construído. Um sitemap, que entraremos em outra lição e aguardando mudanças. Portanto, ele tem recarregado ao vivo ativado. Há nosso arquivo de configuração que acabamos de modificar. Quer um ambiente de desenvolvimento que esteja sendo executado em aleatoriedade rápida. E se você usar o comando, vocês estão com o sinalizador de renderização rápida desativado. Ele reconstruirá todos os arquivos quando detectar uma alteração. Então, se você controlar, clique nesse link. Você pode abrir a página em um navegador. Aqui está nossa página no navegador teria renderizado o nome do site. Temos nosso texto de dois espaços reservados envolvido, curvado e fora Lorem Ipsum. Se clicarmos com o botão direito do mouse e inspecionarmos, vamos dar uma olhada no HTML que vocês geraram. Então, temos nosso batendo dois e uma tag h2. E você gera automaticamente IDs para nós para que possamos direcioná-los com links. Está em parágrafos de crédito para cada parte do markdown e é usado para essa frase lá. Vou configurar alguns parciais e algumas tags semânticas para envolvê-las. De volta a ser vital para o HTML. Nosso bloco principal no Maine e hit tab e isso lhe dará a tag semântica principal e o que isso faz, ele diz aos mecanismos de busca e possivelmente roteiristas também que eles estão olhando Conteúdo principal do ISI na página. Nós faremos é pelo nosso cabeçalho, colocamos uma tag oculta e isso permite que o mecanismo de busca anote que é o cabeçalho e é totalmente os títulos e possivelmente alguns links em maio. Então, para a foto, colocaremos uma etiqueta de rodapé. Vamos arrastar isso para lá. Em seguida, abra o cabeçalho e o footer.html. Por enquanto, vamos colocar um pouco de textos perto do textos perto texto do cabeçalho no rodapé que diz que se ajustaria para identificar isso. Sim, na verdade está funcionando. Salve tudo isso e volte ao seu site. Vamos dar uma olhada. Como você pode ver, temos nosso cabeçalho que está sendo puxado e nosso rodapé, obviamente a formatação não é onde gostaríamos, mas isso é para vídeos subsequentes. De volta à base do HTML, vamos corrigir essa tag de idioma. O que faremos, tiraremos o EN, colocamos algumas chaves duplas e faremos linguagem de pontos. Dot lang e isso irá puxar o código de idioma configurado assim. E para alterar sua configuração de idioma, bombeio seu config.xml. A configuração é o conteúdo padrão com linguagem C maiúscula. Por exemplo, um site da UA para em inglês australiano tem que estar em minúsculas o código de idioma, você não pode usar maiúsculas totalmente os últimos dois caracteres. Em seguida, abra o quadril parcial em termos do título. Se fizermos o título do ponto com um T maiúsculo, obteremos o título da página aparecendo. Vamos dar uma olhada. Você vê lá em cima na guia que temos Início aparecendo agora podemos fazer muito melhor do que isso. Faremos ponto, ponto, título, depois um traço e, em seguida, o título. Você pode ver outros. Mais um passo que podemos fazer, e se for a página inicial, removeremos o traço para casa. Se o título de ponto, ponto, ponto. Ela tem um espaço lá. Vamos colocar nossos aparelhos encaracolados e faremos, se não estiver em casa. Em seguida, temos o que é exibido. Se não estivermos na página inicial e colocaremos a marcação. A casa retorna é verdadeira? Se estivermos na página inicial. Lá vai você. Não estamos exibindo o título da página. Se estivermos na página inicial, basta inspecionar nosso HTML. Vai dizer que eles são o idioma é o padrão de inglês dos EUA, inglês. Aderindo o arquivo config.xml. Você pode mudar isso. Por exemplo, estou na Austrália, então vou mudar isso pessoalmente para E na UA ou poderia usar o ENG ser para a Grã-Bretanha. Você pode ver lá vocês atualizaram o HTML. E há uma última coisa que precisamos fazer e isso está correto. Alguns arquivos CSS e JavaScript externos. E a razão pela qual fazemos isso é muito mais fácil depurar seu código se for um arquivo externo. Se você usar arquivos externos para CSS e JS, por exemplo, se você estiver usando o Chrome, ele informará a linha exata do arquivo onde o seletor CSS está ou o bug no arquivo JS é deslizado através disso. Agora, vamos entrar na pasta estática. Pensei na foto estática ou pode criar uma nova pasta chamada JS. Dentro disso, criaremos um arquivo chamado main.js. Voltamos para a pasta estática e criamos outra pasta dentro da chamada CSS. Dentro disso, vamos chamá-lo de CSS de ponto principal. Então, pode ter falso. Não vamos colocar nada neles por enquanto. Temos que importá-los, entrar em Layouts, depois parciais e depois header.html. Precisamos usar a tag de link para importar a folha de estilos. Se digitarmos o link e ele virá com suas abreviaturas e a melhor para nós, podemos fazer para usar Lincoln light. Mas se usarmos CSS de dois pontos do link, ele incluirá automaticamente o trilho da folha de estilos e também incluirá um nome padrão para a folha de estilos. Agora não vamos usar isso. Vamos fazer backspace e usar CSS de barra, barra main.css. E é aí que nossos arquivos são definidos. A pasta estática não é exposta no site compilado. Só preciso das quedas dentro da pasta estática. Obrigado. Obrigado. Temos que fazer é importar o arquivo JavaScript. Você poderia colocá-lo na foto. Mas o problema é que se você olhar na base desse HTML, veremos nosso rodapé parcialmente fica dentro das tags de rodapé. Não queremos que nossa importação de JavaScript viva nisso. O que faremos, faremos uma nova parcial, chamaremos essa nova foto de script parcial. E usaremos essa filmagem apenas para scripts. Dentro desse roteiro para eles, faremos nosso roteiro importante. Então, se digitarmos script e depois tab, não é exatamente onde depois precisamos definir o tipo de origem. Você colocou uma colônia. Você pode até clicar em Tab agora porque é apenas uma opção disponível, podemos digitar SRC ou parte dele acabará com uma fonte para o script pode ser slash js slash main.js. E vamos salvar isso. Agora precisamos importar essa parcial, então voltarei à nossa base abaixo do rodapé. Faremos nossas chaves duplas e função parcial. E, em seguida, rodapé Script. Você deve fornecer a parada completa para que você possa acessar todos os contextos do site dentro disso. Marshall. Vamos executar o servidor e verificar se tudo funciona. Então, vamos digitar o servidor do vocês. Então vamos controlar. Clique no link. De volta a um layout de site realmente básico. Clique com o botão direito e inspecione Primeiro de tudo, vá para a cabeça. Você pode ignorar esse primeiro script porque essa é a biblioteca que carrega o servidor Hugo. Mas então vamos rolar para baixo e você verá que temos o link para o nosso arquivo CSS. E se continuarmos rolando para baixo, você verá abaixo do rodapé que temos nosso arquivo JS. Se entrarmos em fontes, você dirá que os dois arquivos, ambos são puxados para o site, estão vazios no momento, mas vamos adicionar conteúdo a eles em lições posteriores. Muito importante. Você foi bem-sucedido em cada etapa deste projeto. Antes de seguir em frente, se você não tiver certeza, volte e verifique novamente. Caso contrário, há um link abaixo. Se as discussões, farei o meu melhor para ajudá-lo assim que puder vê-lo na próxima lição. 5. Adicionar Bootstrap 5: Bem-vindo à próxima lição. Esses campos, serão muito mais curtos do que a última classe. Agora é importante que você entenda tudo na última aula se ainda tiver alguma dúvida e não conseguir resolver isso. Há uma seção de discussão abaixo e farei o meu melhor para voltar para você assim que puder. Após a conclusão desta classe, você poderá adicionar as importações de Bootstrap, CSS e JS ao seu projeto Hugo. A primeira coisa que vamos fazer é acessar o site Bootstrap cinco e encontrar as informações. Eles precisam ter muito cuidado porque se você usar uma pesquisa no Google, você pode acabar no site Bootstrap quatro ou três. E ao trabalhar com o bootstrap cinco, que é uma versão atual, temos um documento e a introdução, você verá que ele diz que há um código CSS aqui que você pode sair da CDN, que é a maneira mais fácil de executá-lo. O mesmo com o SIG. Você pode acessá-lo a partir da CDN deles. Agora, se continuarmos rolando para baixo, você verá isso como um modelo e explica como todas essas importações se encaixam no arquivo HTML mais amplo. Já configuramos esse arquivo. Nós apenas pegamos o componente CSS e o colocamos dentro da cabeça. Então vamos pegar o componente GPS e colocá-lo no rodapé. Começaremos com o componente CSS copiará o comentário também. É um lembrete do que é. Vamos copiar isso. Em seguida, entraremos na pasta Layouts e nos parciais, e vamos para a nossa cabeça. Em seguida, abaixo nosso link para nossa folha de estilos. Os estilos personalizados colarão no link do Bootstrap CSS phi lá CD. E vamos salvar isso. Em seguida, copiará todo o código JavaScript, incluindo os comentários. Em seguida, iremos para o nosso script food ou abaixo do nosso arquivo JavaScript personalizado. Colaremos no código deles e podemos destacá-lo e usar a guia Shift para remover esse recuo. Existem duas opções. Vamos apenas com a primeira opção por enquanto. Vou remover todo esse tempero extra. E se você ainda não tiver o servidor Hugo funcionando a partir do último vídeo, o terminal bombeando o servidor hago e executa esse controle. Clique no link. Em seguida, verificaremos se tudo está funcionando. Então vamos clicar com o botão direito do mouse e inspecionar a cabeça. Você pode ver que colocamos nosso link para o arquivo CSS e, em seguida vamos rolar para baixo até abaixo do rodapé, e você verá que também temos o arquivo JS. É isso para este vídeo. Prometi que será um curto. Lembre-se de que se você tiver alguma dúvida, há uma seção de discussão abaixo. Caso contrário, verei você na próxima lição. 6. Página inicial com grade, botões e design responsivo: Bem-vindo à próxima lição. É aqui que começamos a fazer conteúdo com Hugo e bootstrap. Você terá que baixar os arquivos desta lição na seção de recursos, você pode acessar a imagem que vamos usar a partir da foto estática. Vou entrar nisso mais tarde. Se você tiver algum problema, você sempre pode olhar meu código nos arquivos que você estará baixando. Depois de concluir este vídeo, você poderá usar o seguinte bootstrap, cinco classes, grade, botões, classes de imagem responsivas e espaçamento. E você poderá combinar esses elementos para criar conteúdo para sites. Você também poderá usar declarações condicionais se fôssemos. Aqui. O primeiro passo, bootstrap cinco grade. Bootstrap usa um sistema de contêiner, linha e coluna, e você precisa usar esses elementos nessa ordem. Então, vamos entrar em nosso projeto, quem configurará esses três elementos? E vamos começar. Abra a pasta Layouts e o índice ou HTML. E você verá nas lições anteriores nós, em vez disso, o título do site e o conteúdo do arquivo markdown. Vamos deixar isso por enquanto. Vou trabalhar abaixo dele. Vamos começar com nosso contêiner. Então, digitamos div dot container e hit tab, e isso criará a div para você com essa classe automaticamente pressionando Enter e, em seguida, div dot rho em. Agora, precisamos chamá-los. Então, se você digitar div dot col, podemos conseguir isso, mas não queremos apenas uma única coluna, queremos duas colunas que estejam uniformemente espaçadas. Agora, para conseguir isso, fazemos col dash seis. Mas em telas pequenas, não queremos dividir a tela pela metade. Queremos dividi-lo apenas na tela tão grande, definida como grande ou maior. E vou te mostrar o que significa grande em um segundo. Então vou chamar o Dash, traço seis. Queremos dois desses. Você pode se repetir ou usar a estrela t2 e isso é para imagem. Em seguida, ele vem instalado por padrão no Visual Studio Code. Vou clicar em Tab. Então anti, e eu posso inserir meu conteúdo lá. E então o mesmo para o segundo. A Internet para o nosso conteúdo vai funcionar. Agora temos uma linha e temos duas colunas e uma largura uniformemente uniforme. Mas somente na tela que a classe tem maior ou maior. Vamos dar uma olhada nos pontos de interrupção na média Bootstrap. Estou aqui na página de pontos de interrupção do Bootstrap em layout. Se você rolar para baixo, verá pontos de interrupção do SAM para pequeno, médio, grande e excelente XT Excel. Então, na tela para a tela sem linha , dois pixels de largura ou maior será dividida em duas com duas colunas. Se for menor que isso. Só teremos uma coluna. Então deixe-me empilhar verticalmente. A próxima coisa que vamos fazer é colocar uma imagem. Você queria essa coluna. Vamos usar a classe de imagem responsiva de cinco bootstrap para isso. Estou sob o, na seção de conteúdo dos documentos do Bootstrap, quero dizer imagens. E ele salva se usarmos a classe de unidade de fluido IMG dash precisa um ponto que informando se você está usando o arquivo CSS CSS, ele atribuirá automaticamente as propriedades de max-width 100%. Sua imagem mudará sua largura dependendo da quantidade de espaço disponível para ela. E a altura será automática e isso será relativo à largura. Vamos dar uma chance a isso. Na primeira coluna, vou tocar no IMG. E depois Tab. Você nos dará uma fonte, que faremos em um momento e um texto alternativo em um momento. Primeiro de tudo, vamos olhar para a classe. Classe é igual a vírgulas invertidas. E se ensinarmos no IMG dash fluid, isso redimensionará automaticamente a imagem para nós. Agora, em termos da fonte, você pode baixar abaixo os arquivos para este vídeo, mas concluído. Caso contrário, há o link para a imagem em si. Na pasta estática. Crie uma nova pasta chamada IMG. Em seguida, dentro dessa pasta, você terá colar na imagem que você pode realmente colar do seu File Explorer ou do código Studio individual do Finder. Você precisa clicar com o botão direito do mouse na imagem e ir para encontrar na pasta e colá-lo lá. Tenho minha imagem, cole-a. Não vou voltar para a fonte. Como discutimos no vídeo anterior com importações de CSS e JS, não fazemos referência a uma pasta estática. São as pastas dentro da estática que aparecerão em seu site compilado e desfazer barra IMG barra Temas Bootstrap ponto PNG. Para o texto alternativo, vou chamá-lo de temas Bootstrap. Vou adicionar mais algumas aulas. Primeiro de tudo, vou adicionar uma classe do bloco, que significa bloco de exibição. Vou usar a ordem MX dash. O que isso faz é criar uma margem em ambos os lados, x, ou seja, o plano horizontal. Imagine em ambos os lados da sua imagem e ela está em proporção uniforme do que isso centra sua imagem, mas você também precisa usar a classe de bloco de exibição. Tudo isso não funcionará. Agora podemos criar alguns acertos e conteúdo em nossa segunda coluna. Segunda coluna. Vou digitar a altura um. E, em seguida, guia. E dentro disso vou importar o título desta página. Dentro dessa batida em vez de importar o título do site ou o título da página, vou tentar o parâmetro personalizado, que pontuamos parâmetros para parâmetros personalizados. E vai estar batendo. E então vou fechar meus colchetes e mostrarei como inseri-lo em suas páginas em um momento. Então, abaixo do H1, vou criar um parágrafo com P. E dentro disso vamos colocar nosso conteúdo para que possamos simplesmente cortar e colar conteúdo nesse parágrafo. E vou excluir esse título de ponto, ponto, ponto do topo. O que vai acontecer aqui? Nós dividimos nossa página pela metade com nossas duas colunas. Vamos ter nossa imagem à esquerda e agora marcar à direita. Se estivermos em uma tela pequena e grande, seja ela muito pequena, pequena, média. Vamos ter a imagem no topo, o texto abaixo na ordem do HTML que definirá que com o Bootstrap, sempre temos que escrever HTML e CSS sem dispositivos móveis primeiro, que é a forma como está alinhado aqui. Temos nossa foto primeiro e ficamos em segundo. Em seguida, podemos ajustar o layout para telas maiores, acender Isso ajuda com SEO, otimização de mecanismos de pesquisa e você terá uma classificação muito melhor no Google se você estiver projetando seu site para se adequar ao celular primeiro dispositivos, o que eu quero que a segunda coluna exiba primeiro nas telas que LIGO maior. E a maneira como fazemos isso, sua aula de música de Bora, dash, LG, dash, primeiro, uma tela para o l-o-g ou maior. Esta coluna aparecerá primeiro. Vamos dar uma olhada na inserção de alguns botões. Agora. Abaixo do parágrafo que acabamos de inserir, vamos criar um espaço em branco. Stephen vai parar essa luz apagada, apertar Enter, e então vamos fazer um botão. Agora. Ele não precisa fazer isso, mas é fácil o ID de consulta especificar o tipo de botão para ser um botão padrão. Não importa muito no momento. Mas se esse fosse um formulário que seria enviado por padrão no meu botão de colocação superior, estamos nos livrando desses comportamentos não são obrigatórios, mas ele escreveu o dia todo para fazê-lo. Agora, por padrão, esse botão não exibirá da maneira que queremos. Então, temos que adicionar a classe igual à classe bootstrap para o botão btn. Vou copiar e colar tudo o que acabamos de fazer abaixo. Agora, o primeiro botão, vamos torná-lo um botão primário por padrão será azul, então não precisávamos adicionar BTN primário. O abaixo, vou torná-lo um botão secundário, mas também descrito por padrão que será cinza. Então colocamos btn dash secundário porque eu queria que fosse um botão de contorno, não um sólido. Tenho que colocar a palavra descrita em primeiro lugar. A próxima coisa que vou fazer é fazer esses botões grandes. Mantenha pressionado o botão alt e clique em ambos os botões e colocando BT em, dash, LG e um tempero. Para o texto do botão e o link. Vou me referir a alguns parâmetros personalizados no markdown de páginas. Então, para fazer isso assim como nos referimos, ponto params ponto Hitting, ele começou a colocar alguns aparelhos encaracolados e será pontos params com um ponto P maiúsculo BTN um para botão, um ponto txt. Vou te mostrar como configuramos isso em um minuto. Em seguida, copie e cole isso no botão abaixo. E eu mudo para bater em. Em seguida, copie e cole isso novamente. E vamos colocar um link, então o HREF é igual a comentários incorporados. Em seguida, eu o mudo para URL. Vou copiar e colar. Esse lote inteiro será batido em um URL de dois pontos. Isso está ótimo. Agora temos que configurar o botão de conteúdo pressionando, um botão txt ponto para ponto txt botão, um botão URL para URL, entrar no conteúdo e, em seguida, abrir o índice ponto md. Já tenho algum conteúdo aqui. Vamos mudar isso em um segundo. Primeiro de tudo, vamos colocar nossa cura e ter parâmetros personalizados. Tudo o que você precisa fazer é apenas no topo e marcar esse título. O cabeçalho desta página. Vamos fazer isso primeiro Bootstrap. E procurei. Então eu vou remover um desses parágrafos porque é um pouco de texto demais para o que estamos fazendo. E vou me livrar dessa ousada parceria metálica. Livre-se dessa marca lá em baixo também. Os botões abaixo do cabeçalho, vamos colocar mais alguns parâmetros personalizados e faremos BTN um dois-pontos em uma guia. E não enviaríamos texto, acho que para o primeiro botão será vinculado ao URL de cinco documentos do Bootstrap. Vamos colar isso. E para espancar também, estamos colocando texto que será vinculado aos documentos e ao ARRA. Vamos colar isso . Vamos salvá-lo. Vamos nos livrar dessa linha extra na parte inferior primeiro, você deve ter apenas uma linha em branco e inovar, marcar e cair. E então iremos para o terminal, o novo terminal e o servidor moron controlarão clique no arquivo. E falaremos do servidor ego e, em seguida, controlaremos o clique no URL. Você pode ver que ainda temos um cabeçalho e rodapé fictício, mas vamos deixá-los para mais tarde. E, por enquanto, temos nossa batida só irá inspecionar. E como você pode ver, agora que a página está estreitada, ela tem a imagem na parte superior, o conteúdo na parte inferior. E à medida que o ampliamos até o ponto em que se torna maior do que o grande ponto de ruptura você pode vê-lo, então coloca a imagem à direita, que é o inverso do que é o HTML e coloca um texto e levante. Então, se olharmos no HTML, temos nosso H1. Então, abaixo disso, o parágrafo que fizemos, hey pessoal, em vez disso, esse conteúdo para nós a partir do arquivo markdown. Então vá para a nossa div e temos nossos dois botões. O primeiro é azul e sólido, que é o BTN primário, também grande, e o segundo é um cinza oco e isso é chamado BTN, contorno morre secundário e secundário por padrão, cor cinza. E também é um botão grande. As próximas etapas, adicionando algum preenchimento e margens aos botões, voltem ao índice ou arquivo HTML e vá para o primeiro botão. E então vamos segurar Alt e clicar em um segundo um Kusto realmente aplicará a mesma classe a ambos. E faremos px pelo que isso vai fazer. P para preenchimento x é para o eixo horizontal, tanto esquerdo quanto direito. E para é o valor que vamos aplicar. O preenchimento será o interior do botão à esquerda e à direita dos tiques. Mais espaço lá. A última classe que vou adicionar é adicionar alguma margem ao final do primeiro botão. E isso significará que há algum espaço entre eles. Então, para fazer isso, fazemos MA para margem final. O oposto da margem nessas margens é MS para margin stop. Vou salvar isso. E então vamos verificar o site. Vamos clicar com o botão direito do mouse no primeiro botão e inspecioná-lo. Você pode ver que temos nosso px para o qual está preenchendo ambos os lados do texto. E se você rolar para baixo esta parte das Ferramentas do Desenvolvedor, você pode ver que temos nosso preenchimento de 24 e o lado que aumenta o tamanho do botão. Também chegamos ao final de oito marginalmente e, em seguida, adicionamos um pouco de espaço extra entre eles. Vou então inspecionar por segundo botão. Você verá também qual a margem de 24 para deixar o botão um pouco mais longo. Este último passo é muito importante e isso está exibindo botões condicionalmente. Vamos dar uma olhada. Dentro desses dois botões, eles contam com o URL do endpoint PBT para o botão um e o botão dois, e ponto txt para o botão um e o botão dois. Novamente, vamos entrar no índice dot md, e vamos tentar desativar um desses parâmetros e ver o que acontece. Você verá isso sem texto dentro do botão um e parece muito feio. É um pequeno erro na verdade. Não gostaríamos disso em nosso site se não houvesse texto. Não vou desabilitar o URL para o segundo botão aqui que com a chave hash porque estamos trabalhando no YAML. Você pode ver no segundo sob H ref, ele diz desconhecido, isso também é um pouco de erro. Então, o que vamos fazer é configurar o Hugo, que se algum desses parâmetros estiver faltando, o botão não será exibido ou se você desabilitar todo o lote, a tela branca do botão. Em primeiro lugar, vou usar o comando width. E pensamos que isso faz sua condicional. Ele procura o parâmetro que você inseriu. Então vamos colocar pontos params, ponto BTN um. Então, se alguns carrapatos entre fornecidos em um. Então isso significa verdade. E isso exibirá o que está dentro dos suportes. Então, entraremos em um botão e colocaremos uma etiqueta final, se alguma coisa estiver presente dentro da BT e uma. E atualmente temos URL presente, que retornará true. E isso vai colocar esses dados agora com também atribui essas informações ao contexto do significado. Podemos apagar este texto aqui, params pontuam BTN um porque já o fornecemos aqui em trigo. Na verdade, esta parte, isso não funcionará que params dot btn one dot txt porque isso não existe dentro de pontos params ponto BTN um, mas dot txt existe lá e URL de ponto. Vamos salvar isso. E não deveríamos ver uma mudança. Vamos dar uma olhada. Nada mudou, está tudo funcionando, mas ainda temos o problema de nenhum texto e isso porque desativamos o texto. Vamos voltar e vamos colocar uma declaração condicional. E isso é se ponto txt, se acabar. Então, temos duas coisas acontecendo, IV e dot txt, URL. Então isso acontecerá e temos que colocar uma entrada. E depois disso, se um, o ponto txt não estiver presente ou o URL do ponto não estiver presente, esse botão não será exibido. Vamos dar uma olhada. Como você pode ver, esse botão desapareceu. Vamos reativar os parâmetros e o botão deve reaparecer. Volte para o arquivo de marcação e reativarei o texto. Vou reativar o botão para URL. Vamos salvar isso. Agora temos ambos os textos e vocês estão presentes. Isso está dentro entre um. Vou dar uma olhada. Lá vai você. Temos nosso botão, corrigiremos nosso HTML para o segundo botão e, em seguida, faremos outro teste. Vou copiar esse código. Aqui embaixo. Vou colocar meu n tagging. Vou mudar isso para ser TM2. Vou remover esse código que já especificamos. A largura. Colocamos uma marcação N para a instrução if. Vamos salvar isso e verificar o site. Temos os dois botões funcionando apenas para o teste final, vamos desativar um dos parâmetros para o segundo botão. E então mostrarei como podemos simplesmente desligar os botões completamente, corretamente. Então, indo para o markdown, vou simplesmente desabilitar o URL para o segundo botão. Você pode ver que ele desaparece. E vamos dar uma olhada em como desativar o botão corretamente. Desative o botão corretamente. Tudo o que você precisa fazer se apenas destacarmos todas essas primitivas e essa é a maneira correta. O atalho e o Visual Studio Code são Control K, C. Em seguida, comande todas essas três linhas para você uma vez. Como você pode vê-lo, para remover o botão. E essa é provavelmente a maneira intencional de desativar os botões. Controle o KU para descomentar. Descomente o botão. Então, ele está ativado novamente, e salvaremos isso e estamos prontos para o próximo tutorial em que olhamos personalizar a exibição desse bloco que acabamos de criar a Birmânia. Você teve algum problema com qualquer parte desta lição, retroceder e tentar novamente. E se você ainda estiver com problemas, há um link abaixo para discussões e eu farei o meu melhor para ajudá-lo o mais rápido possível é realmente importante. Você entende tudo o que faz lição antes de continuar com a próxima. Vejo você na próxima lição. 7. Personalize a página inicial com Bootstrap 5: Bem-vindo à próxima lição. Nesta lição, vamos personalizar o conteúdo que creditamos anteriormente usando as classes Bootstrap. Depois de concluir esta lição, você poderá restringir a largura de cinco contêineres do bootstrap. Ser capaz de usar calhas, preenchimento e margin Bootstrap classes. Para justificar o conteúdo online para o centro, tivemos que usar as classes grid e GAP. O primeiro passo é que vamos restringir a largura do contêiner, mas apenas para monitores muito grandes. Tem que voltar ao ponto de índice, o arquivo HTML da lição anterior. E dentro da classe de contêiner vamos adicionar a classe de col dash XX L. dash. O que isso vai fazer em telas com largura XX L, vai restringir o contêiner à largura de oito. Agora, o bootstrap usa 12 unidades. Estamos usando oito de 12 dessas unidades. Vamos dar uma olhada no que XX L significa. Se nossa tela for 1400 picles ou água, a largura será 1 12º disso. O próximo passo é justificar e aprender conteúdo. Vamos fazer isso em nossa linha para que ambas as colunas estejam alinhadas ao Papai Noel e justifiquem os centros centralizados nas direções horizontal e vertical. Se você olhar para os documentos do Bootstrap em flicks em utilitários, verá para justificar o conteúdo necessário para ter o curso flexível d flex ou display habilitado. E também, se você rolar para baixo para alinhar itens, você também verá, você deve ter d flex ativado. Então, vamos voltar ao projeto e vamos dar uma olhada em algumas justificativas e forro. Queremos que nossa imagem, nossa coluna de imagem seja exibida centralizada no eixo vertical e horizontal. Agora, na verdade, você não precisa colocar d flex porque a linha já está habilitada para o flex. O que usamos alinhar itens dash center e justificar. Centro de traço de conteúdo. Vou colocar o sal em uma tela maior. Você pode ter problemas para ver Lacey se você estiver em um dispositivo móvel como sua resolução bastante grande. Mas atualmente temos a largura definida para menos de 1400 pixels. E esta é a exibição original pretendida do site. Você pode ver um pouco de preenchimento à esquerda e à direita medida que aumentamos e diminuímos o tamanho. Mas esse é o comportamento padrão do Bootstrap se você estiver usando o contêiner padrão, se aumentarmos a largura para acima de 1400 pixels, você verá que ele de repente se encaixa nesse bastante espaço aqui, o lado, e isso está restringindo nosso contêiner para o conteúdo não fique muito grande porque não queremos que este bloco aqui tenha toda a largura da página se for uma tela grande e se passarmos o mouse sobre o contêiner, você verá que há uma grande quantidade de preenchimento de ambos os lados. Se descermos para o CSS, você verá que temos uma largura mínima para 1400. Essa é a consulta de mídia e você passou mais de 1400, usa flicks para restringir a largura a 66%, que é oito décimos, eu adicionaria 12 colunas. Cidades estranhas comportamento depois, porque não queremos esse bloco aqui que criamos seja muito largo em uma tela grande, como você pode ver, parece muito bom em uma tela grande. E se diminuirmos para menos de 4800, também fica muito bom em uma tela menor. Agora vamos analisar a adição de alguns preenchimentos e calhas. E esse é o preenchimento. Estaremos criando algum espaço acima e abaixo da linha e as calhas são um espaço geral genérico. Indo para o arquivo index.html na div para a linha no final , adicione P dash f5. Isso adicionará algum preenchimento acima e abaixo da linha, terá algum espaço dentro da linha e potencialmente página da barra de navegação e algum espaço abaixo da linha e potencialmente qualquer conteúdo futuro. Também vamos adicionar g dash f5 para adicionar uma calha ao redor. Se olharmos para a nossa linha, você dirá que temos nosso preenchimento P Y5 superior e inferior cinco, e especificamos G5. Nós descemos para a coluna, você verá que temos o Gatorade, o lado em verde. Isso se traduz em ventos de preenchimento, a maneira mais fácil de trabalhar com bootstrap. Bem, agora olhe para criar diferentes tamanhos de coluna em diferentes pontos de quebra. Isto é para a nossa imagem especificada chamada LG G6 no grande ponto de interrupção, a coluna para a imagem será seis. Vejamos o tamanho inicial em busca. Então, vamos fazer o col dash tin. Agora, isso é para o ponto de interrupção extra pequeno. Nunca especificamos excesso, apenas o deixamos de fora e esse é o padrão cujo bootstrap, fácil mobile-first. Se for um pequeno dispositivo, ligue, SAM. Queremos que seja um estado, seja oito de 1012. Colunas largas em uma tela pequena. Então, para muito grande e depois para Lodge e maior, será seis em 12, então metade da tela. Então, vamos salvar isso. Vamos dar uma olhada com o botão direito do mouse e inspecionar. Vamos trazê-lo para o menor tamanho. E clicaremos na primeira coluna, que é para nossa imagem. E você verá que ele está usando a coluna dez, que é 83% da largura da tela. Você tem essas barras verdes de ambos os lados. Em seguida, vamos arrastá-lo para maior e veremos isso mudado. Agora atingimos o pequeno ponto de interrupção e agora ele está exibindo 66% porque nesse grande ponto de interrupção, não queremos que a imagem seja muito grande. Então vamos até o grande ponto de interrupção. Você verá que ele foi alterado para seis, que é metade da largura da tela. Você ajudou na fila? Você verá que temos o PY cinco, que tem preenchimento acima e abaixo em verde. E se você for para a coluna, verá que há algum preenchimento à esquerda e à direita, e isso é da sarjeta. O próximo ABG está usando a grade e a lacuna para exibir os botões em um dispositivo móvel. Agora, originalmente no Bootstrap, se você quisesse exibir um botão como a largura total de seu contêiner, ou seja, no Bootstrap quatro, você usaria um botão, uma classe de botão de bloco. Mas no Bootstrap cinco, temos que usar a grade D para a grade de exibição e, em seguida, lacuna para especificar o espaço entre eles. Então, vamos dar uma chance nisso. Há uma div que envolve os botões em vez de antes dentro que especificará a classe. Em seguida, usaremos a grade d dash para a grade de exibição. E então usaremos uma lacuna de dois. Então gap dash T2. Agora isso vai fazer bootstrap sem oferta. Então isso é meio que exibir um celular, mas não queremos que isso aconteça. Os pontos de interrupção maiores ele fará. Como você pode ver, está mudando o ponto de interrupção da loja. Então vamos fazer d dash, LG, dash, fluxo. No grande ponto de ruptura. Ele vai mudar da grade de exibição para o flex de exibição em um ponto de interrupção acima do grande e tudo está sendo exibido como de costume, e isso é com o fluxo. Mas se ficarmos abaixo de grande, você verá que temos nosso layout de grade com um botão de largura total, mas temos um problema aqui e essa é a margem no final deste botão. Então, se eu passar o mouse sobre esse botão, você verá que há essa margem laranja à direita do botão. E isso porque temos a aula em um traço T2. Podemos consertar isso. Podemos fazer uma pré-visualização Carlo se você quiser. Nós podemos fazer ME dash LG, dash T2. Como você pode ver abaixo LG, não há margem, mas se aumentarmos acima do LJ, teremos essa margem. Vamos voltar para Hugo e vamos consertar isso. Então, entraremos em nosso primeiro botão. Queremos nossa margem dentro, então faremos um traço LG que está fixo. Agora, na verdade, é espaço nesse ponto de interrupção médio para ter os botões lado a lado. Então, vamos configurá-lo para que apenas em um menor inferior, os botões estejam alinhados verticalmente. Volte aqui e definiremos o flex para ocorrer em MD e superior. E então definiremos nossa margem para aplicar somente em MD ou superior. Vamos salvar isso. Como você pode ver, estamos atualmente no MD. Somos verticais sem imagem e nossos textos, mas nossos botões estão lado a lado. Vamos até o pequeno ponto de interrupção. Você verá que eles são verticais, tudo é vertical. E então iremos até o grande ponto de ruptura. Você verá que temos o layout lado a lado para tudo. É isso para este vídeo. Se você tiver novos problemas, rebobine-o e faça o seu melhor. Caso contrário, há a discussão abaixo e vou tentar voltar o mais rápido possível. Caso contrário, você pode entrar na seção de recursos e baixar o código desta lição e fazer o possível para depurar o que você fez. E te vejo na próxima lição. 8. Bootstrap 5 Cartas e Iteração (looping) com intervalo: Bem-vindo à próxima lição. Vamos criar cinco cartas de bootstrap, e vamos gerar membros iterando dados com a função range do Hugo, você precisará de algumas imagens para esta lição. Se você entrar na seção de recursos, verá uma pasta zip para esta lição. Se você extraí-lo, encontrará as imagens necessárias na pasta estática. concluir esta lição, você poderá criar um cartão usando arquivos Bootstrap, classes de utilitários. Você seria capaz de criar dados para cartões diferentes na frente das páginas. E você seria capaz de gerar vários cartões iterando sobre os metadados da frente das páginas usando a função de intervalo de caras. A primeira coisa que vamos fazer é criar um cartão usando cinco classes de utilitários Bootstrap. A primeira coisa que temos que fazer é abrir nosso arquivo index.html. Vamos criar algumas seções e essas HTML, cinco tags semânticas. Então, ensinamos na seção e em uma guia. Em seguida, vamos cortar e colar todo o conteúdo do que criamos na última lição. Cortaremos isso com Controle ou Comando X e colaremos isso. E vamos adicionar uma classe no caso de eu precisar segmentar isso no futuro com CSS, queremos modificar essa seção específica para que não fosse uma classe, e vamos chamá-la de herói. Em seguida, use o atalho Alt Shift F para a seção Formatar. A formatação parece boa. Então vamos fazer uma nova seção para este vídeo. Novamente em outra seção, tags. Então, vamos digitar seção e guia. Então temos que criar o contêiner, a linha e a coluna. Faça esse contêiner. Tab, tab div dot tab tab. Esta coluna em particular. Neste ponto do vídeo, vamos dividir a tela em três, que possamos ter três cartões. Agora, se você dividir 12 por três, você terá quatro. Se quiséssemos apenas ocorrer se a tela for a média, o ponto de interrupção médio ou maior, não queremos tentar esmagar três em uma tela pequena. Adicione traço, MD, traço quatro. Vamos dar uma olhada no código do cartão no site de documentos do Bootstrap em componentes que temos cartão. Basta rolar para baixo e apenas a partir do primeiro exemplo aqui, é isso que estamos tentando criar. Copiaremos esse código e o colaremos em nossa coluna. E usamos Shift Alt F para corrigir a formatação. Agora, essa parte é a tag de estilo. Não queríamos isso porque vamos começar apenas com classes CSS em vez de substituições de estilo. Gostaria que você também pudesse chamar estilos embutidos. Na classe da imagem, vamos adicionar IMG dash fluid disse que a imagem será redimensionada para nós com base no espaço disponível. Não vamos nos preocupar com o texto alternativo por enquanto. Vamos colocar a fonte da imagem. Agora, você terá que baixar os arquivos desta lição e extrair as imagens de espaço reservado completo desse arquivo zip. E, em seguida, cole na sala onde você não pode colar diretamente o código do Visual Studio. Você precisa abrir a pasta de imagens com o explorador de arquivos, descobrir e colar lá. Existem minhas quatro imagens de espaço reservado. Vou recuar a fonte e colocar a barra IMG slash place holder um ponto JPEG para corresponder a esse arquivo lá. Deixarei todo o texto padrão e o link padrão para o botão. Vamos colocar um título no primeiro lugar e acordamos também copiar e colar esses três vezes, mais duas vezes. Vamos colocar um cabeçalho e copiaremos e colaremos a coluna mais duas vezes. Então, tínhamos um total de três colunas. E, em seguida, acima da linha e abaixo do contêiner , falaremos, e div dot col fará nosso título, nosso H2, mas usaremos um tamanho de fonte de um, então usaremos o tamanho do nosso H1, mas nós vai usar uma tag H2 porque é a segunda batida mais importante na página. Para fazer isso, fazemos um ponto FS dash one. Essa é uma classe Bootstrap para o tamanho da fonte um, que é um cabeçalho um tamanho de fonte também colocará algum preenchimento embaixo. Então vamos fazer ponto p, b traço três. Por enquanto, colocaremos um manual no cabeçalho e isso será fora dos serviços. Vamos salvá-lo e dar uma olhada. Está ótimo, mas acho que devemos enviar para o título e devemos colocar um pouco de preenchimento embaixo dessa linha para que ele não entre conflito com a foto que estamos fazendo em uma lição futura. Faça backup em nossa coluna aqui usaremos o traço de texto. Papai Noel enviou tudo, todo o texto dentro dessa coluna. Então, na nossa linha aqui, faremos PB traço três. Isso está parecendo muito melhor. O próximo passo é que vamos criar alguns dados para que possamos gerar vários cartões. Abra a pasta de conteúdo e o index.html. E então, abaixo dos dados do botão, vamos colocar uma entrada para o título dos cartões. Vamos chamar isso de nossos serviços como já o nomeamos. E então vamos colocar a entrada das cartas e eles estão batendo na aba, aperte o traço. E então vamos colocar o título. Vamos chamá-lo de cartão um intitulado para mantê-lo simples, esta guia não silenciada. E especificaremos a imagem para esse cartão específico. Então, vai ser o IMG é o que usaremos. E, em seguida, o endereço será espaço reservado de barra IMG. Um ponto JPEG fará nossos textos. A coluna. Podemos usar Lorem Ipsum para isso, mas não funcionará na seção de metal frontal que tivemos até o nosso conteúdo aqui podemos digitar lorem e vamos tentar 20. Isso provavelmente é um bom link. Então, vamos cortar isso. Remova a linha extra. Colaremos isso em nosso texto. Em seguida, temos que fazer é o botão, então faremos esse cólon BTN. Eles entram e tabbing fariam texto. Vamos puxar essa caixa e uma pega e , em seguida, URL e faremos isso um hash por enquanto. Vamos transportar tudo isso e usar o backspace para chegar ao início dessa linha e colá-la e, em seguida, inserir novamente o backspace, cole-o novamente. O segundo clicará no nic no driver número um, pressionaremos Alt e clicaremos à direita dos outros números e alterá-los para dois e azul, mesma coisa com a tecla Alt para o terceira entrada. Uma última coisa, geralmente as pessoas usam um hash se não quiserem especificar URL, o que estamos usando Markdown e em Markdown e os hashes para comentar. Então vamos ter que colocar algumas vírgulas invertidas em torno desses hashes para fazê-los funcionar. Agora vamos iterar sobre o Dato, apenas crédito por três cartões usando a função range. Colocamos nossos dados ele o primeiro item que é importante para nós, pois o total de cartas dentro do alcance durante o próprio outono cartões pedindo cerca de três cartões para encontrar aqui. E uma vez que estivermos dentro dos cartões, você terá acesso ao título do ponto, dot IMG, dot txt, dot BTN dot txt e dot BTN dot URL. Então, em primeiro lugar, o total de cartões exclui os ticks de serviços EL, colocando duas chaves e, como eles não são parâmetros padrão da página Hugo, temos que usar pontos params para começar. E depois o título das cartas e, em seguida, feche os dois suportes encaracolados. Em seguida, encontre as três colunas diferentes para os cartões. E excluiremos os dois últimos. Em seguida, acima da coluna. Nova linha. E usaremos o alcance. E vamos variar sobre pontos params, cartões de pontos. Então, abaixo da coluna, você terá que colocar um intacto. Vamos passar por um passo de cada vez. A primeira coisa que faremos é a imagem. Excluiremos isso. E vai ser ponto. Img será o parâmetro porque estamos dentro do objeto cards. E então vamos colocar o título para baixo título de ponto HE. E copiaremos e colaremos o título no texto alternativo da imagem. E isso é justo se o usuário mantiver o mouse sobre a imagem ou se o usuário tiver tecnologia de leitura de tela, excluirá o texto no parágrafo e inserirá ponto txt. Então, para o botão porque temos batido esse ponto BTN txt. O Url usará uma instrução width e será width dot btn. Então ele terá URL de ponto, a deriva de altura, o link. E então teremos pontos para o texto dos botões. Então teremos que isso. Agora, como você viu no vídeo anterior, se você não colocar texto na URL, todos os campos de texto, você terá um problema com a exibição ou a tag. Agora, conserte isso. Podemos usar uma declaração if. Portanto, se exigirmos URL e ticks, três presentes. Portanto, se o ponto do URL do ponto final for marcado e, em seguida, colocaremos a tag final embaixo. Porque nós exibimos três cartas e elas só vão ficar lado a lado. No ponto de interrupção mediano, Ohio. Precisamos adicionar alguma margem abaixo dos cartões para que, quando eles estiverem empilhados verticalmente em pontos de interrupção pequenos e pequenos, isso será algum espaço entre eles. Então vamos fazê-los, traçar três o cartão. Vamos salvá-lo e ver como ele se parece. Está exibindo ótimo. Temos nossas imagens exclusivas para cada cartão. Puxamos o cabeçalho da parte frontal do markdown. Também temos botões exclusivos. Vamos inspecioná-lo e ver o que acontece quando derrubamos os pontos brilhantes. Então, estamos agora no nosso menor ponto brilhante. Como você pode ver, temos o espaço entre as cartas e vou apenas trazer isso no CSS. Se você passar o mouse sobre, você pode dizer isso, o preenchimento laranja abaixo do cartão. E à medida que o trazemos, vamos trazê-lo para o ponto de interrupção do MD e você verá que ele se encaixar em três. Esmagamento em três lá. É isso para a lição. Tendo algum problema, verifique novamente o vídeo e, se você ainda não conseguir fazer as coisas funcionarem, há uma discussão abaixo e eu vou tentar entrar em contato com você o mais rápido possível. Você também pode baixar os arquivos desta lição na seção de recursos. Então você pode depurar seu código a partir daí. Obrigado por assistir. Vejo você na próxima lição. 9. Bootstrap 5 Navbar com Hugo: Nesta lição, estamos procurando incorporar o bootstrap cinco navbar no site e gerar itens de menu com o sistema de menus de vocês. Após a conclusão deste vídeo, você poderá criar um menu usando as cinco classes do utilitário Bootstrap navbar. Você seria capaz de gerar itens de menu usando os parâmetros do menu de vocês. Ele seria capaz de configurar os itens de menu que serão exibidos usando barreiras para a frente das páginas para cada página individual e também usando um arquivo de configuração. Na primeira parte deste vídeo, vamos criar o bootstrap cinco navbar usando as classes utilitárias do Bootstrap. Um momento na seção Navbar da parte de componentes do site bootstrap cinco Docs. Se você rolar para baixo até o primeiro exemplo, copiaremos isso e colaremos esse projeto diretamente inteiro. Vamos para a pasta Layouts e depois em parciais, e vamos para header.html. Vamos excluir o texto do cabeçalho e vamos colar no que acabamos de copiar do site do Bootstrap. Vamos salvar isso. que vocês sirvam como corrida e vamos dar uma olhada. Nice e navbar agora estão aparecendo, mas há uma diferença na cor de fundo. Se inspecionarmos a barra de navegação, notamos que ela tem luz BG como a cor de fundo. Então essa é a primeira coisa que vamos consertar. Isso é muito bom. Isso significa que as cores do texto se adequam a muito fundo. Vamos mudar a luz de fundo e mudar isso para o corpo do BG. O corpo Bg faz é para o fundo com a cor do corpo? Estou na seção de utilitários e segundo plano do site de documentos do Bootstrap. E você verá antes de usarmos luz bg, que é um branco muito claro. Você também pode escolher bg white, mas o mais útil para nós, porque queremos especificamente que a barra de navegação corresponda à cor de fundo do corpo, mudará para o corpo BG. corpo Bg pode ser modificado. Mas esse não é o ponto deste tutorial. Como você pode ver, a barra de navegação agora se mistura em nosso plano de fundo. Antes de continuarmos o texto da barra de navegação, que realmente lê navbar. Vamos substituir isso por algumas chaves, site de pontos de filmes, título de ponto, e esse é o nome do site. E então vamos até a barra de pesquisa e vamos excluir isso para que livremos de todo esse formulário. Em seguida, excluiremos o link de navegação desativado outono excluirá todo o item suspenso, deixará apenas o link ativo e padrão Shift Alt F2 formato. E vamos salvar isso e verificaremos. Acho que estamos prontos para o próximo passo. Agora vamos configurar nosso modelo para aceitar itens de menu que vocês irão gerar. Entre a página de modelos de menu no Hugo doxy é bastante complexa. Vamos usar peças para este exemplo. Estaremos variando tanto ponto, ponto, ponto menu é dopamina. Não vamos nos preocupar com isso. Tem filhos. Usaremos o novo parâmetro atual do marido para inserir e ativar a classe. Também incluiremos o nome e o URL. Achamos isso muito complicado no Hugo Docs. Então acompanhe com muito cuidado e mostrarei como fazer isso. Vamos começar com este link ativo. Ele, o item da lista com o link ativo acima disso. Crédito em qualquer linha. E vamos usar o intervalo como usamos anteriormente. E é um site de pontos com menus de pontos S maiúsculos e depois domínio. E depois desse item da lista, precisamos. E então temos a classe de link nav e a classe ativa sempre leva t. Não queremos que isso seja exibido se não for a página atual. Então, o que faremos é antes de ativos, vamos colocar alguns aparelhos encaracolados. Usamos se tivermos que colocar um cifrão porque um cifrão se refere aos contextos da página que estão aqui em cima, mas dentro do alcance, não são os contextos da página. Estamos lidando com os itens do menu, então usamos um cifrão e, em seguida, o menu de pontos atual. Bem, com capitais, o menu que estamos segmentando é meu. Então você deve colocar uma parada completa depois disso. Temos um espaço antes ativo porque não quero que o ativo colida com o link nav. Estamos ficando sem espaço. Se você usar o Controle V ou Comando B, removerá o navegador de arquivos à esquerda. Então, pouco antes entre um on page e os comentários invertidos, temos que colocar uma tag final. A maneira como você pode resolver isso se estiver correto ou não. Se você destacar tudo, desde os primeiros aparelhos curly até o intacto e atrasado, verá que ele corresponde ao Exemplo abaixo, vou fazer o Control Z porque quero manter isso. Agora tenho que colocar meu link e usamos a variável, é tudo o URL de maiúsculas. Então, para o texto, vou retomar isso. Em seguida, usamos a variável ponto maiúsculo N. Não vou excluir essa segunda entrada porque ela não é necessária. Tudo será gerado através do intervalo e salvará isso. Vamos dar uma olhada. Atualmente, nada está sendo exibido porque temos que configurar os itens de menu e vamos fazer isso com o front matter e também um arquivo de configuração. Configurar com o Meta frontal significa que entramos em cada página individual e dizemos ao Hugo em qual menu queremos que a página seja exibida. Também podemos configurar o branco da página, que é a ordem em que é exibida. Control Beta abra o Explorer de exibição de arquivos ou você pode clicar no primeiro botão, entrar no conteúdo. E nós só temos uma página no momento, e isso é o ponto de índice MD. Suba o topo. Vou colocá-lo perto do topo, então é fácil de encontrar sob rascunho, temos que colocar uma entrada chamada menu, e chamaremos isso principal e depois branco. E vamos colocar isso em seus dez agora com o tee branco melhor fora fazendo-os em incrementos de dez. E dessa forma, se você precisar mudar, você tem nove números lá para mexer espaço. Você não precisa reordenar tudo. Vamos salvar isso. E vamos dar uma olhada. link inicial brilhou. Clique com o botão direito sobre ele e inspecionamos. Veremos que temos a classe ativa. Também temos a página atual do RA e a RA atual até roteiristas que, que são vinculados para a página atual. Agora vamos configurar o menu usando um arquivo de configuração. E também vamos para mim informações sobre o modelo que o link possa ser aberto em uma nova página se você especificar isso no arquivo de configuração. Primeiro de tudo, abriremos nosso arquivo de configuração. E na parte inferior é chamado config dot YAML. Deixar um espaço em paz colocará esse hash para comentar e explicaremos o que estamos fazendo. E estamos criando links de menu via arquivo de configuração. O primeiro menu de facilidade de outono com dois pontos e anti e aba. Estamos configurando nosso menu principal, então vamos colocar isso em primeiro lugar. Então, no carro, não bateu Tab, você colocou em um traço. O que estão nomeando? E o primeiro link será colocado no site do GitHub. Eu uso muito e , em seguida, uso um URL de guia, e ele será HTTP. Você deve colocar o HTTP, caso contrário, ele não será vinculado externamente. Vai pensar que é, acho que na verdade faz parte do site, barra de ponto e vírgula http www.github.com. Temos que dar um branco. Essa é a ordem em que ela é exibida. Então, vamos dar 90 para sabermos que está na extrema-direita. Em seguida, colocaremos outro e, desta vez, vincularemos ao URL dessas guias do Google. Vamos dar-lhe um branco de 100. Então, vamos salvar isso. E vamos salvá-lo funciona. Isso está funcionando. E se olharmos para os links do Github e do Google, eles possuem uma arma de fogo como queríamos que eles estivessem com o branco. Você notará o link inicial, ele tem uma cor muito mais escura. E isso ocorre porque o link inicial tem a tag ativa. Se olharmos para os outros dois links, você dirá que eles não obtiveram a tag ativa. E você notará que se ele tornar a página mais estreita, os links de navegação desaparecerão. E agora em um outono suspenso, e esse é o comportamento padrão. Se você for, você pode personalizar isso. Se você entrar em seu HTML. Temos navbar expandir LG, podemos mudar isso para navbar expand md, por exemplo, se você não tiver muitos links em dias, geralmente bem. Agora podemos torná-lo muito estreito antes quebrar e se tornar um menu móvel. A próxima coisa que faremos é criar algum código em nosso modelo para que possamos abrir esses links em novas janelas. Porque atualmente, se atingirmos esses links, eles carregam na mesma guia ou janela e não queremos isso porque eles facilmente nunca se afastam do nosso lado. A primeira coisa que faremos é voltar ao nosso arquivo de configuração. Vou definir alguns parâmetros. Agora, se estamos analisando parâmetros no Markdown para uma página ou você tem que fazer é apenas começar a tocar na média. Mas estamos analisando a configuração do Menu. Temos que dizer a você cara, que queremos colocá-lo em um parâmetro, parâmetro personalizado. Então, faremos parâmetros com dois pontos e depois tocamos e chamaremos esse parâmetro em branco. E tornaremos isso verdade se quisermos abrir esse link em uma nova janela ou em uma guia. E vamos colocar isso para o próximo também. Vamos salvar isso e , em seguida, faremos nosso código de modelo entrar em nosso cabeçalho. E criaremos o código que se vincula ao nosso parâmetro verdadeiro em branco. Um bom link. Traga nossa viagem de altura para uma nova linha. E depois da deriva de altura será colocado como se AQ e AQ representassem iguais. Então, se for igual a pontos params ponto em branco, true. Portanto, se o ponto params ponto em branco for verdadeiro, inserirá alguns textos e esse alvo é igual a sublinhado, em branco. Grill é igual a não, abra nele para riscos de segurança que estamos tentando comunicar usando a nota, abrir e, em seguida, colocaremos nossos antagonistas e salvaremos isso. Vamos dar uma olhada. clicar no meu link do GitHub e você verá que ele abre em uma nova guia. E o mesmo com o Google. Clique com o botão direito sobre isso e inspecionamos. Ele dirá que temos alvo igual a trilhos em branco iguais saber abridor chegando e isso é ótimo. Esse é o fim da lição básica da barra de navegação Bootstrap. Se você tiver alguma dúvida e não conseguir resolver algo, por favor. Esta seção de discussão abaixo, e vou tentar voltar o mais rápido possível. Você também pode baixar os arquivos de origem para é menor que a seção de recursos e depurar a partir daí. Caso contrário, verei você no próximo vídeo. 10. Rodapé com ano de direitos autorais automático: Nesta lição, vamos criar um rodapé e vamos gerar o ano para os direitos autorais automaticamente usando Hugo, que gera em tempo de execução estaticamente e também JavaScript que dinamicamente atualiza o ano com base no ano que o usuário está navegando no site. Após a conclusão deste vídeo, você poderá criar um rodapé com um plano de fundo sólido. Você poderá inserir o sinal de direitos autorais usando o código compatível com HTML. E você poderá gerar o IBA estaticamente com Hugo como uma boa viagem, sem fallback de script e também dinamicamente usando JavaScript. A primeira coisa que vamos fazer é criar o rodapé. Então abra o projeto e vá para a pasta Layouts e , em seguida, entre em parciais. E a coisa em que vamos trabalhar durante esta lição é o rodapé. Ajude a retomar esse texto. A primeira coisa que vamos fazer é criar uma div, o contêiner de abuso passado, mas desta vez vamos usar fluidos de contêiner. Então o fluido do contêiner trava. fluido do contêiner ocupa a largura máxima da página e ele é redimensionado com a página. É sempre a página inteira ou a largura. Com uma ajuda para colocar em uma linha e uma coluna. Essa coluna vamos usar um fundo escuro. Então, para fazer isso, fazemos doc, BG dash doc. Também vou precisar de alguns textos em branco. Então faça ponto txt, traço branco. Vou colocar algum preenchimento acima, abaixo e à esquerda, à direita do texto. Então, vamos usar dot py dash três. Há muitas aulas. Vamos salvar isso e dar uma olhada. Vamos executar o servidor hey guys. Na parte inferior da página. Temos nossa barra preta. Agora, se você está se perguntando sobre as diferentes cores de fundo e ticks, se você olhar aqui em segundo plano, essas são todas as cores de fundo diferentes que você pode escolher. Por padrão, você pode especificar o seu próprio, seja substituindo as classes Bootstrap ou criando sua própria classe ou escrevendo as variáveis de bootstrap são, mas para os fins é menor que, estamos apenas escolhendo uma dessas cores e estamos escolhendo Dark. Bg escuro tracejado. Em termos de cores de ticks, agora estamos na seção de cores dos utilitários. E essas são todas as cores padrão do Bootstrap. E para alguns deles os colocaram em um fundo escuro, mas isso não acontece automaticamente. Você precisa especificar a cor de fundo. Essas classes só realmente mudam a cor do texto e vamos usar ticks. O que podemos tentar leva a vida também. Acho que é preciso branco pode oferecer o impacto. Estamos com frequência. Vamos criar o texto para o rodapé. Vamos colocá-lo no meu texto básico. Faremos direitos autorais. Então precisamos do sinal de direitos autorais para fazer isso. Colocamos na cópia final. Você verá que o nome da sugestão colocará apenas uma análise GIF básica e faremos 2022. Então vamos colocar o nome do site. Então, faremos o título de ponto, ponto. Vamos salvar isso e dar uma olhada. Vamos parecer muito bons agora, digamos, por exemplo, você não quer usar o nome do seu site para o aviso de direitos autorais. Vamos dar uma olhada em colocar algumas mensagens de texto alternativas. Agora, há outra parte da variável que podemos usar, esse copyright ponto do site. A maneira como fazemos isso funcionar é que faremos com o copyright ponto, ponto ponto. Em seguida, faremos o ponto que exibirá esse conteúdo. E então podemos fazer outra coisa. Vamos ver se os direitos autorais não estão disponíveis. Else exibirá o título de ponto, ponto, ponto e, em seguida, terminaremos isso, salvaremos isso. E antes de irmos verificar se ele entrará em nosso config.xml. E definiremos os ticks de direitos autorais. Coloque um pouco de hash e coloque um pequeno comentário, cópia alternativa, texto da empresa. E então faremos cópia, certo? E faremos Web Design, inc. E salve isso e salve-o funciona. Há seu texto alternativo. Eu pilha não é automatizada, então vamos voltar e faremos isso. Isso nos leva ao próximo passo e isso é gerado em leveduras estaticamente usando Hugo. Agora, essa é uma função bastante complexa para se trabalhar, mas vou tornar isso muito simples para você tudo o que você tem que fazer, colocar as chaves, fazer agora o formato de ponto. Então, entre parênteses 2006 para baixo, você tem que fazer o ano de 2006. Ninguém vai funcionar. Há muitas maneiras de formatar datas, mas vou mantê-lo muito simples para este tutorial. Vamos salvar isso e vamos inspecioná-lo. As filmagens do ano são 2021. Você pode ver que está funcionando perfeitamente. Isso nos leva à próxima seção que está gerando o JavaScript usando dinamicamente. Então eu estou realmente significa que aconteceu quando o usuário navega para o site e ele carrega no navegador naquele momento em que o E será gerado. Por enquanto vou conseguir essa função, a função, vou cortar isso. Vou colá-lo no fundo. Vou colocar alguns comentários, slash star, a estrela. E, em seguida, comece a cortar a resposta. Vou comentar isso. Mas vou colocar em um espaço, apenas falar. Um ID do span ID é igual a js. Agora, eu sempre prefixo meus IDs, que são para fins JavaScript com o prefixo J, S, dash. E dessa forma eu sei que, se eu mudar isso, o JavaScript é meio que parar de funcionar. O que são span? E então vamos usar algum JavaScript para escrever a data dentro dessa extensão. Então, vou guardar isso por enquanto e abriremos nosso arquivo JavaScript que criamos anteriormente. Em primeiro lugar, vamos direcionar a extensão que acabamos de criar e usaremos isso com o ponto do documento. Obter elemento por ID. Certifique-se de usar maiúsculas em todos os sentidos, exceto o primeiro. Em seguida, abrimos o suporte para cima. Dentro desse colchete, temos que especificar o ID real da extensão. Então você tem que usar apóstrofos. E então vamos, estamos procurando por JS STAT3, esse é o ID. Nós segmentamos nosso elemento e selecionamos com JavaScript. E queremos alterar o HTML interno. Então, vamos fazer ponto. Interior. Html é que o HTML é todos maiúsculas. Vamos usar um sinal de igual, então vou mudá-lo agora. Para o que vamos mudar, e isso é novamente, essas coisas são bastante complexas, mas vamos mantê-lo. A explicação é muito simples para este tutorial. Vamos criar uma nova data e, em seguida, abrir o colchete completo, fechar, terminar com dois pontos. Antes de esquecer o que você escreveu, vamos criar um comentário. Agora, comentar o JavaScript é um pouco diferente do Hugo ou do YAML. Usamos uma barra dupla para um comentário de linha única. Tudo bem, vamos salvar isso. Talvez seja necessário reiniciar seu servidor para isso funcione e verificaremos que o site agora foi, em vez de dinamicamente, nos leva ao próximo passo, precisamos criar um novo script de volta. Ao deslizar Mei Ti. Explique o que é um bom script para Becky's se entrarmos em inspecionar e depois o menu de três pontos e executar o comando, que também é Control Shift P, superando Java e, em seguida, desabilitar o JavaScript. Nada vai acontecer ainda. Você precisa atualizar a página. Você pode controlar R ou clicar no botão Atualizar. Você verá agora que não temos nada ao lado direitos autorais porque o JavaScript não está funcionando. Um bom fallback de script é alguns textos que serão exibidos somente se o JavaScript estiver desativado ou não for suportado nesse navegador. É tão simples quanto criar uma tag chamada um bom script. Você pode fazer isso automaticamente com o emit. E então lá dentro, começaremos com um bom exemplo simples. Vamos colocar no ano 2025, por exemplo, vai torná-lo um u no passado em 2020. Vai salvá-lo. Atualize nosso navegador. Você verá o ano de 2020 surgir. Se JavaScript TCC rotulado, faça-os melhorar, vamos usar Hugo degenerado que você receberá os comentários. Este código aqui embaixo. Vamos cortá-lo e , em seguida, vamos colá-lo na nova seção de script. E agora ele vai inserir o ano atual em que nenhuma tag de script. Mas aqui está o problema. Ele só faz isso quando você constrói seu site. Você não construirá seu site todos os dias. Você provavelmente o constrói todos os anos. Mas começou por volta de janeiro, fevereiro, março tem uma grande chance você ter no ano anterior. E é assim que estamos usando JavaScript para gerar dinamicamente o dydt. Temos nossas costas completas para o caso de atualizar o site. E está chegando como 2021. E, em seguida, habilitaremos JavaScript, Java e o ativaremos e atualizaremos o outro direito, habilitado o JavaScript para fechar as ferramentas do desenvolvedor e atualizar. E funciona muito bem. É isso para o vídeo. Há muito o que absorver. Há uma geração dinâmica e estática da foto. Você tem alguma dúvida na seção de discussão abaixo. Caso contrário, você pode baixar o código-fonte desta lição concluída. Vejo você na próxima lição. 11. Criar uma única página: Ao longo deste projeto até agora estamos trabalhando apenas na página inicial. Agora vamos ver como creditar páginas adicionais e termos Hugo que chamamos de páginas únicas. Ao concluir esta lição, você poderá criar um modelo de página única. Você seria capaz de criar uma queda simulada para uma única página. E você seria capaz de gerar um link de menu a partir de uma única página inicial. A primeira coisa que vamos fazer é corrigir um modelo de página única. Seu projeto precisa entrar em uma pasta Layouts e, em seguida, por padrão, temos que ter HTML single.php suficiente e ainda não tocamos em ver. A primeira coisa que temos que fazer, é muito semelhante ao index.html. Temos que definir o bloco que estava visando inteiramente o bloco principal, apenas o bloco de lixamento. Na verdade, temos o suficiente por si só. E então vamos deixar algumas linhas e vamos colocar agora e marcar, podemos colocar uma marcação de seção. Vamos dar a ele uma classe minha. Apenas no caso de precisarmos segmentar essa seção com algum CSS na pista. Vou colocar nosso Container. Tab primeira linha, linha. Vamos colocá-lo em uma coluna. É muito importante que se você quisesse fazer bootstrap para funcionar corretamente, você deve seguir esse pedido sempre. E então vamos colocar em um cabeçalho. H1 inserirá o título da página. Então usamos isso com o título de ponto T. Em seguida, vamos colocá-lo em um subtítulo. Agora, esse subtotal pode nem sempre um P. Temos usá-lo em tags condicionais que, se ele não aparecer, o código não será executado porque você não deseja gerar uma seta ou ter uma tag vazia em nossa site. Então, usamos com pontos params com um sub título de ponto P maiúsculo. Então vamos executar um H2. E faremos isso em itálico. Faremos ponto FST para itálico estilo fonte, e também faremos o tamanho da fonte de três. estágio três também fará o texto silenciado, apenas um pouco e sobe um pouco. Achei que os carrapatos silenciavam. Então vamos colocar um aparelho encaracolado com um ponto. Esse ponto estará gerando os dados a partir do subtítulo de pontos pontos params. Agora, embaixo, vamos colocar na marcação. A próxima coisa que temos que fazer é o conteúdo da página. Vamos fazer uma div. Faremos preenchimento acima e abaixo do de três. Então vamos fazer dot py, traço três, que é superior e inferior. Nós faremos nossos aparelhos encaracolados. Pensamos em conteúdo. Se configurar nosso modelo básico agora preciso criar uma queda simulada para o conteúdo da página. Quanto melhor como fazer isso é usar um comando controlará o comando CEO dizer para fechar o servidor. Quero dizer, arquétipos. No início do curso. Nós o configuramos para que o rascunho fosse falso. Por padrão, quando criamos uma nova página usando o Guigo, não será um rascunho. Por padrão, prontas para uso todas as páginas que você cria um rascunho e realmente faz um p.sit. O comando é que Hugo sabia que usamos barra sobre barra, ponto de índice, MD em. Então você verá na pasta de conteúdo que temos nossa pasta Sobre e index.html. Você pode, por exemplo, Hugo sabia. E então você poderia fazer o processo. Você acabará com um arquivo aqui chamado processo. Eles funcionam de forma muito semelhante em termos de navegação. Eu prefiro eles em sua própria pasta porque, mais tarde, você estará olhando os recursos e imagens da página e armazenando imagens com os arquivos. E é muito mais fácil se você criar uma subpasta para cada página. Vou excluir esse lá. Vamos agora dar uma olhada na queda simulada. Então, a primeira coisa que vamos criar é o subtotal. Vamos colocar aqui, por exemplo, servindo a comunidade local. Desde 1999. Em seguida, vamos criar alguns textos. Se você seguir as instruções da lição anterior, você poderá usar o Emmet dentro do falso alarme. Então vamos digitar 100 por mês uma linha e eu vou executá-la novamente. Vá correr lorem 90 dias de tempo. Agora, à medida que fechamos o servidor hago para executar o novo comando Hugo terá que executar vocês novamente. E então vamos verificar o site e dizer: Olha, ainda não configuramos os itens do menu. Teremos que navegar manualmente até a barra Sobre. Você pode dizer que estamos usando o modelo que acabamos de criar sem legendado. Desativou o subtítulo, por exemplo. Vou colocar um hash antes do subtotal, digamos que você não queira que essa página desapareça. Mas se inspecionarmos, você notará que as receitas de etiquetas também. E é por isso que usei o comando width. Isso nos leva ao último passo e isso é criar um item de menu e um branco. Voltamos ao nosso índice ponto m d, O principal com o sublinhado na raiz da pasta de conteúdo. Você notará que ele está atribuído ao menu principal e tem um peso de latas ou copiá-lo . Eles vão voltar a ligar nosso subtotal. E então vamos colar isso , mas temos que mudar o branco e faremos com que ele dê um peso de 20. Dessa forma, é o segundo item no menu. Se estivermos olhando para o arquivo de configuração, você verá que também temos um outono com o peso de 1900. Então, temos centenas de lata 2019 que eu deveria saber, exibir em ordem. Vamos dar uma olhada. Eles estão sempre lutando na ordem correta e o estado ativo também está funcionando muito bem, porque nossa página sobre, que são as páginas atuais, ponto-com. Se tivermos uma casa, você verá que é Docker também. Algumas pessoas usam JavaScript para fazer essa função, mas é muito mais fácil com ego ser um gerador de sites estático. Podemos fazer isso automaticamente. É isso para esta lição. Você pode criar quantas páginas quiser e todas elas usarão esse modelo. Veremos modelos personalizados em um curso posterior. Vendo a próxima lição. 12. Criar uma página de lista: Bem-vindo à próxima lição. Nesta lição, estamos analisando a criação de páginas de lista. Esta lição será um pouco mais longa que a anterior. E isso porque as páginas de listas são bastante complexas e também estamos analisando a paginação. Ao concluir esta lição, você poderá criar uma parcial para exibir o cabeçalho de cada página de forma consistente. Você poderá criar pelo menos um modelo de página. Você poderá criar um arquivo de marcação para pelo menos página. Você seria capaz de gerar um link de menu para a página de lista através de sua primeira matéria. Você seria capaz de criar um espaço reservado páginas únicas para o pacote de ramificação. E isso é apenas para fins de demonstração. Neste tutorial, você teve uma paginação, a menor exibição de páginas únicas na sua página de lista. É melhor controlar o número de páginas exibidas em cada página paginada e poderá controlar o tamanho da exibição do resumo da página para cada página na página da lista. Primeiro passo, vamos fazer uma parcial. Portanto, cada página tem o título, exibido de forma consistente. Volte para o nosso HTML single.php e transportará todos os textos usados para exibir o título. Vamos cortar isso e, em seu lugar, colocaremos duas chaves encaracoladas. E vamos executar um comando chamado parcial. E vamos chamá-lo de título. E então você tem que colocar um ponto final para que as páginas inteiras contexturem, essas pass-through para essa parcial. Agora, se você pressionar Salvar, você verá um erro gerado e isso porque ainda não fizemos isso parcial. Eu entro na sua pasta parcial e crio um novo arquivo chamado HTML de ponto intitulado dentro dessa parcial, colando o código que acabamos cortar alguns momentos atrás e salvá-lo. Vamos dar uma olhada para ver se tudo está funcionando conforme o esperado. Nunca cheguei às páginas Sobre. Você pode ver que o total ainda está sendo exibido, mesmo que esteja sendo retirado da parcial. Agora, na segunda etapa, temos que criar um modelo de página de lista para exibir menos páginas. Se você estiver procurando mais informações sobre como as páginas de lista funcionam, vincularei a página de documentos Hugo para pacotes de páginas e você verá que um pacote de ramificação tem uma queda de índice com um sublinhado. Antes disso, usaremos o layout de menor tipo que está trabalhando nesta lição. A lição anterior estava usando um ponto de índice MD com o sublinhado e que você usa o tipo de layout único. Os modelos de leasing também exibem pelo menos todas as outras páginas dentro dessa pasta entrarão no list.html dentro da nossa pasta padrão, dentro do layout. E de acordo com a única página, precisamos encontrar minha regra, basta copiar todo o arquivo. Vamos mudar isso. Então, a primeira coisa que faremos é por baixo do conteúdo, vamos usar o alcance. E vamos passar por todas as páginas. Temos que colocar a etiqueta final para acabar com esse oceano. E então, lá dentro, vamos exibir a batida dessa página. Então, vamos usar o H2. Nós costumávamos H1 anteriormente dentro deste T2 parcial e depois Tab. Então usaremos um link i em um traço. E o link usaremos chaves que pensamos que permalink com um P. maiúsculo E, em seguida, entre a abertura e o fechamento de uma tag, vamos inserir o título dessa página, então use o título do ponto com um T. Então, abaixo vamos exibir um resumo do texto nessa página, usaremos as duas chaves e será um resumo de pontos. Vamos envolver tudo isso dentro de uma tag de artigo. Smock down fall. Agora, a página de lista que podemos colocá-lo para exibir vai parar aqui caras sempre com Controle C ou Comando C com Hugo soube slash products slash underscore index.html. Vemos o que nossa pasta de produtos e nosso index.html, o que estou colocando em algum conteúdo. Vamos salvá-lo para, continuamos, vamos atribuí-lo ao menu do menu principal e depois dois pontos e procuraremos principal. E vamos dar-lhe um peso de 30. Portanto, está à direita do item de menu existente que temos para reiniciar o servidor Hugo e ter um novo item de menu para produtos como cabeçalhos APEDE sendo puxados corretamente. E assim como o conteúdo, mas nada mais tem seu voo. E isso porque ainda não criamos o item de página única. Agora vou criar algum espaço reservado. Vamos apenas temporários. páginas serão páginas únicas e elas vão morar dentro do pacote de filiais, onde nosso índice de produtos cai deixa o servidor novamente. Vamos executar Hugo soube slash products slash cars dot md. Duas maneiras de fazer isso. Podemos ter o seguinte em carros dot MD, ou se vamos usar fotos mais tarde, você pode criar uma pasta chamada carros e renomear o arquivo para indexar ponto m d. Recomendar este método porque é muito melhor para expansão mais tarde. Arquivo Index.html. Vamos adicionar algum conteúdo a ele. Vamos executar Lorem. Acho que é amanhã em um parágrafo de 30 palavras e depois alarme em um parágrafo de 50 palavras. E então alarme talvez centenas desta vez. E então vou salvar isso. Precisamos vários produtos para que possamos fazer com que a paginação funcione. Então o que vou fazer é copiar e colar. Causa algumas vezes. Vou renomeá-lo para barcos. E então vou renomear as próximas 12 motos e colocá-las na pasta correta. E então vou renomear o último misto para a caixa do motor. Vou continuar fazendo isso e te vejo em um minuto. Tenho um monte de pastas perto delas ou quais arquivos MDT de ponto de índice e digo a eles o que vou entrar e renomear o título de cada uma para corresponder à pasta. Vocês passaram nove noves e te vejo em um minuto. Tudo bem, então vou me certificar de que estão todos salvos e fechados. Em seguida, executaremos o servidor novamente e veremos o que acontece. Pessoal está encontrando um resumo de todas as páginas que existem. Como você acha que precisamos de um pouco de espaço entre eles? Precisamos de algum tempero entre o resumo e o rodapé na parte inferior. Volte para nossa seção list.html. Faremos P B3 ou preenchimento inferior três. E vamos embrulhar nosso resumo em uma div com um preenchimento inferior três. Então Pb três pré-fabricados F3 dirá isso e dará uma olhada. É bastante básico, mas por enquanto é funcional o suficiente. Crédito uma longa lista de todas as páginas únicas que existem na pasta de produtos. Agora precisamos paginar que exiba apenas um determinado número que eu exibi por página. A maneira como podemos fazer isso é onde organizamos todas as páginas dentro da paginação de pontos adicionados ou ao lado disso. Se salvarmos isso, fomos diferentes porque, por padrão, o Hugo exibe dez páginas quando pagina. Então, vamos agora criar os controles de paginação na parte inferior da página e voltaremos e alteraremos o número de páginas que ele exibiu por página. Para exibir os controles de paginação tem um modelo interno e podemos copiá-lo e colá-lo desta página. E eu vinculei a essa página de documentos. Na seção de recursos. Depois da tag, vou criar uma div porque vamos estilizá-la em um minuto. Acredita-se que Dave, vou colar no modelo interno de paginação para que os controles de paginação apareçam modelo interno de paginação para , teremos que limitar o número de páginas que são exibidas por página. Vou copiar essa piramidal. Em seguida, abriremos nosso arquivo de configuração. Vamos colocá-lo em um comentário, colocar em paginação e definiremos para cinco. Vamos salvar isso. Agora você pode ver que temos 12345 produtos e, em seguida, temos nossos controles na parte inferior. E essas, na verdade, são classes Bootstrap por padrão, se você for, podemos ir para nossa segunda página. Você notará na parte superior que o URL muda. Estamos na página dois. E se voltarmos, está apenas na página de índice. Podemos fazer um pouco de trabalho para tornar essa exibição um pouco melhor. Voltaremos para a página de lista que criamos anteriormente. Vamos colocá-lo em classe igual. Primeiro de tudo, faremos em traço três para margem de crédito ao redor para manter outros objetos longe dele. E, em seguida, para enviá-lo, temos que fazer o fluxo d dash para correção de exibição. Depois de habilitar os flocos, podemos justificar o centro de conteúdo. Vamos salvar isso. Como você pode ver, está ótimo. A próxima coisa que veremos é como controlar o tamanho do resumo da página usado em nossa página de índice. Temos um pouco de texto exagerado para cada produto. Vamos voltar e vamos consertar isso. Agora, existem algumas maneiras de fazer isso. A maneira mais simples de fazer isso com uma configuração que está usando o parâmetro de comprimento de resumo. Então, vamos copiar isso. Vá para a queda da configuração. Vamos colocar em um comentário Pi definido em. E isso não só faz palavras, mas Hugo arredonda em duas frases, uma vez que, dessa forma colocando sete palavras, por exemplo , pessoal, estamos adicionando isso à frase mais próxima. Então, vou mudar a frase ao redor. Vá para barcos. Agarrou sua frase fora dele coloca o site inicial que você pode ver como vocês, mesmo que tivéssemos apenas sete palavras, é arredondado para a frase mais próxima, enquanto ele teria recebido sete palavras. Agora, por exemplo, você acha que isso parece terrível para seus produtos. Existem dois, caso contrário, podemos gerar resumos manualmente. A primeira alternativa ao resumo automático é a divisão manual. Agora, você deve copiar e colar isso exatamente. Essas tags. Vamos copiar isso. Em seguida, entraremos em R Markdown para o nosso produto de barcos. Ele colará isso e salvará. Você pode ver lá que todos os textos acima dessa tag estão sendo exibidos como um resumo para barcos. O próximo que cheguei para resumo é usar o tapete frontal e vamos usar uma variável de resumo em nosso prado frontal. Então, vou copiar isso. Vou para a caixa. O produto colocará o resumo e ele copiará uma frase ou duas para esse resumo. E então vamos salvá-lo. Começou com a caixa de palavras. Em seguida, temos nossa substituição de resumo para bicicletas usando o metal frontal. As três maneiras pelas quais podemos gerar resumos, Hugo TID para a Lição dez. Parabéns, você chegou ao final da parte principal do curso. Vejo você na próxima lição. Lembre-se, se você tiver alguma dúvida, você pode perguntá-las abaixo e eu vou tentar voltar o mais rápido possível. 13. Crie e carregue o website: Esta lição tem tudo a ver com a construção do site. Agora, até agora neste curso, você tem trabalhado com o servidor de desenvolvimento de vocês. Agora vamos realmente construir o site, gerar alguns arquivos HTML, testá-los e depois carregá-los via FTP. Após a conclusão deste vídeo, você poderá criar um site para a pasta pública. Você também poderá modificar o HTML para reduzir seu tamanho. Você seria capaz de testar o aplicativo do site antes de enviá-lo via FTP. E você poderá fazer upload dos arquivos dos sites via FTP. A primeira coisa que vamos ver é como construir com os arquivos de saída do cabeçalho Hugo. Antes de construirmos o site usando Hugo, temos que dizer ao ego dela, o nome de domínio para o qual vamos enviar isso. Dessa forma, Hugo pode criar os URLs corretamente. Se você entrar no arquivo de configuração, verá que há um item chamado URL de polarização. Agora, antes de aparecer no questionário, você precisa verificar o nome do domínio. Por enquanto, vamos usar localhost. Ela colocou uma barra depois disso. Há mais uma configuração que temos que fazer antes de construirmos o site. E isso é que precisamos desativar a geração da pasta de categorias e da pasta de tags. Podemos fazer isso com tipos de deficiência. Coloque o código exato e , em seguida, cheguei aqui, coloquei meu comentário acima dele. Mesmo que não tenhamos taxonomias ou categorias ou tags, essas pastas serão geradas de qualquer maneira. Agora, levante este link na seção de recursos, há um comando chamado Hugo, e você precisa fornecer alguns sinalizadores para ele. Opcionalmente. Acabamos de executar o comando Hugo. Na verdade, ele será construído imediatamente. Então, vamos dar uma chance a isso. De volta ao nosso projeto. Falaremos em Hugo. E vou tornar esse termo um pouco maior. É muito parecido com o que você normalmente obtém exceto que, na verdade, saídas de arquivos para você. Eu executei o Hugo sem a configuração de tipos desabilitados apenas para mostrar o que você obtém. Como você pode ver, temos uma pasta de categoria e uma pasta de tags. E lá dentro temos nosso index.html. Não queremos isso para este site. Vou executá-lo novamente com essa configuração no lugar, como acabei de mostrar que você vai dar uma olhada na diferença. Agora, vou usar um comando chamado DIR de destino limpo. Eles precisam usar isso dito que os itens na pasta foram excluídos. Se você fizer alterações em seu site, digamos, por exemplo, você exclui uma página e depois reconstrói o ego dele. Essa página excluída ainda estará lá, a menos que você exclua manualmente tudo na foto ou execute esse comando. Agora não tínhamos esses arquivos desnecessários e se você usar um tempo para navegar até eles, provavelmente não faria sentido. E seria como se fosse um erro de página, vamos dar uma olhada dentro de um dos arquivos e ver o que vocês saíram. Como você pode ver, há muito espaço em todo o arquivo. Podemos remover esse espaço. Nós estaremos reduzindo o arquivo não muito, mas isso terá um impacto nos tempos de carregamento para usos. ampliação remove todos os espaços em branco extras e novos caracteres de linha para reduzir o tamanho do arquivo. Isso, por sua vez, criará um download mais rápido para o usuário. Você pode olhar para a página de documentos. Existe uma opção que podemos usar chamada minify. Precisamos inserir o traço, traço minify após o comando Hugo. Ele ampliará qualquer formato de saída suportado, que é basicamente apenas HTML. Ele não suporta JavaScript ou CSS. Vamos dar uma olhada. Então, abriremos o arquivo index.html. Como você pode ver, todos os espaços em branco se eles removerem osso, infelizmente, ele não remove os caracteres de nova linha. Antes de se preocupar com o upload de seus arquivos com um software FTP para um servidor remoto. Eu recomendo que você o teste localmente e é muito fácil de fazer. O pacote de software que vamos usar para executar um servidor de teste é o XAMPP. É um conjunto gratuito de software e você pode usá-lo para uma variedade de propósitos. Também o usarei para fazer um upload de FTP de teste. Você também pode tentar isso se não tiver um servidor FTP para carregar os arquivos. Para. No início deste curso, mostrei como instalar o Hugo e todo o software associado. É super fácil instalar o XAMPP. Não vou passar por esse processo. Ele tem versões disponíveis para Windows, Linux e Mac. Então, é bom para todos. Abri a amostra x m dupla p.stance. Vamos iniciar o servidor Apache. Não precisamos do MySQL porque estamos fazendo um site estático. Em seguida, você tem que navegar até a pasta e ela informa aqui nos registros que ela está instalada em C slash x e antiga peça, vamos navegar até essa pasta. E depois que você estiver nessa pasta, você terá que entrar em documentos HT. Mccartney tem um exemplo de site. Então, vamos voltar ao Chrome e veremos se conseguimos encontrar isso. No Chrome. Vou falar em anfitrião local agora, tenha cuidado com a foto do dia, ele vai querer ir para a porta cento e trinta e cento e três aquele cara, mas não queremos isso. Só queremos a porta padrão de 80. Há o site que vamos apenas olhar. Vamos excluir este site porque não precisamos dele. Vamos fazer o upload do nosso próprio. Ei, caras viram. Você pode Platão como falso, voltar para você ou hugo pasta pública precisa de Control I, ou você pode destacar todos os arquivos. Faça Control C. E, em seguida, clique na pasta docs, cole-os com Control V ou Command V. Em seguida, voltamos ao nosso navegador e verificaremos. Então, atualizaremos a página. Livre-se dessa página do painel. Como você pode ver, temos nosso lado Hugo e isso está emulando seu site carregado para um servidor FTP e colocamos nossa paginação funcionando. Temos nossa única página está funcionando. Estamos prontos para carregar isso para um sete via FTP. Isso nos leva ao último passo em todo o tutorial e isso está carregando seu novo site via FTP. Agora vou comer quando o SEP for carregado por FTP, no entanto, ele só está disponível no Windows se você estiver usando um Mac ou Linux. Um exemplo de um bom software que você pode usar. Isso cai muito. Tenho um suporte multiplataforma, mas todos os programas FTP são bastante semelhantes. Você deseja emular o upload para FTP em seu próprio computador sem usar um servidor web. Xampp inclui muito as quedas. Servidor Ftp, se você iniciar isso e depois ir para o botão Admin, estamos configurando o servidor para um a 7 pontos 0 No.1, que é localhost. Em seguida, na configuração, indo para o botão de usuários, você cria um usuário, dá uma senha simples e garante que compartilhou algumas pastas. Estou compartilhando os slides, os exames barra a pasta HT docs. Vou dar todas as permissões porque precisamos ser capazes de fazer isso. FTP violeta. Defina isso como o diretório inicial. Vamos salvar isso. Agora podemos software de FTP. Vou criar uma nova sessão. Vou me conectar a um a sete pontos 0 ponto ponto um. Agora isso pode mudar dependendo de onde você está enviando suas falsas testemunhas. Isso é apenas para teste localhost. Vou colocar o nome de usuário e a senha do meu servidor de teste pressionará Login. Agora, essas são as quedas antigas que copiamos anteriormente para a pasta de documentos HT. Vou destacá-los e clicar em excluir. Exclua esse falso. Esse é o servidor remoto. E esta é a nossa pasta pública onde criamos os arquivos para destacar todos os arquivos em nossa pasta pública. Nós os arrastamos para o outro lado. Se fosse um servidor remoto, provavelmente demorará um pouco para que eles sejam carregados e então podemos ir e podemos navegar até a página e ver se ela funciona. Parece que está funcionando depois de enviarmos via FTP. Grandes parabéns àqueles que chegaram ao final do tutorial. Você fez um ótimo trabalho. Você aprendeu muitas habilidades e estou ansioso para vê-lo em meus outros tutoriais Hugo onde exploramos todos esses conceitos e muito mais em detalhes muito maiores. 14. Resumo: Então, espero que você tenha gostado do curso e tenha conseguido muito com isso. Bem, muitos dos tópicos não eram tão aprofundados embora projetados para serem uma introdução completa. Mas não se preocupe, mois, lançando mais cursos que cobrem todos os aspectos do web design estático. Vejo você no próximo curso. 15. Bônus — automatize as tarefas do Hugo com roteiros de NPM: Esta é uma lição bônus. Eu tive muitos comentários. As pessoas que pedem recursos adicionais como este que vamos fazer, é criar uma lista de scripts que serão executados com o gerenciador de pacotes do NPM para que possamos automatizar as tarefas que precisarão ser executadas com Hugo. Então, vamos começar. Vamos para um novo terminal e a primeira coisa que vamos executar é npm. Nele. Você deve ter o npm instalado. Se você baixar o Node.js, ele terá o NPM incluído para você. A primeira coisa que faremos é pedir o nome do projeto. Nesse caso específico, o nome da pasta está perfeitamente bom. Ele tende a versão em apenas defini-lo em 0.1 para um projeto no qual estou apenas começando. O último é para patches. O dígito médio é quatro recursos tão fixos quanto a mudança. E o primeiro dígito principal é para quebrar mudanças. E você geralmente não o rotula como versão um até que seja uma versão de produção estável. Então, vou ficar com 0,1 por enquanto. Descrição. Opcionalmente, você pode colocar uma descrição para seu projeto. Isso ocorre principalmente se você estiver publicando seu projeto no Repositório NPM e geralmente não publicar sites no repositório npm. Mas não precisa colocar uma descrição lá apenas para se lembrar do que se trata esse projeto em particular. Na verdade, não temos um ponto de entrada, pois estamos usando o Qie Gei para compilar o site. Mas o que você poderia colocar lá é barra pública index.html, mas isso realmente não importa. Não temos um comando de teste. E já executei git init neste projeto porque estou enviando-o para o GitHub. Portanto, já é para pegar isso e tem o endereço lá do repositório Git. É muito útil ter esse endereço em seu arquivo package.json, que forma criando agora palavras-chave. Você não quer isso. E isso é principalmente se você estiver carregando para o NPM. Para que as pessoas possam pesquisar seu projeto. Autor. Novamente, é uma busca instável por seus projetos, por isso não importa. E o tempo que nós licenciaríamos. E então temos que confirmar o lado esquerdo. Você verá package.json fechando o terminal para que possamos dar uma olhada. Assim, você pode excluir coisas que você não precisa. Não vou me preocupar com o roteiro de teste principal da Olivia lá por enquanto. Vou me livrar do autor. Erros de glicinas na página inicial. Tenha em mente que você não pode ter vírgulas à direita no Jason tem que se livrar dessa vírgula à direita. Em seguida, estamos prontos para começar a usar os scripts. Primeiro vamos olhar é div. Vou recuar tudo isso. Vamos executar o servidor de desenvolvimento. Como você sabe, estávamos no servidor Hugo, mas há mais algumas coisas que podemos fazer para ter uma ideia de todas as opções disponíveis para vocês. Servidor. Se abrirmos um novo terminal e falamos Hugo, servidor, espaço, traço, traço, ajuda. Ele listará todas as bandeiras que podemos aplicar. O que estamos realmente interessados, ele é dash, dash G, C. E isso executa algumas tarefas de limpeza após a compilação, o que é ótimo para manter as coisas limpas pista prontas para carregar para obter, por exemplo, para salvar seu progresso. E o próximo com o qual estamos preocupados é a renderização rápida desativada. E o que isso faz é que ele habilita renderizações completas em alterações, assim, diminui a velocidade do seu servidor de desenvolvimento. Infelizmente, o romboédrico é extremamente rápido. E se você tiver sido desativado mais rápido e estiver habilitado, isso significa que você sempre obterá a versão mais atualizada do site. modo geral, faremos é correr dash, traço G, C. Então traço, traço, desabilitar um jejum com F maiúsculo e renderizar com R. maiúsculo E essa, para mim, é a melhor maneira de executar o script de desenvolvimento. A próxima parte disso é para visualizar arquivos. Há duas maneiras de eu fazer isso. O primeiro é criar rascunhos, e isso é para criar conteúdo marcado como rascunho verdadeiro. E o outro é construir futuro. E isso é para conteúdo que tem uma data que está no futuro em comparação com a data em que você está executando as compilações, como hoje. Então eu costumo combiná-los em uma chamada prévia. Vamos em frente e vamos fazer isso. E, na verdade, é um atalho. O que faremos, colocaremos uma vírgula após esse script e, em seguida, faremos a visualização dos dois pontos do desenvolvimento. A maneira como usamos o atalho é npm. Execute dev. E então traço, traço, espaço, traço, traço. Construa rascunhos com D maiúsculo, traço, traço, construa futuro. Você deve colocar dois pontos após o nome do script para que ele seja válido. Json dirá isso e antes de continuarmos, vamos experimentá-lo. Agora, em vez de digitar o servidor cue guys, todas as vezes, você pode realmente ir para o canto inferior esquerdo, onde diz scripts npm e eles aparecerão lá para você. Essa é a maneira automática. Vou te mostrar isso primeiro e depois mostrarei como fazer isso manualmente. Então, temos que fazer é apertar o botão play. Isso não está ativado por padrão no Visual Studio Code. E então, se você procurar mais para cima, verá que o comando real, mas desabilitou a renderização rápida e a coleta de lixo. E o site foi construído. Você pode então usar o Controle C para parar ou simplesmente apertar o ícone da lixeira para matar o terminal. Em seguida, obtivemos nossa prévia. Ele também executa uma tarefa. Você percebe que é em dois passos. Temos nosso primeiro comando e, em seguida, adicionamos nossas opções a ele. Agora, a maneira manual de executar as tarefas, se obtivermos um novo terminal, normalmente não faço isso, mas você terá que fazer isso ocasionalmente, especialmente para instalar o NPM run. E então, se você olhar dentro do seu package.json, você verá Dev. Ele está digitando div, assim como digitamos aqui. Npm run dev, esse é o comando exato ou usado para executar o primeiro. Se você quiser fazer o segundo, seria dev dois pontos, pré-visualização. E isso executará o mesmo script, mas geralmente você pode usar apenas a opção do lado esquerdo do Visual Studio Code. Vamos fazer mais alguns scripts. Alguns farão é construir Q vai, vou colocar uma vírgula. E então vamos fazer dois pontos para serem votados nos comentários. Então estamos aqui, você tem que começar. Então vou mostrar as opções. Então corremos Hugo, traço, traço, ajuda. O primeiro com o qual estou preocupado é detalhado. E o que isso faz é mostrar tudo o que está acontecendo porque, ocasionalmente, quando você está executando o servidor, está tudo bem. Mas quando você quiser construir o site inteiro, você terá um problema. É aí que eu uso traço, traço, detalhado. Você poderia usar dash v. Dash v é realmente útil quando você está digitando e você quer apertar Enter. Mas quando você o coloca em um arquivo, teríamos que digitá-lo todas as vezes. Eu recomendo que você use a versão completa. Dessa forma, é muito mais fácil de entender. Então colocando Hugo dash, dash, verbose, então usamos coleta de lixo. Então dash, dash G, C. Então usaremos minify. E que vamos minificar todos os arquivos HTML XML, modificar qualquer um dos CSS HTML JavaScript para o minify porque é para produção. E o último faremos porque estamos enviando para a pasta pública. Vamos usar o traço, traço limpo destino. Dir dirá que X1 é aquele que acho realmente útil para o desenvolvimento. Isso é renderizar em disco. E eu tenho isso CamelCase. No entanto, o que faremos para começar é copiar e colar o comando do servidor Hugo. Cole isso. Voltaremos ao terminal do prompt de comando e analisaremos as opções. E uma opção, renderizar em disco, e isso servirá todos os arquivos do disco. Por padrão, todos os arquivos são colocados na memória do computador e são servidos no navegador. Não há registro deles lá para você olhar enquanto isso acontece, tudo está acontecendo instantaneamente. Se usarmos o disco de enxaguamento, todos os arquivos que colocamos no diretório público, e você pode realmente entrar lá. Você pode verificar o tamanho dos arquivos. Você pode abri-los enquanto ele está em execução. Então, ele salva você ter que apertar o botão Construir várias vezes. Então eu alugaria para o disco, na verdade CamelCase, então é T maiúsculo, D. E então, porque estamos usando o diretório público, é aí que os arquivos são carregados pelo Hugo copiarão e colando DIR de destino limpo também. E junto com isso, eu uso outro comando que é muito semelhante. E isso é Brenda para esse tipo de colocar dois pontos. E faremos uma prévia. E isso será um pouco semelhante ao nosso script anterior. Para div. Podemos colar isso em, exceto que desta vez não estamos executando o comando, estamos executando render para disco. O próximo que eu uso, provavelmente o mais frequentemente é renderizar para essa produção e esta é a principal que eu uso. Copie e colando. Exceto desta vez. Não vamos fazer rascunhos de contas e construir futuro. Vamos usar o ambiente. Vamos definir isso para produção. Então, em fogo na produção de hortelã e também minify porque estamos tentando emular essa construção de produção que foi mais adiante. Usamos minify. Não precisamos nos preocupar com o DIR de destino limpo porque já fiz isso no script de disco de estudo da sala principal. E o último não é totalmente obrigatório ter em mãos, mas a versão hugo. Isso é bem simples e honesto. É um lembrete. Versão Hugo. E isso permitirá que você saiba qual versão do Hugo você está executando. Então, por exemplo, podemos descer, apertar o botão play. E isso lhe dirá imediatamente qual versão do Hugo. E eu sempre usei o Hugo estendido porque ele tem a funcionalidade lá para construção CSS e JavaScript embutida. Mas ele me diz qual versão estou usando, 1.11010. Isso é um bônus. Feriado útil. Recomendo que você configure isso, personalize-o de acordo com o que mais lhe convier. Eu adoraria que você pudesse tirar algumas capturas de tela e aparecer na seção do projeto e me mostrar como você configurou pessoalmente seu próprio ambiente de desenvolvimento Hugo. 16. Bônus — arquivo de configuração dividida: Esta é outra lição bônus que estou lançando com base no feedback dos alunos que vão fazer é quando olhar para dividir o arquivo YAML do ponto de configuração em vários arquivos para facilitar a encontre a seção do arquivo de configuração que você procura. Fazemos isso é criar uma pasta de arquivos na raiz do seu projeto chamada config. Não fizemos uma pasta chamada sublinhado padrão. Em seguida, arrastaremos nosso ponto de configuração YAML para essa pasta. Agora imediatamente, isso funcionará perfeitamente bem. Mas o que vamos fazer é dividir a seção do menu. Vamos fazer para destacar tudo isso e vamos cortá-lo. Ele fará um arquivo chamado menu dot YAML e nós o colaremos. Mas o que tem que acontecer agora é que temos que remover o item de menu e destacar toda a configuração e trazê-lo de volta um nível com guia Shift porque não precisamos mais deles no seu I20 porque eles estavam em menu.html. Isso é feito automaticamente para nós. Há mais um arquivo que você usa com bastante frequência e isso é params dot YAML. Normalmente, você teria um item params, por exemplo. Aqui você pode ir, os params podem fazer algo como autor do site, por exemplo. Mas não precisávamos disso. Você acabou de colocar o autor do site no novo arquivo. Aquele lá só para rápido um. Isso economizará muito tempo. Isso manterá seus sites muito mais pequenos.