Modo de desenvolvimento no Squarespace: crie e edite seus próprios templates do Squarespace

1. Introdução: O Squarespace é uma plataforma fácil de usar para criar sites bonitos, geralmente direcionados para aqueles sem habilidades de codificação. Mas e se você puder ter controle total sobre seu site? E se você pudesse editar ou criar seu próprio modelo do Squarespace? Oi, eu sou Christopher Dodd e eu sou um professor de topo aqui no Skillshare.com cobrindo tópicos como desenvolvimento web e freelancing on-line. Nesta classe, vamos aprender a usar algo chamado modo de desenvolvedor no Squarespace. É um recurso no Squarespace que nos permite baixar nosso código de modelo e fazer atualizações mais precisas em nosso site, além de adicionar recursos que talvez ainda não existam em nosso template. O resultado é a mesma ótima experiência de usuário na construção de qualquer site do Squarespace. É só agora que você tem controle total sobre o modelo. Nesta classe, vamos começar com um modelo básico habilitar o modo desenvolvedor, e começar a construir nosso site usando tanto a interface de administração quanto as linguagens que compõem o modelo Squarespace, incluindo HTML, CSS, JavaScript e Jason do próprio Squarespace. Linguagem T. No final da classe, você entenderá a estrutura do modelo, bem como a maioria dos recursos disponíveis para personalizar através do uso de código. Tanto quanto eu sei, não há um curso como este. Estou animado para você se juntar a mim por dentro. 2. Ferramentas e conhecimentos necessários: Antes de começarmos com essa aula, eu queria cobrir alguns dos conhecimentos necessários ou ferramentas que você vai precisar para realmente seguir a classe. Claro, isso é mais uma classe intermediária, então ele assume que você já tem algumas habilidades de desenvolvedor web front- end. Eu tenho uma lista de algumas coisas aqui no meu computador, incluindo linha de comando, o uso de DevTools no Google Chrome ou qualquer navegador que você gosta de usar. Você precisa saber um pouco de CSS, e nós vamos falar sobre versões locais e ao vivo de um site, então isso é algo que você precisa saber também. Git básico e, claro, JSON. Eu só queria abordar essas coisas de antemão nesta lição. Se você sabe todas essas coisas, não se preocupe com esta lição, apenas pule, mas para aqueles de vocês que um pouco mais do lado iniciante, eu só queria cobrir estes fora porque eles vão tropeçar em você na classe se você não tem idéia do que são. Primeiro de tudo, linha de comando, uma ferramenta muito essencial para toda a programação. Por exemplo, eu uso iTerm para meu aplicativo de terminal, mas no Mac o padrão que vem com todos os computadores é Terminal. Aqui, você pode ver que é apenas um pouco de um aplicativo onde você pode escrever comandos, como uma linha básica, como uma linha básica, mudar para a pasta de código, listar a pasta de código, limpar. Você deve saber um pouco da linha de comando, mas se você seguir os comandos exatamente como eu digo no vídeo, você não deve encontrar muitos problemas, mesmo que você seja novo para escrever comandos na linha de comando. Como eu disse, o que eu vou usar nesta classe é iTerm. É um especial que eu tenho certos recursos configurados como, por exemplo, eu não tenho que digitar cd quando eu quero mudar para um diretório. Se eu quisesse fazer o que fiz antes, eu poderia apenas digitar código, e se não houver comando, ele entenderá que estou tentando mudar diretórios. No Windows, o programa provavelmente será chamado de Prompt de Comando. Tenho certeza de que é a ferramenta de linha de comando padrão que vem com o Windows. Só para estar ciente, vamos usar a linha de comando, mas não vamos ser pesados na linha de comando, então você não precisa ser um especialista nisso. A outra coisa que eu preciso que você esteja familiarizado é o Chrome DevTools ou qualquer software que você usa. O navegador que eu gosto de usar é o Google Chrome, mas talvez você queira usar o Firefox ou o Safari. O DevTools para mim, eu posso abrir pressionando o comando option “I” no meu Mac, e você terá este painel aqui que tem Elements e Console. Este aqui, Console é o que vamos estar olhando nesta classe como diz aqui, JS Console. O que vamos estar fazendo é que vamos fazer o que é chamado de console.log, que leva dados e basicamente o coloca neste console aqui. O que vamos fazer é pegar Objetos, colocá-los neste Console, e então vamos navegar através deles. Se você nunca viu isso antes, essa parte da turma pode ser um pouco desconhecida para você. Mas, novamente, esta é uma habilidade que você deve ter como um desenvolvedor web front-end usando o Console. Na verdade, se você quer uma aula puramente em DevTools, deixe-me saber, mas deve ser muito fácil de seguir junto com, no entanto. CSS, eu vou escrever alguns CSS, mas esta não é uma classe CSS. Eu não quero que você veja alguns CSS e então fique sobrecarregado com isso. Se você não entende CSS, eu recomendo que você aprenda CSS. Eu já tenho aulas aqui sobre Skillshare que você pode fazer. Mas se você não entende e não está interessado em aprender, obviamente, não se preocupe com isso. Não é essencial para esta classe, mas como um desenvolvedor web front-end criando modelos do Squarespace ou qualquer coisa no front-end, você definitivamente vai querer saber como usar CSS. Como mencionei aqui, Menos será discutido, mas não é um conhecimento necessário. Como vamos descobrir mais tarde nesta classe, estaremos usando menos arquivos que você pode simplesmente trocar com CSS. Menos é pré-compilador CSS. Você não precisa necessariamente saber o que é isso, mas apenas saiba que quando você vê.less no nome do arquivo, isso significa que você pode escrever um código CSS nele, ou você pode escrever um código Less, que é ligeiramente diferente do CSS. Mas não se preocupe se você não sabe nada sobre Less ou seu homólogo Sass, que eu tenho uma aula aqui no Skillshare também, você não precisa saber nada menos para obter o benefício desta classe. Quando você vê.less, apenas think.CSS se você não estiver familiarizado com Menos em tudo. Uma outra coisa que eu falo consistentemente durante toda a classe que pode confundi-lo é que eu falo sobre a versão local do site. Quando baixamos nosso código e executamos um servidor em nosso próprio computador, a fim de executar o código, isso é o que é chamado de executar algo localmente. Localmente significa apenas no seu computador. Ao longo da aula, o que vamos fazer é editar código em nosso próprio computador e isso vai mudar a versão ou mudar o que aparece na tela localmente assim em nosso próprio computador. Mas para que isso realmente vá para o site, nós vamos ter que empurrar essas mudanças, que eu vou mostrar a vocês mais tarde na aula. Eu só queria mencionar isso brevemente porque se você me ouvir dizer localmente, versão local, site local, isso é o que eu quero dizer, quero dizer, o site que estamos executando em nosso próprio computador. Não será o mesmo que o site do Squarespace em si. Eu também preciso que você entenda Git básico, Git muito básico. Git é um sistema de controle de versão. É o sistema de controle de versão mais popular, uma habilidade muito importante para ter como desenvolvedor. É importante conhecer o Git para esta classe porque vamos usá-lo para atualizar a versão live. Faremos alterações locais e então enviaremos para o site ao vivo do Squarespace. Vamos fazer isso através basicamente de apenas três comandos. Na verdade, eu acho que há um total de quatro comandos que estamos usando para o Git em toda a classe. Não muito, mas novamente, quando você ver Git e você não teve nenhuma experiência com ele antes, eu não quero que você surte. Só estamos usando quatro comandos. Um para baixar o código Git para o seu próprio computador, e depois um para adicionar o código ao seu Commit, depois para confirmar o código e, em seguida, enviar o código. É muito básico. Só não surte se não estiver familiarizado com o Git. Mais uma vez, muitos recursos on-line se você quiser aprender Git. Então a última coisa é JSON. JSON é apenas um formato de estrutura de dados simples. Se entrarmos em nosso navegador agora e procurarmos por JSON, ele foi para JSONlint. Ele significa JavaScript Object Notation. É um formato leve para armazenar e transportar dados. Uma vez que você coloca sua cabeça em torno disso, é muito simples. Eu definitivamente recomendo se você não tem idéia do que JSON é fazer alguma pesquisa sobre ele primeiro, mas basicamente, você só tem esses pares chave-valor. Neste caso, o valor é na verdade uma matriz e, em seguida, dentro dessa matriz, você tem vários objetos com dois pares de chave-valor diferentes. Isso é um pouco mais complexo, mas aqui você verá este exemplo aqui é um exemplo típico. Você tem a chave que é o primeiro nome e o valor que é John. A única habilidade que você realmente precisa com JSON nesta classe é saber como navegar através de um objeto JSON. Por exemplo, se eu quisesse obter John a partir desta estrutura de dados bem aqui, eu teria que encontrar o primeiro item da matriz, funcionários e, em seguida, pegar o primeiro nome fora desse item na matriz. Novamente, isso não é coisa complexa, mas se você ficar preso na parte JSON desta classe, eu definitivamente recomendo fazer uma pausa e ir pesquisando um pouco sobre JSON porque basicamente, JSON está no coração dos modelos do Squarespace. Não é algo que é particularmente complicado, mas ao mesmo tempo, ele vai te enganar se você não tem idéia do que está acontecendo com o JSON. Essa é uma boa recomendação para todas essas coisas. Se alguma dessas coisas que você não tem idéia, definitivamente faça alguma pesquisa. Eu recomendaria antes mesmo de chegar a esse ponto da aula. Eu só queria cobrir esse conhecimento necessário porque há algumas perguntas que surgem nas aulas às vezes. Ficar preso em pequenas coisas que eu realmente não considerei para um usuário iniciante, esta é mais uma classe intermediária, então tenha isso em mente. Estas são algumas das coisas, além do que vamos aprender na aula de hoje, com as quais você precisará ter alguma familiaridade. Eu só queria colocar este vídeo aqui. Obviamente, ferramentas necessárias, assim como qualquer outra das minhas aulas de desenvolvimento web, você vai precisar de um navegador web então para mim é Google Chrome. Você pode usar o Firefox ou o Safari e, em seguida, um editor de código. Como você pode ver aqui, eu gosto de usar o Atom quando estou trabalhando com apenas arquivos individuais. Isso é A-T-O-M. Quando estou trabalhando com projetos completos, gosto de usar o VS Code agora, que é a abreviação de Visual Studio Code. Obviamente, você vai precisar de um programa de linha de comando, mas isso vem padrão com qualquer computador. Nós vamos instalar algum outro software na classe, então você não precisa necessariamente ter isso ainda. Vamos passar por quais pacotes você precisa instalar nesta classe à medida que avançamos. Mas é isso, pessoal. Eu só queria ter certeza que você está ciente dessas coisas que você realmente precisa saber. Certifique-se de que você tem um editor de código e um navegador da Web como sempre. Isso é tudo. Vejo-te no próximo vídeo. 3. O que é um template do Squarespace: Antes de começar a editar e criar nosso modelo do Squarespace, precisamos ser claros sobre o que um modelo realmente é. Se entrarmos no site squarespace.com e clicarmos no item de menu para modelos, podemos ver um portfólio dos diferentes modelos que estão disponíveis por padrão no Squarespace. Eles têm estes que são os mais populares e, em seguida, você também tê-los organizados por categoria. Estes são aqueles que você pode querer usar se você tivesse um site de portfólio de fotografia ou talvez você tenha criado um site inteiro apenas para o seu casamento. Esses modelos provavelmente serão os que você deseja olhar primeiro. Mas, claro, não importa. Você pode usar qualquer modelo que quiser no Squarespace. A coisa legal sobre esses modelos, no entanto, é que eles funcionam em qualquer site do Squarespace. A arquitetura de back-end e todas as páginas e fotos que você adicionou ainda devem funcionar em todos esses modelos. Basicamente, é apenas personalizar o layout, apresentação e estilo do seu site. Para demonstrar isso, o que eu acho que é melhor é mostrar um dos meus sites e ver o que acontece quando mudamos o modelo. Como estou logado no momento, posso ir até aqui e clicar em “Painel de Conta”. Aqui você verá minha lista de sites. Este é o que vamos construir nesta classe, este é outro projeto que eu tenho, este é outro projeto que eu tenho, e a razão pela qual eles estão sentados aqui é porque eles são sites de teste com modo desenvolvedor ativado e um dos recursos do é que a avaliação nunca expira. Você pode tê-los no modo de desenvolvedor pelo tempo que quiser até estar pronto para publicar, e então você pode seguir um plano. Mas aqui em baixo é um site que está atualmente ao vivo e eu tenho um plano. É o meu website do portfólio de fotografia e videografia. Se eu clicar em “Editar Site”, ele me levará ao administrador do Squarespace deste site. Agora, se você não estiver familiarizado com este administrador, entraremos no básico em uma lição futura, mas para este vídeo, o que eu quero mostrar é o modelo. Vamos dar uma olhada rápida no meu site. Eu posso clicar nos itens do menu aqui ou ir para o diretório de páginas, e você pode ver aqui em “Navegação Secundária”, eu tenho “Eventos”, e aqui está uma galeria de vídeos incorporados. Estes são os links do Vimeo de alguns dos eventos que eu filmei. Se voltarmos aqui, eu tenho alguns vídeos no nicho de moda que eu filmei, e você pode ver o layout de todas essas páginas, é o mesmo. É apenas uma galeria de vídeos, e se eu for para a página “Fotos”, é apenas uma galeria de fotos diferentes. Posso enviá-los aqui no meu admin e eles aparecem na página com base no modelo que estou usando. Vamos voltar aqui, vamos “Home”, clique em “Design”, clique em “Template”, e você pode ver que estamos rodando o modelo Jasper, esse é o nosso modelo ao vivo. Mas o que podemos fazer é alternar modelos a qualquer momento e também podemos instalar um modelo sem ter que mudar imediatamente. Podemos realmente visualizar. Vou clicar em “Instalar novo modelo” e, como diz aqui, instalar um modelo não afetará seu site ativo. O que eu vou fazer é escolher um modelo que eu acho que também vai funcionar bem com um site como o meu de fotografia e portfólio de videografia. Bem aqui eu vou clicar em “ Avenida de Prévia ”, e isso realmente mostra uma prévia maior, não é realmente pré-visualização em sua loja. O que vamos ter que fazer é clicar em “Iniciar com este design”, e ele vai instalar esse modelo em nosso site. Aqui nós temos, podemos desinstalá-lo ou podemos clicar para visualizar. Eu vou pré-visualizar, e agora, o que você verá é que nosso site será agora carregado neste modelo. Agora, o problema com meu site, eu acredito, era que eu tinha toda a navegação dentro de uma navegação secundária. Como isso está usando a navegação primária, ele é inserido seu próprio navegador, mas se voltarmos para “Início ”, e então voltarmos para “Páginas”, e percorrermos essa navegação superior aqui, podemos ver todas as páginas que existem no meu site no momento. Eu posso ir para a página “Eventos” que olhamos antes, e você pode ver todo o mesmo conteúdo lá, todos os mesmos incorpora Vimeo, mas em vez de apresentá-lo como uma grade, o que este modelo tem feito apresentou-o como um apresentação de slides. Agora, temos que clicar nesta apresentação de slides e é assim que você reproduz um vídeo. Em seguida, com a página de fotografia, se eu for para a minha página “Fotos”, você pode ver as fotos também são exibidas em uma apresentação de slides. O ponto que eu estou fazendo aqui é que todo o conteúdo ainda está lá e nós ainda podemos ver o conteúdo, mas a diferença é que a aparência e a apresentação são diferentes. Para todas as galerias, temos essa apresentação de slides em vez do que tínhamos antes, que era uma grade. Obviamente há fontes que são diferentes, há o título do meu site que está posicionado de forma diferente, mas isso é tudo determinado como acabamos de discutir pelo modelo. É por isso que, porque o modelo é efetivamente apenas tomando qualquer conteúdo que você tem em seu site, não está alterando o conteúdo ou excluindo qualquer coisa, podemos mudar nosso modelo, tanto quanto possível, tanto quanto quer e podemos facilmente mudar de volta. Agora, eu tenho meu antigo site de volta. Na verdade, nunca o perdi. Vou clicar em “Desinstalar” porque estou satisfeito com este tema ou com este modelo. Isso foi demoing um modelo mudou em um site real, mas o que vamos fazer para esta classe é começar com um modelo base. A maneira como podemos fazer isso é indo para base-template.squarespace.com, então é base dash template dot squarespace dot com, e você pode ver este modelo base. Aqui, você pode clicar em “Criar um site como este”, o que eu vou fazer, e o que isso vai fazer é criar uma porta de novos desenvolvimentos ou uma nova porta de testes para você, que você pode transformar rapidamente em uma loja de desenvolvimento ativando o modo de desenvolvedor. Vamos entrar em um vídeo mais tarde, mas eu queria começar este modelo porque este vai ser o ponto de partida que vamos continuar a construir sobre a classe, e é também o que eu sugiro que você comece como bem, se você está aprendendo a construir seu próprio template porque ele tem um monte de coisas básicas que você precisa que você realmente não quer codificar do zero, mas ao mesmo tempo não é altamente opinativo no sentido de que não é altamente estilizado e não tem muito dentro, então não há muito que você tem que quebrar para obter o resultado que você quer. No próximo vídeo, vamos aprender a usar o administrador aqui. Vamos criar algum conteúdo e depois disso, vamos investigar como realmente editar o código do modelo. 4. Noções básicas do Squarespace: Então agora temos nosso novo site rodando o modelo base. Antes de realmente ir e editar este modelo, é importante que todos nós tenhamos uma compreensão de como o Squarespace realmente funciona com o administrador, usuários e respectivos. A maioria dos usos do Squarespace, a grande maioria deles só irá editar seu site a partir deste admin. Então é importante entendermos o que realmente estamos fazendo aqui. Para aqueles que têm experiência com o Squarespace e gerenciam um site do Squarespace por um tempo ou que criaram seu próprio site do Squarespace usando essa interface. Então talvez esta seja uma lição que você pode ignorar, mas para o resto de nós, eu quero realmente mostrar-lhe como você pode controlar o conteúdo e design do seu site apenas usando o administrador. Em seguida, vamos passar para como realmente editar o modelo com código. O administrador que você está olhando aqui é o único controle que você tem sobre o back-end do seu site e forma a estrutura do conteúdo do seu site. Saber essas coisas é muito importante antes de editar qualquer código. A primeira coisa que eu quero fazer é ir para as páginas e remover este conteúdo de demonstração. Então esta página, este blog. Agora, com o conteúdo de demonstração removido, podemos criar nossas próprias páginas. Se queremos que a página não seja vinculada na navegação, podemos clicar aqui. Ou se quisermos que ele apareça automaticamente na navegação do site, podemos clicar neste ícone aqui. Vou clicar neste ícone e temos as nossas opções aqui. Nesta seção de layout, podemos criar uma página com um layout predefinido. Aqui nesta seção de coleção, podemos adicionar o que é chamado de coleção no Squarespace. Uma coleção é basicamente algo como um blog, uma galeria, uma coleção de produtos é basicamente uma lista de algo. Então, quando clicarmos nele, devemos ver uma listagem. Em seguida, dentro de uma coleção você tem vários itens. O exemplo perfeito, é claro, é um blog, ao qual chegaremos em um segundo. Um blog, você pode clicar no blog e você verá uma lista de todos os posts do blog. Mas então você também pode clicar no post do blog individual e lê-los. Mas esse é um exemplo perfeito de uma coleção. É basicamente uma lista de conteúdo com páginas aparentes e páginas filhas. O outro conteúdo que podemos adicionar aqui é uma página de rosto que, tanto quanto eu sei, é uma página que cobre toda a sua tela e tem um ou dois links. Então você clica no link e, em seguida, você é levado para uma determinada página no resto do site. A outra opção aqui é abrir um link externo. O que eu vou fazer é criar uma página sobre. Então eu vou clicar aqui para o layout sobre. Temos três layouts diferentes que podemos escolher. Vou apenas clicar na versão do banner. Quando abrir esta caixa aqui, vou ligar para a página Sobre Nós. Depois de darmos esse nome, ele vai aparecer aqui. Você também pode ver que ele aparece em nossa navegação no site. Aqui é onde você pode editar o conteúdo do site. Se eu passar o mouse sobre o conteúdo da página, você poderá ver o conteúdo da página aparecer e há duas opções, Editar ou Configurações. Se eu pressionar Configurações, obtenho um intervalo de configurações diferentes para alterar aqui. Mas se eu clicar em Editar, terei acesso a esse construtor de páginas que vem no Squarespace. Então aqui eu tenho um bloco de texto. Posso editar o posicionamento do título. Se eu descer para este bloco de imagem aqui, eu posso adicionar uma imagem da minha área de trabalho ou eu posso clicar em editar e eu posso clicar aqui para procurar uma imagem. Esta é uma característica legal do Squarespace é que ele pesquisa automaticamente em splash, que é um site onde você pode encontrar fotos stock grátis. Digamos que quero usar isto. Clique em Adicionar ao site. Ele é processado e redimensionado. Lá temos ele. Vou clicar em Aplicar. Talvez eu escreva uma legenda. Garota fazendo abdominais. Vou deixar o conteúdo aqui porque é irrelevante. Aqui você pode editar a página como quiser. Você pode clicar nesses pequenos ícones aqui e adicionar diferentes blocos que estão disponíveis no construtor de páginas do Squarespace. É importante notar aqui que isso não é personalizável. Esses blocos vêm no Squarespace e até onde eu sei, não podemos adicionar nossos próprios blocos aqui. Tudo bem, há muitas opções aqui. Como você vai descobrir em breve com o modelo, nós somos realmente capazes de personalizar um pouco com código. Então não se preocupe lá. Se eu clicar em Salvar. Agora esta página está salva. Se eu voltar para a página de boas-vindas, você pode ver, como eu disse, está neste site de navegação aqui. Em seguida, quero mostrar-lhe uma coleção. Então mencionamos blog antes. Se eu clicar em Novo Blog, vou chamar isso de Blog. Se eu entrar aqui para o Blog, eu posso realmente adicionar em um novo blog post. Ele vai me pedir para inserir um título de post e uma descrição aqui. Eu só vou copiar e colar algum conteúdo, algum conteúdo muito básico. Lá vamos nós. Posso adicionar tags e categorias como você faria em qualquer plataforma de blogs que vai colocar em casa. Basta separá-los por uma vírgula e ela irá separá-los automaticamente. Bloquear. Vou escolher uma categoria de exercício. Legal. Então agora este post está no modo de rascunho, mas eu posso apertar salvar e publicar. Agora você pode ver que ele está nesta lista aqui. Então, se eu definir para um rascunho. Posso ver todos os meus rascunhos aqui. Eu também posso programá-los ou colocá-los em revisão, mas basicamente aqui na página do blog ou deixe-me apenas verificar novamente, Eu estou na página do blog. Se eu acertar a página do blog aqui, você verá que eu recebo uma lista de postagens abreviadas do blog que é apenas um no momento. Se eu realmente clicar na postagem do blog, você pode ver que é o mesmo, mas isso é porque eu só tenho um deles. Vamos realmente criar uma segunda postagem no blog para que eu possa provar o que estou dizendo aqui. Vamos ligar para esse, novo estou inventando coisas aqui. Não tome muito conhecimento do conteúdo real dessas páginas. Indo para criar essas categorias como Nutrição, clique em Salvar e Publicar. Acertar Feito. Agora você pode ver que este é o post do blog para as principais coisas para comer para se manter saudável. Se eu voltar para o blog, você pode ver que temos os dois posts aqui, então é como um anúncio. Isso deve trazer para casa a idéia de uma coleção. Com uma coleção, você tem uma coleção de postagens individuais, imagens, vídeos, neste caso, postagens de blog. Se você vai para a coleção, você pode ver a lista e, em seguida, você pode clicar sobre os itens individuais. Esse conceito é muito importante de entender porque podemos editar o código da lista e editar o código para os itens usando o modo de desenvolvedor do Squarespace. Finalmente, quero mostrar-lhe uma opção da categoria final, que é a outra categoria. Vou apenas adicionar um link externo. Assim, você pode adicionar um link para algo que não está em seu site. Eu vou apenas colocar e links para dizer, nos encontrar no Google. Se eu entrar aqui, academia local, e vamos fazer isso se abrir em uma nova janela. Vou acertar em “Save” nisso. Você verá que temos este ícone de link externo. Podemos reorganizar os links em nossa navegação. Podemos mover a página Sobre para não vincular seção e, portanto, ele não aparece em qualquer navegação. Mas basicamente temos os três tipos principais aqui que estão disponíveis para nós agora em nosso modelo, que são essas páginas dinâmicas básicas com o construtor de páginas, a coleção, digamos, neste caso, um blog e um link externo. Obviamente também temos uma página de rosto. Mas pode brincar com isso, se quiser. Uma coisa que eu esqueci de fazer na verdade é entrar em nossa seção de design e atualizar o título do site. Então, em vez do título do seu site, vou chamá-lo de Your Local Gym. O slogan vem visitar-nos. Não é realmente relevante. Mas agora ele vai ser atualizado onde quer que peguemos o título do site, ele vai puxar em seu ginásio local. Legal. Então, há mais recursos e vamos entrar nele à medida que construímos nosso modelo aqui. Mas estes são os conceitos centrais. Você basicamente está apenas criando páginas nesta parte de página aqui. Você pode optar por colocar isso em uma navegação ou colocá-lo na seção não link. Podemos realmente construir algumas opções aqui. Podemos criar nossas próprias coleções. Nós também podemos criar páginas estáticas, o que eu vou mostrar a você como fazer. Podemos realmente ter o que é chamado de pastas e índices, que nos permitem aninhar na navegação. Tudo isso está chegando nesta classe, mas esses são os conceitos básicos do Squarespace. Não há muito mais em termos de estrutura. Você só está construindo páginas e coleções diferentes. Seu modelo determinará a aparência quando você realmente visualizá-lo em seu site. Tudo bem, legal. Então, no próximo vídeo, vamos realmente começar a editar nosso modelo e vamos habilitar o modo de desenvolvedor. Então, vejo-te naquele vídeo. 5. Como editar seu template do Squarespace: Nesta lição, finalmente vamos apresentar este modo de desenvolvedor do Squarespace e falar sobre as duas maneiras pelas quais você pode atualizar seu template. Eu quero que você vá para a seção de configurações aqui e vá para Avançado, e então vá para o modo desenvolvedor um. Se clicarmos neste botão direito aqui, será confrontado com um aviso e, em seguida, clicar em continuar e de repente estará ativando o nosso modo de desenvolvedor. Se rolarmos para baixo até os detalhes da conectividade, podemos ver todos os detalhes que precisamos para nos conectarmos ao nosso site do Squarespace e, de fato, editar o modelo. Você tem o nome de usuário e a senha que é igual à sua conta do Squarespace, nome de usuário e senha, portanto, nenhuma nova informação lá. Mas aqui temos o nome do host SFTP e a porta e temos um repositório Git. O nome do host SFTP, tanto quanto eu sei, sempre será dev.squarespace.com. A porta que eu acho que realmente não muda também e o endereço do repositório Git, é este vai ser o endereço de desenvolvimento de sua loja com template.git no final. Isso está sujeito a mudanças, mas agora, é assim que funciona. Como você pode ver aqui, este é o endereço de desenvolvimento da minha loja e o repositório Git está apenas configurando como um template.git sobre isso. Agora, a maneira como vamos fazer isso nesta classe e a maneira que eu recomendo é usar o Git. A razão é porque você pode baixar o código localmente e editá-lo em seu próprio computador. Você pode fazer isso com SFTP, que veremos em apenas um segundo. Mas então você está editando arquivos individuais e aguardando o upload deles. Enquanto que com o Git, você pode executar um servidor local, fazer alterações, executá-lo no servidor local e, quando estiver pronto, você pode enviar essas alterações para o seu site do Squarespace. Push é um pouco da terminologia Git. Não tenho certeza se você está familiarizado com o Git, mas é uma habilidade muito importante aprender se você está fazendo desenvolvimento Web. Então espero saber tudo sobre o Git. Se não, estaremos cobrindo alguns Git básico. Não vai ser muito difícil. Mas antes de entrarmos no Git, o que eu quero mostrar a vocês é SFTP, e isso nos permite editar os arquivos diretamente no site. SFTP significa protocolo de transferência de arquivos seguro. Você pode estar familiarizado com FTP se você editou outro site antes, Eu editei meu site WordPress conectando-se via FTP, e que me permite editar os modelos diretamente. É um conceito semelhante. O que vamos precisar fazer é instalar um cliente FTP. O que instalei é Cyberduck, mas há outros que você pode usar, como FileZilla, provavelmente há um monte deles lá fora. Mas para esta aula, o que vou usar é o Cyberduck. Se você quiser seguir exatamente como eu estou fazendo isso, você pode baixar Cyberduck também. É completamente grátis. Deixe-me apenas olhar para você agora Cyberduck, ele realmente deve vir acima como a primeira opção. Lá vai você. O primeiro quando você procura no Google, tudo bem. Eu já o tenho instalado, então o que eu vou fazer é abrir o Cyberduck, e vamos abrir um novo navegador. Vou clicar em “Abrir conexão”. Aqui queremos alterar o protocolo de transferência de arquivos para protocolo transferência de arquivos seguro ou protocolo de transferência de arquivos SSH. Para o servidor, precisamos colocar no nome do host. É dev.squarespace.com e o Porto é o que está escrito aqui, 2030. Então, para o nome de usuário, ele diz que já está lá, é apenas seu nome de usuário do Squarespace, que será um endereço de e-mail mais provável e, em seguida, para a senha, eu fui salvo no meu gerenciamento de senhas, colado em Lá. E vamos bater, eu não vou adicionar um chaveiro e vamos apertar “Conectar”. Pode aparecer com alguns erros como impressão digital desconhecida. Não necessariamente erros, mas mais avisos. Você pode simplesmente clicar em Permitir. Neste momento, está a tentar iniciar sessão. Ele está logado com sucesso. Aqui você pode ver que ele está logado no meu servidor Squarespace. Agora, como você pode ver aqui, há uma coleção de três pastas diferentes aqui, porque eu estou executando três sites agora no modo de desenvolvedor, eu tenho as pastas para cada um deles. Vamos dar uma olhada no que mais é. É dahlia-limão sh9g, que é o primeiro aqui. Vou clicar duas vezes para me concentrar nisso. Você pode ver isso aqui é o nosso modelo. Agora, a fim de demonstrar a edição de seu template usando SFTP, o que eu vou fazer é fazer uma simples mudança que vai adicionar um recurso que vamos usar na aula hoje e que é permitir fotos. Para permitir fotos, vou abrir a pasta de coleções aqui. O que eu preciso fazer é criar um novo arquivo chamado folders.conf e enviá-lo para esta coleção aqui. Se eu fosse editar um arquivo existente, o que eu posso fazer é clicar com o botão direito do mouse no arquivo e editar com o que for meu editor de código favorito. Eu gosto de usar o Atom para editar arquivos individuais e dizer, por exemplo, eu queria fazer uma edição para isso, eu poderia fazer a minha edição apertar “Salvar” e ele será automaticamente carregado para o servidor aqui mesmo. Muito legal. Mas como estamos criando um novo arquivo o que eu vou fazer é abrir o Atom novamente. Vamos criar este folders.config. Agora eu não espero que você saiba como fazer isso, então vamos realmente procurá-lo e encontrar as instruções na documentação do squarespace. SquarespaceFoldres.conf, espero que isso funcione. Se clicarmos neste primeiro link aqui, você pode ver aqui configuração de pasta para adicionar pastas em seu site, criar um arquivo folders.com em sua pasta de coleções. As configurações padrão para um arquivo folder.com estão abaixo. Fácil. Vou pegar isso, vou colar isso no nosso arquivo sem título agora. Não quero que seja chamado de minha pasta. Eu só vou chamá-lo de pasta e eu vou apertar “Salvar”. Você pode salvar isso em qualquer lugar. Vou guardá-lo na minha área de trabalho. Claro que precisa ser chamado de folders.conf. Aperte “Salvar” nisso. Agora eu vou abrir uma janela do navegador ou uma janela do Finder em vez disso, navegar para a área de trabalho onde eu coloquei esse arquivo folders.config, ir para Cyberduck e arrastar isso para dentro. Agora você pode ver que ele está carregando. Está me avisando sobre a impressão digital desconhecida. Vou clicar em permitir e não é um grande risco lá. Agora está carregado. Para ver se isso está realmente funcionando agora, vou voltar ao meu site do Squarespace. Na verdade, você precisa atualizar a página para se certificar de que ela está puxando as alterações mais recentes. Agora, quando eu entrar em páginas e clicar sobre isso mais aqui, você vai ver que a pasta apareceu no fundo aqui. Ao adicionar este arquivo folders.com à nossa pasta de coleções, eu realmente atualizei meu admin dentro da nova opção. Isso é o que eu quis dizer anteriormente com o que eu disse sobre adicionar recursos ao seu modelo pelo uso de código. Ao adicionar este arquivo com, estamos realmente adicionando um novo recurso ao nosso administrador. Posso clicar em “Pasta” agora. O que isso me permite fazer, não vai ser uma mudança permanente, mas posso aninhar coisas. Tenho Nova Pasta. Infelizmente, nosso modelo atualmente não suporta menus suspensos, mas como você pode ver aqui, pelo menos no administrador ele está aninhado e veremos como isso funciona em apenas um segundo. Mas esse é um exemplo perfeito de adicionar algo ao nosso site do Squarespace usando SFTP. Isso vai acontecer instantaneamente porque este é o código real, que está sendo executado agora em nosso modelo. Mas por mais legal que isso seja, eu realmente não recomendo que você use SFTP quando você está fazendo um monte de mudanças em seu site, o que eu recomendo em vez disso é usar o Git. Vou fechar o Cyberduck. Vamos voltar às configurações, modo de desenvolvedor avançado. O que vamos fazer é clonar este repositório. Agora, infelizmente, isso não vai ser uma aula sobre Git. Então eu vou assumir que você tem conhecimento do Git ou assumir que se você não entende algo que você está vendo aqui, que você vai procurar e entender o que significa porque é suposto conhecimento que você sabe, um pouco de um Git ou que você ainda pode seguir ao longo mesmo sem saber exatamente o que todos os comandos fora dentro do Git. Mas basicamente, o conceito aqui é que vamos clonar este repositório em nosso computador. Isso significa que estamos pegando o código neste repositório e copiando-o para o nosso computador. Vou copiar esse endereço. O que eu vou fazer é abrir meu aplicativo de terminal. Abra seu aplicativo de linha de comando favorito. Eu uso iTerm. O aplicativo padrão em um Mac é Terminal, e o aplicativo em um computador Windows, acredito que é chamado de Prompt de Comando. Mas Git deve funcionar exatamente da mesma forma. O que eu vou fazer é ir para o meu diretório de códigos. Aqui você pode simplesmente executá-lo em sua área de trabalho, se quiser. Cabe a você. Mas para mim, eu vou para a minha pasta de código pessoal, para a corrente, e realmente vou dar uma olhada lá. Eu já tenho um arquivo chamado template. Então eu só preciso ir rapidamente para a minha pasta de código e renomear isso. Isso provavelmente não vai afetá-lo, apenas vai chamar esse modelo 1, porque quando você clonar, ele vai ser modelo frio como está escrito aqui. Tudo bem, então pode esclarecer isso agora. O que eu vou fazer é executar o clone do Git. Git clone, cole esse endereço e pressione “Enter”. Agora ele vai dizer clonagem em modelo. É importante caras que isso não vai funcionar a menos que você tenha Git instalado. Então certifique-se de ir ao site do Git. Se você ainda não tem e instalar , deve ser bastante simples. De qualquer forma, de volta à lição agora ele vai nos pedir o nome de usuário e a senha, e isso é igual ao nome de usuário e senha do Squarespace. Isso é fácil. Basta usar o mesmo processo de antes. Agora vai pedir a senha. Eu tenho aqui, meu gerenciamento de senhas aperte “Enter”. Se o acesso não for negado, ele vai realmente baixá-lo. O que vai acontecer é que podemos realmente mudar para o diretório de modelos agora. Agora o que eu vou fazer é abrir meu editor de código favorito, que mudou agora eu uso código VS. Vou sair do terminal. Abra o código VS. Você não tem que usar exatamente os mesmos editores de código que eu, esse código VS é muito bom. Abriu um projeto anterior meu, mas o que eu quero fazer é clicar em abrir. Na verdade, ele está carregando o modelo porque ele tem o mesmo nome que o que eu estava carregando antes. Mas só para ter certeza que você deseja clicar em “Template”. Agora você tem o código do modelo localizado localmente no seu computador. Você pode editar isso o quanto quiser, mas as alterações não serão disponibilizadas para o seu site ainda. Tenho a sensação de que este vídeo está ficando um pouco longo. Para a próxima parte em que instalarmos o servidor ao vivo do Squarespace e começarmos a executá-lo, vou separá-lo no próximo vídeo. No próximo vídeo, vamos realmente executar um servidor local, que nos permite executar muitas das partes do nosso site do Squarespace localmente. Ele ainda vai se conectar aos servidores do Squarespace para trazer os dados. Mas podemos realmente executar o código que temos aqui em um servidor local. Isso vai estar no próximo vídeo. Vejo-te nessa. 6. Live Server do Squarespace: No último vídeo, baixamos nosso template Squarespace para nosso próprio computador, e isso nos permite abri-lo em um editor de código de nossa escolha e cavar nas pastas, clicar em vários arquivos e editá-los. Eu estou, naturalmente, usando o Visual Studio Code, mas você pode usar qualquer software de codificação ou editor de codificação que você gosta de usar. Há uma dica que vou lhe dar é que, independentemente do editor de código que você está usando, você deve habilitar uma extensão que permita a formatação deste código aqui, que é JSON-T. Aprenderemos mais sobre o JSON-T mais tarde nesta aula. Mas se você estiver usando VS Code, a extensão que eu estou usando é chamado JSON Template por stormwarning. Sem isso, o destaque da sintaxe de JSON-T não estará acontecendo. Ele ainda vai funcionar, mas será mais difícil trabalhar com isso porque você não vai ter essa codificação de cores agradável acontecendo. O fluxo de trabalho para editar seu modelo é que você fará suas alterações aqui localmente, como é conhecido. Então você terá que confirmar esse código e depois enviá-lo para o site real do Squarespace. Nesse ponto, o código que você tem aqui será o mesmo que o código que você tem no seu site do Squarespace. Agora, se não estivéssemos executando um servidor local e tivéssemos que confirmar e enviar código usando git toda vez quiséssemos ver uma mudança em nosso site que iria crescer bastante cansativo e poderíamos muito bem usar SFTP, que vimos na última lição. O que estou propondo é que usemos um servidor local e um é fornecido a nós pelo Squarespace chamado Squarespace Live Server. Um grande aviso de isenção de responsabilidade antes de entrarmos no Squarespace Live Server, não é tão bem mantido pelo Squarespace. Vou mostrar um e-mail em um segundo onde instalei o Squarespace Live Server. Ele não funcionou e eu realmente contatei o suporte e eles admitiram que há uma área específica que eu tive que reinstalar que não foi instalada corretamente por padrão. Reconheça aqui que pode haver problemas com a execução do Squarespace Live Server, e isso depende do Squarespace se ele deseja publicar a versão mais correta e atualizada no GitHub e em seu próprio site. Mas o que eu vou dizer é que se você tiver algum problema aqui com o Squarespace Live Server, eu definitivamente entraria em contato com o suporte do Squarespace primeiro antes de mergulhar nos comentários. A não ser que seja algo específico que eu tenha feito e que você esteja se perguntando. Mas, caso contrário, se o Squarespace Live Server mudar no futuro, que provavelmente acontecerá, e estiver recebendo um erro que você não vê nesta classe, então provavelmente é melhor você ir e perguntar ao Squarespace, o que está acontecendo? Assim como o que eu fiz. Tudo bem, então com isso fora do caminho, precisamos ter certeza de que temos algo chamado NPM instalado. Vou abrir uma janela do navegador e vou digitar npm. Npm significa gerenciador de pacotes de nó. É um software que nos permite basicamente instalar pacotes. Você não precisa necessariamente saber tudo sobre o que é um pacote, mas você precisa ter o npm instalado para executar o Squarespace Live Server. Eu já tenho o npm instalado e se você não o fizer, tenho certeza que é muito simples de fazer. Vamos para a documentação. Tenho certeza que se você começar, não é o site mais fácil de usar, mas se formos ao Google, instalar o NPM, então você pode ver, obter NPM é o endereço que você está procurando, tudo bem. Você pode baixar Node.js e, em seguida, npm e você pode seguir todas essas instruções para se certificar de que o npm está instalado. Eu já tenho o NPM instalado, como eu disse. Agora o que eu vou fazer é abrir um terminal porque eu já tenho meu editor de código aberto. Eu vou abrir o terminal dentro do meu editor de código e desta forma ele já está configurado para o diretório correto. Agora vou executar o comando para instalar o Squarespace Live Server que é npm install -g @squarespace /server. Agora, como eu sei que este é o comando certo? Bem, eu peguei isso na documentação oficial do Squarespace. Isso está sujeito a alterações. Eu recomendo que se você se perder neste momento, vá para developers.squarespace e a página no momento é local-development e como você pode ver aqui para instalar o servidor dev, este é o comando. Nós vamos acertar isso. Já o tenho instalado. Mas isso é o que você precisa fazer se você ainda não o tiver instalado. Precisamos aceitar os termos de uso do desenvolvedor. Eu já li este documento, então eu vou pressionar Enter e, em seguida, pressionar Sim. Vai levar um pouco de tempo para instalar e agrupar JRE compatível. Você não precisa saber o que isso significa. Só está demorando algum tempo para instalar. Eu só preciso ser paciente e uma vez instalado, espero que funcione. Lá vai você. Agora, a razão pela qual eu digo que espero que funcione é que eu rodei mais cedo e não funcionou e eu tive que entrar em contato com o suporte do Squarespace. Vou mostrar-lhe o e-mail agora. Se eu entrar neste e-mail de suporte, você verá que houve um problema e a equipe de engenharia precisou aplicar uma correção ao código do servidor de desenvolvimento local. Eles apenas me pediram para executar a instalação novamente com a versão mais recente. A razão pela qual eu mostro isso é que isso está sujeito a mudanças e está sujeito a como o Squarespace deseja manter o projeto. Se você tiver algum problema, talvez seja necessário entrar em contato com o suporte. Eu os achei bastante responsivos. Eles foram capazes de me ajudar e eles obviamente resolveram o problema muito rapidamente. Se você receber algum erro depois disso, definitivamente recomendo entrar em contato com o suporte do Squarespace. Tudo bem, com isso fora do caminho, podemos começar a executar nosso servidor Squarespace. A maneira como fazemos isso é digitar Squarespace-server. Então colocamos o endereço do nosso site depois disso. No momento, tenho fechado. Mas se eu voltar para account.squarespace.com, encontrar esse site, você pode ver que esse é o endereço do site. Eu vou copiar isso, colocar isso logo após o servidor do Squarespace e depois você quer usar a bandeira - -auth, e isso vai impedi-lo de obter erros de permissão negada. Tudo bem, então aperte isso. Agora, para você, ele pode pedir seu nome de usuário e senha novamente, caso em que basta inseri-lo. Mas para mim, eu já estou logado e o que ele diz é que ele está ouvindo na porta 9,000. O que isso significa é que podemos ir ao nosso navegador, abrir uma nova aba ou janela e executar localhost: 9000. É apenas localhost: seguido pelo número da porta, que geralmente é 9.000. Agora, quando você inicia pela primeira vez, Squarespace Live Server geralmente leva um pouco de tempo para começar. vez, precisamos ser um pouco pacientes aqui. Você verá depois de um período que agora estamos executando nosso site, mas em nosso próprio computador, o que é muito legal. Se eu clicar no Blog, você verá que temos a página do blog e, em seguida, podemos clicar nas postagens individuais do blog, clique na página Sobre nós. O link externo deve funcionar. Temos o site bem aqui no nosso computador. Agora é importante observar aqui que, se você quiser fazer alguma alteração em seu administrador, você definitivamente precisará enviar seu código. Este servidor ao vivo será atualizado assim que editarmos qualquer código nesta pasta aqui. Como pode ver, está acessando todos os arquivos. Se mudarmos alguma coisa , apareceria imediatamente. Mas se quisermos mudar algo em nosso administrador. Aqui mesmo, por exemplo, onde nós adicionamos a capacidade de ter pastas, nós vamos ter que empurrar esse código. Tudo bem. Veremos como isso funciona em um vídeo posterior. Mas, por enquanto, você tem seu Squarespace Live Server em execução e pode fazer alterações no código do modelo que, na maioria das vezes, será afetado instantaneamente nesta versão local, desculpe, nesta versão local. Novamente, como eu disse, se você quiser que ele vá para esta versão que está no site real do Squarespace, você precisará empurrar, o que entraremos mais tarde. Mas se, por exemplo, eu quisesse mudar o lugar aqui onde o título é para algo completamente diferente. Entraremos em onde tudo fica em um segundo. Mas, por exemplo, aqui onde o título do site está, se eu mudar isso para apenas título do site, pressionar Salvar sobre isso e, em seguida, atualizar meu site aqui, você pode vê-lo atualiza instantaneamente. Mas aqui no servidor real do Squarespace, você não mudou nada até enviar esse código, o que significa que você o envia para o Squarespace. Tudo bem, então eu vou mudar isso de volta para o campo dinâmico. Isso vai ser tudo para esta lição. Na próxima lição, vamos falar sobre os principais conceitos de desenvolvimento de modelos porque precisamos entender conceitualmente como tudo funciona antes que você possa realmente cavar lá e editar código. Estou ansioso por isso. Vejo-te no próximo vídeo. 7. Estrutura do template e a camada de dados JSON: Neste vídeo, vamos falar sobre a estrutura do modelo, e se tivermos tempo, vamos falar sobre o outro conceito, que precisamos entender para o desenvolvimento de modelos, incluindo, Jason filha, e Jason T. Agora, Eu tenho meu site ou meu modelo rodando no localhost: 9000 com o comando que vimos antes, squarespace-server, seguido pelo endereço do seu site, depois traço, traço auth. Em outro navegador eu tenho este diagrama. O que você está vendo aqui é um diagrama conceitual que eu preparei que explica, como o modelo está configurado. Então, sem mais delongas, eu vou pular direto. Então, no topo, você tem seu modelo, que é configurado pelo arquivo template.conf. Então, se voltarmos para a nossa pasta aqui, podemos ver este arquivo aqui, template.conf é um arquivo de configuração que fica no coração do seu modelo. Ele dá o nome para o modelo, ele fornece o autor, e podemos definir layouts, navegações, e também as folhas de estilo para que nós queremos que eles sejam carregados. Se voltarmos para o diagrama, você pode ver que este arquivo template.conf é onde você define layouts e navegações. Então, se eu voltar para o código, você pode ver que temos um objeto aqui para layouts, e nós temos um objeto ou, uma matriz com um objeto dentro para navegações. Se eu voltar para os layouts, você verá que os layouts estão vinculados diretamente às regiões. Então, aqui nos layouts, temos um layout padrão para encontrar. É apenas chamado de padrão, e as regiões que ele está usando é apenas uma e é o arquivo site.region. Então, em um site básico, há apenas um arquivo site.region, e esse é o layout. Basicamente, há uma relação um-para-um entre isso e o layout. Mas como você verá em um vídeo posterior, podemos separar nossos arquivos de região e criar um layout que tenha vários arquivos de região combinados, e isso fará muito mais sentido quando entrarmos em um vídeo posterior . é esta matriz de navegações. Como você pode ver em nosso site, temos este bloco de navegação bem aqui, que podemos ver em nosso código como a navegação do site com o nome dentro do código de navegação do site. Nós podemos realmente adicionar navegações ao nosso modelo adicionando a esta matriz aqui. Então talvez queiramos abrir isto, e lançar outra navegação para, sei lá, navegação secundária, talvez. Lá vai você. Nós realmente não vamos fazer isso nesta aula, então eu vou remover isso. Mas teoricamente, podemos ter tantas navegações, quanto quisermos, não tenho certeza se há um limite para elas, mas podemos definitivamente ter mais de uma. A mesma coisa com layouts, podemos criar quantos layouts quisermos e combinar arquivos de região para criar esses layouts. Então, voltando ao diagrama dessa estrutura, você pode ver aqui que as regiões compõem os layouts, e um bloco é diretamente vinculado a uma navegação. Então, se voltarmos ao nosso código aqui, dentro desta pasta de blocos, podemos ver este site-navigation.block. Isto é o que determina o código para a navegação do nosso site. Então isso aqui está determinando isso aqui, esses itens de navegação e como eles funcionam, é definido aqui. A coisa que está realmente ligando a navegação, vamos entrar em detalhes mais tarde nesta classe. Mas podemos realmente vincular a navegação usando o nome do nav como ele é definido no arquivo template.conf usando esta tag de navegação squarespace. Então, quando usamos essa tag, trazemos esse bloco específico. Como eu mencionei caras, vamos ver isso no treino muito em breve. Mas apenas como uma visão geral conceitual de alto nível, estamos falando sobre como a estrutura funciona em conjunto para produzir o modelo.A outra coisa que escrevi aqui é que blocos também podem ser parciais, bem como, e parciais são apenas fragmentos de código reutilizável. Se você alguma vez se encontrar escrevendo o mesmo código, e incluindo-o em várias partes do seu template, então você vai querer usar um bloco, escrever o código uma vez dentro desse bloco, e então apenas fazer uma referência a esse bloco para trazer esse código em todos os lugares que você precisar dele. Para mim, pessoalmente, eu não encontrei muitas situações em que eu preciso usar um parcial, então eu não sei se há um exemplo especificamente nesta classe, mas eu vou fornecer um link para a documentação sobre como usá-lo. Na verdade, é bem simples. Como você pode ver, blocos estão levando para regiões, porque como eu mostrei antes, nós temos que trazer o bloco para o nosso arquivo de região de alguma forma, e com a navegação, é assim. Com as parciais, é uma etiqueta diferente. Mas essencialmente estamos sempre usando o arquivo de região ou talvez o arquivo de lista ou item, que veremos em apenas um segundo, estamos usando-os para trazer esses blocos. Assim, os blocos por si só não aparecerão em qualquer lugar, eles precisam estar em um arquivo de região ou em um item de coleção ou arquivo de lista. Voltando ao diagrama, você pode ver as regiões aqui vinculadas a essa nuvem, que é squarespace.main-content. A razão pela qual esta é uma nuvem é porque não é um arquivo específico, é apenas um atributo no objeto squarespace, que veremos em apenas um segundo que exibe o conteúdo da página. Então, se entrarmos em nosso arquivo site.region, e eu procurar squarespace.main-content, que é bem aqui, você pode ver que é aqui que o conteúdo principal da página será carregado. Agora, grande parte do tempo que o conteúdo principal como escrito aqui, é determinado pelo conteúdo de uma página de espaço quadrado regular. Ou como diz no código aqui, é o conteúdo do CMS. Então, como vimos antes quando estávamos usando o construtor de páginas para construir, digamos, por exemplo, a página sobre e nós adicionamos blocos, e usamos a interface para alterar esta imagem, tudo isso aqui, é o conteúdo principal que está chegando. Então, como você pode ver, não importa em que página estamos, ainda estamos recebendo todos os outros códigos que o rodeia. Mas o código dentro do squarespace.main-content é o conteúdo da página que está mudando. Novamente vamos ver tudo isso na prática, muito em breve, mas apenas uma compreensão conceitual de alto nível, você pode ter que voltar para o diagrama enquanto você vai ao longo desta classe, e isso é legal, mas esta é a teoria geral atrás do modelo. Se você criou uma página normal do Squarespace, como esta, e colocou conteúdo da página usando o admin, então o conteúdo squarespace.main será apenas esse conteúdo. Mas se você configurou o que é chamado de página estática, que é uma página que escrevemos nós mesmos no template, então esse conteúdo aparecerá neste objeto, squarespace.main content. Se estivermos olhando para uma coleção específica, o que veremos é o conteúdo padrão do sistema que vem do Squarespace. Ou se nós definimos o código da coleção em nosso modelo, então o conteúdo squarespace.main mostrará o arquivo da lista. Exemplo perfeito, aqui mesmo, temos uma coleção definida, que é o blog. Quando estamos na página de listagem do blog, este é o código que aparece. Se formos ao nosso site e clicarmos neste link para o blog, esta página aqui, é determinada pelo código neste arquivo. Claro, este código está vindo através conteúdo Squarespace.Main e, em seguida, ele tem todo o outro código em torno dele. Só para deixar isso mais claro pessoal, eu vou inspecionar isso no navegador, e mostrar a vocês que temos esse contêiner aqui, contêiner conteúdo, em nossa região do site. Lá você pode ver, e tudo dentro disso, é o código do arquivo blog.list. Vindo aqui para blog.list, você pode ver o ID do artigo. Ele tem todos os artigos neste loop de item, que você pode ver o comentário para bem ali. O próximo nível abaixo é o item. Lembre-se que falamos sobre como uma coleção é uma lista de itens, e você pode dar uma olhada na lista completa de itens individuais, enquanto o arquivo de item é o código que compõe a página de itens individuais. Se entrarmos em nosso código aqui e olharmos para blog.item, este será o código que será carregado no conteúdo squarespace.main, se estivermos em um item individual. Clicando em cinco exercícios em casa para fazer, este código aqui dentro desta tag principal em particular, vai ser qualquer código que definimos aqui. Essa é a estrutura do modelo ali mesmo, na verdade é bastante simples uma vez que você começa a sua cabeça em torno dele. Obviamente, agora, isso é apenas conceitual e uma vez que você realmente começa a fazer isso, você vai solidificar esse conhecimento conceitual. Eu só criei este diagrama depois de passar e fazer algum desenvolvimento de template. Leva algum tempo para realmente ter esse conceito cimentado em sua mente, então não se preocupe, se isso é um pouco vago no momento, vamos entrar em cada um desses diferentes arquivos nesta aula hoje. Mas o segundo conceito que precisamos falar é o JSON DataLayer e o JSON-T. Correndo o risco de esta lição demorar um pouco, vou falar sobre JSON-T, que é a linguagem de modelos dos templates do Squarespace. Agora, em cada página do seu site do Squarespace, existe um JSON DataLayer que existe. JSON é apenas uma maneira simples de representar uma estrutura de dados, você não precisa ter muito medo do que JSON é, se você não está familiarizado com ele já. Mas em qualquer página em nosso site, o que podemos fazer é adicionar um ponto de interrogação e, em seguida, escrever format=JSON-Pretty, e vamos ver essa página no formulário JSON. Então, como JSON funciona é, há apenas um objeto pai, e então nós entramos e cavamos esses objetos filhos. Então dentro deles temos atributos diferentes e mais objetos aninhados, matrizes, todo tipo de coisas. Aqui estão todos os dados disponíveis para nós nessa página em particular. Em cada página, o que você descobrirá é que temos um objeto de site, para que possamos acessar o título do site de qualquer página. Podemos acessar coisas como, o slogan do site, podemos acessar diferentes partes das configurações do nosso site. Podemos ver a conta que está logada no momento. Os dados para a página individual estão neste objeto de coleção. Eu sei que é meio confuso, dado que esta página inicial que estamos olhando não é realmente uma coleção em si, mas cada página, os dados dessa página específica no Squarespace estão contidos neste objeto de coleção. Como você pode ver, o título deste objeto de coleção é Welcome, que é nossa página de boas-vindas. Você pode ver se ele tem quaisquer tags ou categorias nesta página. O nome da região que estamos usando, que eu acredito ser o layout, o rótulo do tipo, todos os tipos de dados relacionados a esta página específica. Agora, como veremos mais tarde, há também um dado que se torna disponível dentro do contexto de um bloco e que nos permite retirar itens de nossa navegação. Mas, por enquanto, este é o conceito principal, é que, nós temos esta camada de dados sentado em cada página, não importa qual página nós vamos em nosso site. Talvez eu vá para a página do blog, você verá que é assim que fica no front-end, mas por trás de cada página no seu site do Squarespace, há dados JSON relacionados a essa página. Muitos desses objetos vão ter as mesmas informações que eles têm em qualquer página como o seu site, isso não vai mudar. Mas, em seguida, o objeto de coleção aqui é a coisa que vai mudar, dependendo da página em que você está. Nós temos o título, nós temos a quantidade de itens nesta coleção, e como você pode ver, todas as tags que adicionamos estão nesta matriz aqui e todas as categorias dentro do blog estão listadas aqui, neste array. O que estou entendendo aqui é que, todos os dados que você deseja exibir dinamicamente em sua página, vem desta camada de dados JSON. Como você pode ver aqui, nós realmente temos os itens individuais para o blog. A maneira como nós realmente pegamos os dados desta camada JSON, e representamos na página, é através de JSON-T. Vou abrir um novo navegador aqui, carregar, developers.squarespace.com, ir para documentos de modelo. Como você pode ver aqui, sob este menu, temos um conjunto completo de instruções sobre o idioma do modelo. Ele fala sobre o que JSON-T é e fala sobre alguns pedacinhos de terminologia. Penso que talvez já tenhamos abordado muito nesta lição. Vou dividir isso em outra lição. Vamos falar sobre JSON-T com mais detalhes no próximo vídeo. 8. Visão geral de JSON-T: No último vídeo, aprendemos sobre a estrutura do modelo, e introduzimos a camada de dados JSON. A maneira como trazemos esses dados JSON para a página é através do JSON-T. Eu queria separar esse conceito em outra lição, porque percebi que há um pouco para passar por aqui. Há muita documentação aqui no site do Squarespace, mas admito que, mesmo para mim, levou um pouco de tempo e prática para colocar minha cabeça completamente em torno desta linguagem básica. Mas depois de usá-lo na prática e entender como ele funciona, percebi que é bastante simples e espero esta lição torne isso um pouco mais fácil para você entender também. JSON-T é uma linguagem de modelo poderosa projetada para ser emparelhada com um conjunto de dados JSON. Essa é a frase-chave aqui, ela foi projetada para ser emparelhada com um conjunto de dados JSON. Lembre-se no último vídeo que vimos como qualquer página se torna um conjunto de dados JSON quando você coloca o formato de ponto de interrogação é igual a JSON-Pretty. Na verdade, os dados estão sempre lá sentados nessa página, independentemente de colocarmos isso em nosso navegador ou não, isso é apenas para visualizar os dados em um formato agradável. Mas se formos em qualquer página e nós, esta é uma boa área para enfrentar. Às vezes você obterá um erro de servidor interno 500, você só precisa reiniciar o servidor e, em seguida, ele deve funcionar novamente. Frustrante, mas parece ser a única coisa que corrige isso nesta fase. Agora está dizendo que escutando na porta 9,000 eu vou atualizá-lo. Agora que temos nosso site de volta novamente, o que eu vou fazer é colocar a camada de dados JSON de qualquer página em nosso console JavaScript usando o código fornecido aqui. Podemos ir para ver dados JSON, e podemos jogar isso em qualquer lugar dentro de um determinado arquivo e vamos começar a console log o objeto para o escopo atual em nosso console JavaScript. Veremos isso em apenas um segundo. Se quisermos que isso aconteça em cada página, podemos colocá-lo em nosso arquivo site.region, mas é claro que isso significa que o arquivo site.region será o contexto. Ele mostrará somente o que está no escopo deste site.region. Isso pode não fazer muito sentido. Mas veremos em apenas um segundo como isso funciona. Vou colocá-la aqui depois da etiqueta do corpo Aperte isso. Vamos atualizar a página e vamos abrir nosso console, e você pode ver aqui temos um objeto. É o mesmo objeto que olhamos antes quando digitamos no formato é igual a JSON-Pretty, mas agora podemos realmente ver a página e podemos ver o objeto também. Como você pode ver aqui, ele está puxando os itens desta matriz de itens. Aqui está toda a informação que ele está usando, e nós estamos puxando isso usando JSON-T. Eu recomendo você quando você está escrevendo JSON-T, para abrir o objeto perfeitamente em seu console assim, e então você pode começar a navegar através do objeto para determinar como você vai realmente puxar o atributo específico que você deseja fora deste objeto. Os principais conceitos para entender com JSON-T, se voltarmos para a documentação é que se temos um objeto em JSON que tem baz hello e escrevemos baz, vamos receber olá. Se colocarmos a chave em nosso documento, vamos obter o valor. Isto é o que é chamado de par de valor de chave em JSON. Vamos dar uma olhada em nossa página aqui e ver um exemplo. Como você pode ver aqui, temos a tag body de abertura, e dentro do ID estamos produzindo o ID da página no objeto Squarespace. Vamos dar uma olhada em como isso corresponde ao nosso objeto aqui. Se eu olhar para o objeto, role para baixo, você pode ver que há um objeto Squarespace. Se eu abrir esse objeto de espaço quadrado, posso ver o ID da página. Isto aqui está fazendo referência a este valor aqui, e se nós realmente olhar e inspecionar nosso código HTML agora, você pode ver que é o valor real que está indo no campo ID. Em um nível muito básico, podemos começar no topo do objeto, e então podemos direcionar qualquer objeto dentro deste objeto e, em seguida, usando o.notação podemos ir mais fundo. Podemos tomar o objeto Squarespace e, em seguida, ir para o ID da página. Novamente, você pode ver aqui estamos tomando classes de página do objeto squarespace. Então você quadra classes de página, lá vai você. Também podemos usar o que é chamado de tag de seção. O que uma tag de seção nos permite fazer é ampliar uma área específica do nosso conjunto de dados JSON. Aqui você pode ver em vez de apenas ter site, nós começamos a tag com um.section, e nós também temos que ter um.end para significar o fim deste bloco de código. O que isso representa aqui é o objeto que vamos ampliar. Então temos o site da seção, se voltarmos ao nosso conjunto de dados, lembre-se que vimos antes do objeto do site aqui, então aqui está o site. O que estamos basicamente fazendo é que estamos ampliando esse objeto em particular, e então o símbolo 'at' que não vimos aqui, mas vimos aqui em cima vai ser definido para o site porque estamos nesse escopo. Se quisermos pegar um atributo específico desse objeto, não precisamos mais escrever título do site.site porque já temos escopo para um site. Então podemos apenas referenciar qualquer chave dentro desse objeto sem ter que escrever o pai. Poupa-nos um pouco de reescrever. Aqui você pode ver dentro do objeto do site, estamos procurando o título do site, role para baixo, lá você pode ver o título do site. Nós também podemos apenas remover esta seção completamente e em vez de ter código de seção, podemos fazer como eu disse antes. Nós podemos realmente apenas para o título do site específico aqui, nós podemos apenas colocar título website.site. Isso deve funcionar muito bem, o que funciona. Vou mudar para isso de volta. Isso deve explicar as seções. Vamos voltar aqui e olhar para uma seção repetida. Se tivermos uma chave com um valor que é uma matriz, então podemos basicamente loop através de todos os itens e escopo para esse item específico usando ponto seção repetido e, em seguida, o nome do objeto. Como eu mencionei antes, este em símbolo faz referência ao escopo no objeto. Vamos ver isso em ação aqui indo para o nosso bloco de navegação. Como a navegação não é uma página em si, nós vamos ter que pegar este código, ir para a navegação do site, e uma vez que está nesta seção repetida, bem aqui nós estamos pegando os itens de navegação e estamos puxando dados de cada item individual. Se eu fosse fazer um log de console aqui, agora vamos ver os dados de cada item individual. Vamos refrescar-nos aqui. Como você pode ver, temos quatro itens de menu e, portanto, temos quatro objetos que aparecem. Todos esses objetos devem ser bem semelhantes porque eles são todos links. Como você pode ver dentro, temos atributos como, é o link ativo, é uma pasta, e nós temos o objeto de coleção, que nos dá todas as informações como esta é na verdade um link da pasta. Eu vou para o segundo. Aqui você pode ver este é o link para o blog. Nós temos o título do link e, o mais importante, nós realmente temos o URL para o blog, e isso é o que precisamos para criar um link. Voltando para aqui, você pode ver de dentro deste item, estamos definindo o escopo para a coleção e estamos pegando o URL completo e o título de navegação. Novamente, estamos fazendo loop e colocando para fora todos esses objetos como você pode ver, e para qualquer objeto dado neste loop, estamos indo para a coleção, estamos ampliando esse contexto, e estamos tomando a navegação título e o URL completo, como você pode ver aqui. Aqui também estamos ampliando em outra parte do contexto JSON, estamos ampliando em link externo. Se abrirmos o objeto final, você pode ver que em vez de um objeto de coleção, ele tem link externo. Em seguida, estamos puxando de que o título e a URL como você pode ver aqui, URL e título. É importante notar aqui também que a seção marcada aqui nos permite verificar a existência desse objeto. Aqui você pode ver que isso está essencialmente dizendo, se houver um objeto de coleção, tire o URL completo e o título de navegação dele e colocá-lo nesta estrutura HTML. Se não houver um link externo, pegue essa informação e coloque isso em um link da mesma forma. Como você pode ver aqui, este é um exemplo perfeito. Ele não está realmente usando os dados da nova janela porque nova janela é apenas verdadeiro ou falso, bem aqui. Mas é basicamente dizendo que se nova janela é verdadeira, então vamos abrir um link em uma nova guia usando alvo igual sublinhado em branco. Seção nos permite ampliar em um contexto particular com o objeto JSON, mas também nos permite verificar se um atributo ou um objeto existe dentro desse escopo. Como você pode ver aqui, este é outro exemplo. Se ativo é verdadeiro, então vamos colocar esta classe neste elemento lista. Eu entendo que isso pode ser um pouco pesado para colocar sua cabeça em torno de primeiro lugar, mas quando você se move através e realmente começa a usar isso, você começa a perceber que esta linguagem JSON-T não é realmente tão complexa. Isso é, na verdade, 80% a 90% de toda a língua. É apenas ampliando interseções e puxando dados do objeto JSON como este. Se voltarmos para a documentação, há outras coisas a observar. Se clicarmos em diretivas, você pode ver que temos a seção, seção repetida. Nós também podemos criar um ou que é como um outro. Podemos verificar a existência do item. Se existir, temos isto, mas se não, vamos fazer isto aparecer. Você também pode ter alternativas com o qual é muito legal. Como você está passando por algo, podemos adicionar algo ao fim de cada linha. Então também podemos criar nossas próprias variáveis. Se quiséssemos tornar a vida fácil para nós mesmos, podemos atribuir certos atributos em uma variável personalizada e usá-los. Honestamente, eu não estou realmente usando esse recurso muito em tudo porque os dados estão todos lá. Não há muitas opções para manipular variáveis de qualquer maneira em JSON-T, mas isso também é uma opção bem ali. Também podemos adicionar comentários, mas isso não é particularmente importante. Os principais outros conceitos a entender é este, predicados. Esses predicados basicamente, não necessariamente objetos dentro de seu contexto JSON, mas diretivas especiais que o Squarespace fornece para verificar a existência de coisas. Um comum e um que veremos nesta classe é o predicado pasta. Isso basicamente testa se o item de navegação é uma pasta. Na situação aqui, onde temos este primeiro link como uma pasta, queremos tratá-lo de forma diferente. Desculpe, preciso clicar neste aqui. Queremos tratar este de forma diferente dos outros links porque é uma pasta, não está vinculando a uma página. Predicados nos permitem verificar se o contexto em que estamos olhando atende a um determinado critério, e veremos isso em apenas um segundo. Nós também temos essa coisa chamada Formatter JSON-T, e nós já vimos agora pegando o objeto e transformando em algo que é JSON bonito. Se eu remover isso, eu me pergunto se meu navegador ainda vai mostrar o objeto bem. Se atualizarmos a página aqui, você verá que meu navegador ainda reconhece isso como JSON e formata-o de uma maneira agradável. Mas se nós apenas pegamos o objeto aqui e não usamos um formato em tudo, você verá aqui que ele simplesmente não exporta nada. Estamos pegando os dados do objeto e precisamos formatá-los em um formato JSON legível para que possamos vê-lo. Esse é um exemplo de formatador. Não há muitos exemplos. Acho que isso não vai passar nesta aula. Mas quando você o vê, talvez você esteja editando um modelo existente e veja que há esse símbolo de pipe e, em seguida, uma palavra-chave depois dele. Observe que ele está realmente pegando o que está à esquerda do pipe e formatando-o de alguma forma. Por exemplo, na verdade, este exemplo provavelmente existe em nossa base de código. Se entrarmos em um item de blog, você pode ver aqui temos o objeto adicionado e estamos formatando que de uma maneira particular, aqui usando este formatador JSON-T data. Eles são úteis. Dito isto, não há muitos deles. Basta ir para a documentação para olhar para os disponíveis e se você vê-lo em seu código bem aqui, há um tubo e um traço. O que isso significa? Vá direto para a documentação e procure. Como um subconjunto de formato como você também tem ajudantes, que são exatamente como formatadores, mas a principal diferença que você verá é que cada um desses ajudantes é um pipe e uma palavra-chave após o símbolo at. Ele está pegando um objeto totalmente caracterizado e está basicamente puxando novas informações que podem ainda não existir no objeto. Por exemplo, nós não temos uma imagem necessariamente ainda, eu não acho. Talvez na página sobre nós. Essa imagem é gerada dinamicamente, não seremos capazes de demonstrar isso agora. Mas, essencialmente, você verá em um vídeo posterior, usaremos meta de traço de imagem e traremos a informação de mistura sobre uma imagem usando este ajudante JSON-T. Você verá isso em um vídeo mais tarde. Ajudantes também estão com o pipe e uma palavra-chave, esta é outra página para procurar se você está tentando descobrir o que algo é quando você vê esse tipo de sintaxe. Último, variáveis do sistema. Isso é material que fica em sua camada de dados JSON. Já vimos tudo isso antes quando entramos em nosso console. O que é um deles, cabeçalhos do Squarespace. Se rolarmos para baixo, podemos ver que há um objeto para cabeçalhos do Squarespace, e ele contém um monte de código diferente que vem do nosso back-end e entra em nossa seção principal do nosso template. Se entrarmos em nosso arquivo de região de pontos do site, você pode ver que estamos apenas colocando esse objeto diretamente para nossa seção principal aqui. Muito conteúdo lá. Isso não é absolutamente tudo dentro do JSON-T, tenho certeza. Mas esses são os conceitos principais e como eu disse, está tudo aqui na documentação. Eu só pensei que eu poderia falar sobre isso um pouco também porque eu levei algum tempo para colocar minha cabeça em torno disso. Mas agora que eu usei na prática, eu percebi que é bem simples e você vai começar a entender que não há muito para isso no final. Dependendo de quanta prática você vai dar a si mesmo com a codificação de modelos JSON, você vai começar a solidificar esse conhecimento em sua cabeça e ele vai começar a ser muito mais simples. Tenho a sensação de que este vídeo é longo o suficiente, então vamos seguir em frente e finalmente editar nosso template. Eu sei que há muita teoria antes de chegarmos a esse ponto, mas agora vamos realmente entrar lá, fazer alterações em nosso template e mostrar todos os recursos do Modo Desenvolvedor. Estou animado para finalmente mergulhar e fazer algumas edições. Vejo-te no próximo vídeo. 9. Layouts e regiões: Depois de um pouco de teoria e um pouco de configuração, agora é hora de começar a editar nosso template. Tempos emocionantes caras, estou feliz de finalmente entrar nele. Mas é claro, a teoria também é importante, então não pule isso. Mas agora podemos realmente criar algumas edições nosso site dado que temos esse conhecimento teórico. Uma das primeiras coisas que quero fazer é atualizar o layout. Como você pode ver aqui, eu realmente não gosto de como tudo está apenas sentado à esquerda da página. Eu gosto das coisas mais centradas, e também para a página inicial que vamos criar em um segundo, eu gostaria que ele largura total. Em muitos sites, você provavelmente já viu o conteúdo de como um post de blog ou uma página particular vai se sentar dentro de um pouco de um recipiente aqui, ele não está indo largura total, que torna um pouco mais fácil de ler, mas na página inicial, muitas vezes você verá seções de largura total. Isso é o que vamos criar neste vídeo. A primeira coisa que vamos fazer é ir para o nosso código, certificar-se de que estamos executando nosso servidor local. O que eu vou fazer é ir para o diretório de estilos. Vamos falar sobre como CSS é compilado mais sobre menos, e como tudo isso se junta em seu modelo mais tarde nesta classe. Mas, por enquanto, o que eu quero fazer é apenas bater em “base.Menos”, e encontrar a regra de estilo para o recipiente. Está bem aqui no contêiner do site, como podem ver, temos uma largura máxima e nenhuma margem automática. É a primeira coisa que vou mudar. Eu vou mudar a largura máxima para 1.140 porque eu gosto mais desse número, remover o preenchimento e dar-lhe uma margem esquerda e direita de ordem. Vamos acertar “economize” nisso. Ao atualizar a página, você verá que nosso conteúdo está agora mais amplo e fica no meio, independentemente do tamanho do ecrã, desde que esteja acima de 1140. Se formos até aqui, podemos ver que abaixo de 1140 não há margens de ambos os lados, então é outra coisa que precisamos consertar. Eu vou descer aqui, e dentro de menos podemos realmente ir dentro do código para contêiner do site e colocar nossa consulta de mídia aqui. Largura máxima de mídia 1140 pixels. Vamos ter a margem direita, 20 pixels e a margem esquerda 20 pixels. A ordem dessas não importa. Voltando para nossa página aqui, e se eu puxar isso, você verá quando chegar a 1140 pixels da largura da janela, você terá uma margem fixa de 20 pixels em cada lado. Lá vai você. Legal. Esse é um exemplo de uma mudança CSS que podemos fazer em nosso modelo aqui. Mas o que eu quero fazer é realmente criar um layout alternativo. A razão pela qual eu quero fazer isso é que eu vou criar uma página inicial que permite seções de largura total. Esta imagem sendo no meio, terá largura total e terá como texto sobre o topo. Antes de realmente criarmos esse layout, o que eu vou fazer é criar a página em nosso site do Squarespace. Vou passar pelo endereço do meu SquarespaceWebsite/config. Vá para as páginas e aqui para a página de boas-vindas, podemos apenas editar isso diretamente. Podemos entrar aqui e editar o conteúdo da página. Agora temos este layout de três colunas com esta imagem aleatória no topo, eu vou remover todo o conteúdo. Isto é apenas conteúdo de demonstração de qualquer maneira, e vamos realmente colocar em algum conteúdo que é mais relevante para este site falso. Podemos clicar neste símbolo mais aqui, vou clicar nestas guias porque ainda não há conteúdo. Vou clicar no sinal de mais, e vou inserir o que é chamado de cartaz. Um cartaz é apenas uma imagem de fundo com texto sobre o topo. Vou procurar uma imagem para um ginásio. Vamos apenas selecionar este. Vou escrever um título aqui, “Your Friendly Neighborhood Gym”, e então o subtítulo aqui, “Venha dizer oi”. Para enfeitar esta página um pouco mais. O que eu vou fazer é inserir um pouco de um vídeo primário. Desta vez eu estou realmente indo para clicar nesta guia aqui, e, eu vou procurar por vídeo, que está lá em básico, e, eu vou inserir um vídeo que eu preparei mais cedo para este ginásio falso. Originalmente eu liguei para o ginásio, Mochila Ginástica. Este é o meu vídeo promocional idiota que eu criei. Mas como você pode ver, é outro pedaço de conteúdo que podemos adicionar, assim como podemos adicionar tantas coisas diferentes como uma citação, um botão, uma incorporação de áudio, todo tipo de coisas. Slideshow, todo tipo de coisas que estão disponíveis aqui dentro do Squarespace. Para a nossa página inicial, vou deixar assim. Vou clicar em “Salvar”. Essa é a nossa página inicial. Então, se formos para a nossa versão local, e removermos a escória no final e apenas ir para localhost: 9000. Infelizmente, o conteúdo ainda não chegou, em situações como esta, o que eu gosto de fazer é reiniciar o servidor. Isso deve carregar as alterações mais recentes em nosso site do Squarespace. vez vai demorar um pouco para carregar. Vamos apenas deixá-lo carregar e dar uma olhada quando estiver terminado. Como você pode ver aqui, nós temos seu ginásio amigável bairro, venha dizer oi, e nós temos nosso incrível vídeo promocional aqui. Apenas pessoas aleatórias malhando usando filmagens de ações. De qualquer forma, então você entendeu o ponto. Temos o cartaz e o vídeo aqui, mas o problema com isso é que queremos que ele seja de largura total. Agora, a razão pela qual ele não tem largura total é porque temos o conteúdo neste contêiner do site. Se eu olhar através do código, muitas coisas aqui, mas aqui nesta div, temos avistamento. Há duas coisas que vamos ter que fazer aqui. Nós vamos ter que mover esta div para cada um dos cabeçalhos, a seção principal e o rodapé; porque nós ainda queremos que o cabeçalho e o rodapé estejam no contêiner. Mas queremos que o conteúdo de apenas a página inicial e quaisquer outras páginas que definimos para este layout específico seja de largura total. A primeira mudança é que vamos reposicionar a div para site-container, e antes de fazermos isso, o que eu vou fazer é dividir nosso arquivo site.region em três partes diferentes. O cabeçalho, o rodapé e a seção do meio, que pode permanecer o nome site.region. Vou te mostrar como podemos fazer isso agora. Vou levar tudo acima deste ponto de injeção de conteúdo CMS. Copie isso na minha área de transferência, crie um novo arquivo de região chamado header.region. Cole isso lá, e então vamos tirar tudo depois desta tag principal, que representa o nosso rodapé. Certifique-se de que está guardado na área de transferência e, em seguida, footer.region. Doce. O ninho é bom lá e interior.region, nós só queremos limpar o ninho e um pouco aqui. Precisamos atualizar nosso layout agora para dizer ao Squarespace que queremos carregar em ordem o cabeçalho, o site e o rodapé. Em nosso arquivo template.com, o que vamos fazer é adicionar cabeçalho e rodapé à nossa matriz de arquivos de região aqui. Basicamente, o que fizemos, isso vai produzir exatamente o mesmo resultado, mas isso vai dividir nosso arquivo região em três seções diferentes, porque podemos querer que esta seção do meio seja diferente em outras páginas, mas queremos que o rodapé e o cabeçalho permaneçam os mesmos. Ele também torna um pouco mais fácil de editar. Se eu quiser editar algo no meu cabeçalho, eu sei que eu tenho que ir para header.region e se eu quiser editar algo no meu rodapé, eu posso ir para footer.region então alguns benefícios para fazer isso. Vamos voltar ao nosso site e atualizar e provar que não há nenhum problema. Lá vai você. Nós ainda temos o cabeçalho, o rodapé, que é apenas este texto e nós temos o conteúdo no meio, então ele ainda está funcionando. Mas agora o que podemos fazer é criar outro layout em nosso template.conf. Vou copiar este objeto e atualizar algumas coisas. Este em vez de padrão, vou chamar a largura total e o título que aparecerá no admin do squarespace será de largura total. Em vez de site no meio, vou criar outro arquivo de região chamado full-width.region. Largura.Region vai ter basicamente o mesmo conteúdo que site.region, mas a diferença é que não vamos usar o contêiner do site dentro. Vou te mostrar o que isso parece em um segundo. Atualizando a página novamente, não deve haver diferença até começarmos a fazer essas edições na posição do desenvolvimento. Mas como eu mostrei antes, contêiner do site encapsula o cabeçalho, o conteúdo e o rodapé, então vamos precisar reestruturar isso. Entrando em nosso arquivo de cabeçalho bem aqui, eu vou remover esta tag de abertura e, em seguida, indo para o footer.region, eu vou remover esta tag div aqui. Agora, se atualizarmos a página, tudo será de largura total. Lá vai você. Como eu mencionei, o que queremos fazer é ter este cabeçalho e rodapé no recipiente para a página inicial, mas o conteúdo da página inicial ser de largura total. O que vamos fazer é adicionar novamente no contêiner do site, mas dentro do rodapé e dentro do cabeçalho. Bem aqui, já estamos dentro do arquivo do rodapé, então vamos começar aqui. Vou embrulhar o conteúdo do rodapé na div contêiner do site e, em seguida, para o cabeçalho, eu vou fazer o mesmo. Movendo-se para o cabeçalho aqui, indo para adicionar neste div para o contêiner do site. Pressione Salvar sobre isso, volte aqui, atualize a página e você verá que agora esta seção do meio tem largura total, mas o cabeçalho e o rodapé ainda está no recipiente. O problema com isso, no entanto, é que cada página em nosso site agora vai ter largura total, como você pode ver. Nós ainda queremos que as outras páginas do nosso site estejam dentro do contêiner, é só que queremos que a página inicial seja de largura total. O que precisamos fazer é adicionar o contêiner do site ao nosso site.region aqui. Isso vai resolver esse problema. Agora, em cada página que usa o layout que definimos aqui de padrão, ele usará cabeçalho, lado e rodapé. fim de obter o melhor de ambos os mundos no sentido de que queremos que o layout alternativo seja exibido em nossa página inicial. Queremos largura total, mas nas outras páginas queremos apenas um layout padrão. Nós vamos ter que empurrar para fora as mudanças, que eles vão para o admin do squarespace e então nós podemos realmente selecionar nosso novo layout, dentro do admin do squarespace. Vamos dar uma olhada nos nossos layouts aqui. Eu percebi que nós precisamos realmente mudar a seção do meio para largura total. Dessa forma, ele vai puxar nesta região aqui, que não tem a div com a classe de contêiner do site. A diferença entre os dois layouts, este e este é praticamente o mesmo, exceto para este recipiente de site div, certo? Qualquer página que usa a largura total do layout, usará essas regiões, e qualquer página que use o layout padrão usará essas regiões. Como já mencionei anteriormente, para realmente ver esse layout alternativo no admin e selecioná-lo, teremos que enviar essas alterações para o nosso site do Squarespace. O que eu vou fazer, é abrir um novo terminal aqui. O que vamos ter que fazer primeiro, é usar a palavra-chave obter anúncio com um ponto, e isso irá adicionar todas as alterações que fizemos até agora em nosso commit. Então, eu vou fazer um commit, usando traço m, eu posso escrever uma mensagem. A mensagem vai ser, adicionar um layout de largura total. Agora que nos comprometemos com o git, podemos digitar git push e ele vai enviar essa alteração para o site do Squarespace. Lá você pode ver, está atualizado e agora, podemos baixar nosso site do Squarespace. Como você pode ver, ele produziu um pouco de um efeito funky, e isso é porque nós deixamos no log do console em nossa região de ponto de cabeçalho. Fazer um log de console para que você possa ver camada de dados adjacente é útil quando você está fazendo o desenvolvimento. Mas, por algum motivo, quando você o envia para o seu site do Squarespace, ele acaba quebrando o administrador, e assim você terá esse efeito estranho. O que vou fazer é removê-lo por enquanto. Dessa forma, não temos o site de aparência descolada. Vou ter que adicionar essa alteração novamente ao meu commit, fazer outro commit, dizendo remover log do console e, em seguida, empurrar isso novamente. Uma vez que isso for empurrado, podemos atualizar nossa página aqui, e deve ficar tudo bem. Agora, o que devemos ter em nosso admin do Squarespace é o outro layout registrado. Vamos ver se este é o caso. Entrando aqui na nossa página de boas-vindas e clicando no ícone de engrenagem. Quero que você clique em avançado, e aqui você pode ver uma nova opção aparecendo para o layout da página. Acredito que se não houver opção de mudá-lo, não aparecerá. Mas como adicionamos largura total, agora podemos alterar o layout de largura padrão para largura total, nesta página. Vamos bater em salvar, e você verá que agora temos uma seção de largura total. Isso porque temos esse layout alternativo definido aqui chamado largura total, que usa um arquivo de região diferente no meio entre cabeçalho e rodapé. Isso é o que lhe dá a seção completa do chicote. Enquanto nessas outras páginas que ainda estão usando o layout padrão, eles ainda têm o contêiner. Recapitulando, o que fizemos é que separamos em nosso arquivo de região em três partes diferentes, o cabeçalho, a seção do meio e o rodapé, e isso nos permitiu manter o cabeçalho e o rodapé são os mesmos para outros layouts. Ainda podemos usar esse código, mas para a seção do meio, podemos trocar esse arquivo de região do ponto do site por algo mais como esse arquivo de região de pontos de largura total. Também atualizamos um pouco de CSS. Agora estamos prontos para olhar para a próxima parte do diagrama. Se eu clicar sobre aqui é navegação. Na próxima lição, analisaremos os blocos e como podemos atualizar os blocos para atualizar nossa navegação. 10. Navegação e blocos: Na lição anterior, criamos alguns novos arquivos de região, e fizemos isso para configurar novos layouts em nosso arquivo de template dot conf. Nesta lição, vamos falar sobre navegações e como podemos representar em navegações usando blocos. Se eu ir para o meu código e vamos para o único arquivo de bloco em blocos, este é o arquivo de bloco para navegação. Vamos voltar ao diagrama e vamos falar sobre como esse bloco é realmente trazido para a nossa região. Em nosso arquivo de template dot conf, temos nossos layouts como vimos na última lição, mas também temos uma série de navegações. Muitas vezes há apenas uma navegação, mas podemos criar várias navegações aqui. Quero chamar a sua atenção para este par de valores chave aqui. Este é o nome que vamos fazer referência em nosso código. Como você verá no diagrama, as navegações são configuradas no arquivo de ponto conf de modelo, mas o código para essas navegações existe em blocos que vão para lugares como regiões. Vamos ver isso em vigor agora. Se eu for para a minha região de cabeçalho, que é onde a navegação está, veremos esta tag especial fornecida pelo espaço quadrado. navegação de dois pontos do Squarespace traz uma navegação que definimos em nosso template dot conf. Lembre-se que eu disse para tomar nota deste nome aqui, SitenAV. Aqui em nosso ID de navegação nesta tag é esse nome exato. Estamos dizendo aqui nesta tag que queremos usar essa navegação específica que configuramos em nosso template dot conf. O próximo atributo é modelo igual a. Aqui é onde nós definimos o bloco que vai manter a navegação no site. Aqui podemos ver a navegação do traço do site. Nós não precisamos colocar o bloco de pontos no final, você pode ver que este mapeia perfeitamente para o site traço navegação ponto bloco aqui. Onde quer que coloquemos esta tag, estamos registrando a navegação que configuramos no template dot conf e estamos dizendo a ele para usar o código neste bloco. Aqui mesmo, o código que colocamos aqui dentro será processado. A outra coisa a observar sobre navegação é que ela nos dará acesso a uma matriz de itens. Dentro de qualquer bloco de navegação teremos uma série de itens. Vamos provar isso agora mesmo. Eu vou mover isso acima de nossa seção repetida para que possamos ver o que o contexto JSON está dentro deste bloco de navegação. Se eu atualizar a página aqui, talvez precisemos reiniciar o servidor. Eu tive isso sentado ocioso por um tempo, então nós só precisamos reiniciar executando o servidor squarespace, seguido do endereço, seguido de traço auth. Você já deve estar familiarizado com isso agora. Está ouvindo na porta 9,000. Vamos atualizar a página e esperar. Eu não sei se vai levar tanto tempo no seu final, mas para mim leva como 30 segundos para a coisa toda para carregar, então não é um pacote muito eficiente no momento, mas espero que ele vai melhorar. Depois do que parecia uma eternidade está aparecendo agora. Se eu for para o meu “Console” aqui podemos ver este objeto aqui. Neste objeto vamos ver uma matriz de itens e nesta matriz de itens, objetos de coleção que têm a nossa navegação. Dentro do nosso elemento de navegação, se olharmos para o contexto JSON dentro disso, temos acesso a uma matriz de itens. Se apenas emitirmos isso fora da navegação, então não teremos acesso a essa matriz de navegação. Vamos colocar isso de volta onde estava antes. Agora vamos ter de consola os registos. Atualize a página aqui. Como pode ver, temos dois objetos. O primeiro, se olharmos para dentro, não tem itens. Este é o que está vindo através da região ponto local ou região ponto cabeça em vez disso. Mas este vem da nossa navegação. Aqui você pode ver que temos itens. Isso é importante notar. Você não verá os itens se observar o contexto JSON no arquivo de região. Mas se você aprofundar a navegação, ele cria essa matriz de itens. Isso é muito importante porque agora vamos percorrer esses itens e produzir um elemento de lista para cada um desses itens. Nós explicamos um pouco sobre o JSON-T que está acontecendo aqui na lição sobre JSON-T, então você deve ter uma boa compreensão do que são e de onde eles estão vindo, dessa lição. Mas há uma mudança que realmente precisamos fazer aqui, e que é que nosso modelo atualmente não suporta pastas. Lembre-se que adicionamos as pastas dot conf arquivo aqui à nossa pasta de coleções. Isso nos permitiu criar uma pasta no admin. Mas nosso modelo não tem a capacidade de ter um menu suspenso quando passamos o mouse sobre a pasta, que é provavelmente o que você esperaria de sua navegação. Primeiro, vamos construir nossa pasta. Vou clicar nesta “Nova pasta” e quero mudá-la para, vamos fazer uma pasta cheia dos diferentes “Tipos de Classe”. Vou atualizar o título da página, o título navegação e a lesma. Aperte “Salvar” nisso. Agora o que podemos fazer é criar páginas dentro desta pasta, então eu vou criar uma página e vamos chamá-la de HIIT para treinamento de alta intensidade. Agora você pode ver que criamos esta página HIIT. O que eu quero fazer antes de ir mais longe é clicar neste ícone aqui para abrir a pasta. Então o que posso fazer é arrastar esta página para dentro dessa pasta. Agora, como eu disse antes, nós realmente não suportamos menus suspensos quando passamos o mouse sobre as pastas ainda em nosso modelo. Mas aqui você pode ver claramente que estamos aninhando essa página dentro desta pasta. Para esta página HIIT, o que eu vou fazer é colocar em um título, Treinamento Intervalo de Alta Intensidade, também conhecido como HIIT. Lá vamos nós. Vou mudar isso para um título 1. Então aqui embaixo, porque realmente não importa para o propósito desta classe, nós vamos encontrar um gerador Lorem ipsum. Isso é bom para colocar em conteúdo de parágrafo falso apenas para ver como ele ficaria. Basicamente conteúdo fictício. Agora temos uma página para Treinamento Intervalo de Alta Intensidade. O que eu vou fazer para construir esta pasta é duplicar esta página. Voltarei um segundo. Você pode realmente clicar nesta engrenagem, rolar para baixo em “Geral” e, em seguida, clicar em “Duplicar página”. Confirme se quero fazer isso. Vou chamar este de “Pilates”. Vamos colocar isso embaixo do HIIT e, claro, vamos ter que mudar. A URL é toda alterada para “Pilates”, então isso é bom, mas precisamos mudar o título aqui. Pilates. “Salvar” isso e, em seguida, mais uma página duplicada. Vamos chamá-lo de CrossFit como a última aula. Arraste aquele de não vinculado para a foto e, em seguida, uma vez que chegamos a essa página porque ela está duplicada, nós só precisamos atualizar isso para CrossFit. Aperte Save nisso. Agora, temos uma pasta para tipos de classe com três páginas diferentes descrevendo vários tipos de classe. Neste momento, nossa navegação aqui não reconhece e exibe páginas que estão dentro de uma pasta porque lembre-se, nós adicionamos a capacidade de ter pastas neste modelo depois que começamos com ele. Este modelo por padrão não tem menus suspensos, mas podemos facilmente que agora usando JSON-T. Se eu for para o código, vamos limpar tudo isso. Você pode começar de onde precisamos começar, e podemos entrar no arquivo site-navigation.block. Para cada item, o que queremos fazer é verificar se é uma coleção, estamos verificando se é um link externo, mas não estamos verificando se é uma foto. Acima do link de coleta, o que eu vou fazer é colocar em um eu acho que eles chamam de predicado em JSON-T, mas há um predicado especial que eu mostrei antes, que verifica se algo é uma pasta. Então, vamos colocar o fim, vamos trazer isso para dentro e eu vou apenas mostrar-lhe se voltarmos para a documentação, podemos ver todos os predicados aqui, e se eu procurar por pasta, você vai ver apenas testes se uma navegação uma pasta porque precisamos tratar um item de menu de pasta de forma diferente. De volta à nossa página. Se for um item de menu de pasta, o que eu quero fazer é colocar em um link que agora, ele não vai a lugar nenhum. Vamos apenas não colocar um href em, mas eu quero colocar em uma tag com o título de navegação. Este vai ser basicamente o nome da pasta. Então, o que eu quero colocar é uma lista desordenada de todos os itens de menu dentro dessa pasta. A maneira de fazer isso é se realmente olharmos para o código, então vamos para a nossa versão local onde temos todos os console.logs. Vamos dar uma olhada. Na nossa matriz de itens, no primeiro item dentro do objeto de coleção, e podemos ver que esta é a pasta, e se nós rolarmos para baixo, atualmente, não há itens de submenu, então nós só precisamos atualizar a página aqui. Aqui vamos nós. Nós temos a coleção, que tem o título de navegação para a pasta, mas então, nós também temos itens dentro deste item, e é aí que podemos percorrer e retirar as diferentes páginas dentro dessa pasta. Eu posso ver que eu cometi um pequeno erro aqui e eu preciso colocar em coleção na frente daqui porque nós não ampliamos esse contexto como nós fizemos aqui em baixo. O que vou fazer aqui é começar outra seção repetida. Então. Itens de seção repetidos, assim como fizemos aqui, mas agora estamos dentro de um desses itens, e há uma matriz de itens aninhados. O que vou fazer é a mesma coisa que temos feito aqui. Se é uma coleção, antes de tudo, queremos colocar em um elemento de lista independentemente do tipo de link que é. Vou colocá-lo no elemento da lista. Se houver uma coleção presente, que basicamente significa qualquer página no seu site do Squarespace além de um link externo, como aqui embaixo, criaremos uma sub-lista abaixo. Vou tocar em “Save” nisso. Vamos ver o que acontece quando executamos isso em nosso servidor local. Você verá que o código que escrevemos agora está chegando em nossa navegação. Nós temos esse tipo de classe. É uma tag de link sem href porque não vincula em nenhum lugar, e dentro, temos outra lista desordenada com todos os links para as páginas dentro dessa pasta. Temos um pequeno problema aqui porque temos outro link de coleção aqui para tipos de classe. Infelizmente, mesmo que seja uma pasta, surge como uma coleção. Para corrigir isso, tudo o que precisamos fazer é pegar todo esse código e ter certeza que é um ou outro. Se for uma pasta, vamos tratá-la dessa maneira, mas se não for uma pasta, tratamos a coleção dessa maneira, e isso deve parar o item de menu duplicado. Atualizando a página aqui, agora você pode ver que temos tipos de classe listados aqui com uma lista não ordenada para os diferentes tipos de classe dentro da nossa pasta. Podemos clicar sobre eles porque nós definimos o URL e você pode ler sobre todos os diferentes tipos de classe. Agora, obviamente, precisamos fazer algumas mudanças no CSS aqui porque isso não parece muito bom. O que queremos fazer é entrar aqui e certificar-se de que isso não é exibido por padrão e, em seguida, quando passarmos o mouse sobre os tipos de classe, ele aparecerá. Isso é tudo coisa CSS bem ali. Eu vou jogá-lo rapidamente juntos agora, mas o principal princípio aqui é que nós somos capazes de acessar os sub-itens dentro deste item de menu. Vamos consertar isso um pouco indo para base.less. Nós vamos estar dentro do nosso item de navegação no site. Se você nunca usou menos antes, é como Sass ou qualquer outro compilador CSS. Eu tenho uma aula aqui sobre compartilhamento de habilidades sobre Sass se você quiser saber mais sobre isso. Mas basicamente, se você nunca viu isso antes, nós somos capazes de realmente ninho. Podemos direcionar as tags A dentro item de navegação do site, lançando o conjunto de regras dentro deste outro conjunto de regras. Dado que eu sei como fazer isso, eu escreveria aqui, mas para aqueles de vocês que não sabem menos ou Sass, mas apenas sabem CSS, vou escrever aqui fora. Basicamente, o que estamos tentando fazer é direcionar o item de navegação do site e o ul dentro dele se quisermos exibir nenhum. A menos, é claro, que o item de navegação do site esteja passando o mouse sobre, então, qualquer uls aninhados deve ser exibido. Aperte Save nisso. Isso agora nos dará a capacidade de fazê-los aparecer em pairar. Obviamente, o posicionamento está desligado agora, então eu vou consertar isso rapidamente. Vamos ver como isso funciona. Você só precisa dar uma cor de fundo. Vamos dizer “Branco”. Agora, não é o menu mais bonito, mas pelo menos temos nossos itens dentro nossa pasta aparecem quando passamos o mouse sobre esse item de pasta. É mais uma experiência de usuário que esperaríamos de um modelo, mas esta não é uma classe CSS, então não vamos ficar muito envolvidos em como ele parece. Mas, como você pode ver nesta lição, podemos atualizar nossa navegação no site aqui usando nosso conhecimento de JSON-T e nosso conhecimento de como pesquisar dados JSON. Desculpe, está bem aqui, na nossa guia do console. Aqui estão todos os itens, e este é o processo que você faria independentemente de ser um bloco, ou uma lista, ou um item, você olharia para a camada de dados JSON, ver o que você está tentando acessar e escrever JSON-T baseado nisso. Antes de passarmos para a próxima lição, o que eu quero fazer é transformar essa pasta no que é chamado de “índice”. Um “índice” nos permite acessar os dados dessas páginas filhas em uma página separada que representa todos os itens dessa pasta. Então é semelhante a uma coleção. É basicamente uma coleção de páginas em vez de posts, imagens ou vídeos. Tenho certeza que começará a fazer um pouco mais de sentido assim que começarmos a implementá-lo. Se olharmos para aqui, podemos ver que é claramente uma pasta dado este ícone e também quando clicamos nele, nada realmente acontece. Se clicarmos em outra página e, em seguida, clicar na pasta, não é realmente uma página. Não é possível visualizar uma página para esta pasta. Então o benefício de fazer um “índice” é que isso pode ser uma página, bem como uma coleção de páginas diferentes aqui. Eu tenho que ter cuidado usando a palavra “Coleção” porque tecnicamente em termos de terminologia do Squarespace, não é uma coleção, mas basicamente um “índice” é como uma pasta que também é uma página. Podemos aprender mais sobre índices indo para a documentação novamente, e há um item de menu aqui para “Pastas e Índices”. Lembre-se de que usamos as instruções aqui para ativar pastas dentro do nosso modelo do Squarespace. Mas se rolarmos para baixo, podemos realmente criar um índice. Como diz aqui, um índice é uma pasta com uma página principal que permite aos desenvolvedores agregar dados das coleções e páginas contidas nele. Para criar um índice, vamos fazer o que diz aqui. Adicione um arquivo “index.conf” à nossa pasta de coleções. Vamos usar essas configurações padrão. Nós vamos para a pasta de coleções, clique em “Novo arquivo”, chamá-lo de um arquivo “index.conf”, colar isso, e eu não quero que ele seja chamado de “Meu índice” apenas “índice” está bem. Não quero que diga “adicionar coleção”. Eu vou dizer “adicionar página” e vamos permitir que ela aceite páginas, não galerias. Claro, se você quisesse criar vários índices que fossem índices de galerias, então você deixaria isso lá. Se você queria índices de blogs, então você poderia colocar “blog” aqui. Mas para nós estamos apenas aninhando páginas. Vamos limpar isso por enquanto. Eu vou apertar “Salvar” nisso, e então a outra parte é que precisamos fazer um modelo de página de índice. Fazemos isso criando um arquivo “index.list”, e adicionamos isso à nossa pasta de coleções também. Vamos para as coleções. Novo arquivo, “index.list”. Para economizar tempo aqui, vou copiar e colar algum código, mas é um código muito básico. Vou explicar rapidamente o que isso faz. Onde o log do console, o que o contexto JSON está dentro deste arquivo de lista. Então o que estamos fazendo é procurar o objeto de coleção, que se lembram, contém todas as informações para esta página específica. Estamos procurando as coleções aninhadas dentro disso e fazendo uma lista de todas essas coleções. Como veremos em breve, este código JSON-T corresponde ao que temos em nossos contextos JSON. O que vou fazer é acho que teremos que empurrar isso para o servidor. Deixe-me ir ao endereço do índice. Sim, então ele só redireciona para “HIIT”. O que vamos ter que fazer é empurrar essas mudanças para o Squarespace. Eu vou abrir este outro terminal aqui onde eu faço meu “git” adicionar tudo, confirmar com a mensagem, “Transformar pasta em índice”. Então vamos empurrar isso. Agora, quando vamos ao nosso site em nosso admin do Squarespace, podemos clicar aqui e obter uma nova opção aqui, que é o índice. Nós não podemos realmente transformar esta pasta em um índice per se, mas o que podemos fazer é criar um índice e, em seguida, movê-los para o novo índice. Indo para excluir esta pasta agora para tipos de classe. Como você pode ver nesta nova página de índice, que eu deveria renomear imediatamente para “ Tipos de classe ” e clicar em “Salvar” sobre isso. Agora você pode ver que este índice, que se parece muito com uma pasta, é uma página em si. Em seguida, dentro deste índice, estamos fazendo loop através e saída de todas as páginas dentro desta página índice. Podemos clicar em “Pilates” e vai aparecer a página “Pilates”. Se olharmos para o objeto JSON. se formos até aqui, vá para o endereço dos tipos de classe. Podemos ver no segundo objeto aqui, temos um objeto de coleção, e dentro do objeto de coleção, temos uma lista de coleções ou uma matriz de coleções. E, em seguida, dentro disso, temos as páginas individuais com o título da página e o URL completo. Isto coincide com o código que escrevemos aqui. Estamos dentro do objeto, vamos para a coleção. Então dentro da coleção nós vamos percorrer objeto desta coleção e isso é exatamente o que está acontecendo aqui. A outra coisa que precisamos fazer antes de encerrar isso é entrar em nossa navegação no site, e como este item de navegação é uma página em si, agora podemos adicionar um caminho de URL a isso. Vou escrever “Collection.full URL”. Aperte “Salvar” nisso. “ Refresque” aqui. Agora, podemos realmente clicar neste item de menu “Tipos de classe” e ele irá para a página “Tipos de classe”. Já estávamos nisso, mas vamos passar para outra página. Clique novamente em “Tipos de classe” e agora podemos acessar essa página de índice e todas as páginas dentro dela. Aí estão vocês, nós atualizamos nosso arquivo de bloco para navegação no site, mas como vimos no diagrama, blocos também podem ser parciais. Eu não tenho um exemplo específico que vem à mente de uma parcial que você usaria. Mas se entrarmos na documentação do Squarespace novamente, podemos procurar parciais. Aqui, sob arquivos de modelo, podemos aprender sobre parciais de modelo. Aqui você pode ler sobre como podemos criar um arquivo de bloco e, em seguida, usar essa sintaxe para trazer esse arquivo de bloco onde quisermos dentro do nosso modelo do Squarespace, e esse código virá através do lugar em que colocamos este código. Aqui você pode ler sobre por que devemos usar parciais. Tem aqui um exemplo. Este exemplo em particular não foi particularmente relevante para os nossos propósitos. Mas se você alguma vez se encontrar repetindo, muitas vezes, definitivamente olhar para o uso de parciais. Isso economizará tempo e tornará seu código mais organizado. Isso cobre praticamente tudo o que podemos fazer com blocos. Como eu disse, é usado principalmente para navegação, mas também pode ser parcial. No próximo vídeo, vamos falar mais sobre o que está acontecendo aqui. 11. Criando uma coleção de eventos: Nas lições anteriores desta aula, falamos sobre o topo desta estrutura aqui. Falamos sobre Layouts e Navigation-s que estão configurados em seu arquivo template.com, e esses são determinados pelo código em suas regiões e blocos. Agora vamos falar sobre o conteúdo principal. É claro que as regiões determinam o layout geral que você está vendo em uma página específica. Blocos principalmente para determinar a navegação que irá sentar-se provavelmente em uma região de cabeçalho como temos em nosso modelo. Mas agora é hora de falar sobre o que é exibido dentro deste conteúdo Squarespace.Main. Agora, na maioria das situações, eu diria que esse conteúdo será apenas o conteúdo que você configurou no administrador do Squarespace. Se eu clicar em nossa outra janela aqui e olharmos para a página Sobre Nós, por exemplo, o conteúdo que configuramos nesta caixa de conteúdo da página, usando os blocos disponíveis no Squarespace é nosso conteúdo Squarespace.main. Isto é quando estamos visualizando uma página. Mas se estamos visualizando uma coleção, o código que vem através de Squarespace.MainContent é determinado por um arquivo de lista. Isso nem sempre é verdade porque podemos ter coleções de sistemas, que mostraremos nesta lição. Mas se temos um arquivo de lista definido aqui, então o código neste arquivo de lista será o que vem através de Squarespace.MainContent. Também temos páginas estáticas, que abordaremos na próxima lição. Mas nesta lição, eu quero falar sobre coleções. As coleções são compostas pela página de lista e as páginas de itens individuais. Agora, como mencionei antes, há várias coleções de sistemas que vêm com o Squarespace automaticamente. O que eu vou fazer é ir para a documentação, rolar para baixo e clicar em coleções. Aqui você pode ver uma seção sobre coleções de sistemas. Como você pode ler, o Squarespace cria e mantém vários tipos de coleção no sistema que você pode usar em seu site sem precisar de nenhum arquivo em seu template. Vamos testar isso agora mesmo. Vamos permitir que todas essas coleções de sistema para vir através do nosso modelo. Eu vou copiar esse objeto, entrar em nosso modelo. comfile. Depois da navegação, vou colocar coleções do sistema. Agora devemos esperar ver, uma vez que enviamos isso para o nosso site do Squarespace, a capacidade de adicionar álbuns, blogs, eventos, galerias e produtos, sem ter que escrever nenhum desses códigos em nossa pasta de coleções. Deixe-me apenas adicionar que commit isso com a mensagem de adicionar coleções de sistema. Então vamos empurrar isso para que possamos ver a mudança em nosso site do Squarespace. Vá para o site do Squarespace, agora. Atualize a página. Se entrarmos em páginas e clicar sobre isso, agora podemos adicionar galerias, produtos, blogs, eventos, álbuns e, em seguida, um índice que criamos antes. Nesta lição, o que vamos fazer é criar uma coleção de eventos primeiro usando coleções de sistema, e então vamos fazer isso personalizado. A razão pela qual vamos fazer um costume, mesmo que coleções de sistema possam ser suficientes, é para que possamos aprender a criar coleções personalizadas se quisermos fazer algo personalizado no futuro. Então talvez não seja uma coleção de eventos que queremos diferente aqui, mas talvez queiramos adicionar algo como projetos ou um portfólio se quiséssemos criar nossa própria coleção personalizada mais tarde, então as habilidades que aprendemos nesta lição nos ajudará a fazê-lo. Mas para esta lição, vou usar o exemplo de eventos. Vamos realmente criar uma coleção de eventos agora usando coleções de sistema. Aqui, nós fizemos, acabamos de criar uma coleção de eventos e agora podemos criar eventos. Digamos que sábado Boot Camp, livre para o público. Tudo bem, eu vou bater em salvar e publicar, e como você pode ver, parece muito com um post de blog, mas é um pouco diferente em como ele é apresentado. Como você pode ver aqui, a data ea hora é muito proeminente, e então você tem este botão para voltar para todos os eventos com este tipo agradável de tag calendário aqui. Funciona muito como um blog. Mas em vez de postagens de blog, você tem eventos. Tudo bem, então eu vou remover isso agora. Vamos remover todas as nossas coleções de sistema e adicionar nossa própria implementação personalizada dessa lista. Tudo bem, então eu vou entrar no código do Visual Studio. Vamos remover coleções do sistema. Vamos empurrar essa mudança. Eu vou executar git, add, git commits, remover coleções de sistema, empurrar essas alterações para o nosso site e vamos confirmar que os eventos agora se foram. Depois que a página é carregada, agora podemos ver que não temos essas coleções disponíveis para nós. Ok, ótimo. Agora vamos codificá-lo nós mesmos. Para isso, vamos para a documentação do Squarespace e role para baixo nesta página sobre coleções para analisar a criação de coleções personalizadas. Você pode ver que precisamos do nome do collection.comf como um arquivo, e também precisamos de um dos seguintes. Precisamos de um arquivo de lista de pontos ou um arquivo de item de ponto, mas muitas vezes teremos ambos. Ok, então aqui você pode ver as opções de configuração. Vou copiar e colar isto. Vá para o nosso código, crie uma nova coleção com o título de Events.comf. Vou colar esse objeto [inaudível]. Agora, não deixemos isto como está, porque isto não faz sentido. É apenas uma cópia de uma configuração para um blog. Vamos substituir o blog por eventos. A ordenação, se tivermos um olhar para trás para as opções disponíveis, cronológica, usuário, order-able ou calendário, porque estamos executando eventos, vamos alterá-lo para calendário. Ele irá organizar em termos de tempo para o texto adicionar aqui. Este é basicamente os textos de directiva que vai vir através do administrador para adicionar um novo, qualquer que seja o item é. No exemplo para blog, se entrarmos no blog e passarmos o mouse aqui, você pode vê-lo diz Adicionar Post para nós, queremos dizer adicionar evento. Então adicione evento aqui para exceto tipos. Você pode ver que ele está definido no momento como texto. Que é uma das três opções disponíveis. Diz aqui, na verdade, há mais do que apenas três. Então, se voltarmos ao nosso calendário ou ao nosso arquivo thence.comf, podemos realmente alterar este texto para um evento. Um evento é um dos tipos de aceitação que podemos usar. Agora há algumas outras coisas que eu quero fazer aqui. Só para tornar isso muito mais agradável, ele vai aparecer com um ícone de blog por padrão. Então eu vou mudar o ícone para o ícone do calendário e isso é sobre isso caras. Tudo bem, porque não temos mais coleções de sistema definidas em nosso arquivo template.comf. Nós definitivamente vamos ter que criar um arquivo de lista aqui. Então, Eventos. Lista, e aqui, precisamos colocar na apresentação de nossos eventos. Antes de fazermos isso, no entanto, vou enviar esses dois arquivos para o nosso site ao vivo do Squarespace. Então eu vou git adicionar git commit e dizer adicionar coleção de eventos, em seguida, git push. Vamos ver quais mudanças isso faz em nosso administrador. Lembre-se de que removemos as coleções do sistema, portanto não devemos ser capazes de adicionar uma coleção de eventos agora até que atualizemos a página mostrando essas alterações. Agora, quando nós apertamos este plus, devemos ver eventos e ele está mostrando o pequeno ícone agradável aqui porque nós definir o ícone para calendário em nosso comfile. Se clicarmos neste botão, agora podemos criar uma página de eventos. Podemos clicar neste ícone aqui para adicionar um novo evento. Vamos adicionar esse evento novamente. Sábado Boot Camp. Percebi que a última estava marcada para uma segunda-feira. Então isso não é muito apropriado, não é? Livre para o público. Vamos definir para um sábado no futuro. Eu não vou acima com lorem ipsum por enquanto, talvez eu só diga lorem ipsum. Vamos salvar e publicar. Agora, se entrarmos nesse evento, podemos ver que há uma página de item que é gerado automaticamente para nós. Mas se voltarmos para trás e clicar na página da lista, você pode ver que não há conteúdo porque ele está usando L.listFile aqui, que está em branco. vamos começar a construir este arquivo de lista. Eu vou mudar para o host local agora porque o que eu quero fazer é executar um log de console para que possamos ver a camada de dados json e descobrir quais atributos queremos escolher fora da camada de dados json e colocar em nossa página. Novamente, eu tenho essa era HTTP, o que significa que eu preciso reiniciar meu servidor. Então, voltarei para a minha primeira guia de terminal, controle C em um Mac para encerrar o processo em execução no momento. Em seguida, vamos executar o servidor Squarespace com a bandeira de off. Vamos ouvir na porta 9,000 de novo. Vou checar com você assim que terminar de carregar. Tudo bem, então agora podemos ver nossa Página de Eventos, que está completamente vazia porque temos um events.listfile em branco. Mesmo que haja um evento em nossa coleção de eventos, ele não aparecerá até que escrevamos algum json T para pegar a lista de eventos e produzir parte desse conteúdo na tela. Como sempre, o que eu vou fazer é colocar a camada de dados json neste contexto json particular. Então podemos começar a navegar pelo objeto e descobrir o JSON T que precisamos escrever. Voltando para essa página depois que eu lançar o script para o log do console do contexto json. Você pode ver agora em nosso console que temos um objeto secundário. Vou clicar nisso. Dentro do objeto de coleção, você verá que temos todas as informações para a coleção, que é claro que são eventos de código. Se rolarmos para baixo, devemos tentar encontrar a lista de eventos, que, como você pode ver aqui, dividem-se em duas matrizes. Uma matriz para eventos futuros, matriz M1 para eventos passados. Não temos eventos passados, de modo que está vazio. Mas temos um evento que se aproxima. Se olharmos para dentro, podemos ver o acampamento de sábado bem aqui no contexto adjacente. Tudo bem, então como você pode ver, nós temos um atributo título aqui, e nós também temos um atributo body com um monte de HTML. Este atributo de corpo vem de quando escrevemos ou editamos um evento específico. Bem aqui, podemos colocar em algum texto, mas também podemos colocar em blocos de outro conteúdo rico também. Então todo o HTML que representa isso, virá através deste atributo corpo bem aqui. Vamos usar isso em nosso arquivo aqui. Então, navegando para cima, vamos ter que percorrer o próximo array, e então para cada item, vamos puxar o título e o corpo. Vamos fazer isso agora mesmo. Vou começar uma seção repetida para a matriz. A matriz é chamada próxima. Certifique-se de fechar esse quarteirão. Então, dentro, vou criar uma div com a classe do evento. Dentro de cada evento, eu vou configurar um h2 e o h2 vai manter o título de cada um desses itens dentro do próximo array. Vai lançar o corpo bem por baixo. Eu não vou envolver isso em qualquer HTML porque ele já tem um monte de HTML que vem com ele. Refrescando a página aqui. Devíamos começar a ver o nosso título e corpo a passar. Eles vão você. Sábado Bootcamp, livre para o público e o conteúdo do corpo lá. Agora, é claro, porque este é um evento, vamos querer mostrar a hora e a data reais deste evento. Caso contrário, as pessoas não sabem quando é além daqui, no sábado Bootcamp. O que vamos fazer é trazer os dados a seguir. Se eu descer até o objeto novamente e navegarmos para o próximo, entrar nesse objeto em particular, podemos rolar para baixo. Tem até informações como a localização, com a longitude e latitude. Isso é muito legal. Mas o que procuramos é a data de início e a data de fim. Este é apenas um código de dígitos que o computador pode ler, mas obviamente não é muito legível para nós. O que vamos fazer é trazer isso para dentro e depois formatá-lo. Vou pegar a data de início e colocá-la aqui embaixo, neste elemento EM. Então vou procurar o formatador apropriado. Esta é a nossa oportunidade de usar os Formatadores JSON-T. Vou entrar na documentação do Squarespace, ir para a seção sobre Formatadores JSON-T e, em seguida, aqui, vou olhar para os Formatadores de Data e Hora. Queremos formatar uma data usando este formato de data YUI. Vou apenas copiar o exemplo aqui e colocar isso depois da data de início. Vamos apertar “Salvar” nisso. Vamos refrescar-nos aqui. Aí está você. Temos a data do evento, mas também podemos querer ter a hora do evento e não apenas a hora do evento, mas a hora de início e de término. Para isso, usamos os mesmos objetos como data de início e data de término, mas apenas acessamos diferentes partes dessa data-hora. Vou te mostrar o que quero dizer com isso em um segundo. Vamos criar outra tag em que é separada por uma tag break. Dentro vou colocar a data de início novamente. Em vez desse formato de data em particular, eu vou até aqui, clique neste link, que vai nos levar para a lista de todos os códigos diferentes que podemos colocar em formatar nossa data/hora. Vou rolar para baixo até aqui e copiar este código aqui, e colar isso aqui. Então eu vou pegar o objeto de data final. Vou copiar e colar isto. Altere essa data para a data final com o mesmo formato. Vamos apertar “Salvar” nisso. Vamos voltar à nossa página e atualizar. Lá você pode ver que o evento é de 3:00 - 16:00 PM. Nós realmente não precisamos dos segundos lá, então eu vou remover isso da string de formato. Cabeça para trás. Agora, você pode ver sábado Bootcamp, livre ao público no sábado. Começará às 15h e terminará às 16h. Essa é praticamente a nossa página de lista feita, mas talvez queiramos criar uma página para cada evento individual. Para isso, precisamos criar um arquivo.item. Antes de fazer isso, no entanto, eu quero vincular todos os títulos dentro de nossa listagem para ir para esse item individual no clique. Vamos fazer isso agora mesmo. Vou envolver o título em uma tag e o atributo que estamos procurando, como sempre, é fullURL. Vou apertar “Salvar” nisso. Refresque-se aqui. Agora, você pode ver que o título está vinculado ao evento individual. Se eu clicar nisso, você verá que há um erro. Isso é porque ainda não criamos essa página. Vamos voltar para cá. Vamos realmente criar events.item. Para events.item para mantê-lo simples, vou copiar este código aqui. O que vamos precisar fazer é descobrir qual objeto ampliar para obter todos esses atributos. Isso não vai funcionar ainda, mas o que eu vou fazer é, nós vamos, como sempre, log de console da camada de dados JSON para que possamos ver qual objeto precisamos ampliar. Vou atualizar aqui e clicar no título novamente. Agora, você pode ver que nós não temos mais esse erro. Isso é porque temos o nosso ficheiro.item. Aqui embaixo, você pode ver que temos um objeto secundário novamente, e este é o objeto que está vindo através do arquivo events.item. Vamos dar uma olhada lá dentro. Você pode clicar no objeto de coleção. Mas o objeto de coleção realmente representa a coleção pai. Aqui, neste objeto item é o próprio evento real. Esse é o objeto que queremos ampliar com nosso JSON-T. Só precisamos embrulhar tudo isso em algum código JSON-T. Vamos ampliar o item usando nossa tag de seção. Vou consertar o ninho lá. Vamos atualizar a página aqui. Verá que temos exatamente a mesma informação. Como já estamos na página, podemos remover o link aqui porque ele está apenas vinculando a si mesmo atualmente. Mas é claro que vamos mantê-lo na lista aqui. Refresque-se aqui. Como você pode ver nossa página de evento individual é um pouco diferente, se eu apenas clicar neste link, para a nossa página Eventos porque o link está faltando. Mas é claro que não é particularmente óbvio a diferença entre os dois porque ambos estão mostrando o mesmo conteúdo. O que eu vou fazer é adicionar outro evento e podemos ver certeza que esta página está mostrando uma lista de todos os eventos. Vou entrar aqui, criar um evento para uma próxima quarta-feira, que será um seminário de ioga organizado pela Mary. O conteúdo vai ser, “Mary vai te contar tudo sobre yoga.” Parece adorável. Tudo bem. Pressione “Salvar” e publique sobre isso. Se formos até aqui , provavelmente não aparecerá porque precisaremos atualizar o servidor. Infelizmente, vamos ter que descer aqui, “Controle C”, atualizar o servidor, e então devemos começar a ver as últimas mudanças chegarem em nossa versão local. Lá vai você. Está ouvindo na porta 9,000. Vou checar com você assim que terminar de carregar. Uma vez que a página termina de carregar, você pode ver que, de fato, nossa página de Eventos é uma listagem e temos todos os eventos dentro de nossa coleção de eventos listados aqui. Se eu clicar em um, você verá que vamos para a página Item para esse evento. Ele só mostrará as informações para esse item ou para esse evento. Se voltarmos ao acampamento de sábado, você pode ver que está fazendo o mesmo comportamento. Como você pode ver, isso é um exemplo de uma coleção. Sei que ficou melhor usando as coleções do sistema. Muitas vezes, se você não quiser personalizar a aparência da coleção do sistema, você não precisa. Mas se você quiser apresentar isso de uma maneira diferente, obter controle total sobre a página Listagem e a página Item, então é assim que você faria isso. Você faz isso indo para o seu código, indo para a pasta de coleções, criando um arquivo events.conf um arquivo events.list e um arquivo events.item. Claro, a palavra de eventos aqui é intercambiável com qualquer tipo de coleção que você está fazendo. Mas como isso é bom, podemos remover esses logs de console agora porque eles podem causar problemas em nosso site do Squarespace, a versão ao vivo. Vamos realmente entrar aqui, git add, git commit e git push para que possamos empurrar essa mudança para o nosso site ao vivo do Squarespace. Podemos colocar aqui “Adicionar lista de eventos e arquivos de itens”. Vamos empurrar isso. Iremos ao nosso site do Squarespace no admin. Como você pode ver, agora temos o formato que configuramos em nossa lista e arquivo de item. Vou mover os eventos, para além do blog. Aí está você. Temos nossa própria coleção personalizada. Temos controle total sobre como ele é apresentado na página. Agora, é hora de olhar para a última parte do diagrama, que são páginas estáticas. Vejo-te naquele vídeo. 12. Adicionando uma página estática: Nesta lição, vamos cobrir a estrutura do modelo do Squarespace observando páginas estáticas. Páginas estáticas são bastante simples, é apenas uma página codificada, em nosso admin do Squarespace, se criarmos uma página normal aqui, vamos deixá-la como nova página. Eu posso clicar aqui e você tem esta caixa para conteúdo da página, você tem configurações e você tem edição. Agora tenho acesso ao editor de página e posso adicionar blocos de conteúdo da página. Temos uma página estática, você não tem acesso a este editor de conteúdo de página. Em vez disso, o que você tem é apenas uma página sem opções para personalização e todo o código que vai nessa página será armazenado em um arquivo de paginação ponto. Agora fora do topo da minha cabeça, eu não consigo pensar em muitos exemplos em que você gostaria de usar uma página estática em vez de usar uma página normal porque mesmo na página normal você pode inserir HTML personalizado, mas talvez haja um em que você só quer escrever a página em código, você não quer ter que usar o administrador do Squarespace para fazê-lo ou você deseja restringir os usuários administradores de editar uma página, então a página estática será a opção para você. O que eu vou fazer nesta lição é criar uma página estática com um calendário incorporado e podemos ver como a página estática funciona, deixe-me ir para o código do Visual Studio ou qualquer editor de código que você está usando e aqui temos que criar um novo diretório chamado páginas, eu vou fazer isso agora, novas páginas de pasta. Agora dentro deste diretório de páginas, vamos criar um novo arquivo e nossa página estática vai ser o cronograma das classes. Certifique-se de colocar a página ponto no final, e para acompanhar nossa página, o que vamos ter que fazer é configurar outro arquivo com timetable.page.conf. Neste arquivo com, é muito simples, vamos apenas colocar em dois pares de valor de chave. O primeiro é o título, então eu vou chamar este Horário, e o segundo vai ser uma descrição, eu vou colocar um calendário de todas as nossas aulas, legal. Agora, o administrador do Squarespace saberá o que chamar a página e também fornecerá uma descrição para o Squarespace. Aqui no nosso arquivo de página de ponto do Horário, eu vou colocar em um h1 com título de ponto de coleção. Lembre-se, para a maioria das páginas no Squarespace , as informações da página são armazenadas no objeto de coleção. Depois de criarmos esse cabeçalho, queremos que essa página apareça como uma opção em nosso admin do Squarespace. Para isso você sabe o que temos que fazer, nós temos que realmente empurrar essas alterações para o Squarespace, aqui em baixo, vou obter add para adicionar essas alterações ao commit, git commit, adicionar uma página estática para o horário. Em seguida, git push, e depois que o push for concluído, podemos ir até nosso admin do Squarespace, atualizar. Uma vez que a página tenha terminado de recarregar, podemos olhar para baixo em nossa seção não vinculada e vamos ver esta página aqui chamada Horário, se eu clicar sobre isso, você pode ver que acabamos de ter o nome da página que é Horário. Sabemos que esta é uma página estática porque o número um podemos ver o ícone é uma caixa pontilhada, e também quando clicamos nesta página estática, ele não abre um painel para nós criarmos quaisquer edições porque é um página estática. Vamos mover isso para a navegação aqui, eu vou colocá-lo depois dos eventos e agora o que podemos fazer é escrever qualquer código que quisermos dentro, não há nada realmente extravagante acontecendo com o administrador do Squarespace, nós apenas vamos escrever uma página como normalmente faríamos, como um exemplo do que podemos colocar nesta página, eu vou colocar um calendário embutido com este cronograma para as aulas. Isso veio direto do Google Calendar, se você quiser criar um calendário do Google incorporar-se, definitivamente procurar isso, se eu bater em salvar isso, atualizar nossa página, não em nosso site publicado, mas localmente. Eu posso clicar no horário e você pode ver que nós temos o horário de fitness mochila, que era o nome original do ginásio vindo aqui. Obviamente, se quisermos que essa mudança apareça em nosso site, só precisamos enviar esse código toda vez que fizermos alterações, ele não vem do administrador do Squarespace, portanto não será inserido em nosso site do Squarespace até que enviemos esse código ao vivo, vamos fazer isso agora, git add, git commit com a mensagem de adicionar conteúdo à página de calendário e, em seguida, git push. Agora, se voltarmos ao nosso site ao vivo, devemos ver a mesma mudança, e aí está. Temos o título da coleção ou o título da página que está no objeto de coleção e temos este calendário incorporar, não importa onde clicamos, se voltarmos para ele, qualquer momento clicamos sobre isso no admin, não há opções que aparecem para nós para editá-lo porque é uma página completamente estática temos conteúdo codificado que vem diretamente deste arquivo de página ponto. Isso é basicamente isso pessoal, não muito para páginas estáticas, é basicamente tudo o que você quer colocar aqui você pode e não há nenhuma operação especial, não é uma coleção, não é uma página com um editor para você colocar, blocos de conteúdo, é apenas uma página muito básica e codificada. Não há muitas instâncias que eu possa pensar em que você gostaria de criar uma página estática, mas se você fosse criar algo que fosse muito intensivo em código e não exigisse nada do Squarespace is admin, então eu acho que faria muito sentido, mas para a maioria dos usuários, podemos inserir esta incorporação tão bem usando uma página normal dentro do Squarespace. Indo para edição de conteúdo da página e podemos inserir, tenho certeza, o nosso código HTML ferro ou incorporar. Neste caso, não é exatamente necessário para incorporar um Google Calendar, mas eu queria mostrar-lhe como criar uma página estática para que você saiba como fazê-lo e que cobre este diagrama aqui. Como você viu, podemos mapear essa representação visual para nossa estrutura de pastas aqui, blocos, coleções, páginas e regiões aqui embaixo. Claro, você também tem roteiros e estilos aqui, e é isso que vamos abordar no próximo vídeo. 13. Javascript, CSS e LESS: Nesta lição, vamos falar sobre roteiros e estilos. Para começar, vou fechar todos os meus editores abertos e, em seguida, vamos para a nossa pasta de estilos e olhar para CSS e menos para começar. Agora menos é um pré-compilador CSS. Se eu procurar menos no Google e olharmos para o site que é lesscss.org. Role para baixo e podemos ver que menos é um backwards compatível com extensão de linguagem para CSS. Agora, como menciona, é compatível com versões anteriores. Eu não quero que você tenha medo se você não sabe menos escrever CSS nesses arquivos. Como você pode ver aqui, há alguns nidificação. Há o uso do e comercial, que é menos sintaxe, mas aqui você pode ver tão bem este código funcionou que é CSS puro. É compatível com versões anteriores. Você pode simplesmente colocar em CSS diretamente em seus arquivos menos e ele ainda vai executar esse CSS, mas se você sabe como alavancar menos, e eu definitivamente recomendo que você pesquise como usar menos ou Sass. Sass é outra, basicamente a mesma coisa significa Sintaticamente Awesome Style Sheets, por isso é uma coisa semelhante a menos e, na verdade, uma grande parte dessa sintaxe é a mesma, como o aninhamento e o comercial. Eu definitivamente recomendo aprender Sass or Less, e eles são quase idênticos. Há apenas algumas diferenças, mas você não precisa saber menos para escrever código nesses arquivos e você não precisa saber menos para fazer desenvolvimento de template, mas altamente recomendado e está lá no caso de você querer usá-lo. Estamos no arquivo template.com. Aqui podemos ver base.less em nossa variedade de folhas de estilo. Estes estão puxando diretamente da pasta de estilos, e por isso, se quiséssemos incluir mais folhas de estilo, poderíamos criar um novo arquivo Less dentro desta pasta Styles. Primeiro de tudo, antes de fazermos isso, indo para a cabeça em base.less e vamos olhar para algo que podemos retirar disso e colocá-lo em sua própria seção. Como você pode ver aqui, nós temos uma seção para homepage, que é basicamente vazia, mas nós temos uma seção aqui para a lista de blogs. Este pode ser um bom candidato para colocá-lo em um arquivo diferente. Se entrarmos aqui e criarmos um blog.less, colamos isso e acertamos em salvar. Agora temos o código para blog em base.less, e enquanto a ordem estiver correta, poderíamos entrar aqui em template.com e depois adicionar isso após base.less. Depois de base.less, vamos carregar no blog.less. Como um exemplo melhor, vamos realmente mover algo que é óbvio, talvez nosso cabeçalho e navegação. Vou pegar tudo do cabeçalho do site aqui, todo o caminho até aqui. Vou cortar isso para que fique na minha prancheta, aqui e faça um arquivo header.less. Eu vou colocar em todo o código de cabeçalho lá e entre minha base e meu arquivo Less, eu vou colocar no header.less para que o código ainda está incluído no meu modelo. Se eu passar aqui para a minha versão local e eu executar a página, você tem um erro interno do servidor, então nós vamos ter que fazer aquela coisa novamente onde nós cancelamos o processo atualmente em execução usando o controle C em um Mac e executar novamente nosso servidor. Depois que nosso servidor reexecutar, e atualizamos a página, devemos começar a ver que não há alterações. Como você pode ver, depois de recarregar a página, podemos ver que nosso cabeçalho é exatamente o mesmo, e se entrarmos e inspecionar, ainda podemos ver estilos aplicando ao cabeçalho lateral. Clicando nisso, você pode ver aqui que ele vem através de um arquivo CSS compilado chamado Site.css. Isso tudo está acontecendo no back-end para nós sem ter que fazer nada além de configurar a lista de folhas de estilo em nossa matriz de folhas de estilo aqui, e certifique-se de que isso está mapeando corretamente para os arquivos dentro de nossa pasta estilos. Squarespace é incrível no sentido de que ele vai pegar tudo isso, compilá-lo e colocá-lo em um arquivo que vamos carregar em nosso projeto. Claro que não precisamos dividir nossos arquivos menos e CSS, mas podemos se quisermos, e o benefício de dividi-los é organizar nosso código beta. Se temos um monte de CSS e Menos podemos ir para os diferentes arquivos e encontrar o código para cabeçalho, encontrar o código para blog e descobrir estilos base aqui. Agora, passando para scripts, se quiséssemos executar nosso próprio JavaScript, o que poderíamos fazer é criar um novo arquivo aqui ou aqui, poderíamos apenas usar site.js, mas vamos criar um novo arquivo e vamos chamá-lo de custom.js. Neste custom.js, eu vou fazer o bom e velho Alerta Hello World apenas para mostrar que ele está funcionando. Vamos salvar isso, atualizar a página e devemos esperar que o alerta não funcione ainda porque ainda não o trouxemos para o nosso código. Vou entrar na documentação do squarespace novamente e mostrarei como podemos trazer algum JavaScript personalizado para o nosso modelo. Eu só preciso ir para developers.squarespace.com, template docs, e aqui você pode ver um link para JavaScript personalizado. Aqui você pode ver que podemos carregar em JavaScript personalizado usando o carregador de script. Se eu apenas copiar e colar um deles, e vamos dizer que queremos executá-lo apenas na página de horários. Bem, nós só incluímos esse código na página de horários. Só precisa alterar este nome de arquivo para personalizado para corresponder ao novo arquivo JavaScript que criamos na pasta Scripts, e agora, quando carregamos a página de horário, devemos começar a ver o alerta chegando. Lá vai você. Nosso anfitrião local 9 mil diz olá mundo, podemos clicar em OK e o resto da página carrega. Aí está você. Agora estamos executando esses js personalizados nessa página específica, e isso é realmente útil porque se quisermos ir para outra página e não queremos que esse código seja executado, isso é fácil de fazer. Podemos fazer com que esse arquivo JavaScript só carregue onde o incluímos no modelo e tudo seja empacotado bem no back-end através do Squarespace. Nós não temos que nos preocupar com todos esses arquivos JavaScript flutuando por aí. Squarespace irá compilá-lo e gerenciar os ativos para nós. Aí está, pessoal. Acabamos de incluir nosso próprio CSS e nossos próprios arquivos JavaScript em nosso template. Muito simples de fazer uma vez que você sabe como trazê-lo, no caso do CSS, tudo que você tem a fazer é adicionar o arquivo e, em seguida, adicioná-lo à matriz de folha de estilo. No caso do JavaScript, tudo o que você precisa fazer é adicionar esse arquivo JavaScript e, em seguida, usar a tag que acabamos de ver aqui para trazer esse script em qualquer parte do modelo que queremos. Coisas muito simples. Na próxima lição, o que vamos abordar são alguns dos outros recursos dos modelos do Squarespace que são interessantes, incluindo blocos abertos, consultas personalizadas, anotações de modelos e ajustes. Estou ansioso para vê-lo no próximo vídeo. 14. Campos com blocos abertos, consultas personalizadas, anotações de templates e ajustes: Pessoal, então nesta lição vamos abordar alguns dos outros recursos dos templates do Squarespace que eu acho que são particularmente interessantes e úteis. Eles abrem blocos, consultas personalizadas, anotações de modelo e ajustes. Eu sei que soa muito, mas cada um deles é bastante básico, então não deve demorar muito para passar por todos os quatro. Para começar, o que vou fazer é me livrar desse JavaScript que criamos na última lição. Nós realmente não precisamos de um arquivo JavaScript que um monte de mundo inferno. Eu só vou remover essa. Podemos manter menos arquivos quebrados ou podemos voltar a ser como eram antes, até você. Mas para mim, eu vou deixar como está e vamos olhar para o primeiro desses recursos que eu quero falar nesta lição, que é blocos abertos. Vamos nos referir à documentação nesta lição. Vamos voltar para a documentação que está em developers.squarespace.com. Em seguida, você clica neste item de menu para Documentos de modelo. Se rolarmos para baixo, podemos ver o campo Open Block. Eu vou clicar sobre isso e aqui você pode ler sobre o que é um campo de bloco aberto. Campos de bloco abertos são áreas abertas em um modelo, fornecidas por um desenvolvedor em que um usuário pode adicionar qualquer bloco de sistema e usar o mesmo LayoutEngine, sistema de layout baseado em grade que é usado em páginas e postagens de blog. Campos de bloco abertos são ideais para rodapés do site e barras laterais do blog. Eu acho que é uma descrição muito boa, mas para entender completamente o que está acontecendo aqui, vamos apenas pegar o código e jogá-lo em nosso template e ver o que acontece, ok? Eu vou realmente jogá-lo na página de modelo aqui. Isso vai ser o mais fácil de ver e isso vai afetar o administrador do Squarespace, eu vou ter que enviar esse código. Eu vou dizer git add, git commit. Lembre-se que nós misturamos em torno de alguns arquivos menos, então eu vou colocar isso na mensagem de commit também, separei alguns arquivos menos e adicionei um campo de bloco aberto. Vai empurrar isso. Agora vamos carregar nosso site do Squarespace. Vamos nos certificar de que estamos na página de horários e vamos rolar para baixo abaixo desta incorporação de calendário de horários. O que eu quero que você veja quando passarmos por baixo aqui, ele diz Região #blockField1 e tem um botão Editar. Este é um campo de bloco aberto e o que nos permite fazer é clicar em Editar e obtemos a mesma interface de usuário que obtemos para criar uma página, mas podemos inserir blocos de conteúdo onde quisermos, desde que tenhamos definido um Open Block Fields. Posso entrar aqui e incorporar um vídeo. Em vez disso, vou colocar um pouco de uma grade. Posso fazer upload de algumas imagens que tenho prontas para ir. Esqueci de otimizar essas imagens para a web, então eles provavelmente vão levar um pouco de tempo para fazer upload. Vamos avançar com isso. Aí está, pessoal, acabei de adicionar um Bloco de Conteúdo de Grade a este Campo de Bloqueio Aberto. Posso adicionar qualquer número de blocos aqui, assim como faria em uma página do Squarespace, posso clicar em Salvar e agora isso faz parte da minha página. Muito legal, como é mencionado na documentação, podemos colocá-lo em nosso rodapé. Também é bom colocar uma barra lateral, se você quiser adicionar uma barra lateral ao seu site, então poderíamos ter uma seção aqui e permitir que o usuário administrador venha aqui e adicione blocos diferentes. Característica muito legal do Squarespace aqui. Este BlockedField1 mapeia diretamente para o que escrevemos aqui. Eu não mudei o nome porque isso é apenas um exemplo, mas nós queremos dar um bom nome a isso. Talvez devêssemos dizer horário inferior página ou apenas rotular que um pouco mais agradável. Mas isso é essencialmente um campo de bloco aberto. Passando para o próximo recurso, quero mostrar o que é uma consulta personalizada. consultas personalizadas nos permitem pegar dados de outras partes do modelo e trazê-los para onde quisermos. Se eu rolar para baixo aqui e clicar em “Tag de consulta personalizada” nessas tags do Squarespace, você pode ver que podemos, por exemplo, estar em qualquer página no template do Squarespace e trazer postagens de blog de um blog específico. Deixe-me usar a página Eventos como um exemplo. Temos a nossa página de eventos aqui. Vamos realmente trazer esses eventos para a nossa página de horários. Voltando para aqui, vamos colocar em outro h2 e podemos dizer Próximos Eventos. Debaixo dela, vamos colocar uma tag de consulta. Vou copiar e colar este código de exemplo aqui. Dentro vou selecionar a coleção através do seu ID. Certo, então de onde tiramos essa identificação? Bem, vamos deixar isso por enquanto e vamos para a nossa coleção de eventos. Vamos entrar em events.list, e vamos adicionar nessa tag script novamente, que nos permite registrar o contexto JSON do console. Vamos salvar isso e, em seguida, vamos para a nossa página de eventos em nossa versão local. Vamos abrir nossas ferramentas de desenvolvedor, vá para o Console. Vou abrir o segundo objeto. Então eu vou entrar nesta coleção objetos aqui e procurar U-R-L-I-D. Não este ID com um estranho conjunto de caracteres, mas urlid. Deve ser o mesmo que o projétil. Slug, que significa a parte após a barra aqui na URL. Eu vou pegar o urlid, tudo que eu tenho que fazer é copiar isso, que são eventos e nós podemos nos livrar desse tag script agora. Volte para o nosso arquivo timemetable.page e, em seguida, sabemos para segmentar a coleção de eventos. Então vamos tirar essa seção repetida e vamos substituí-la pelo código em events.list. Seção repetida próxima, vai levar isso. Basicamente, o que esta tag está fazendo é criar exatamente o mesmo contexto que aqui. Podemos copiar e colar o código em palavra por palavra. Só consertando o aninhamento lá, salve a página. Vamos voltar para o navegador agora e clicar no link Horário. Agora, se eu rolar para baixo, nós temos a grade que veio do campo Open Block e nós temos aqui em baixo Próximos Eventos. Infelizmente, isso não está aparecendo, então o que vamos fazer é garantir que o contexto correto esteja chegando. Parece que cometemos provavelmente um pequeno erro aqui. Mas é claro que sempre podemos usar log Console para descobrir o que está acontecendo com JSON Data Layer. E se houver algum problema como esse, geralmente é porque não estamos direcionando os objetos corretos no contexto JSON. Atualizando a página e abrirei meu Console do desenvolvedor ao mesmo tempo. para ir para o segundo objeto aqui e você pode ver aqui que a matriz que estamos procurando é de fato itens que não estão chegando. O contexto não é exatamente o mesmo que aqui no sentido de que não temos uma próxima matriz temos apenas todos os eventos como itens em nossa matriz de itens. Ok, então isso é tudo o que precisamos para consertar aqui é em vez de seção, próxima seção itens. Acho que podemos nos livrar do registro do console agora, muita confiança que isso vai funcionar. Então podemos voltar aqui, atualizar a página. Feche isso e você pode ver que trouxemos dados de nossa coleção de eventos para esta página estática, e podemos fazê-lo em qualquer página que quisermos. Consultas personalizadas, isso é o que eles fazem. Eles trazem dados de outras partes do nosso modelo do Squarespace e nos permitem trabalhar com esse contexto JSON. Em seguida, vamos falar sobre anotações de modelo, que não deve demorar muito. anotações do modelo são bastante simples. Se eu voltar ao meu admin do Squarespace e passar o mouse sobre o título do site, você poderá ver essa caixa aparecendo aqui. Se eu clicar em Editar, o que acontece é que ele me leva para fora da seção de páginas do administrador e para a seção de design, bem onde eu posso atualizar o título do site. Você pode pensar nisso como um atalho para editar partes do seu conteúdo, e o título do site é um ótimo exemplo de algo que existe em várias áreas do seu site, mas é editado em um só lugar no administrador. Este é um exemplo perfeito. Deixe-me mostrar-lhe como é isso dentro do código. Se entrarmos em nosso arquivo header.region e procurarmos o título do site, você pode ver aqui que temos este atributo de data-content-field é igual ao título do site. Se eu fosse realmente tirar isso e empurrar essa alteração para o nosso site do Squarespace, git add, git commit, então fizemos duas alterações aqui. Adicione consulta personalizada, remova a anotação de modelo para o título do site e, em seguida, empurre isso para que a alteração afetará nosso site ativo. Depois voltarei para o nosso administrador. Observe que quando a página for atualizada e eu passar o mouse sobre meu título, essa caixa não aparece. Isso não significa que eu não possa editar o título do site, eu sempre posso entrar aqui e ir para aqui para alterar o título do meu site. Eu posso chamá-lo do nome que eu tinha em mente, Backyard Gym, e se eu apertar “Salvar”, ele vai atualizar o título ainda, mas o atalho para chegar a essa parte em seu administrador agora se foi. Então eu não recomendo fazer isso. É melhor manter essas anotações aí. Mas se você quiser saber quais outras anotações você pode usar em seu modelo, novamente, documentação do Squarespace e aqui em avançado, você pode ver as anotações do modelo. Aqui você pode ver o título do site, conteúdo principal, navegação, contas conectadas, título. Estes são todos exemplos de anotações de modelo. Todos eles devem vir por padrão em modelos com todos os recursos. Mas se você estiver desenvolvendo seu próprio modelo, isso é importante considerar, que você deve ter essas anotações de modelo vinculadas em seus elementos. Finalmente, o último recurso é um ajuste CSS. Eu estou indo para descer aqui e direita sob Template Anotações é Style Editor. Agora, isso é um pouco mais complexo e não vamos entrar em detalhes sobre todas as possibilidades desta lição, mas eu queria mostrar a vocês que temos o que é chamado de editor de estilos no Squarespace, e podemos realmente adicionar o que é chamado de ajustes em nossos arquivos LESS, e isso nos permitirá adicionar a opção de alterar alguns dos estilos que configuramos em nossos arquivos LESS para o administrador do Squarespace. Primeiro de tudo, vamos entrar em nosso administrador do Squarespace. Vamos entrar em design e entrar em estilos de site. Aqui você pode ver quando ele carrega para este cartaz de bloco de imagem. Se eu fosse para outra página, bem, isso não me deixa ir em outra página, mas basicamente, esses são os únicos ajustes que temos disponíveis para nós. Podemos entrar aqui e mudar a cor do texto para verde. Mas basicamente os outros estilos dentro do nosso template não podem ser alterados. Eu não estou pronto para me comprometer com esta cor verde então eu vou pressionar este pequeno x para cancelar fora disso. Em vez disso, vou adicionar um ajuste a um de nossos arquivos LESS para que possamos realmente controlar esse estilo dentro do editor de estilos. Vamos voltar para a documentação aqui e podemos olhar para a sintaxe. Um dos que eu gosto aqui é esta largura da página, então eu vou copiar a definição da variável aqui, bem como estes comentários acima, eu vou copiar isso. Vamos para a base. Menos e vamos colocá-lo aqui. Como você pode ver, o ajuste, a parte que torna isso um ajuste, é na verdade apenas um comentário MENOS, este traço, traço torna isso um comentário para que ele não seja tecnicamente executado em seu CSS, mas o Squarespace interpretará isso como um e ele irá adicioná-lo ao editor do site. Aqui você pode ver que nós temos apenas a palavra-chave ajustar com dois pontos depois dele, e então nós temos um objeto com alguns pares de valor de chave. Temos o valor do tipo, título, largura da página e um valor mínimo e máximo. O que eu vou fazer é permitir que o usuário administrador altere a largura do nosso contêiner de página. Eu vou entrar aqui, definir isso para um valor padrão do que temos aqui em baixo, que é 1.140, e então vamos substituir o valor embutido aqui embaixo com a variável. Isto é alguma sintaxe MENOS, mas basicamente o símbolo at representa uma variável, então o que quer que isto seja será inserido aqui. Mas é claro que temos o nosso ajuste acima, modo que nos permite editá-lo e eu vou definir o mínimo para, digamos, 900 e o máximo deve ser definido como 2.000. Estes são números arbitrários. Você pode colocar o que quiser aqui. Eu vou apenas dar a este um nome mais descritivo da largura do contêiner da página. Eu vou clicar em “Salvar” nisso, e claro, porque estamos criando um ajuste, que é algo que queremos aparecer em nosso administrador, vamos ter que empurrar essa mudança para nosso site ao vivo também. Eu vou entrar aqui, novamente, você deve estar muito familiarizado com isso agora, já fez isso várias vezes nesta aula. Git add, git commit, adicione nosso primeiro tweak, lá vamos nós, git push, e depois disso é empurrado, vamos atualizar nosso editor de estilo aqui. Aqui você pode ver sob tamanho e valores, temos a largura do contêiner da página. Não sei se podemos navegar para outra página aqui enquanto estamos no editor de estilo. Mas deixe-me pegar o endereço do site e abri-lo em uma nova guia. Deixe-me arrastá-lo até aqui. Vamos para outra página que realmente tem o contêiner do site, qualquer outra página que não seja a página inicial. Vamos clicar no recipiente, inspecioná-lo e, como você pode ver, a largura do recipiente é 1140. É aqui em cima. Assim que eu mover meu cursor para lá, você não pode vê-lo mais, mas você deve ser capaz de ver que a área azul é 1140 pixels. Vamos para o nosso editor de estilos e vamos restringir isso a 1000 pixels. Você pode ver aqui que ele já está afetando o cabeçalho. Podemos ver isto a funcionar ao vivo. Vou apertar “Salvar” nisso. Vamos atualizar esta página do blog, e agora você pode ver, se olharmos para o contêiner do site novamente, ele será restringido à largura de 1000. O que acabamos de fazer é configurar um valor padrão para o contêiner de página em nosso arquivo LESS, mas também adicionamos um ajuste aqui que permite que o usuário admin entre e edite esse valor. Este é outro recurso muito legal dos modelos do Squarespace. Podemos ir ao longo de nossos arquivos CSS ou LESS e adicionar esses ajustes para permitir que o usuário administrador mais controle sobre o estilo de seu modelo. Ajustes como estes permitem ao usuário administrador mais controle sobre o site sem ter que cavar no código do modelo. Você descobrirá que em muitos modelos completos, há muitos ajustes disponíveis e o usuário administrador tem muito controle sobre como seu modelo se parece e se sente. Mas para nossos propósitos com este modelo de espaço, ainda não temos nenhum ajuste, então, se estivéssemos desenvolvendo um modelo do zero, teríamos que construir todos os ajustes nós mesmos. Na próxima lição, vamos realmente olhar para um desses modelos com todos os recursos, e veremos exemplos ao vivo de ajustes. Mas agora que você sabe como criar seus próprios ajustes, agora você pode modificar esses modelos para remover ajustes ou adicionar seus próprios ajustes em cima dos ajustes que já estão disponíveis, e isso permitirá que você construa um modelo mais completo que permite que você altere as coisas sem ter que cavar no código a longo prazo. Isso cobre todas as principais características sobre as quais eu queria falar na aula de hoje. Mas na próxima lição bônus, o que vamos fazer é olhar para um modelo mais complexo. Vamos ver provavelmente um ponto de partida mais realista, algo em que você já está trabalhando, um modelo que você selecionou no site do Squarespace e agora você deseja fazer algumas alterações. Bem, vamos dar uma olhada em um exemplo disso na próxima lição. Então vamos encerrar. Falaremos sobre o projeto da turma e deixarei vocês seguirem o caminho. Quase no final aqui caras. Agradeço por assistir até este ponto, e vejo você no próximo vídeo. 15. Bônus: editando um template mais complexo: Nesta classe, usamos esses modelos base do Squarespace. Eu usei este modelo base porque eu acho que é um bom ponto de partida, a fim de aprender desenvolvimento de modelos e também eu recomendaria usá-lo para desenvolver seus próprios modelos personalizados. Eu suspeito, no entanto, que na maioria das vezes você vai querer editar um modelo existente. Provavelmente um dos que vêm com o Squarespace para começar. É por isso que nesta lição bônus, vamos olhar para personalizar um modelo existente. Apenas um aviso aqui pessoal, isso vai ser um pouco fora do controle porque eu não tenho planejado muito com antecedência o que vamos fazer, mas é por isso que é um pouco de um vídeo bônus. Vamos escolher um modelo e, em seguida, vamos criar uma edição e executá-lo e você pode ver uma pequena recapitulação do nosso fluxo de trabalho. Isso formará um pouco de uma introdução sobre como editar os modelos mais complexos que você poderia estar executando em seu site do Squarespace. Para começar, vamos para squarespace.com/templates, que podemos encontrar apenas indo para squarespace.com e clicando em Modelos. Aqui, você pode ver a lista de todos esses projetos. Agora, um aviso antes de entrarmos diretamente é que alguns deles são construídos com uma versão mais recente do Squarespace e você não pode usar o modo de desenvolvedor em alguns deles. Então, apenas mais um aviso aqui que alguns destes, você não pode usar o modo de desenvolvedor com. Mas se percorrermos até a parte inferior, você poderá ver que esses modelos estão na versão mais recente do Squarespace, procurando modelos de uma versão anterior. Vou clicar neste. Aqui, podemos procurar um modelo específico. Eu estou indo com o modelo que eu estou executando no meu site ao vivo, que é chamado Jasper. Vou procurar por Jasper, e quando encontrá-lo, vou clicar em Iniciar com Jasper. Assim, temos um novo site do Squarespace com um pouco de conteúdo de demonstração. Como você pode ver, parece muito com o meu site ao vivo que eu mostrei anteriormente, meu portfólio de fotografia e videografia, mas apenas com conteúdo de demonstração. Primeiramente, vamos para Configurações, vamos para o Modo Avançado de Desenvolvedor, e vamos ativar o modo de desenvolvedor clicando nesta alternância, clicando em Continuar e, em breve, teremos o modo de desenvolvedor ativado e Teremos todas as nossas informações aqui. Vou abrir meu aplicativo de terminal favorito, que para mim é iTerm, para você em um Mac, provavelmente é Terminal e no Windows, Prompt de Comando. Vou tornar as coisas um pouco mais fáceis para mim desta vez e vou colocar a pasta de modelos na minha área de trabalho. Vou usar a palavra-chave cd seguido de desktop, e agora estou na área de trabalho. O que eu posso fazer é executar git clone, copiar o endereço git aqui, colá-lo aqui, e agora ele irá clonar esse repositório na minha área de trabalho. Vou precisar autenticar aqui. Vou precisar colocar meu nome de usuário. É um pouco difícil de ler quando está passando por cima de uma linha. Lá vamos nós. A senha está no meu aplicativo de gerenciamento de senhas. Vou fechar iTerm agora e vamos abrir aquela pasta recém-criada no VS Code ou qualquer editor de codificação que você gosta de usar. Vamos clicar aqui para Abrir pasta. Na minha área de trabalho você pode ver aqui que há uma pasta template. Vou clicar em abrir e fechar a tela de boas-vindas. Agora, podemos passar por nossa estrutura de modelos e falar um pouco sobre o que está acontecendo aqui. A primeira pasta é uma pasta de ativos. Se você está familiarizado com o desenvolvimento web, você deve saber que os ativos incorporam coisas como CSS, JavaScript, imagens e ícones. Aqui, você pode ver que temos um Sprite SVG que tem todos os ícones diferentes que usamos dentro deste modelo. Podemos colocar em nossos próprios ícones e imagens que são usados dentro do modelo aqui mesmo em ativos. Aqui, dentro de blocos podemos ver um número de blocos. Este modelo realmente usa um monte de blocos sobre vários arquivos de região, e incorpora um monte de diferentes blocos de navegação e também parciais, dos quais ainda não vimos um exemplo da vida real antes. Mas como você pode ver aqui, este carrinho.block claramente não é um elemento de navegação, então isso teria que ser parcial. É bastante claro aqui que isso é para trazer nosso carrinho quando estamos habilitando o comércio eletrônico. Não estamos cobrindo comércio eletrônico nesta aula, mas veremos algumas parciais sendo trazidas em apenas um segundo. Se entrarmos em coleções, temos arquivos conf para nossos principais tipos de coleção, álbum, blog, eventos, produtos, projetos. Nós também temos um arquivo folders.conf para que possamos ter pastas neste modelo e arquivo index.conf para definir um índice e, em seguida, um arquivo.list para o índice para determinar a apresentação desse índice e um arquivo.list para a apresentação de uma lista de projetos. Então, movendo-se, temos uma pasta de scripts. Na pasta de scripts temos site-bundle.js, que é um arquivo JavaScript gigantesco de JavaScript minificado. Eu não espero que você seja capaz de decodificar isso. Se você quiser fazer alterações em JavaScript em um modelo que já tem um arquivo como esse, eu recomendo criar um novo arquivo JavaScript e, em seguida , trazê-lo da maneira que já fizemos isso nesta classe. Cordas, nós nunca vimos antes, mas este é obviamente um lugar para armazenar dados JSON. Não vou gastar tempo com isso. Em estilos temos todos os nossos arquivos menos e CSS. Descendo podemos ver que há apenas um arquivo site.region ou há apenas um arquivo de região e é chamado site.region, e incorpora muitos desses blocos. Como você pode ver aqui, este é o nosso primeiro exemplo no mundo de um parcial. Podemos ver a partir desta sintaxe aqui seguido pelo nome do bloco. Estamos basicamente pegando o código de responsive-nav.block, que está bem aqui, e colocando-o bem aqui. Então, apenas um arquivo de região e isso obviamente significa que temos apenas um layout. Se eu entrar no meu arquivo template.conf, você pode ver que é esse o caso. Temos apenas um layout em nosso objeto layouts e é o layout padrão usando apenas uma região que temos. Se olharmos para navegações, no entanto, isso é um pouco diferente do que tínhamos em nosso modelo. Tivemos apenas uma navegação, enquanto este modelo tem dois. Ele tem uma navegação secundária, e então temos essa matriz de folhas de estilo que lista as folhas de estilo que queremos trazer para o nosso template, incluindo a ordem em que queremos que eles entrem em nosso template. Aqui, temos uma matriz de SystemCollections. Como vimos anteriormente na classe, SystemCollections nos permitem aproveitar esses tipos de coleção sem ter que escrever uma página.list ou.item para eles. Aqui você pode ver um novo array chamado SystemPartials. Isto é como parciais, mas nós não definimos estes nós mesmos. Dentro do Squarespace, temos essa parcial aqui que o Squarespace nos fornece, e é um conjunto de botões de compartilhamento. Então essa é uma pequena visão geral do nosso modelo. O que eu vou fazer em seguida é realmente executar este modelo localmente. Precisamos entrar aqui, rodar o squarespace-server, seguido do endereço do nosso site. Vamos olhar para o nosso site separadamente fora do administrador também. Vou colocar isso em sua própria guia, e então vou me certificar de copiar isso, colocá-lo aqui e, em seguida, executá-lo em nosso comando do servidor do Squarespace, certificando-se de colocar o —auth no final. Eu apertei Enter nisso. Depois de um tempo, ele deve estar ouvindo no port9000. Vamos abrir uma nova guia, executar localhost: 9000, e eu vou pegá-lo em alguns segundos quando isso finalmente terminar de carregar. Aqui, você pode ver nosso site em toda a sua glória, é basicamente apenas um título de site no momento. Ainda não temos nenhuma navegação porque infelizmente, se voltarmos ao nosso admin, se voltarmos ao nosso admin, você pode ver que uma vez que ativamos o modo de desenvolvedor, Squarespace realmente arrancou todo o conteúdo de demonstração, e agora temos que criar nosso próprio conteúdo. Muito triste. Mas bem, em um exemplo da vida real, você não estaria usando conteúdo demo de qualquer maneira. Deixe-me trazer algum conteúdo de demonstração novamente. Vou fazer o mesmo exemplo que em nossos projetos principais, que estava na página Sobre, clique em Editar, e eu vou apenas procurar por uma imagem. Não importa qual é a imagem. Parece que vamos com este lindo monte de árvores ao lado de um lago. Ele só vai processar e redimensionar isso e então vamos clicar em Aplicar. Depois de clicar em Aplicar, podemos rolar para baixo e ver que já há algum conteúdo de espaço reservado lá, então eu vou salvar isso. Como você pode ver, temos nossa primeira página e ela é automaticamente adicionada aqui porque está em nossa navegação principal. Se eu movê-lo para navegação secundária, acredito que ele ainda aparecerá e provavelmente não será óbvia a diferença até que você adicione itens de navegação a ambas as navegações. Agora, eu sei por experiência própria que este modelo já parece bastante bom. Eu realmente não posso pensar em muitas coisas que você gostaria de mudar neste modelo, mas há coisas infinitas que você obviamente poderia fazer com qualquer modelo. Uma das coisas que notei é que não há muito de um rodapé. Uma coisa que eu sei sobre este modelo é que há um elemento de rodapé na parte inferior, mas não está habilitado. Se eu for para Início, se eu for para Design, então eu vou para Estilos do Site, eu posso encontrar todos os meus ajustes para este modelo. Isso foi algo sobre o qual falamos brevemente, mas não criamos muitos ajustes porque não havia realmente muitos estilos CSS dentro do nosso modelo para começar. Mas como você pode ver aqui em site:rodapé, podemos clicar nesta caixa de seleção para mostrar o rodapé do site global. Se não tivermos essa caixa de seleção mostrada, o rodapé do site será definido para exibir nenhum e nós realmente não conseguiremos vê-lo. Vou acertar em “Save” nisso. Voltando ao nosso site ao vivo do Squarespace fora de nosso administrador, eu vou rolar para baixo e, como você pode ver, ainda não há nada em nosso rodapé. Se eu inspecionar a página no entanto, devemos começar a ver que há um elemento rodapé lá. Como você pode ver, rodapé, ID, rodapé e, em seguida, dentro temos um monte de código e no div mais aninhado, há realmente nenhum conteúdo. Então vamos dar uma olhada no nosso código de modelo e ver onde isso surge. Então eu vou para site.region e procurar rodapé com a etiqueta de abertura. Aqui você pode ver onde nosso rodapé é definido. Como você pode ver aqui, temos um campo de bloco aberto do Squarespace, então obviamente não colocamos nenhum dos nossos blocos finais, então não haverá nada aparecendo. Vamos tentar fazer isso agora. Vamos voltar para aqui e você pode ver quando eu passar o mouse sobre esta área de rodapé, você pode ver esta palavra rodapé subir e você pode ver este botão para editar. Agora, posso adicionar blocos ao meu rodapé. Agora que está tudo bem e bom, esse é um recurso já no modelo. Mas o que eu quero fazer nesta lição é realmente fazer uma mudança de código para o modelo porque é isso que esta classe é tudo sobre. É tudo sobre o modo de desenvolvedor. Se você pudesse apenas fazê-lo dentro de seu administrador do Squarespace, então por que você precisaria de código? Bem, neste caso, vamos apenas dizer que queríamos ter uma navegação em nosso rodapé. Eu acho que isso é bastante comum em muitos sites, tendo uma navegação de cabeçalho e um rodapé na navegação. Então, em vez de ter esse campo de bloco aberto, o que eu vou fazer, voltar aqui, vamos descer aqui, remover esse campo de bloco e substituí-lo por uma tag de navegação do Squarespace. Como já temos duas configurações de navegação em nosso modelo Squarespace, como você pode ver essa navegação secundária, eu vou economizar um pouco de tempo aqui e apenas redefinir a navegação secundária em vez de criar um novo rodapé navegação. O que eu quero dizer com re-propósito é que eu vou fazê-lo de modo que a navegação secundária aparece no rodapé em vez de no cabeçalho também. Então, primeiro as coisas, precisamos encontrar esse código no cabeçalho, removê-lo, e movê-lo para aqui. Então, se eu rolar para cima, nosso conteúdo de cabeçalho estará neste arquivo header.block. Vou até nossa pasta de blocos, entrar no arquivo header.block e, como você pode ver aqui, temos nossa tag de navegação do Squarespace para o navegador principal, e logo abaixo, o navegador secundário. Então eu vou pegar a tag mais seu elemento pai que está envolvendo-o com o comando X, ele é copiado para a minha área de transferência. Então eu vou economizar nessa página, voltar para aqui e vamos colocá-lo em nosso rodapé em vez disso. Aperte salvar nisso. Agora, vamos realmente criar um item de navegação secundário, digamos que entre em contato conosco página, basta entrar em contato conosco. Tudo bem, então isso está na navegação secundária agora e como você pode ver, ele apenas fica bem ao lado da navegação principal em nosso site atualmente ao vivo. Mas, é claro, fizemos alterações de código localmente e isso deve estar aparecendo em nossa versão local. Então vamos executar novamente localhost 9.000 e ver o que acontece. Como você pode ver, temos nossa página sobre aqui em nossa navegação principal, mas se rolarmos para baixo, devemos ver um rodapé com navegação para a navegação secundária. Não vemos isso no momento, então vamos para a página sobre. Torna isso um pouco mais óbvio e aqui pode ver o link entre em contato conosco está no fundo. Talvez estivesse lá na página inicial. Parece que a página inicial é um caso especial, mas, no entanto, se estamos na página sobre, você pode ver o link entre em contato conosco está aqui e podemos, claro, trocar estes ao redor, podemos mover entre em contato conosco e cerca de para as posições opostas . Em seguida, quando nós re-executar nossa versão local, você pode ver sobre é agora para baixo em nossa navegação rodapé e contacte-nos é aqui em cima em nossa navegação cabeçalho. Então essa é uma pequena mudança em um modelo mais completo nesta lição. Essencialmente, poderíamos fazer o que quiséssemos a partir de agora. As possibilidades são infinitas e, infelizmente, não posso cobrir todas as mudanças possíveis que você possa imaginar com seu modelo do Squarespace. Eu vim para cima com colocar uma navegação no site ou um rodapé na navegação lá apenas no local. Sei que essa não será necessariamente a mudança que você gostaria de fazer no seu site do Squarespace, mas é claro, fique à vontade para deixar um comentário na caixa de discussão abaixo. Podemos ajudar uns aos outros a criar o que quisermos em nosso modelo do Squarespace. Talvez queiramos mudar o layout geral, talvez queiramos incorporar uma barra lateral, talvez queiramos incorporar algum outro framework JavaScript que executa quase um aplicativo dentro do nosso template. Quase tudo é possível, pelo menos na frente. Definitivamente, pegue o que você aprendeu nesta classe, aplique-o para criar algo personalizado para você ou fazer essas alterações seu modelo do Squarespace e entenda que, se houver algo que você não sabe como fazer ou você pode não juntar os dois, você sempre pode deixar um comentário na caixa de discussão abaixo. Estou interessado em ver o que você deseja alterar no seu modelo do Squarespace e farei o meu melhor para apontá-lo na direção certa. Então sim, espero que isso tenha lhe dado um pouco mais de exposição a outros templates e você pode ver que, independentemente de qual template estamos editando, onde quer que seja o modelo base ou este modelo Jasper, é o mesmo processo e o mesma mecânica que estão trabalhando nos bastidores. Então, obrigado por assistir. Eu vou encerrar a aula no próximo vídeo e você pode começar seu projeto de classe se você ainda não fez isso. Então estou ansioso para vê-lo e desligar, então eu vou vê-lo no próximo vídeo. Pessoal, esqueci-me de mencionar uma coisa antes de passarmos para a próxima aula. Se você queria fazer essas alterações ao vivo em seu site, você iria, naturalmente, executar git add e, em seguida, git commit essas alterações. Então vamos dizer mover para navegação secundária e, em seguida, git push. Então, essa mudança agora vai estar ao vivo em seu site, em vez de apenas executar localmente. Tudo bem pessoal, eu pensei em colocar isso lá porque eu acabei perceber que nós realmente não empurrámos isso para o nosso site ao vivo. Vamos verificar isso agora mesmo. Sim, como você pode ver, essa navegação está agora separada em nosso cabeçalho e rodapé. Então é isso. Vejo você no próximo vídeo. 16. Conclusão: Nesta classe, abordamos todas as principais coisas que você pode fazer dentro de um modelo do Squarespace. Ao abrir o modelo, conseguimos editar todo o front-end, inserir HTML, CSS e JavaScript onde quisermos. Também aprendemos sobre a camada de dados JSON e quais dados podemos trazer do back-end usando JSON-T. Para seus projetos de classe, eu encorajo você a criar seu próprio modelo. Gostaria que houvesse uma barra lateral na página do seu blog? Talvez você queira criar um layout de navegação com várias colunas em seu rodapé. Agora, armado com seu conhecimento dos modelos do Squarespace, a escolha é sua. Certifique-se de postar o que você cria na seção de projeto da classe. Se você precisar de ajuda ou orientação, deixe seus comentários na seção de comentários ou na seção de discussão abaixo. Obrigado, como sempre, por assistir, e espero vê-lo novamente em algumas das minhas outras aulas.