Wagtail para iniciantes

1. Introdução à Wagtail para iniciantes: Olá e bem-vindo ao wag Tail para iniciantes. Meu nome é Caleb dizendo que serei seu instrutor. Serei a voz por trás do vídeo. Também sou membro da equipe do Corps Wag Tail. E neste curso, vamos criar um site completo Wag Tail do zero. Agora, este curso pode ou não ser para você. Nós estaremos cobrindo um monte de coisas diferentes neste curso, mas se você já é um desenvolvedor avançado wag tail, este curso provavelmente não será para você. Mas aqui estão algumas das coisas que vamos aprender. Neste curso, vamos aprender como instalar Wag Tail com dois ambientes virtuais diferentes irá criar diferentes páginas de cauda wag, irá gerenciar modelos irá adicionar dados ao contexto do modelo. Então, se você não sabe o que isso significa, é claro que é definitivamente para você. Vamos adicionar e criar gerenciar vários tipos de campo de fluxo diferentes irá criar um modelo de jangle personalizado e, em seguida, permitir wag tail para modificá-lo. Use-o, habilite-o reutilizar os dados em todo o lugar. Em uma coisa chamada um snippet, vamos criar listagem e páginas de detalhes vai até criar um formulário de contato que pode enviar e-mail. Em seguida, entraremos em coisas como configurações globais de site, gerenciamento de página, página hierarquia e validação de campo de fluxo. E então eu vou dizer-lhe algumas dicas e truques sobre maneiras que você pode aprender Wag Tail mais rápido e mais fácil e em um assunto mais brincalhão vai trabalhar com imagens e diferentes representações de imagem. E então falaremos sobre acelerar seu site com uma forma muito simples de descontar. Uma vez feito tudo isso, vamos implantar este site na Internet. Então, se você acha que se beneficiaria de um curso como este, definitivamente entre e podemos começar imediatamente. 2. O que é Wagtail CMS?: O que é maneira de retal é pythons número um sistema de gerenciamento de conteúdo mais popular. As chances são que você já ouviu falar do WordPress. Espere Till é como o WordPress. Se WordPress foi desenvolvido profissionalmente nesta década, Wait diz extremamente amigável desenvolvedor, e ele piggybacks no framework Django, que é um framework python. E isso significa esperar até ser capaz de fazer tudo o que Jango pode. Ele também pode fazer tudo o que python pode dio. Agora, se você está olhando para criar e lançar um site nos próximos 10 minutos como um site WORDPRESS , este não é o sistema de gerenciamento de conteúdo para você. O garçom foi construído para ajudar as pessoas a gerenciar seus sites corretamente. Isso normalmente significa que há ah, pessoa continentalmente, um designer, um desenvolvedor, talvez algumas outras pessoas com algum tipo de investimento no site. Mas geralmente, os três ingredientes básicos para um site incrível é um desenvolvedor Web, um Web designer e alguma pessoa de entrada de conteúdo, ou alguém que lida com um projeto como um gerente de projeto que poderia até ser apenas seu cliente. A coisa boa sobre Wag Tail é esperar até ser construído com tudo isso em mente. Agora, Wag Tails, um sistema de gerenciamento de conteúdo é realmente bastante desempenho. É rápido, é o que estou dizendo. Ele vem com muitos recursos diferentes que estão habilitados por padrão ou se eles não estão habilitados por padrão. Eles são super fáceis de habilitar. Mas o melhor de tudo, acordar dedos 100% de código aberto. E há uma grande comunidade de desenvolvedores para qualquer tipo de suporte que você precisa. Dito isto, se você estava pensando em usar, espere até considerar este rabo abafado é rápido. Ele é construído a partir de um framework muito grande, seguro e comprovado chamado Django, e tudo isso é construído em cima do python. Python executa tudo, desde sites até inteligência artificial, aprendizado de máquina programas simples que você pode usar todos os dias e programas avançados para empresas que você pode não usar todos os dias. Você só pode usar em grandes empresas. O python literalmente faz tudo, e wag tail é pythons Número um sistema de gerenciamento de conteúdo mais popular 3. Como instalar o Wagtail: antes que possamos usar wayto esperar até que precisa ser instalado, e antes disso você precisa ter python instalado. Então, as primeiras coisas primeiro. Se você ainda não tem Python instalado, vá para python dot org clique em Downloads e baixe a versão do Python que você deseja. Eu vou estar usando Python 3.7. Qualquer versão do Fight on 3.6 ou superior é recomendada, então escolha Python 3.63 point sete ou 3.8. Faça o download, instale-o. E uma vez que você tem python rodando em seu computador, você deve ser capaz de apenas abrir sua linha de comando. Programe seu programa de linha de comando favorito e apenas digite Python Dash V, e você verá a versão do Python. Então eu estou usando Python 3.7 ponto dois. Mais uma vez, você vai querer usar Python 3.6 ou mais recente agora para criar um novo projeto python. Deveríamos colocar isso dentro de um ambiente virtual. Basicamente, esta é uma camada entre seu projeto python e seu computador. Usamos ambientes virtuais muito liberalmente para que você possa ter versões de pacotes diferentes em projetos diferentes sem conflito de código em si mesmo. ou você pode ter um projeto executando Wag Tail 2.4 em outro projeto em execução. Espere até 2,7 e eles nunca entrarão em conflito. Só porque você tem uma versão diferente não significa que eles devem ter problemas, e é isso que um ambiente virtual faz. Permite-nos separar esse problema. Um ambiente virtual pode até mesmo ir uma camada mais profunda. Você pode criar um ambiente virtual usando uma versão diferente do Python. Vamos usar ambientes virtuais padrão. Então, se você estiver usando Python 3.7, seu ambiente virtual provavelmente será python 3.7 também. Mas se quiséssemos, poderíamos dizer, 01 projeto tem que usar Python 3.4, e outro projeto usou Python 3.7. E talvez estejamos em outro projeto. E Deus me livre, ele tem que usar Python para o qual, se você estiver usando python para atualizar para Python três Python para é definitivamente obterir ID. Agora vamos passar para maneiras de iniciar um ambiente virtual para um site wag tail. O 1º 1 é com uma coisa chamada de inveja Venn VvE, e eu acredito que isso vem com versões mais recentes do Python, então você não deve ter que instalar nada. Essa é, na verdade, uma das maneiras mais fáceis de instalar um ambiente virtual. E a segunda maneira é usar um método chamado Pippen. E este é realmente mais fácil. Mas isso requer que você realmente tenha pip e instalado. E antes de fazermos qualquer coisa, você vai querer ter certeza que você tem pip instalado. Pip é gerenciador de pacotes pythons. Quem? Você, Pip Dash V. Você pode ver que estou usando Pip 18.1. Esta é a minha localização de onde o Pip está a ser usado. E está executando Pip no python 3.7. Então isso é bom. Você deve ser capaz de escrever Run, Pip, Dash V e também obter algum tipo de saída como esta. Certo, vamos instalar Wag Tail usando inveja. Então eu já tenho python rodando e você pode vê-lo executando Python 3.7 ponto dois. Então eu vou fazer Python Dash M evento e, em seguida, o nome de qualquer ambiente virtual que eu quero chamar. Vou chamar este Rocket Man Ven. Na verdade, o que eu vou fazer é criar um novo diretório primeiro. Então vamos cancelar que vamos fazer em que dire Rocket Man CD foguete homem e você pode ver meu diretório de trabalho aqui. Então eu estou em usuários Kale, sites italianos, Rocket Man. E agora vou fazer Python Dash M Ven Rocketman Vend. O nome não é muito importante. É apenas o seu ambiente virtual. Então eu vou chamá-lo de Rocket Man Ven e vamos ver se vai criar um novo diretório para mim aqui. Então vamos fazer um LS Dash L. A. A. e podemos ver que há uma aventura completa aqui chamada Rocketman bem ali para entrar nessa coisa. Tudo o que temos que fazer é digitar o foguete fonte, Venn foi ativado, que, se esta for a sua primeira vez, vai parecer muito estranho. Mas, você sabe, depois de um tempo você se acostuma. E eu estou agora dentro deste ambiente virtual e você pode ver isso porque ele diz Rocketman ven entre parênteses à esquerda do meu usuário. Então agora, neste ponto, eu posso fazer Pip V. Nós podemos ver que eu estou usando Pip 18.1. Está vindo do meu ambiente virtual. Essa é a pasta aqui. Esse é o diretório Python 3.7 para que tudo pareça bom. Vamos em frente. Instale wag Tail agora. Então, Pip instale. Espere, Tell. Tudo bem, então a espera foi instalada. Agora posso fazer Pip show Wag Tail. Ele me mostra que eu estou usando Wag Tail versão 2.7 Bem ali. Eu também posso fazer pip freeze para ver todos os meus pacotes que estão instalados nesses ambientes virtuais . Tenho uma sopa linda. Certificar Django Django Árvore barba, html cinco, lib travesseiro solicita seis seu L'Abbe, wag Cauda salgueiro. Todo o tipo de coisas. Então é isso que está insultando meu ambiente virtual. Meu computador não tem acesso a isso a menos que eu esteja dentro desse ambiente virtual. Agora eu sou capaz de dizer que este projeto vai ser executado. Espere até 2,7. E em outro ambiente virtual, eu posso dizer, hey, use wayto 2.4. Use uma versão mais antiga de esperar até usar Wag Tail 1.13 se quiséssemos. E estes nunca entrarão em conflito um com o outro, o que é muito, muito bom. Então agora o que precisamos fazer é esperar até começar meu site e isso vai criar um site chamado meu site. Não quero que seja chamado de minha visão. Vou fazer um site chamado Rocket Man. Então eu vou fazer sagacidade. Eles vão começar o Homem Foguete. Isso vai criar uma nova pasta chamada Rocket Man. Mas eu não quero que ele faça isso. Eu queria criar um novo projeto no site New Wag Tail. No diretório em que estou. Já estou em um diretório chamado Rocket Man. Eu tenho um virtual de aqui e eu quero criar este novo projeto neste diretório. Então vamos em frente e fazer isso. Você pode ver que foi muito rápido. É Dash L. A. E agora temos pasta Home do arquivo Docker. Gerenciado até altos requisitos na pasta txt Rocketman. É aí que as configurações e os arquivos estáticos e os modelos estão indo para ir. Temos um aplicativo de pesquisa e temos nosso ambiente virtual. Então agora podemos fazer pip install, Dash são requisitos dot txt e tudo isso parece que já foi satisfeito até certo ponto, e agora é um servidor corredor. Nós apenas digitar python gerenciado. Eu executo o servidor 0.0 ponto zero Colin 8000 e deve dizer isso você deve ver este imposto vermelho alarmante , dizendo que Você tem 89 migrações un aplicadas e se fôssemos abrir o nosso navegador e cabeça sobre o suporte do host local 8000 nós estamos indo para ver este ar. Isso é realmente uma coisa boa. Isso significa que seu site está funcionando. Cancelei meu servidor lá com controle. Veja, eu não cancelo seu servidor para que ele não funcione mais. E, em seguida, precisamos de banco de dados provisório. Porque se pularmos de volta para onde esse erro está aparecendo no host local 8000, vamos ver ele diz que não há tal tabela wag cauda site núcleo. Uma tabela é um termo de banco de dados. Isso está procurando um banco de dados que seja configurado de uma maneira específica para começar, e ele não está configurado dessa maneira. Então vamos em frente e configurar isso. O desperdício adequado. Vamos fazer Python gerenciado em Pi meu grande, e vamos ver isso vai aplicar todos esses arquivos diferentes e, em seguida, se nós reexecutar seu servidor com Python gerenciado, Eu executar servidor 0000 Colon 8000. Vamos voltar aqui e atualizar sua página. O Wallach. Temos Espere até instalado usando V inveja ou evento. E então para sair do seu ambiente de virtude, você só precisa digitar a palavra “desativar”. Você pode ver isso aqui em baixo. Desculpe, está no fundo. Mas sim, você só gosta da palavra “desativar”. E aquele Rocket Man ven parece desaparecer. Outra maneira de fazer isso é que você pode ter seu site Web toe já configurado. Então você tem Alice Dash L. A. Vamos fingir que o foguete Vin não existe. E queríamos talvez usar o pip end. Tudo bem, então eu só limpo a minha tela e você pode ver em que pasta eu estou. Estou na pasta Rocketman em Last Dash L. A. Você pode ver que eu tenho todo o meu final virtual aqui também, então vamos ignorar isso. Mas temos toda a espera até o projeto lá dentro. Lembrem-se, tudo o que fiz foi agitar a cauda, Rocket Man com o ponto e isso instalou o meu projecto neste directório actual. Agora, se eu quisesse usar virtual e eu poderia fazer Pippen shell ou pip motor stalling apenas em Pippen shell, você pode ver que está criando um novo ambiente virtual usando Python 3.7 ponto quatro. Na verdade, são versões diferentes Python do que eu estou usando, apenas ligeiramente diferente e tudo bem, estamos dentro dele e você pode ver que é o ambiente virtual Rocket Man. Temos algo que parece um pouco diferente aqui antes de dizer Caleb dizendo e meu caminho para qual pasta eu estou. Se eu fizer P W. D. Eu ainda estou na minha pasta Rocket Man e eu acho que você python Dash V Eu estou usando uma versão diferente do python, que não é nem aqui nem lá. Acontece que Pippen decidiu usar a versão mais recente do Python para mim. Eu tenho diferentes ambientes python configurados, então ele fez alguma magia nos bastidores lá, mas para você ele iria instalar a mesma versão de piedoso em que você estava usando atualmente em sua máquina. E então, mais uma vez, uma vez que você está aqui, você pode apenas digitar python gerenciado. Eu dirijo o servidor 0000 8000. Mas como você pode ver, vai lançar um ar para você porque estamos em ambientes virtuais diferentes. O 1º 1 que criamos foi um local que é um ambiente virtual diferente, tecnicamente, e este é um final pip. Outro ambiente virtual faz exatamente a mesma coisa, mas ele simplesmente não está ciente das coisas que já instalamos. Então vamos em frente e fazer Pip instalar Dash. Nossos requisitos dot txt e isso só vai instalar wayto tudo de novo. Tudo bem, está tudo instalado. E agora posso executar meu servidor mais uma vez. Volte para o meu navegador e eu poderia apenas atualizar porque este é apenas a partir da inveja V e ainda funciona perfeitamente. Então é assim que instalamos. Espere até usar um V Envy ou Pippen. Você não tem que usar nenhum desses. Você pode usar ambientes virtuais, se desejar. É realmente chamado de virtual, e você pode usar Docker vagrant. Você pode usar qualquer coisa que você realmente quiser, mas essas são duas maneiras bastante comuns, e eu pensei que nós poderíamos cobri-los já que eles são muito fáceis de configurar. E eles não precisam de nada especial, como docker ou vagabundos ou qualquer grande download. E uma última nota. Só para sair daqui. Não é exatamente o mesmo que digitar a ativação, pelo menos não no meu computador. Eu poderia trabalhar para você. Basta digitar a palavra desativar não faz o trabalho para mim. Então o que eu tenho que fazer é bater no controle. D. Então vou tirar isso. Controle mais D para cancelar isso e aperte o controle D, e ele sai para mim. Portanto, certifique-se de que você tenha um ambiente virtual configurado novamente. Não importa que tipo usou. Certifique-se de que correu o seu pip. Instale nossos requisitos de traço um txt. Certifique-se de que você tem branco dizendo tudo instalado. E uma vez que você ver esta tela de ovo, definitivamente sinta-se livre para passar para a próxima lição. Mas não siga em frente até ver a tela de carregamento do ovo de cauda feliz. 4. Primeiros passos: Tudo bem. Como estamos construindo um site juntos, vamos precisar dos mesmos ativos, do mesmo arquivo. Então eu já tenho um monte de coisas de front-end já feitas. Um monte de CSS e JavaScript já está compilado, e eu vou dar isso para você. Então você não tem que se preocupar em fazer todas as coisas de front-end porque este não é um curso de front-end . Isto é sobre aprender. CMS de Wakil. Não se trata de aprender Boots, Trapper Foundation ou Web pack ou pacote sobre Js ou algo assim. Então você será capaz de baixar este arquivo chamado Rocketman Assets. Faz isso por pedir desculpas se isso é um pouco pequeno lá. Mas temos os recursos do Rocketman Dot Zip e você poderia extrair isso e você vai ter coisas de front-end. Então você obtém todos os itens de front-end, todos os JavaScript, a fonte e CSS e todas as coisas boas lá dentro. Pacote do Jason. Se você quiser fazer a frente e outras coisas, você pode executar a instalação do NPM e você vai apenas instalar tudo. Ou pode ignorar tudo isso e podemos entrar na pasta Rocketman e aqui . Ou pode ignorar tudo isso e podemos entrar na pasta Rocketman e aqui Você vai ver suas imagens CSS e JavaScript. Você quer selecionar todos estes, vá para o seu projeto real Rocketman. Então nós temos, como o inventivo rockem do último projeto até mesmo ter um arquivo pit porque eu usei um ambiente pip também. Então vamos para o Rocket Man. Se o seu projeto não se chama Rocket Man, ele vai ser chamado qualquer que seja o seu projeto. Então, neste diretório aqui, foi aqui que instalei meu aplicativo de cauda. Este é o lugar onde eu criei meu site de espera até o site. Isto pode não ser chamado de Homem Foguete. Isso pode ser chamado de seu site. Isso pode ser chamado de algo completamente diferente, mas será o nome do seu projeto. O que você digitou em sua linha de comando, então você vai encontrar uma pasta chamada Static. E nós já devemos ver CSS e JavaScript lá dentro. Vamos em frente e colar isso aí. Isso é apenas dizer que um nome de pasta CSS já existe neste local. Desejo mesclar? Vai substituir isso. Eu ia substituir tudo porque não preciso mesclar nada. Só preciso sobrescrever essas coisas. Agora, em uma típica espera até o projeto, você não precisa fazer isso. Então tudo isso vai fazer é certificar-se de que estamos executando, Ah, site que parece basicamente exatamente o mesmo age exatamente o mesmo. Agora, novamente, apenas como uma pequena atualização rápida. Suas coisas front-end são três aqui, basicamente qualquer coisa no diretório raiz de seus ativos foguetes homem que estavam no arquivo zip pode ir direto para o seu projeto de rota também. Então eu vou subir alguns diretórios aqui onde eu tenho o meu arquivo de pizza de ponto gerenciado e eu vou apenas colá-los lá dentro. E você também vai notar agora o que eu acabei de fazer lá foi que eu mostrei todos os arquivos escondidos. Então, se você estiver em um Mac, você vai querer pressionar o comando shift e, em seguida, ponto, e isso mostrará todos os seus arquivos de ponto ocultos. Nós vamos querer copiar estes também. Este é apenas um arquivo Babel RC, e um editor básico pode corrigir isso. Estamos usando o mesmo tipo de inventar, então seus códigos vão parecer meu código serão ignorados para que você não confirme acidentalmente arquivos que não são realmente úteis para o seu repo get e a versão do nó que estou usando. Então, de novo, vou jogar isso na rota do projeto. Aqui. A rota é onde gerenciado até altas vidas e, em seguida, imagens CSS e JavaScript tudo ir para seu diretório estático aqui, e você deve estar substituindo pastas CSS e JavaScript com o novo material que está no arquivo zip dot novamente em um Projeto Waggle. Você não tem que fazer isso porque você terá seu próprio design com o qual você está trabalhando. Mas isso é só para ter certeza que você e eu estamos em sincronia ao mesmo tempo. Então, uma vez que você terminar de fazer isso, ou se você decidiu ignorar completamente isso e trabalhar com seu próprio design, isso é legal, também. Vamos para a próxima lição 5. Como entrar no Admin: Tudo bem. Neste ponto, você deve ter uma maneira base para o site em funcionamento, mas você pode não ser capaz de entrar na área de administração. Então, se você não tem seu site funcionando, vamos para o nosso lado virtual. O que você estiver usando. Talvez seja Docker, virtude vagabunda e Ven Pippen realmente não importa. Você só precisa entrar em seu ambiente virtual. Então eu vou entrar no meu usando um evento. fornecedor Rocket Man é o que é chamado de activação. Eu ia buscar aquele arquivo e você pode ver que agora estou dentro dele. E agora para executar o meu servidor vai fazer Python gerenciado. Eu executo o servidor e uma maneira mais rápida é apenas zero. Colon 8000 e isso irá executar o site na porta 8000. Podemos vê-lo aqui se eu atualizar esta página. Porto 8000 e está carregando narizes perfeitamente finos. O sistema de gerenciamento de conteúdo. Queremos ser capazes de entrar nas áreas de administração. Vamos entrar na interface de administração e como fazemos login? É em homens? Admissão? É em homens Password. Nós não sabemos o que é isso e por padrão, Wag Tail e Django e Python. Eles são todos muito baseados em segurança, então você não tem um usuário de verdade. Não há como você entrar nisso ainda. Precisamos criar nosso próprio superusuário. Então vamos voltar para o nosso terminal. Cancele nosso servidor com controle, veja, e eu vou limpar isso. Então é de volta ao topo. E vamos digitar Python gerenciado. Eu crio Super User All uma palavra que eu ia me pedir para um nome de usuário. Não quero ser o Caleb a ligar. Só quero ser o Caleb. Meu endereço de e-mail será Caleb da Leared Wag Tail Dot com. A senha vai ser o que eu quiser que minha senha seja. Ele vai me pedir para entrar duas vezes porque é um bom treino. Vamos voltar a executar o nosso servidor mais uma vez. Então o que isso fez foi basicamente criar e admitir conta para nós? Então, agora nós o enviamos. Tenho o nome de usuário do Caleb, e minha senha é qualquer que seja minha senha. E Wallah, estou dentro do meu caminho. Diga aos homens, e se você perder o link para o seu administrador. É sempre o administrador da barra do seu site. Esse é o padrão. Você sempre pode sobrescrever isso um pouco mais tarde. E se você está apenas instalando o seu primeiro site, você pode simplesmente clicar na interface de administração e ele irá levá-lo lá, e é assim que você criar uma maneira, Diga administrador Super usuário. 6. Passo de passo de Wagtail: Vamos dar uma rápida caminhada através do Wag Tail CMS tinha sido. Agora, isso é ossos muito nuos. Acabei de começar um novo projeto, então não há literalmente nada que não saia da caixa agora. Isso é tudo o que vem padrão com uma nova maneira. Diga site agora fora da caixa, Espere até que vem com muitos componentes diferentes, mas a maioria pode realmente ser dividido em cerca de cinco peças, eu suponho. Eso você tem páginas que estão aqui, você tem imagens, você tem documentos, você tem configurações e então você tem usuários. Mas para simplificar isso, gosto de dizer que você tem páginas, imagens e usuários. Esses são os três grandes. Então esta é a sua interface de usuário. Isso vai dizer quantas páginas, quantas imagens, quantos documentos você tem você pode explorar através de suas páginas E aqui se você tiver outras páginas, haverá uma pequena seta aqui. Você pode clicar em que e cria um pequeno menu agradável para você, ou você apenas clicar como eu quero editar a página inicial, Clique no botão de edição e isso me permitirá editar a página inicial. Há um campo de título aqui. Então isso realmente só tem um campo, porque novamente, esta é uma base. Espere até o projeto. Ah, podemos excluir a página em Publish it Publishing enviada para moderação porque há moderação disponível com Wag Tail para que você possa ter um grupo de editores que não podem publicar coisas sem aprovação. E também podemos visualizar nossa página a qualquer momento. Essa é a nossa guia de conteúdo. Na nossa torneira promocional. Temos um projétil. Então, se você queria ser o seu site dot com barra sobre traço me ou seu site dot com barra de contato para uma página de contato que vai ser a sua lesma. Aqui, você pode ter um título personalizado que substitui o título da página padrão. Algumas são exibidas nas opções do menu, o que às vezes ajuda você a criar uma barra de navegação. Dependendo de como o desenvolvedor o configurou, você tem uma descrição de pesquisa. Então esta é a descrição de pesquisa que o Google costumava usar nos motores de busca usados para usar e ainda é uma boa idéia para ter uma descrição de pesquisa. Pode não estar disponível. Texto na sua página que pode não estar visível, quero dizer, mas pode estar na parte principal da sua página. Em seguida, temos configurações. Estas são configurações de publicação agendada uma data para entrar em vigor em uma data para expirar. Para isso, requer um trabalho Cron. Se você não é um desenvolvedor, um trabalho Cron é basicamente uma tarefa que executa cada X número de minutos, horas ou dias, e ele irá verificar automaticamente para ver se você tem uma página que precisa ir ao vivo ou página. Precisa expirar. Isso é ótimo para promoção. Então, se você tem uma página e você está tentando fazer, ah, Black Friday negócio e é literalmente apenas Black Friday, você poderia dizer Black Friday para um 2019 foi sexta-feira, 29 de novembro e nós temos no momento e então a expiração data vai ser exatamente a mesma hora, exato mesmo dia, mas às 11 horas da noite, Você,no Você, entanto, precisa que seja configurado em seu servidor. Esse trabalho Cron precisa ser configurado por alguém que tenha acesso ao servidor. Isto não é automático. Então temos um botão de visão ao vivo aqui em cima. Isto é o que nossa página atualmente parece novamente novo site, então não há nada lá. Temos diferentes modos de privacidade. Então esta página é pública para todos? É privado, mas acessível apenas a pessoas que estão logadas? Podemos dizer sim a isso ou privado, mas acessível a pessoas com uma senha a seguir. E então você pode definir uma senha para ou é uma senha privada e acessível aos usuários dentro de grupos específicos. Bem, só temos os dois grupos aqui. Temos moderadores e editores. Poderíamos criar outros grupos também e dizer que apenas certas pessoas podem ver esta página. Próximo. Vamos rapidamente dar uma olhada na pesquisa. Só estou em busca de casa. Sim, quero deixar a página. Vai encontrar as páginas para mim. Ele vai encontrar imagens, documentos, usuários, todas as outras coisas que ele pode tipo de procurar. Ele realmente só encontrou uma coisa aqui, encontrou uma home page chamada home, e aqui podemos editar a página que podemos ver viva. Podemos adicionar uma página filho. Nós só temos um tipo de página disponível, então ele vai nos pedir para criar uma home page sob homepage. Isso é um pouco estranho, então não vamos lidar muito com isso. Mas se você tiver páginas. E talvez tenha criado uma página no lugar errado. Você pode movê-los. Você pode copiá-los, excluí-los sem publicação. Você pode até mesmo olhar para revisões de página nesta página é e ter quaisquer revisões. Mas se eu alterei qualquer texto na página, se eu alterar qualquer conteúdo, ele aparecerá na minha seção de revisão. Aqui e novamente, tudo isso vem padrão com cauda branca. Em seguida, temos imagens aqui, então vamos em frente e adicionar uma imagem. Vou enviar uma imagem chamada Rocket Launch One. Eu acredito que isso é cortesia do Space X. Upload isso e feito exatamente assim. Temos uma imagem aqui. Conseguimos um “você “, Earl, para podermos copiar o ritmo da localização do link. Eu não fiz um novo em uma nova guia, e você pode ver que esta imagem é bem grande, na verdade, mas lá está. Então, temos a hospedagem de imagens incorporada automaticamente. Você pode alterar a imagem. Você pode adicionar tags, portanto, se você quiser pesquisá-lo, você pode adicionar tags. Você pode mudar o título dele e esperar até que venha com esta idéia muito legal de um ponto focal . O ponto focal é, você sabe, quando você carrega uma imagem de um monte de pessoas e, como o rosto de alguém é cortado e você não quer que isso aconteça bem no Wag Tail e você pode selecionar a parte da imagem. Isso é mais importante então, sempre que Waittil tentar cortar a imagem para qualquer página em que você está trabalhando, ele vai chegar o mais próximo possível desta seção. Estás a dizer que esta é a parte importante. Mova a imagem para cá. Então, quando ele cultiva, ele fica um pouco mais perto. É muito, muito bom. Vá em frente e salve essa imagem, e isso é realmente tudo o que há para ela. Acho que também podemos apagar a imagem ou remover a área focal, se quisermos. Vamos passar para os documentos. Documentos são basicamente a mesma coisa que imagens, então eu vou adicionar um documento aqui. Recursos Rocket Man ponto zip não tem uma pré-visualização porque ele zip arquivo. Vamos continuar e atualizar esse clique em documentos novamente, e podemos ver que temos um documento aqui chamado Rocketman Assets dot zip. Eu posso baixá-lo diretamente, ou eu posso clicar aqui. Agarre este link. Então este é um link Copiar local do link. Vamos colar isso aqui, e com certeza, ele tenta baixá-lo novamente. Então agora temos hospedagem de arquivos. Uma coisa a ter em mente é que estes não são privados, então não hospede números de cartão de crédito ou qualquer coisa assim aqui. Isso é definitivamente uma má prática. Em seguida, temos configurações, configurações internas. Por padrão. Temos usuários, sites de grupo, coleções e redirecionamentos. Tenho aqui um utilizador chamado Caleb. Recebi o nome do endereço de e-mail, apelido e senha. Eu posso mudar minha senha lá, e eu tenho papéis. Moderadores e editores. Não vou mudar nada disso. Eu sou um super usuário. Eu consertei os homens. Eu tenho mais direitos do que ambos, então eu não preciso mudar nenhum daqueles que vão voltar para os usuários. Você sempre pode adicionar um novo usuário. E aqui você pode dizer se eles são um administrador ou não um administrador ou se eles não são um administrador, eles devem ser apenas parte de um determinado grupo? Os grupos vêm com certas permissões, e há regras de senha, todos os tipos de coisas boas. Certo, vamos falar sobre grupos. Temos dois grupos aqui. Editores e moderadores. Vamos dar uma olhada nos editores. O que um editor pode acessar? A maneira como Telemann esfriar, mas não pode adicionar redirecionamentos ou sites ou coleções grupos ou usuários não podem mudar? Qualquer um deles não pode apagar nenhum deles. Eles são permissões de página, eles podem adicionar. Eles podem editar, mas não podem publicar o não pode excluir em massa e não podem bloquear páginas. Coleções são basicamente como pastas para suas imagens, então você pode colocar todas as suas imagens ou documentos dentro de alguma forma de coleção. E então você pode adicionar permissões em torno disso também. As imagens também têm coleções. Só temos uma coleção chamada Route, mas a mesma coisa se aplica lá. Tudo bem. Em seguida, temos sites para que você possa ter vários sites hospedados em uma única instância de espera até Agora nós só temos o chamado porta host local é 80. Vou mudar para 8000 porque é isso que meu site está rodando. Então, se eu fizer este host local Port 8000 que é o meu site vem em mudança. Isso é para 8000 só para igualar. Ah, nome do site eu vou mudar para homens de foguetes só porque é assim que este site vai ser chamado, e você pode até mudar a página inicial para ele. Então, vamos escolher uma página diferente. Nós poderíamos Nós não podemos porque nós só temos uma página porque esta é uma instalação base de Espere até que se tivéssemos outra página, talvez um tipo diferente de home page. Poderíamos trocar isso completamente. E este é o site padrão? Enquanto só temos um site. Então, sim, vamos dizer que esse é o site padrão. Em seguida, temos coleções novamente. Coleções, ar, realmente apenas pastas onde você pode colocar imagens e documentos lá. E então você poderia colocar permissões em torno disso para que determinados grupos de usuários tenham certo acesso a determinadas coleções. Eu não vou adicionar uma coleção porque não é tão útil para mim neste momento em particular . Ah, cumes e passar para redireciona um leitor X A muito bom. Você pode dizer que qualquer um que está alinhando, Digamos que o seu site dot com esconder minha oferta 2019. Então talvez isto seja algum tipo de página de destino, e eu quero redirecioná-los para uma página de destino diferente, um serviço diferente, talvez um site completamente diferente. Eu poderia redirecionar todos para Google Dot com Google Dot com. Então, qualquer um que vá para a minha oferta 2019 na verdade, isso não vai estar lá. Qualquer um que vai para o meu site dot com barra minha oferta Dash 2019 traço vai redirecionado aqui, e você pode configurar todos esses diferentes redirecionamentos, se quiser. Você pode até escolher uma página internamente dentro de wayto para redirecionar se você quiser. E, por último, temos as configurações da conta. Você pode definir uma foto de perfil. Você pode alterar seu e-mail, alterar suas preferências de notificação de senha. Há preferências de idioma. Se estes estão todos habilitados, que eles são por padrão, você pode definir o seu fuso horário atual Micro e fuso horário não é sequer definido, então eu provavelmente quero ir e definir que um pouco mais tarde e você pode até mesmo mudar seu nome. Então estas são todas as coisas base que vêm com Espere até a direita fora da caixa, e cada componente é extensível até certo ponto. Então, sim, só temos uma página agora, mas podemos adicionar centenas de páginas mais tarde, se quisermos. Claro, só temos uma imagem. Poderíamos adicionar mais se você tiver uma página de contato. Se um desenvolvedor fez uma página de contato para você, você verá envios de formulários aqui, bem como no seu menu. Se você tiver trechos habilitados para partes de dados reutilizáveis, verá uma pequena seção aqui no seu menu chamada trechos, e poderá ver outras coisas personalizadas que os desenvolvedores colocarão. Há osso, mas fora da caixa. Isso é o que você ganha com o meu rabo. 7. Editando a página de casa: Tudo bem, vamos em frente e editar nossa página inicial. É realmente trabalhar com algum código aqui, então eu vou entrar no meu ambiente virtual. Estou a usar fornecedores, por isso vou buscar o meu foguete que já foi activado e estou dentro dele. Eu só quero rodar este site. Então eu vou executar Python gerenciado até servidor de alta execução na porta 8000 e podemos ver aqui se eu atualizar, ele funciona. Mas se realmente formos para a página inicial e tentarmos editar algo aqui ou mesmo se tentarmos ver a página da vida , ainda não fizemos nada, então vamos entrar nessa. Então nós vamos adicionar um número de campos aqui porque agora nós só temos o campo título em nosso conteúdo principal. Temos campos de promoção e campo de configurações, e isso é ótimo. Espere até nos dar todas as opções do, mas queremos adicionar mais. Queremos que a página inicial tenha um pouco mais de tempero. Então vamos adicionar como o banner da página inicial. Tudo bem, eu acabei de abrir meu editor e eu abri o projeto, então eu tenho todos os meus arquivos aqui você pode vê-los no lado esquerdo. Só estou usando o código V. By the way, você pode usar qualquer editor. Realmente não importa. Tenho aqui as minhas coisas de front-end. Eu tenho um aplicativo de casa. Eu tenho mídia. Aqui é onde minhas imagens, documentos e coisas que vamos ser enviados. Uh, não o Homem Foguete. Este é o lugar onde minha configuração, arquivos estáticos e templos estavam indo estar. Vamos fazer um monte de trabalho lá dentro. Nós temos o ambiente virtual, que nós realmente não precisamos em tudo. Não é para fins de edição, e temos um aplicativo de pesquisa que não vamos usar. Então, a primeira coisa que queremos fazer é abrir para casa e ir até os modelos Dot Pie, e nós vamos ver aqui. Na verdade, não há nada aqui. E se olharmos para a torta de pontos base e rolamos para baixo, vemos APS instalado, temos casa e pesquisa e um monte de wayto um cluster tag e um monte de APs jangle todos instalados. Isso vem por padrão com seu site wag tail. Os dois que queremos prestar atenção para ouvir a nossa casa em busca e, na verdade, mais para que queremos prestar atenção a uma casa. Então esta casa H o M combina com este aplicativo bem aqui. E se quiséssemos nos livrar da página inicial, poderíamos apenas comentar ou excluí-la completamente. Salve reiniciar nosso servidor e não teremos mais acesso a todo o mapa. Vamos nos meter mais nisto à medida que passarmos por este curso. Mas se você adicionou outro aplicativo aqui, como serviços, você acabou de adicionar lá assim vamos falar mais sobre este pouco mais tarde e e como iniciar um aplicativo adequado Django e leg tail em nossos modelos home slash dot pie, temos apenas uma única classe chamada home page porque a página inicial do APP está habilitada. Wag Tail e Django dizem, Oh, esta é uma classe é uma página. Ok, bem, eu automaticamente vou provisionar um pouco de espaço em nosso banco de dados e estruturar corretamente para sua página inicial e passar apenas significa que não está fazendo nada. Então o que queremos fazer agora é adicionar alguns campos que queremos adicionar talvez algum texto de lead . Ah, texto de botão e talvez alguma imagem de fundo para um banner. Então vamos fazer isso um de cada vez. Vamos fazer o texto principal e isso vai ser apenas um campo de caracteres muito simples, um campo de caracteres. Então isso está entrando em Jangled. E então isso não é cauda abatida. Esta é Jenkin. Podemos dizer porque isso está vindo de modelos dot Podemos ver se olharmos para as importações aqui está vindo de modelos de importação django dot db. Então vamos criar um novo campo de caracteres ou um campo de carro. O código V é bom o suficiente para me mostrar todas as opções diferentes aqui. O primeiro 1 que realmente queremos que o comprimento máximo eram em vez de comprimento máximo de cerca de 100 40 caracteres apenas para este texto principal, vamos dizer que pode, de fato, estar em branco. E talvez, vamos adicionar alguma ajuda Text help impostos iguais a um texto de subtítulo sob o título do banner. Algo assim. Podemos sempre ajustar isso mais tarde também, e eu vou limpar isso um pouco. Coloque estes em linhas separadas para que fique um pouco mais agradável e apenas assim. Temos um novo campo. Temos que fazer algumas migrações e outras coisas, sobre as quais falarei em um minuto. Vamos em frente e adicionar nosso próximo campo. Vamos adicionar um link para outra página de cauda de wag. Agora só temos uma página de cauda, então isso não vai ser super aplicável agora, mas vamos ver como isso funciona. Então vamos criar um botão. E para isso, vamos usar modelos dot chave estrangeira. Vamos selecionar uma chave estrangeira do núcleo da cauda WEG. Página de ponto em branco é igual a true. Vamos dizer que é opcional. Não é igual a verdadeiro, por isso não pode ter absolutamente nada no banco de dados. Vamos dar a isso um nome relacionado de apenas mais basicamente abandonou o nome relacionado. Na maior parte. O texto de ajuda vai ser Viva isso. Selecione uma página opcional para vincular a isso vai ser para R C t um botão. Nós realmente não sabemos o que isso parece agora, mas eu vou mostrar-lhe em um pouco e nós precisamos de mais um aqui apenas para satisfazer o Django , porque novamente nós ainda estamos trabalhando com o Django aqui no delete. O que fazemos quando o que quer que a Paige esteja ligada for apagado? O que vamos dizer, modelos ponto definir tudo e vamos criar algum texto de botão novamente. Isso só vai ser campo de char regular, então modelos de ponto cadeira campo dar a este um comprimento máximo de 50 comprimento para que o texto do botão não pode ser muito longo. Vamos dar algum texto padrão, embora Ler mais possa estar em branco. Nós vamos dizer não. Isso sempre tem que ser definido, mesmo que não haja nenhum botão selecionado iria dizer que este texto do botão tem que ser selecionado. Não tem que ser preenchido e vamos adicionar algum texto de botão de ajuda e você vai ver como tudo isso parece uma vez que chegar um pouco mais longe. Agora, por último, queremos adicionar uma imagem aqui. Vamos fazer o fundo do banner. A imagem é igual a modelos para fora. É outra chave estrangeira, mas desta vez nós vamos estar ligando para caudas abanadas. Imagens ponto imagem. Esta é a imagem padrão deles, portanto, se você estiver usando um modelo de imagem personalizado, você usará um valor diferente aqui. Mas não estamos. Nós vamos apenas usar imagens padrão wag tails, então nós vamos nos vincular a esta. Em branco é igual a false, mas não é igual a true. O que significa que no banco de dados este campo, a coluna chamada Imagem de Fundo do Banner tem permissão para estar vazia e em branco significa que Quando você vai salvar a página, ele realmente tem que ter um valor lá. Então, no banco de dados, isso não pode ter nada. Mas quando você preenche o formulário, ele tem que ter algo. Essa é a diferença lá nome relacionado é igual a. Além disso, o primo ia jogar isso fora. Ajuda texto a imagem de fundo Boehner, eu suponho, é o que podemos dizer e em excluir. O que vamos fazer? Digamos que o modelo é ponto definido No. Agora vamos em frente e salvar isso. Abra o nosso terminal. Foi reiniciado. Tudo parece OK, mas quando abrirmos seu navegador, veremos quando atualizamos nossa página. Diz que não existe tal coluna. A casa é a APP. Home page é o nome da classe. texto do lead é o nome da coluna em um banco de dados. Então, como fazemos esse banco de dados existente? Bem, nós não vamos fazer nada com o banco de dados em particular, nós vamos deixar Django lidar com isso para nós. E isso é muito, muito fácil. Tudo o que temos que fazer é claro. Deixar sair. Vamos fazer python gerenciar dot pie fazer migrações. E o que isso está indo para dio é realmente apenas criar um conjunto de instruções para como queremos reestruturar nosso banco de dados ou como queremos alterar o banco de dados. Então fez uma nova migração para casa chamada 0003 Auto blah, blah, blah, blah bando números lá dentro. E se abrirmos nosso editor entrar em nosso arquivo de migrações, veremos o 0003 automático, blá, blá, blá. E como um monte de instruções aqui, você não precisa saber todas essas coisas. Django lida com tudo isso para você, o que é muito, muito bom. Mas neste momento, tudo o que temos é um conjunto de instruções. Não dissemos ao nosso banco de dados para usar este conjunto de instruções. Então, nosso próximo passo será gerenciar python dot pie, meu ótimo, E o que isso faz é levar toda a migração não rastreada, então ele vai armazenar quais migrações já foram aplicadas no banco de dados. Isso vai dizer, 00003 Auto no aplicativo doméstico não foi executado. Vamos executar isso. Vamos pegar todas as instruções que vemos aqui e isso é alterar o banco de dados. E então vamos fazer isso. Ele tinha entrada. As migrações foram executadas. Certo, e agora podemos reexecutar nosso serviço. Vamos fazer Python gerenciado. Eu executo o servidor 0 8000 Abra um navegador novamente, Dê-nos uma atualização e nossa página carrega. Mas temos um problema. Queríamos ter texto principal, ah, botão, botão, onde poderíamos selecionar outra página de cauda de wag, algum texto de botão e uma imagem de fundo. E então, se isso está aparecendo, não está em promoção. Não está em configurações. Não está no conteúdo agora. Por que é isso? Bem, há realmente uma boa razão para isso é só porque você definiu campos em seu modelo. Só porque você deseja alterar seu banco de dados e armazenar alguns dados não significa necessariamente que você sempre quer que esses dados ou esse campo sejam expostos. Você pode querer alguns dados aqui que só podem ser alterados programaticamente, e assim porque nenhum aplicativo Web na face deste planeta. Posso dizer-te o que estás a planear para o Lee. Sabes o que estás a planear. Isso não vai expor nenhum desses campos para nós. Então agora precisamos expor esses campos e em wag Cauda. Isto é muito, muito fácil. Então, em cada página e eu vou rolar até aqui, você pode ver que eu ainda estou na página inicial. Em cada página temos painéis de conteúdo é igual a painéis de conteúdo de ponto de página. Esta é uma classe de página fornecida por Wag Tail Isso nos dá o nosso título e quaisquer padrões weg esperar até que quer nos dar. E estes são os painéis de conteúdo. E então vamos apenas dizer, dê-nos os painéis de conteúdo existentes. Além disso, vamos acrescentar uma lista a isto. Agora temos diferentes tipos de painéis aqui, então temos que nos certificar de que usamos o caminho certo. Se usarmos um painel de campo que é apenas para texto normal. Temos texto principal aqui, e isso é apenas um painel de texto normal. Espere até descobrir que é um campo de caracteres e deve ser apenas uma linha de texto. É uma entrada de texto html regular o próximo para um botão vai ser um painel de seleção e teremos que importá-los em apenas um segundo. E isso é tudo o que nós dilatamos. E então este texto principal corresponde a este texto principal aqui em cima e este botão corresponde a este botão ali mesmo. Então agora precisamos adicionar. Mas em texto e imagem de fundo do banner, vamos em frente e adicionar mais um painel de campo. texto do botão do painel de campo é o que foi chamado. E então vamos adicionar uma última imagem imagem de fundo do banner do painel seletor de imagens. Agora, se economizarmos menos e verificarmos o nosso terminal vai reclamar. Sim, diz que painéis de campo não definidos. Se você alguma vez ver isso, é apenas dizer que basicamente o que você está procurando não foi não foi importado para a sua página ainda ou para o seu arquivo python. Vamos ir em frente e importar estes da espera. Diga aos manipuladores de edição de ponto admin que esses painéis chamados manipuladores de edição Vamos importar o painel de campo e o código V s é bom o suficiente para tentar auto-sentir isso para mim painel de campo e painel seletor de página e o painel de seleção de imagem realmente não vêm de Edmund em manipuladores. Ele vem de wayto dot imagens dot editar manipuladores Importar imagem painel Seletor dizer que parece que tudo aqui está funcionando nominalmente, que é uma grande notícia. Se, por qualquer motivo, seu servidor morreu, você só precisa executá-lo novamente. Apenas corra. Python conseguiu. Eu dirijo o servidor 0000 8000. Vamos voltar aqui e atualizar sua página e olhar para isso. Temos texto do botão de texto chumbo botão e uma imagem. Isto é muito bom. Então vamos mudar nosso título de casa para foguete e manutenção porque é sobre isso que este site vai ser. Mantendo foguetes. Deixe-nos lidar com o trabalho sujo. Concentra-te em lançar-te para o espaço. Algo assim. Um botão. Isto é muito bom. Isso nos dá o que é chamado de painel seletor de páginas. Então, se tivéssemos mais páginas, poderíamos ir e explorar mais. Veremos mais disso no futuro. Nós realmente só temos a página inicial agora, então na verdade nós não precisamos disso em tudo. Portanto, é claro que escolha o texto do botão. Nós dissemos que ele sempre tem que estar lá, eo padrão é ler mais e uma imagem de fundo banner. Vou fazer upload de uma nova imagem aqui. Hit, upload Cool e vamos em frente e publicar esta página. Agora, quando vemos a vida ainda nada aconteceu novamente, Wade dizer não é um sistema de gerenciamento de conteúdo do site de 10 minutos. Isto é para sites personalizados, e neste ponto novamente, espere até que o Django e o Python não saibam o que você está procurando. Não há tema pré-desafiante aqui. Isto é apenas o que esperar até vir junto. Então agora precisamos ir e editar nossa página inicial em si. Então é abrir o nosso editor. Vou abrir o código V. Vamos fechar esse arquivo. Nós não precisamos dele. E se olharmos em nosso aplicativo doméstico e, em seguida, em nosso diretório templates lá, nós temos uma pasta pessoal que tem uma página inicial e uma página de boas-vindas. A página inicial é a que queremos editar aqui. Está se estendendo de baseado em html. Falaremos mais sobre baseado em HTML. Acredito que na próxima lição vai carregar estática. Ele tem uma classe de corpo aqui, alguns CSS extra se quisermos isso e onde queremos colocar nosso conteúdo principal. Então, apenas como um exemplo, vamos fazer este Hone One Hello World e tudo o que estamos fazendo é substituir este conteúdo porque antes do que tínhamos Waas estava incluindo casa. Welcome Page incluía todas essas coisas aqui. Nós não queremos isso. Então, vamos apenas dizer “Ei, sobrescreva, salve.” A Srta. Refresher Page diz olá, mundo. Então agora estamos realmente editando nosso modelo de página inicial neste momento, o que é uma ótima notícia. Vamos nos livrar de outras coisas aqui. Nós não precisamos de CSS extra em tudo ou classe corporal. Podemos decidir apresentar isso, um pouco mais tarde. Reintroduzir isso um pouco mais tarde. Mas, por enquanto, não precisamos disso. Nós só precisamos mudar a seção de conteúdo principal e como não estamos usando a tag estática , podemos nos livrar disso. Vamos ver um pouco mais sobre estática um pouco mais na estrada também. Então vamos ver como podemos obter o título da página. Então nós queremos mudar Olá mundo para dizer, manutenção de foguetes. Esse é o título desta página de manutenção de foguetes. Então nós poderíamos apenas fazer colchete Curly, título de ponto de página colchete encaracolado. E se atualizarmos nossa página aqui, diz manutenção de foguetes, isso é muito bom. Vamos voltar e ver como alguns de nosso texto principal se parecem, então a página dot lead tax. Agora, se você está se perguntando, Caleb, onde você está recebendo o texto principal? De onde está conseguindo o título? Vamos voltar para as nossas modelos. O texto principal é definido aqui, portanto, como estamos em um modelo de página, você pode usar ponto de página Esse é o objeto de página e, em seguida, você pode usar o texto sublinhado de lead. Esse é o nosso campo personalizado aqui. Texto principal. E se você está se perguntando, OK, amor ok, sim, isso vai fazer sentido. Mas de onde você conseguiu o título? Essa é uma ótima pergunta. Wait Till vem com um monte de guloseimas já embutidas. Então, se eu clicar com o botão direito aqui, vá para a definição. Nem todo editor tem esse recurso, a propósito, mas este tem, o que é muito bom. Você sempre pode verificar o código-fonte é bem, obter hub dot com barra wag cauda barra wag cauda cauda. Esta é a página que estamos usando, e ela já vem com um campo de título. Tem um campo de carga regular lá com um nome detalhado. Texto de ajuda de comprimento máximo. Tem um rascunho de projétil. Tem um monte de outras coisas aqui, mas temos o título porque estamos usando essa classe em nossa classe python. Então, no mundo de Python, podemos herdar de outras classes e obter todas as guloseimas que vão nos dar. Neste caso, estamos herdando classe de página waggles, e ele vem com Título, que é praticamente a mesma coisa exatamente como nós dizendo Título é igual a campo char , yada, yada, yada todos os campos lá e, em seguida, acessá-lo em seu modelo com o título do ponto da página. Muito bem, vamos dizer isto e ver o que o nosso texto principal diz. Olhe para isso. Temos que apagar texto lá dentro. É pequeno e não é estilizado tudo, mas agora está puxando em nossos campos personalizados. Tudo bem, então o que eu vou fazer aqui é excluir isso e eu vou colocá-lo em uma pasta na frente e tal, e então nós vamos para a camada na espera até a parte do modelo. Tudo bem, então eu só colado em algumas coisas de front-end lá. Ainda não fiz nada com o trabalho da cauda que fizemos. Então, se eu visualizar isso sim, não parece ótimo. Vamos adicionar o estilo e outras coisas mais tarde. Acho que está na próxima lição. Vamos adicionar todo o estilo, então isso parece muito bom, mas por enquanto queremos trabalhar com alguma dessa lógica. Então, como o título da nossa página aqui em cima deve ser qualquer que seja o título da nossa página realmente para que possamos usar chaves para o título do bigode Syntex. Temos o texto principal aqui. Podemos fazer o texto do lead do ponto da página. Nós temos texto de botão aqui nós podemos fazer, fazer fazer fazer fazer fazer página ponto texto sublinhado botão e você por se perguntar de onde eu peguei esse de que vem, mas no texto Nós também mentimos texto aqui, que é permitido estar em branco, o que significa que isso é opcional, então precisamos ter certeza de que isso é opcional. Agora podemos fazer algumas declarações if aqui se página dot lead text e se e isso é apenas template regular do Django, você sabe, você sabe, se seu dedo novo para o Django e wag Tail, isso é basicamente como nós adicionamos lógica em nossa página. Usamos um colchete, seguido por um sinal de porcentagem, e para o final de nossa lógica, usamos sinal de porcentagem e, em seguida, colchete. E se quisermos apenas exibir informações, usaremos chaves juntas. Então vamos em frente. Pré-visualize isso. Podemos vê-lo manutenção de foguetes. Deixe-nos lidar com o trabalho sujo. Precisamos verificar se esse botão realmente existe. Defina aquela garota e talvez uma imagem de fundo. Então, antes mesmo de dizer que há um botão, vamos em frente e fazer se página ponto botão e novamente, eu só tenho que de fazer a fazer ou chave estrangeira. E eu vou inventar isso porque fica melhor assim. E para o link, vamos dar-lhe página botão ponto que você está fora porque Button é uma chave estrangeira. Então isso vai ligar para outra página. Talvez seja a Página I D. Número 4. Isso é o que vai ligar porque é assim que as chaves estrangeiras normalmente funcionam. Então vai novamente procurar página I d. número quatro com este botão de ponto de página, e então ele vai nos dar o nosso u R l o que quer que seja agora que não vai aparecer com nada. Então, se visualizarmos a página, são, mas ela realmente vai embora, vamos mudar isso. E vamos definir a página inicial publicar Angela. Parece difícil de ver. Vamos consertar isso daqui a pouco, mas ele aparece e o link. Se você olhar para a parte inferior esquerda, diz porta host local 8000 que é, de fato, a página inicial. Por último, precisamos colocar uma imagem aqui. E então esta é a primeira vez que vamos trabalhar com imagens, certamente não é a última vez que vamos falar mais sobre imagens em profundidade à medida que avançamos neste curso. Então a primeira coisa que precisamos fazer é carregar. O que isso está dizendo é, Ei, quando você carrega este template, Django, quando você carrega este template, saiba que ele se estende com base em html. Falaremos mais sobre isso e bloqueios na próxima lição. Ah, e há uma seção lá que queremos sobrescrever chamado conteúdo, mas também para que você saiba, precisamos carregar maneira, dizer imagens, tags porque vamos estar usando uma tag que Wag Cauda nos dá e que nos permite usar uma tag template chamada Imagem. E dizemos como seu primeiro parâmetro qual imagem queremos para você. Então vamos fazer imagem de fundo do banner. Nossa segunda opção será Como queremos criar essa imagem? Vai para o Cropper Image. Não importa o que nós diamos nós queremos preenchê-lo com certas e alturas. Queremos dizer lá como uma altura máxima ou Max com algo assim? Falaremos mais sobre isso depois. Mais uma vez, eu só quero mostrar este tipo de apenas para molhar os pés com imagens e nós vamos dizer Phil 1600 por 800 como imagem BG. E agora temos acesso à imagem BG como uma variável. Então vamos digitar chaves. BG sublinhado imagem ponto u R l Vamos atualizar nossa página. Veremos que temos um U R l aqui em cima. Se eu ir em frente e copiar este colar isso em nosso navegador. Olhe para isso. Ele fez a imagem para nós. Ele cortou. Então esta era originalmente uma imagem quadrada que eu acredito e como é 1600 por 800 e então apenas lidou com tudo isso para nós, o que é muito, muito bom. Agora precisamos pegar este u R l e aplicá-lo como fundo. E então eu já tenho algum estilo aqui e eu quero adicionar esta imagem de fundo que você é . Eu salvo essa atualização e nós consorte para ver que as imagens tipo de lá um pouco mais de novo . O estilo virá no próximo vídeo, eu acredito onde isso realmente vai começar a olhar como um site. Há também outros campos que podemos adicionar ao nosso modelo. Há coisas como Stream sente que podemos adicionar Há validação e coisas que podemos adicionar que vamos adicionar um pouco mais tarde. Só que não agora. Neste ponto no tempo, o que fizemos foi modificar o weg padrão dizer página inicial que demos a ele para campos extras , então ele já vem com coisas como título. Nós dissemos que queremos dar-lhe um texto de lead, um texto de botão e uma imagem de fundo. Agora, se você estiver aplicando isso e aplicar um painel de campo ao seletor de páginas ou ao seletor de imagens. Vou te mostrar como isso vai ficar nos publicitários quando editarmos nossa página. Nosso botão agora se torna um menu suspenso em todas as páginas em nosso site de espera, e o seletor de imagens também se torna um menu suspenso. De todas as imagens disponíveis que temos em nosso site. Isso não é realmente o que queremos. Essa não é uma boa interface de usuário. Então, se você vir isso, provavelmente você está usando o painel de seleção errado. Painéis de campo são ótimos para apenas sapatos de página de texto normal ou painéis são ótimos para estrangeiros. Chave está indo para outra página como vemos aqui, chave estrangeira indo para outra página, dissemos que isso poderia ser qualquer página de cauda wag, qualquer futura página de cauda wag, poderíamos criar um inchar outro painel de texto e, em seguida, uma imagem painel seletor para a nossa imagem de fundo. E, novamente, isso nos permite escolher e fazer upload de imagens dinamicamente, o que é muito, muito bom. Em seguida, vamos em frente e trabalhar com o modelo base e fazer com que o nosso site realmente pareça algo 8. Trabalhando com o modelo básico: na última lição. Trabalhamos com a página inicial e o modelo de página inicial um pouco, mas vamos em frente e realmente estrutura com base no modelo HTML. Agora, se você não sabe o que é baseado no modelo HTML, vamos realmente olhar para isso primeiro. Então eu vou fechar os arquivos que tinham aberto a partir do último vídeo abrir ponto base html e você pode ver que está na minha pasta Rocket Man modelos barra. Então, se eu fechar todos estes e reabrir este, podemos ver que eu tenho modelos Rocketman e, em seguida, baseado em HTML. E a ideia é que cada página eventualmente é derivada de um modelo base. Então, em vez de ter que declarar HTML cinco classe node.js título meta dados todas essas outras coisas, nós não temos que fazer isso todas as vezes. Em vez disso, o que podemos dizer é: “ Ei, Ei, tudo o resto está bom, está bem. Mas vamos apenas substituir este bloco de conteúdo ou vamos apenas substituir este bloco de classe corporal. Não há necessidade de adicionar JavaScript todas as vezes, porque podemos apenas adicioná-lo ao nosso baseado em HTML, e ele apenas sabe. E assim como um exemplo, se eu abrir home page dot html. Temos uma seção aqui chamada Bloquear Conteúdo. Nós também temos uma seção em nossa base dot html chamado conteúdo de bloco. E então esses dois combinam, o que significa qualquer coisa aqui porque nós dissemos isso. Ele se estende com base em HTML. Qualquer coisa dentro do nosso conteúdo de bloco. Tudo isso vai sobrescrever o que não está aqui. Acontece que não há nada lá agora, mas podemos dar um padrão. Tudo o que temos a fazer é dizer olá mundo, e isso será automaticamente escrito em qualquer página que esteja usando esta seção de conteúdo de bloco . Então, há apenas algumas coisas que eu quero limpar aqui só para tornar este site um pouco melhor. Não vamos verificar se o JavaScript está habilitado ou desabilitado, embora você queira manter isso. Não vamos nos preocupar com o título ou a descrição ou qualquer coisa assim. Por enquanto, temos uma folha de estilo global, e isso está procurando estática. CSS rocketman dot CSS Agora Algumas lições atrás vimos este carregado aqui diz Load static , e dissemos como não precisamos dele. Não vamos usar este tempo. Nós somos. O que isso faz é dizer Hey, no agitado Wag Dell'Apa, você tem uma pasta estática em algum lugar, Seja lá o que você nomeou, porque nós podemos mudar o nome dessa pasta. Podemos até especificar que as pastas, não locais, poderiam ser armazenadas nos três espaços oceânicos digitais da Amazon ou algo assim. Mas o que estamos dizendo aqui é verificar a pasta estática. Depois há uma pasta CSS, e há um arquivo chamado Rocket Man dot CSS. Agora, vamos ver se isso realmente existe. Então, em uma pasta Rocket Man, temos um diretório estático, na verdade chamado de estática, que é uma maneira engraçada de nomear isso. Então temos um diretório CSS, e temos bootstrapped para fora CSS e bootstrapped no mapa de pontos CSS. Então isso não é chamado Rocket Man em nosso projeto, isso é chamado bootstrap dot CSS. Agora, se você não tiver bootstrapped em CSS em seu projeto, você vai querer voltar algumas lições e baixar os arquivos do projeto. Eu já forneci esses arquivos para você, então você só tem que copiá-los e colá-los em seu diretório estático. Então, se você não tem, provavelmente vai querer. E então temos algum javascript global aqui em baixo, então vamos dar uma olhada novamente. Isto está dizendo que as fontes estáticas onde quer que possa estar. Só sabemos que está bem aqui. Fuller ligou para Js. E este é o Rocketman Dot Js. Não. Por alguma razão, decidi chamar esse ponto de índice de Js e isso combina bem aqui. Vamos em frente e dar um salvamento rápido e uma pré-visualização. Então eu vou salvar esse arquivo, voltar para nossa página inicial e Walla. Não parece ruim. Não temos mais nada para mostrar aqui, e está tudo bem. Mas temos que esperar até barra de usuário, que é muito bom, porque se você quiser adicionar uma criança, Page adicionou esta página mostrando explorado ou o wag dizer a um homem que você pode fazer todas essas coisas e que só aparece se você é o administrador. E se a espera até usar uma barra estiver habilitada, que está bem ali. Então, se você quiser se livrar disso, basta excluir essa atualização de salvamento e essa barra de usuário desaparece. Gosto de estar lá, embora seja muito conveniente. Vamos limpar algumas coisas que não precisamos neste site. Mas, você sabe , pode ser útil para você no futuro. Então, se você quiser modificar sua classe corporal, você pode querer manter este bloqueio aqui. Porque, por exemplo, se formos para a nossa home page, poderíamos jogar isso aqui e poderíamos chamar essa home page de algo assim. E isso irá essencialmente fazer isso quando a página inicial é carregada. Mas para este site, não precisamos disso porque este site é muito simples. Então eu vou me livrar disso só porque nós não precisamos dele. E, em seguida, para a nossa seção de conteúdo, eu realmente só quero envolver isso em um domínio de elementos principais. Dê-nos uma ideia do conteúdo. Ah, o clássico fazer algumas aulas de bootstrap aqui. Então, margem de contêiner, por quê? Acesso para E o papel vai ser principal agradável e simples, e nosso conteúdo vai viver dentro de lá. Vá em frente e visualize nossa página e oh, ok. Bem, esse tipo de banner de corretor, você sabe o que podemos fazer é que nós podemos realmente criar um novo bloco aqui. Vamos criar um novo bloco chamado Banner So Block Banner e por padrão não vai ter nada lá. E vamos acabar com esse bloco. E o que isso vai fazer é nos permitir usar este bloco em sua página inicial, e ele não vai ser embrulhado com qualquer estilo bootstrap vai vir com o elemento principal. Nós vamos realmente ignorar isso e injetá-lo aqui em vez de dentro aqui. E esta é uma parte muito boa. Tudo o que temos de fazer é mudar esta palavra aqui, dois estandartes. Então isso agora combina com isso, e no final do nosso bloco, podemos dar um nome ou não temos que dar o nome dela. Gosto de dar um nome. Às vezes eu não dou o nome. É uma espécie de opcional, mas vamos mudar quando Do Banner também. Então, se fecharmos isso, podemos ver Block Banner um monte de coisas dentro dele. São 25 linhas de código lá dentro, e então terminamos nossa faixa de bloqueio. Vamos ir em frente e salvar que atualizar nossa página agora nossos banners em cima e nós temos uma seção de conteúdo aqui em baixo. Então, se inspecionarmos nossa página devido a fazer, podemos ver que temos um Jumbotron aqui. Essa é a nossa bandeira. Faz parte desta parte aqui em cima. Ah, e então nós temos uma seção principal rolagem para baixo. Temos uma secção principal aqui em baixo. Este amarelo destacado partes. Mas não há nada nele. Mas é aí que vamos colocar nosso conteúdo futuro. Então, que está trabalhando com Baseado em HTML, nós modificamos a página inicial um pouco também. Neste momento, também podemos voltar à nossa página inicial e fazer uma pequena limpeza. Não estamos usando a página de boas-vindas. Nós podemos realmente olhar através de todo o seu projeto para a página de boas-vindas dot html, e nós temos um aqui que está vindo de nossos pacotes de site em um ambiente virtual que é apenas o padrão, um que vem com Wag Tail e o outro que vem por padrão com o Wakil. Isso não está no nosso projeto, não é o que vemos no lado esquerdo aqui. Então vamos em frente e deletar. Não precisamos mais disso, e lá vamos nós. Agora temos uma página inicial com um banner. Tem uma imagem de fundo. Parece muito bom. Temos o título do melhor texto e temos um botão. Uma chamada para o botão Ação. 9. Aplicativo e páginas: até este ponto, criamos uma home page. Nós modificamos o baseado em cada modelo de e-mail, e nós carregamos alguns novos JavaScript e CSS, e agora queremos adicionar algum outro tipo de página. Então vamos em frente e criar um texto de página de serviço par. Não, para isso vamos precisar. Fonte O Rocketman já foi ativado? Entra nele se estiveres a usar o Pip e é só o programa da Pippen. Se estiver usando o Docker, é exatamente o que quer que seja o nome do contêiner. Bash, isso vai te colocar dentro dele e então você pode correr. Então você pode correr. Python conseguiu. Eu executo o servidor para 8000 40.000 apenas a porta padrão que os desenvolvedores dos EUA tendem a usar. Na verdade, não é nada de especial nisso. E agora, quando atualizarmos sua página, , nossos servidores funcionam. E neste ponto, nós realmente queremos criar um novo aplicativo. Então poderíamos teoricamente, não vejo por que não pudemos. Podíamos colocar todas as nossas páginas em modelos de barras, não tartes. É uma convenção de nomes estranha. Estamos dizendo que todas as nossas páginas precisam estar na APP doméstica serviços precisam estar em todo o mapa. Página de Contato precisa estar no aplicativo doméstico. Diversos página precisa estar no aplicativo de casa que não faz nenhum sentido em tudo. Então vamos criar um novo aplicativo, e isso é, na verdade, apenas um comando de gerenciamento de jangle. Vamos cancelar nosso servidor e vamos digitar. Python conseguiu. Eu começo serviços. E se dermos uma olhada em nosso editor, agora temos uma pasta aqui chamada Serviços. Tem um monte de arquivos em suas exibições. Testa modelos sem pizza Minute Dot e pasta Migrações com um arquivo de pizza vazio e ponto lá também. É um aplicativo de jingle padrão. O que eu vou fazer é apagar um monte desses arquivos. Não precisamos de vistas. Não precisamos de exames e não precisamos de homens. Minha cauda cuida de muito disso para nós e para os testes. Se você quiser escrever seu próprio teste, certeza, você pode. Nós não vamos fazer isso porque nós não estamos fazendo nada super louco com este site wag tail, o restante vai ser modelos dot pie e nós também vamos querer abrir nossa base top high high. Não aquele baseado em torta. E onde temos o nosso vestido APS instalado por baixo. Aqui, vamos em frente e dar-lhe serviços. Não se esqueça de colocá-lo em apóstrofos ou citações com uma vírgula porque esta é uma lista python . E esse nome, tudo o que isso faz é refletir esse nome bem aqui. Esse nome, esses dois nomes eles têm que coincidir. Então eu vou salvar esse arquivo, fechei isso. E estou de volta a modelos de serviços, não torta. Então, em um aplicativo regular do Django, você sabe é que eu excluí o arquivo chamado views dot pie, um aplicativo irregular do Django. Você tem modelos, visualizações e modelos. Bem, nós vamos manter o arquivo de modelos, mas a vista não precisamos realmente disso com um site wag tail porque uma página wag tail vai combinar a vista e o modelo ao mesmo tempo. Na verdade, é menos para gerenciar, e na minha opinião, é uma coisa muito, muito legal. Você pode ver tudo o que está acontecendo em uma página em um único arquivo versus em um aplicativo Django , você tem que alternar entre seus modelos e suas visualizações. Nós também vamos manter aps dot pie só para um bom treino. Mantenha seu arquivo innit dot pie que diz ao Python basicamente para incluir os outros arquivos aqui , mesmo que esteja vazio. E mantenha suas migrações e o arquivo da Unidade Vazia dentro disso também. Em seguida, vamos em frente e tratar de novas classes de página. Queremos criar duas novas páginas, então a página de listagem de serviço de classe vai ser uma página. Nós não importamos isso ainda, então vamos passar e vamos fazer páginas de serviço de classe, apenas uma página padrão. não sabemos o que vai ter nisso. Então, vamos também passar. Isto não existe. Esta não é uma variável. Isto não é uma importação. Isto ainda não existe, por isso temos de ter a certeza de que isto existe. Então, a partir de Wag Tail Doc ou ponto modelos importar página. E isso é realmente tudo o que temos para diligir. Então agora, neste ponto, poderíamos executar python, gerenciado alto, fazer migrações. Também poderíamos executar python, gerenciar uma migração de pizza e criar um arquivo de migração que tem a página de listagem de serviço e a página de serviço nele. E então nós poderíamos realmente começar a adicionar essas páginas à nossa maneira dizendo que os homens não iriam fazer isso ainda, embora nós vamos adicionar algumas coisas a isso primeiro. Então, nossa página de listagem de serviços Vamos em frente e adicionar Talvez como um subtítulo. Então já sabemos que esperar até vir com o campo de título que está dentro da página. Não precisamos disso porque já está lá. Vamos ter um subtítulo, no entanto, e vamos dizer que o subtítulo pode ser bastante longo. Vamos fazer modelos campo de texto ponto pode estar em branco. Sim, vamos dizer que basicamente, isso é opcional. Isso não precisa estar lá. Então, quando você salva a página, o campo de legendas pode estar vazio? Sim, é o que estamos dizendo. Vamos dizer comprimento máximo de 500 caracteres, algo assim. Agora, lembre-se quando executarmos migrações, isso não aparecerá em nossa página quando formos editar uma página. Sim, isso estará lá em segundo plano, mas não está exposto, então precisamos expô-lo com painéis de conteúdo. Fazemos isso dizendo que os painéis de conteúdo são iguais aos painéis de conteúdo de ponto de página, então vamos pegar qualquer caudas que já nos dão. Esse é o campo de título. Sabemos disso, e vamos acrescentar uma lista a isto. E aqui, nós simplesmente queremos um painel de campo para o subtítulo. E novamente, este nome de campo de legenda corresponde a este nas citações. E não importa se são citações ou apóstrofos que só precisam ser algum tipo de string, apenas como um exemplo que o alterna, realmente não importa. Ambos funcionaram perfeitamente bem, então isso é legal. Então, nossas páginas de listagem de serviços Agora vamos ter um subtítulo agora em nossa página de serviço. Vamos querer um pouco mais. Esta vai ser uma página de detalhes, e assim em sua página de detalhes, talvez queiramos algum tipo de descrição. Talvez queiramos um link para algum tipo de página interna como uma chamada para Botão de Ação ou talvez um link para uma página externa, algo que está fora do nosso site wag tail. Esse seria o botão U.R. L. para uma chamada à ação. Vamos ter um chamado botão de ação. Então precisamos de alguém mandando mensagens de texto lá, e isso é ah, ele também nos dá uma imagem de serviço de imagem, então sabemos que temos cinco campos aqui. Então a descrição pode ser um pouco mais longa. Então vamos fazer um campo de texto em vez de um campo de gráfico. Essa é a diferença. Campo HR. Este é normalmente usado para quantidades menores de texto e texto. O campo é usado para maiores quantidades de texto. Em branco é igual a trégua. Vamos dizer que é opcional e um comprimento máximo de 500 caracteres. Agora temos página interna. Já fizemos isso com a página inicial. Precisamos que esta seja uma chave estrangeira tão chave estrangeira para qualquer tipo de página Wag Tail Wag Tail core dot Page. E isso realmente se parece muito com a página de importação do núcleo wechsel. E se abrirmos nossa torta de ponto base, podemos realmente um aplicativo aqui chamado Wag Tail Core. Então o que isso está fazendo é que ele está olhando através do núcleo da cauda wag, e ele está procurando por um modelo de página. Isso é o que vamos ser capazes de ligar. Teoh Blank é igual a true. Vamos dizer que isso é opcional. Não é igual a true, por isso poderia ser armazenado como absolutamente nada na base de dados apenas um valor sem. O nome relacionado para este propósito específico não é importante. Então, basta usar um símbolo de adição, ajudar o texto selecionar um interno, esperar, dizer Paige e, por último, excluir para satisfazer as necessidades jangles. Vamos dizer modelos “dot sentinel”. Poderíamos fazer isso porque não é igual ao verdadeiro Sentinel é permitido. Em seguida, temos uma página externa, então talvez alguém tenha chamado ação em sua página, e esse botão deve ir para um site diferente. Talvez seja app dot meu site dot com em vez de apenas o meu site dot com barra se inscrever. Quem sabe? Há muitas razões diferentes para isso. Este é muito fácil. Este é apenas um campo ul. Eu vou dizer branco é igual a true e nós não precisamos especificar não é igual a true, porque quando se trata de campos de texto regulares, tudo o que nós estamos indo para dio é um ou ele tem uma string vazia ou tem algo nele como isso. Não vamos dizer que pode ser. Não, é só uma boa prática de jingle. Temos aqui um botão texano. Fizemos isso com a home page também assim modelos holandês Hartfield Blank é igual a verdadeiro. Queremos que o texto do botão seja opcional? Poderíamos fazer isso. Não vejo porquê. O que não pudemos fazer que podemos sempre verificar se há, mas em texto. Caso contrário, forneça texto padrão. E como é HR Field, fazemos um comprimento máximo de 50. Isso é muito longo para Button, mas nós temos isso e depois uma imagem de serviço. Este precisa ser uma imagem. Então nós fazemos modelos ponto chave estrangeira, e isso vai ligar para imagens wag cauda imagem ponto Então novamente que vai para o aplicativo de espera até imagens e está procurando a classe de imagem. Não estamos usando uma imagem personalizada Waittil. Poderíamos especificar nosso projeto para usar um personalizado. Espere até a imagem, mas não estamos. Vamos usar a espera normal até a imagem agora. Vamos dizer não,pode ser verdade, pode ser verdade, então não pode ser absolutamente nada na base de dados, mas em branco é igual a falso. Assim, sempre que você salvar a página, você precisa ter uma imagem selecionada ao excluir. E este é apenas um exemplo de como esses nomes de propriedades realmente não importam a ordem, enquanto o 1º 1 tem que estar lá. Mas estes outros estes argumentos de palavra-chave ar então não importa realmente qual ordem lá em Então por diante. Excluir é igual a modelos ponto Eu disse Nenhum texto de ajuda. Esta imagem será usada na página de listagem de serviços. Eu só sei que porque eu pré planejado isso e vou ser cortado para, eu acho que é algo como 570 pixels por 370 pixels. Provavelmente também o usaremos nesta página. Sim, ele será cortado 5 17 Ah, nesta página, Lá vamos nós, algo assim. É apenas útil. Texto é o que é. E, claro, precisamos de um nome relacionado de um sinal de mais, e é isso. Em seguida, precisamos adicionar nossos painéis. Mas vamos fazer isso em um segundo, porque eu quero mostrar uma coisinha rápida aqui. Então vamos abrir nosso Edmund e ele não está funcionando no momento. Vamos executar painéis de campo Server 8000 não definidos. Está bem, Legal. Isso é esperado de Wag Tail pontilhada homens ponto e ele manipuladores painel de campo de importação. Precisaremos de mais deles mais tarde que satisfaçam esses modelos de erro em particular. Essa chave estrangeira não está definida. Sim, isso é porque isso teria sido um erro de digitação. Modelos ponto chave estrangeira. Lá vamos nós. Relacionados. Nomeado novamente. Isso está pegando todos os meus terríveis digitação relacionados. Nomeado é apenas um nome relacionado. Tive que reiniciar manualmente essa. Sem erros. Está bem, fixe. Então agora vamos abrir o nosso administrador. Temos uma página aqui, temos lacaios foguetes, podemos adicionar uma criança Bage, e podemos adicionar uma página inicial, uma página de listagem de serviços ou uma página de serviço. Então, vamos adicionar uma página de listagem de serviços. Oh, não, nós temos um 404 e este é o ar que eu queria te mostrar. O Wag Goldman vai tentar lidar graciosamente com este problema. Basicamente, o que isso está dizendo está nesta página, isso não está realmente usando nenhum dado do banco de dados. Isso é apenas passar por todos os APS registrados e verificar as páginas que, neste caso , está passando pelo aplicativo de serviço. Esse é o nome aqui, serviços AP e está procurando uma página de serviço e uma página de listagem de serviços. E então ele não está realmente usando nada do banco de dados, mas neste ponto, nós clicamos na página de listagem de serviços e ele diz, Oh , não, algo quebrou porque ele está pedindo dados do banco de dados e ainda não o tem. Não fizemos nenhuma migração. Assim como na página inicial, vamos criar algumas novas migrações. Então é você Python gerenciou. Eu faço migrações. E novamente, isso só vai criar instruções para o nosso banco de dados. Em seguida, precisamos fazer gerenciar essa torta migra para realmente aplicá-los ao nosso site. Vamos em frente, servidor Runner uma vez mais atualizar página e esperar por ele. Bam! Lá está ele. Temos uma página de listagem de serviços. Vamos chamar isto de serviços. Podemos dar-lhe uma lesma especial. Chame de serviços, eu acho. E um subtítulo. Aqui estão todos os serviços que podemos executar em seu foguete porque aparentemente este é um arranque com um monte de dinheiro. Vamos em frente e publicar isso e podemos ver isso e vemos modelo não existe. Agora vamos manter isso aí por um segundo para voltar a isso em um momento. Deixarei a conta aberta quando voltar para aqui. Agora eu posso realmente ir para as minhas páginas. Tenho manutenção de foguetes, uma página abaixo é a página de serviços. Todas as suas páginas devem estar debaixo da sua página inicial e, em seguida, temos um botão de edição. Então eu volto. Temos o Arrow porque agora há páginas filho e podemos ver os serviços. Agora vamos em frente e adicionar um pager filho. É o Atty Service Page. Mas se olharmos para isto, isto não está a mostrar nada que realmente adicionámos. Adicionamos uma descrição, página interna, página externa, mas em texto e sua imagem de serviço. Mas não adicionamos nenhum painel novamente. Espere Till e Django, eles estão dizendo, basicamente, que você tem esses campos, mas nós não sabemos se você quer todos expostos, então você vai ter que expô-los por conta própria porque, novamente, nós não sabemos a lógica por trás do seu aplicativo. Então você vai ter que gerenciar isso, e essa é na verdade uma maneira muito preferida de fazer as coisas. Então eu estou apenas em modelos de serviços que torta. Estou sob a página de serviço e aqui vou adicionar painéis de conteúdo é igual a painéis de conteúdo de ponto de página , além de uma lista novamente. Vamos apenas dizer, , vamos encontrar alguns painéis de conteúdo aqui. Mas vamos também pegar essa cauda de wag um título um que o que vem padrão com abanado. Oh, e agora temos que adicionar alguns desses. Então vamos em frente. Copiei todos aqueles que eu sou Pei citando aqui. Então eu tenho uma lista para referência do comentário. Esse caso, ele realmente joga quaisquer problemas para mim. Então eu tenho uma página interna aqui, certo? Quero usar um painel de campo para uma página interna. É isso mesmo? Também tenho a descrição da página interna. Não, isto é uma chave estrangeira para uma página. Quero que este seja um painel de seleção de páginas. Caso contrário, teremos uma lista de todas as nossas páginas, e isso não é maneira de viver a vida. Então painel seletor de página e vamos em frente e adicionar um painel de campo regular para a nossa descrição . Em seguida, temos uma página externa. Este é apenas um campo ul. Então página externa é o nosso campo URL bem aqui você é tudo campo é realmente apenas um campo de texto com validação ul extra, modo que poderia ser um campo paddle porque é um campo regular. Em seguida, temos o texto do botão novamente. Este é apenas um campo de texto normal. Podemos ver isso aqui em cima. É apenas um campo de caracteres, e então temos uma imagem de serviço. Este é um diferente porque é uma chave estrangeira para uma imagem que não queremos descartar. Lista de todas as imagens que podemos selecionar. Queríamos realmente ter um seletor de imagens motile como um pequeno pop-up e permite que você carregue um em tempo real. Então vamos adicionar um painel seletor de imagens. E neste ponto, se eu salvar isso, meu terminal vai reclamar tanto que estou perdendo importações. Lá está ele. Sapatos pagos ou painéis não definidos vai dizer a mesma coisa sobre o painel Seletor de imagens. Vamos voltar ao topo. Vamos adicionar sapatos pagos ou painel. Sabemos de algumas lições Go que o painel Seletor de imagem da cauda Wag não vem do administrador da Anders. Ele vem da imagem em, e há importar painel seletor de imagem, e isso é apenas para que todas as suas coisas de imagem permaneçam as mesmas imagens, ar tipo de um pilar central atrás de Wag Tail. Vamos dizer que atualize nosso terminal. Oh, nenhum módulo chamado Esperar até a imagem. É porque isso é um erro de digitação, suas imagens. Isso é plural. E lá vamos nós. Agora, quando eu atualizar esta página, quando eu quiser adicionar uma nova página de serviço, você pode vê-la aqui em cima. Agora tenho um título, uma descrição em uma página interna. Eu posso selecionar outra página, e você pode realmente atravessar todas as páginas em seu site. Desta forma, podemos adicionar uma página externa. Então talvez eu queira que isso vá para o espaço x ponto com, mas no texto, veja essa imagem de serviço. Vou usar um que já enviei antes, chamado Rocket Image. E como será chamado o serviço? Adiciona um serviço de limpeza. Acho que vamos limpar. Os Rockets vão certificar-se de que é agradável e brilhante, branco e suave, sem fricção e todas as coisas boas e, em seguida, uma descrição. Aqui dentro. Este é agora um campo de texto, então temos várias linhas. Podemos ver isso aqui, você faria para fazer. Podemos fazer várias linhas para. Isso é muito bom. Eu sou apenas como, hum, texto ipsum quente lá dentro. Vamos em frente, publica Page e View Live, e vamos ver a mesma coisa. Esses modelos ainda não existem. Agora o que isso está fazendo é procurar uma página de serviço, e ele está realmente recebendo o nome automaticamente. Então, se formos até aqui, podemos ver que é uma página de serviço. Espere até Njenga ser inteligente o suficiente para saber que este não é o aplicativo de serviços. Então ele vai olhar em uma pasta chamada Serviços e a página de serviço vai nos transformar em caso de cobra, então ele vai para o serviço sublinhado página dot html. Esse é o modelo padrão vai procurar por agora. Se voltarmos ao nosso erro, podemos realmente ver se eu posso fazer este modelo maior não existe. Temos um bom CRL. Então eu estava site ponto com barra serviços barra barra limpeza, e nós podemos realmente ver onde ele está tentando obter isso. Este modelo de tão primeiro lugar que ele procura está em nosso projeto Rocketman em modelos em serviços e, em seguida, página de serviço. Então vamos fechar tudo isso. Nós entramos em um homem foguete, nós temos nossos modelos aqui e ele está procurando por uma pasta chamada Serviços e um arquivo chamado página de serviço dot html. Então esse é o primeiro lugar está procurando os segundos lugares, vai olhar no aplicativo de casa porque temos um aplicativo chamado casa. Então ele vai olhar lá e, em seguida, vai olhar no aplicativo de pesquisa que ele vai procurar . Uso a casa como exemplo. Home tem uma pasta chamada Modelos e, em seguida, uma subpasta chamada Home e, em seguida, uma Home Page lá. Então ele está realmente procurando a mesma coisa. Só que desta vez ele está procurando modelos, barra de serviços pasta e, em seguida, página de serviço dot html. Então, em vez de casa, vai ser serviços e, em seguida, o serviço pago tiro. HTML. Nós não queremos isso lá porque isso é realmente adicionar para mesclar dois AP juntos. O que acabaremos por fazer é criar um novo modelo aqui como este. Na verdade, vamos fazer isso agora. Página de serviço de serviços dot html. Então eu acabei de dividir minha página aqui. Eu tenho página de serviço que a cada mês à esquerda, Eu tenho home page dot html à direita e novamente que o pagamento de serviço apenas viveu sob modelos, serviços e na página de serviço. Isso é exatamente o que Wag Tail e Jangle estão esperando. Agora precisamos copiar algumas coisas que dizemos, Ei, Ei, queremos usar o nosso típico A baseado em arquivo HTML, apenas o genérico. Vamos adicionar um novo bloco aqui e vamos chamá-lo de conteúdo muito parecido com o nosso banner. Mas nós só queremos adicionar algum conteúdo lá e em nosso conteúdo. Vamos fazer Olá da página de serviço dot html. Vamos voltar para a nossa página onde estamos recebendo esse ar. Diminua o zoom. Atualizar Olá da página de serviço dot html. Agora, nas próximas lições, vamos trabalhar com isso e também com a página de listagem de serviços, que atualmente está dando um erro. Vamos trabalhar com ambos e torná-los muito bonitos, e vamos obter mais no lado de gerenciamento de modelos das coisas 10. Página Página de serviço: antes de continuarmos adicionando recursos e campos de dados às nossas páginas de serviço, vamos realmente fazer com que essas páginas pareçam um pouco respeitáveis. Esta é a parte divertida por trás, mas desenvolvimento, e é muito crucial ter um site bonito. Então, em vez de ter esta página que apenas diz olá da página de serviço dot html, vamos em frente e realmente atualizar isso. Então parece um bom serviço, Pedro. Pelo menos começa a tomar algum tipo de forma. Depois disso, atualizaremos nossa página de listagem de serviços. Então eu tenho a página de serviço aberta aqui. Como vamos adicionar um modelo de página de listagem de serviços, e vamos fazer isso parecer um pouco mais agradável também. Então, as primeiras coisas primeiro. Precisamos saber com o que estamos trabalhando. Enquanto estamos trabalhando com uma página de serviço aqui. Temos uma página de serviço. Temos descrição, página interna, página externa, mas em texto, temos imagem de serviço e alguns painéis. Vamos para o nosso terminal e certificar-nos de que isto está pronto e funcionando. Então vamos criar o nosso ambiente. Então eu estou em uma fonte, o homem-foguete, então fui ativado. E lá estamos nós. Estamos dentro dela. E então simplesmente o Python conseguiu. Eu executo o servidor na porta 8000 e quando eu voltar para os meus publicitários, podemos ver que isso funciona. Posso atualizar minha página e ela funciona. Não me dá um erro dizendo que não está funcionando. Então vamos abrir nossa página de serviço aqui e vamos obter o título e a descrição apenas como um exemplo. Então aqui dentro poderia fazer isso maior também. Aqui, podemos dizer olá do título do ponto da página e vamos jogar uma descrição aqui também. Descrição do ponto da página. E apenas como uma atualização rápida, estou recebendo uma descrição do campo de modelo, o campo de texto que criamos no último vídeo. Então eu salvei este arquivo e vamos atualizá-lo e podemos ver dizer olá da limpeza. Esse é o tipo de serviço e um monte de texto ipsum quente que preenche. Isso é exatamente o que estávamos colocando em nossa página título é Limpeza e Laura MIPs, hum, texto para a descrição. Tudo bem, então eu só coloquei algumas coisas aqui, alguns html, um pouco de CSS, e realmente faz a página, você sabe, começar a parecer uma página real. Então, se eu voltar ao meu navegador e clicar em Atualizar, isso é o que vamos ver. Vamos ver algo ao longo dessas linhas, mas temos uma imagem sobre os direitos, o título da página, alguma descrição e um botão, e isso, mas precisa ir a algum lugar. Então vamos em frente e sentir isso com os campos que já adicionamos. Sabemos que temos descrição do título, página interna e página externa Ah, mas em texto e uma imagem de serviço. Então vamos trabalhar com várias coisas diferentes aqui. Então vamos começar pelo topo. Temos um título de página aqui. Queremos usar o título da página real. Então o que eu vou fazer é usar chaves, chaves duplas. Ele é o título. E para a descrição, vou fazer a mesma coisa com a descrição. Então, a descrição do ponto da página e estes são enrolados com chaves ou o bigode tipo de sintaxe. Vamos continuar e salvar isso e atualizar nossa página. Podemos ver que isso já está começando a se juntar. Vamos em frente e trabalhar com este texto de botão um pouco. Então sabemos em nossos modelos que temos uma página interna e uma página externa e algum texto de botão. Mas no Texas, o mais rápido a pegar aqui. Então vamos em frente e mudar o texto do botão. Então texto do botão do ponto da página. Atualize sua página. Diz: “ Veja isso. É isso que diz quando estamos editando são pagos? Sim. Com certeza, diz aqui, veja isso. Ok, Agora precisamos determinar se uma página interna ou uma página externa foi dada e criar um euro. Então nós vamos levar isso em um pouco de ah mais abordagem aqui. Vou jogar algumas regras horizontais aqui só para vermos texto aqui. E é aqui que as meninas vão sair apenas como um exemplo. Primeiro as coisas, temos essa página interna. Esse é o nome do campo. Chama-se Página Interna. Agora, esta é uma chave estrangeira para uma página de cauda abatida, que no banco de dados, realmente significa que isso é armazenado como um número, o número quatro, o número cinco, o número 10, o que quer que número da página está em segundo plano no banco de dados. Isso é o que ele é armazenado como, mas balançando cauda wag. Bem, eles são espertos o suficiente para saber que Oh, esta é uma chave estrangeira para uma era Wag Tail Corp. Então uma página padrão, basicamente do que isso é feito para que eu possa selecionar qualquer outra página. Sabemos que é uma chave estrangeira para outra página, e cria o objeto para nós. Então agora tudo o que temos para dio é digitar página de ponto interno, e vamos ah, vamos pegar o título. Podemos pegar o título da página que estamos ligando Teoh, que é serviços. Então, deve dizer apenas serviços. E com certeza, só diz serviços. Vamos em frente e pegar isso. Paige, você era tudo em vez do título. O que é que te agarrou, Earl? E quando atualizamos sua página, lá está. Isso nos dá o parente. Seus serviços l barra é a página onde podemos ver todos os nossos serviços, e isso realmente coincide com a U. R L Bar. Os serviços são a página de listagem do serviço U e a página de limpeza. Um em que estamos atualmente é a nossa página de detalhes, e foi assim que a aninhamos na cauda de Wag. Edmund. Então sabemos que esse funciona. E sobre a página externa? Bem, a página externa é apenas texto. Não pode ser outra coisa. Dissemos para guardá-lo na base de dados como texto. Isso é o que um campo u R L é. É só uma mensagem. Então, se adicionarmos em outra regra horizontal aqui e olharmos para página de ponto externo, vamos em frente. Refresque isto, diz ele. Space x dot com Então agora precisamos determinar se um deles preencheu Use-o se o campo do outro usá-lo, e se o outro, ou se nenhum deles em vez é usado, não mostre o botão em tudo. É agora que temos alguma lógica para trabalhar. Sabemos que isto ia funcionar. Então, para este link, precisamos dizer se página ponto página interna ou página ponto página externa. Se isso existir, então o botão aparecerá. Estamos apenas embrulhando isso em um “se” e um fim. Declaração “Se”. Então é apenas lógica dentro do nosso modelo. É uma declaração básica agora com essa garota que precisamos determinar se vamos usar ou procurar, e então usar a página externa primeiro ou a página interna. Eu gosto de usar a página interna primeiro para que possamos fazer se página ponto interna página se isso existe , que sabemos que quer página interna ou externa existe a partir deste. Declaração “Se”. Se isso existe, vamos adicionar chaves e você está em dupage dot página interna ponto você Earl e que corresponde este aqui em cima online. 12. Vamos em frente e criar uma página Elliff LF Declaração página ponto externo. Bem, digite chavetas página ponto página externa. Sabemos que é apenas texto, então não precisamos fazer como dot u R L. Porque não é um objeto python, não uma classe, então poderíamos fazer outra declaração aqui. Na verdade, não precisamos. Isso nunca será acionado porque isso só aparecerá se houver uma página interna ou uma página externa. Mas poderíamos fazer outra declaração e apenas dar-lhe um link vazio. É Vá em frente, limpe isso, atualize nossa página, e quando eu passar o mouse sobre isso, você pode ver no canto inferior esquerdo lá, ele diz serviços de barra de host local Porta 8000. Agora vamos trabalhar com esta imagem um pouco. Temos algo para fazer aqui. Voltem para as nossas modelos. Temos uma imagem de serviço. É também uma chave estrangeira, então sabemos que a chave estrangeira vai ser como o número um ou o número 90 ou o número 42. Vai ser algo ao longo dessas linhas. Tanto Django quanto Wag Tail são espertos o suficiente para dizer, Oh, isso é o que vai ser um número. Mas eu sei que isso vai mapear para as imagens da cauda wag, aplicativo e classe de imagem. Então, mesmo que seja um número quando você tentar usá-lo, eu vou procurar a imagem com um ID de qualquer idéia que está armazenada. Então eu D quatro vai olhar para cima imagem com uma idéia para e ele nos dá esse objeto. Então eu vou fazer isso apenas oito toque menor e antes de trabalharmos com imagens dentro de esperar um vento para carregar a tag de imagens. Então nós carregamos tags de imagens wag tail, e isso só nos permite usar esta tag template chamada Imagem. Agora vamos até onde temos esta imagem aqui. Está embrulhado em uma foto, para que possamos. Não tem que estar bem acima dela. Pode estar em qualquer lugar dentro deste conteúdo. Bloquear este conteúdo bloqueando aqui, vamos dizer imagem página ponto Qual é a imagem chamada? É chamado de imagem de serviço de imagem de página para fora imagem de serviço. Então, como seu primeiro parâmetro, vamos dar-lhe todo o objeto de imagem. Então nós vamos dizer Phil 5 73 por três, 69 e então nós vamos atribuir isso como uma variável como vamos apenas chamá-lo de imagem. Eu sei que neste momento temos acesso à imagem que podemos fazer imagem que você é. L o que quer que isso u r l vai ser depois que ele é cortado, ele vai criar uma nova imagem para nós imagem dot imagem dot ault, que geralmente é o título, eu acredito, e vamos em frente e nos atualizar e podemos ver Aqui. Temos a nossa primeira imagem. Essa é a garota. Temos o nome aqui e não temos nada para Ault. Eu não acredito, na verdade estender corrigido. Acho que esse é o título. Vamos em frente e testar isso. Vamos fazer o título. Livre-se disso. Sim, então lá vamos nós. Temos imagem. Você está no culto da imagem. Então vamos em frente e adicionar um altar aqui. Ault é igual a imagem, não um texto alternativo lt. E onde temos nossa fonte de imagem, vamos apenas substituir isso pela imagem. Você é l imagem dot u r l E lá vamos nós. Temos uma página de detalhes do serviço. Agora não temos um cabeçalho ou rodapé ou qualquer coisa para navegar pelo site, mas agora temos uma página de detalhes do serviço. Uma última coisa que podemos fazer é dizer isso para usar um determinado modelo para que possamos dizer, Ei, viúva, sabemos que esta é uma página usar um determinado modelo. Então, vamos ter paciência comigo. Eu vou quebrar isso, na verdade, então é você serviços barra página de serviço 40404044 porque esta página não existe. Guarde isso. E vou esperar que o meu servidor recarregue. Quando eu atualizar esta página, você verá que você recebe um modelo não existe erro. Isso é porque estamos dizendo a ele para realmente procurar serviços barra página de serviço para um mundo para geral para quatro html e que não existe. Está até te dizendo exatamente onde procurar. E ele não existe em nenhum lugar que ele sabe onde procurar agora eu vou especificar qual modelo usar. Agora, isso não vai mudar nada porque isso teria sido o padrão. De qualquer forma, isso está no AP de serviços e na página. Se você pegar esse nome dessa classe com um s maiúsculo e um P maiúsculo e transformá-lo em caso de cobra, seria assim. E então o Django apenas assume dot html Então isso realmente não é necessário. Mas eu gosto de especificar um modelo dessa maneira quando você está trabalhando com código com qualquer outra pessoa e você vê uma página e você diz, Oh, onde está aquele templo? Você não tem que olhar para você só sabe que você pode destacar isso e você pode procurá-lo diretamente no seu editor. Eu apenas copiei e colei e encontrei automaticamente para mim, pois o problema agora é se voltarmos para a nossa página de serviços. Isso se clicarmos neste botão. Oh, não, página de listagem de serviços também não existe. E há outras coisas que queremos fazer nesta página também, como mostrar automaticamente nossos serviços. Então, no próximo vídeo, vamos resolver isso. 11. Página de listagem de serviços: Tudo bem. Neste ponto no tempo, você está carregando seu site e você está tentando mostrar sua página de listagem de serviço e interior admitir que é esta página não a limpeza um, o que apenas disse serviços e tem um subtítulo. E atualmente não há modelo para isso. Então, neste vídeo, vamos fazer esse modelo existir. E então vamos passar por cima adicionando um pouco de contexto a isso. Esta página é Bem, então eu tenho uma página de serviço aberta, e o que eu vou fazer é apenas fechar esta realmente duplicar esta página de listagem de serviços e, ah você sabe, apenas se livrar disso coisas aqui, e eu tenho um pequeno modelo rápido lá. Agora esta página vai viver dentro da pasta de serviços dentro dos modelos de uma pasta , e é chamado de página de listagem de serviço porque página de listagem de serviço novamente. Se você pegar todas essas letras, faça-as minúsculas. E, em seguida, a segunda letra maiúscula lá costumava ser minúscula. Isto é o que ele está procurando. Página de listagem de serviço dot html e, na verdade, podemos. Podemos especificar isso também, assim como fizemos com a nossa página de serviço. Podemos vir aqui e dizer, Ei, Ei, use a página de listagem de serviço dot html Agora, quando atualizamos nossa página aqui, vemos absolutamente nada aqui. Isso é porque o nosso modelo não tem nada nele. Eu apaguei tudo, e ele só está mostrando um bloco de conteúdo vazio. Ok, então eu apenas colado em apenas uma estrutura HTML. Você não precisava me ver digitando tudo isso. Mas a parte importante é que vamos pegar o título da página e o subtítulo e substituí-lo . Então vamos ver como isso se parece. Agora temos uma página intitulada We Have a Subtitle e em nossa página de listagem é realmente chamada de subtítulo, e sabemos isso de todas as maneiras. Diga a Paige que se eu for para esta definição aqui tem um campo chamado Título. Então, o que? Podemos acessar isso também. Então temos um título aqui. Queremos título de ponto da página, e para o nosso subtítulo Nós queremos fazer Curly Brace Curly brace página ponto subtítulo. Vamos atualizar sua página e vamos dar uma olhada. Lá vamos nós, diz os serviços. Aqui estão os serviços que podemos fazer no seu foguete agora. Uma coisa a ter em mente é que este subtítulo pode ficar em branco. Isso significa que quando você está editando esta página, ela realmente não precisa estar lá em tudo. É completamente opcional. E assim, em nosso modelo, estamos dizendo que, mesmo que não haja nada aqui, ainda tem este parágrafo tomar. Então, se não há legenda, isso é o que vai renderizar para o nosso ir para o nosso navegador. Nós não queremos necessariamente que não seja apenas uma tag P vazia, e isso vai causar alguns problemas de espaçamento. Então vamos em frente e lançar uma declaração se aqui. Se página ponto subtítulo e vamos em densa que apenas por causa da beleza. E se e quando atualizarmos sua página, você verá que nada realmente muda. Mas quando vemos nossa fonte aqui, se não houvesse texto aqui, todo esse elemento não apareceria. É tudo o que fazemos com isso agora. A próxima coisa que queremos fazer é adicionar algumas cartas aqui, então, basicamente, queremos pegar se voltarmos aqui. Então temos uma página de serviços, e por baixo desta página temos todas essas páginas de serviço diferentes. Na verdade, temos o único. Vou criar mais alguns destes em apenas alguns minutos. O que queremos fazer é pegar esta página filho e exibi-la na página de serviço. Foram duas maneiras de fazer isso. Podemos fazer isso através do próprio modelo, ou podemos fazê-lo através de um método de página chamado Get Context. E é assim que vamos fazer aqui. Nós vamos fazer isso. A perna ultra Tell Way, Tudo bem então novamente, eu só colado em algum HTML aqui. Isto é apenas para a maior parte, é bootstrap padrão com um par de estilos extras que eu adicionei. Isso é tudo na frente e ativos. Se você não tiver os ativos do projeto, você sempre poderá baixá-los para este curso. Eles são chamados de “Rocketman Assets Dot Zip”. Então, se eu voltar para a minha página e eu apenas atualizar isso, nós vamos ver cartão padrão. Então nós temos uma imagem, um título de cartão de descrição e um link, e o que eu quero fazer aqui é antes de qualquer coisa, eu realmente só quero ver como isso vai ficar com vários itens aqui. Então vamos fazer quatro I em 1234 E o que isso vai fazer é loop sobre cada número. Então isso vai me dar e para Então isso vai me dar quatro cartas e novamente que apenas para cada olho na corda 1234 E quando eu atualizar me dá quatro cartas aqui e aqueles são na verdade todos em seu próprio Roe e isso não é o que eu queria. Eu realmente queria que todos estes para estar em sua própria linha bootstrap e permitir que eles se envolvam como isso parece muito melhor. Lá vamos nós. Então agora nós temos quatro cartas aqui, então nós queremos basicamente fazer isso. Então, se houver um serviço de limpeza aqui, se houver outro serviço aqui para outros serviços, queremos preenchê-los automaticamente com uma imagem da página de serviço. Essa é uma página de detalhes de serviço que acabamos de trabalhar no último vídeo com seu título, sua descrição e é Link e naturalmente, sua imagem. Então o que vamos fazer é que somos francos, uma segunda roupa que não precisava disso em sua página de listagem de serviço, vamos sobrescrever um método chamado Obter contato para que seja def get sublinhado contexto. Vai levar auto-pedido todos os seus argumentos posicionais regulares, e são argumentos de palavra-chave. E aqui, o que precisamos fazer é dizer, “ Ei, obter o contexto regular da nossa página. Então o contexto é, Ah, você sabe onde vemos devido a fazer para fazer Vamos voltar aqui nós vemos Curly Chaves página título ponto página, não legendas. Isso é tudo no contexto do nosso modelo. E então o que vamos fazer é adicionar um pouco mais a ele, algo que não vem automaticamente só porque temos um nome de campo. Nós queremos criar algumas coisas adicionais, então nós vamos usar este método, e este contexto é igual a vai executar uma super função classe, vez obter contexto e nós vamos passar em nossos ovos coro ovos e o pedido e contexto de retorno. E o que isso vai adiar quando atualizarmos sua página não é absolutamente nada que possamos ver agora que ela está atualizada. Nada mudou, mas vamos em frente e fazer um pequeno exemplo aqui. Vamos fazer contexto. Olá e este vai ser o mundo do olá. E agora eu vou ter acesso a uma variável no meu modelo chamada Olá todas as letras maiúsculas , porque foi assim que eu escrevi aqui. E se eu apenas fazer isso um g l o. Se eu salvar isso e ir atualizar minha página Olá mundo. Ele aparece como um contexto completamente personalizado, e podemos jogar o que quisermos lá dentro. Agora vou me livrar dessa, porque isso não é um exemplo útil. É apenas um exemplo de como podemos colocar tudo o que quisermos em nosso contexto. Assim como um resumo rápido. Nós basicamente dissemos: “ Ei, Ei, na página vem com um método chamado Get Context. Nós reconhecemos que nós vamos basicamente escrever exatamente a mesma função, exatamente o mesmo método que nós vamos chamar de coisas antigas. Esta é a coisa que vem com a Paige. Isso é o que Super faz, Super diz. Basicamente, ligue para Paige, não entenda contexto. Vamos passar todos os argumentos que normalmente faríamos, e esse será o contexto padrão. Isso é o que a página terá por padrão. Então nós dissemos, “Ei, adicione um pouco mais lá dentro. Eu também não soletrava o mundo certo . Isso é hilário, então. Uma vez que nós adicionamos isso lá, apenas retornou o contexto. E foi assim que tivemos uma variável para o nosso modelo. Essa é a maneira Django de fazer isso. E porque é a bebida de distância. É também o jeito Wag Tail. Então agora o que podemos fazer é dizer que serviços de contexto é igual a, e então nós só temos que obter todas as nossas páginas de serviço agora maneira de obter todas as nossas páginas de serviço . Como temos uma classe aqui chamada Service Page e Django, podemos usar seu O.R M seu gerenciador relacional de objetos, objetos de ponto de página de serviço, e nós poderíamos fazer tudo e isso vai ter todas as páginas. Mas isso não tem o que queremos porque nossas páginas Wang dizem ter um status, eles podem ser um rascunho. Eles podem estar ao vivo, eles podem ser públicos, eles podem ser privados, então nós queremos ter certeza de que estamos usando dot live e dot public, e o que isso vai fazer é que ele vai pegar cada página que está atualmente ao vivo e público e jogá-lo em uma variável que podemos loop sobre serviços chamados. Então vamos fazer isso. Vamos nos livrar desse loop de quatro aqui. Bem, não realmente se livrar dele. Vamos apenas fazer isso quatro I em serviços e vamos passo a passo vai incrementalmente fazer isso realmente funcionar. Agora, quando eu atualizar a página porque eu só tenho uma página de serviço aqui, esta é a página de serviço aqui. Só porque só tenho um. Isso só aparecerá com uma carta igual a essa. Agora, o que acontece se eu duplicar esta página? Isso é copiar esta página e vamos dar-lhe um brilho. Isso é o que esta nova página de serviço vai ser. Preciso mudar mais alguma coisa aqui? Vamos mudar a imagem dele e vou enviar uma nova, está bem? E vamos publicar essa página. Agora, quando eu atualizar esta página, vou ter duas cartas aqui. A razão pela qual tenho de o fazer é porque há duas destas páginas. E se eu dissesse “hey”, na verdade, vamos cancelar a publicação da limpeza. Sim, quero anular a publicação da limpeza. Agora. Espere até dizer, sim, tudo bem. Eu entendo que existem, de fato, algumas dessas páginas. Mas só um deles está tecnicamente ao vivo, então mostre apenas um deles. E é por isso que vemos a única carta aqui. Agora vou republicar sua página, então temos os dois cartões. E agora vamos em frente e mudar cada pedaço disso. Então, em nosso editor, eu vou dizer, para cada cartão em serviço ISM em um cartão de chamada. A coisa mais simples que posso mudar aqui é o título do cartão de título, e se voltarmos aos nossos modelos aqui Modelos, modelos, modelos, estamos pegando todas as páginas de serviço. Portanto, agora temos acesso a cada campo que está disponível em uma página de serviço. Agora temos acesso à descrição, então vamos pegar essa descrição também e substituir esta descrição de um ponto de cartão. Agora, de onde vou conseguir o cartão? Bem, porque os serviços são, é uma lista de basicamente a página de serviço. Vamos percorrer cada uma das cartas porque vamos criar cartas no front-end . E assim, para cada uma dessas páginas, um desses cartões temos acesso ao título e à descrição como uma página normal . Então vamos em frente e salvar isso e nos dar uma atualização e podemos ver que temos a limpeza brilhando. Temos algum ipsum de alarme lá, e agora precisamos mudar o URL e a imagem. Certo, então vamos fazer a imagem primeiro. Eu só vou ser o maior vai para o mais engraçado. Precisamos ter certeza de que temos imagens de cauda, tags carregadas, que nós atualmente dilatamos, e vamos em frente e criar uma nova imagem aqui. Vamos dizer cartão de imagem. E então como se chama esse campo? Chama-se Imagem de Serviço. Vamos dar-lhe uma imagem de serviço, vamos dizer Preencha com 5 73 por 369 como imagem de cartão. E então, assim como em nosso último vídeo, podemos usar a imagem do cartão dot u R l. Também podemos dar-lhe um altar, que é sempre uma boa idéia, mesmo que esteja vazio. Imagem de guarda ponto um lt para a palavra cult. E olha para isso. Isso está começando a se juntar agora quando clicamos nisso, isso não vai realmente ir a lugar nenhum e você pode ver no canto inferior esquerdo da minha tela. Diz para fazer Então vamos consertar isso. Agora sabemos que cada cartão tem uma página. Bem, porque isso é tudo isso é um objeto de página. Acabamos de renomeá-lo para cartão para este loop. Então vamos fazer para cada cartão, gerar um cartão. Você é. Nós vamos colocar a garota aqui também, e nós também vamos colocá-la aqui. Então, basicamente, quando alguém clica em qualquer lugar nesta imagem de texto cartão ou o link vai trazê-los para a página apropriada. Então aqui vamos nós. Eu atualizo a página. Eu clico Limpeza me leva para a página de limpeza. Eu clico para trás, Click Shining me leva para a página brilhante e lá vamos nós. Assim, temos uma página de listagem de serviços, e para cada nova página que você adicionar, ela aparecerá automaticamente aqui. Vai continuar a adicioná-los. Foi um resumo super rápido. Aqui está o que fizemos neste vídeo. Nós adicionamos o título da página de legenda Nós verificamos se o subtítulo da página ainda existe. Na verdade, há outra coisa que devemos diligir é. Há uma descrição? O Eso. Então dissemos: “ Ei, Ei, vamos adicionar algumas coisas personalizadas no contexto do nosso modelo. Então nós adicionamos, Eu recebo o método de contexto. Nós dissemos, Ei, pegue as coisas regulares que esperam até sempre nos dar e depois adicione algumas coisas extras em seu Isso está usando Django Zo R M Então nós estamos pegando todas as páginas de serviço estavam se certificando de que todas as páginas do ar ao vivo e público, e estamos simplesmente devolvendo-os ao contexto. Então, em nosso modelo, onde o contexto está sendo injetado, podemos percorrer cada serviço. Chamámo-lo de cartão. Então, para cada iteração que chamamos de cartão, nós criamos uma imagem, dar-lhe um título ou exibiu o título, exibiu a descrição e deu-lhe um seu l. Foi uma última coisa que eu não fiz é que eu esqueci que o serviço a descrição da página é, de fato, opcional. Então temos a descrição da página de serviço. Em branco é igual a verdadeiro. É um campo opcional, por isso vamos dizer se cartão essa descrição e simplesmente terminar se agora ele não vai mudar a exibição porque eles têm uma descrição. Mas se não houver um, não haverá uma tag de parágrafo vazia e seu modelo de objeto de documento em sua página em seu html. E essa é apenas uma das maneiras que podemos criar uma página de listagem e listar todas as páginas filhas abaixo dela, assim como fizemos aqui. Existem algumas outras maneiras de o podermos fazer, mas esta é, de longe, a mais simples. 12. Adição de páginas: até este ponto, temos adicionado alguns campos em nossas páginas de serviço chamadas Página Externa e Página Interna. E o que estamos basicamente dizendo no template é, se houver uma página interna, use você, Earl, Earl, ou se houver uma página externa, use esse texto e agora é um bom momento para adicionar alguma validação de página. Então, se ambos o ar preenchido, vamos adicionar um pequeno erro que diz, Ei, apenas um destes pode ser preenchido a qualquer momento. Então eu vou abrir meu editor e em meus modelos de serviço dot pie file. E se eu fechar, podemos realmente ver onde isso é serviços e, em seguida, modelos dot pie. Vamos adicionar outro método aqui chamado Clean. Vamos dizer, defina limpo que vai tomar auto super limpo, e isso só vai fazer a sua limpeza regular. Então, sempre que você adicionar conteúdo para a página apenas vai escapar seu conteúdo para que possamos, você sabe com segurança ser inserido em seu banco de dados e você não precisa se preocupar com injeções SQL e coisas assim. Agora o que vamos fazer aqui é dizer, se algo causa e erro, isso é realmente tudo o que estamos fazendo nisso. Então, se você apenas manter isso em mente essas duas linhas em mente, isso é realmente muito fácil. Então, podemos dizer se auto ponto página interna e auto-ponto página externa ambos os campos são preenchidos , e isso é realmente saber o que queremos. Não queremos que ambos os campos sejam preenchidos. Queremos que apenas um desses seja preenchido, e isso ajuda a orientar suas pessoas de entrada de conteúdo para fazer basicamente as coisas certas. Eu não preencho em ambos os lugares porque isso pode ser confuso. E se mais alguém viesse à sua página e dissesse: “ Ei, Ei, há um link aqui, nada aqui, qual deles vai ser usado? Eu não sei, mas isso vai fazer é jogar um erro e dizer, Ei, Ei, só um desses poderia ser usado em um determinado momento. Então agora vamos em frente e adicionar um erro Então vamos levantar um aumento excepcional e erro aqui, então isso é praticamente tudo jangle neste ponto. Vamos levantar um erro de validação e vamos dar a este um dicionário, e o 1º 1 será qualquer que seja o nome do seu campo. Então o que isso está dizendo é, se há, fato, uma página interna e uma página externa, que é esta declaração se aqui, queremos lançar um ar em um desses ou ambos. Então eu vou jogar no ar no campo interno da página primeiro. Então essa vai ser a chave para o primeiro valor do dicionário aqui. E então, novamente, eu vou dar. É só mais uma área de validação. Parece um pouco estranho que estejamos aninhando isso. Mas é só isso que estamos fazendo aqui. E podemos dizer que neste momento, por favor, selecione apenas uma página quatro, Digite um externo, você é l. Então agora isso é tudo bem e elegante. Mas se você realmente for salvar esta página, você vai ter um problema. Precisamos importar ar de validação. Ainda não o utilizámos e, por isso, ainda não o importámos. Então vamos voltar para o topo da nossa página aqui. Agora vamos fazer a partir do Django decor dot Exceções, validação de importação. Erro. É tudo o que estamos a fazer. Eu vou deslizar de volta aqui para baixo limpar isso um pouco. Salvar Django decor dot Exceção não existe. Isso é porque era uma fita ou falta de erro de digitação. É o Django. D'accord fora exceções. Lá vamos nós. Agora vamos em frente e tentar salvar esta página. O que acontece quando eu tento salvar um rascunho? Esta página não pôde ser salva devido a erros de validação que parecem bons. Está parecendo bom. E aqui está o texto exato que escrevi. Selecione apenas uma página ou insira um euro externo. Não, não há erro aqui, mas podemos adicionar um muito, muito facilmente. Então vamos em frente. Desça aqui para baixo e eu vou fazer isso um pouco menor. tamanho se encaixa em uma linha que é muito pequeno, e eu não sou uma cópia e cola isso porque tudo o que precisamos para dio é mudar o nome do campo, e eu suponho que devemos ter uma vírgula lá porque este é um dicionário. Então esta é a primeira chave com a primeira mensagem aérea, e esta é a segunda chave com a segunda mensagem de erro, e este texto, de modo algum, precisa ser exatamente o mesmo. Então vamos apenas fazer isso aquilo aquilo aquilo que os mortos eu vou salvar isso e você vai ver que o primeiro ar vai dizer algo muito educado. E o segundo erro vai ter um monte de doenças. Há anúncios nele e vai dizer exatamente o mesmo texto depois. Vamos em frente e salvar rascunho. A página não pode ser salva. Você faz o ar de validação e por favor selecione uma página ou digite um externo você bem, e no 2º 1 aqui em baixo, temos dito que isso que aquele morto por favor, selecione apenas uma página ou digite um externo você Earl. Então agora temos dois erros para validação básica. Então, na verdade, vou limpar isso porque eu não gosto de todas essas cabeças lá dentro. Não parece muito agradável. Ele até jogou isso em uma variável para realmente limpar isso. E agora, neste ponto, tudo o que temos que fazer é, digamos livrar do Espaço X. Nós não queremos necessariamente vinculado ao Espaço X. Em que página estamos na limpeza página? Então vamos em frente e vamos publicar isso agora e funciona. Não há mais erros de validação. Ele realmente nos permite salvar a página, que é realmente, muito boa notícia, porque até este ponto podemos adicionar um você interno e externo Earl. Agora vamos dizer que cada página precisa ter uma ou outra diz Vá em frente, limpe esta escolha. Não há página interna e não há página externa e guardou perfeitamente. O que podemos dizer agora é, eu vou fazer isso um pouco maior novamente, se não auto morreu página interna. Então, se não há página interna e não auto-externa, então não há página interna e não há página externa, também podemos levantar um ar aqui. Então vamos em frente e levantar um erro de validação. Isto vai ser um dicionário. E mais uma vez, ele só se parece com isso. Temos uma chave com erro de validação e, em seguida, uma segunda chave com outro ar de validação. Isso é realmente tudo isso. Parece que queremos colocar essas chaves como as páginas internas e externas e o ar de validação vai ser. Você deve sempre selecionar uma página ou inserir um externo você Earl e eu não sou uma cópia que porque eu gosto desse texto e Isso é bom o suficiente para ambos os campos que eu estou trabalhando com. Então, vou guardar isso. E agora, quando salvamos nossas páginas procurando duas coisas, se ambos o ar se encheu, então isso vai causar um erro. Vai lançar no ar um pouco de ar de validação. E se nenhum desses ar preenchido, ele também vai lançar ar de validação. Então vamos em frente e economizar rascunho. Ei, olhe isso. A página não pôde ser salva devido ao ar de validação. Você deve sempre selecionar uma página ou inserir um You Earl externo diz a mesma coisa aqui em baixo. Texas Nice e ler seu campo de texto em si é agradável e vermelho, para pessoas de entrada de conteúdo pessoas sabem exatamente o que deu errado. Agora vou escolher qualquer página. Ah, e eu vou, de fato, escolher a página inicial publicada, e ela publica perfeitamente bem e, em última análise, isso é tudo o que fazemos para adicionar um erro de validação para nossos campos de página. Então nós temos uma página aqui chamada Página de Serviço, e queremos ter certeza de que há sempre um conjunto de páginas interno ou externo, e há apenas um deles sendo definido em um determinado momento. 13. Adição de um cabeçalho e Footer: Se dermos uma olhada em nossa página agora, ela parece vazia. Temos serviços, Page, Page, temos páginas de detalhes de serviço e temos uma página inicial, mas não temos como nos locomover. A página inicial tem um banner agradável. Isso é legal, mas não há cabeçalho ou rodapé. Então, como é que vamos dar a volta? Bem, vamos em frente e adicionar um cabeçalho global e um rodapé global ao nosso site Wag Tail. Então, as primeiras coisas primeiro. Vou fechar isso e abrir base dot html e que vive dentro da nossa pasta Rocket Man e dentro da subpasta chamada Templates. Agora aqui, eu vou simplesmente dizer, incluir um arquivo inclui cabeçalho dot html e isso é tudo que eu estou indo para dio e abaixo de todo o meu conteúdo, eu vou simplesmente incluir um rodapé dot html. Agora isso vai procurar arquivos de modelo. Este é um arquivo de modelo. Estamos trabalhando com a base um, e ele vai olhar dentro de nossa pasta template que está aqui para outra pasta chamada Includes e, em seguida, um arquivo chamado Header. E, em seguida, ele também vai olhar dentro da pasta inclui mais uma vez para um arquivo chamado Rodapé Agora se nós nos salvar e nós atualizar nossa página, sim, modelo não existe. Nós já vimos isso antes, e isso realmente diz que ele está procurando um modelo. Então, na pasta templates ou em uma dessas pastas de modelo para uma pasta chamada Includes e um arquivo chamado Header dot html. Então vamos em frente. Criar novo arquivo aqui inclui cabeçalho dot html. Então eu apenas criei uma pasta e um arquivo, e eu também vou ir em frente e criar rodapé dot html e estes eram arquivos totalmente vazios . Não há nada lá dentro. Então, neste ponto, nós efetivamente não fizemos nada ao nosso site. Então, se abrirmos cabeçalho dot html, podemos ter basicamente qualquer coisa. Então vamos fazer isso. Div. Este é o Cabeçalho Cool. Isso vai aparecer em todas as páginas. Então, se eu for para os serviços de corte, este é um cabeçalho. Aparece lá, vá para uma página de detalhes do serviço, ele ainda aparece. Está sempre lá, então vamos fazer com que isto pareça bonito. Vamos fazer com que isto pareça uma navegação adequada. Tudo bem? Então tudo o que eu fiz aqui foi basicamente pegar uma navegação de get bootstrap dot com e eu injetei aqui. Eu fiz uma coisinha. Eu adicionei um link. Nem sequer é um link real, e eu dei-nos um parente ligado ao nosso logotipo. É isso. Então, quando eu ir e atualizar sua página, vamos ver que realmente temos o logotipo Rocketman e um único link, e isso vai aparecer novamente em cada página. Então, enquanto aperto o botão Voltar, atualize esse. Lá vamos nós. Estou na página dos serviços. Posso ir a qualquer uma das páginas de detalhes, e esse cabeçalho está sempre lá. Agora, há duas coisas que queremos fazer aqui. Primeiro, queremos não vincular diretamente ao Static. Você pode ver isso em outro esperar até projetos que você pode até ver isso. Outro projeto do Django onde as pessoas apenas se vinculam diretamente à pasta estática, e para muitos propósitos, isso é realmente OK. Mas, para alguns sites, talvez você não queira que sua pasta estática seja chamada de static. Você pode querer que seja algo diferente. Eu não sei por que você iria mudá-lo, mas algumas pessoas só querem que ele mudado então o que nós vamos fazer é usar a tag de modelo estático estático, e nós vamos simplesmente dar a isso uma string e dizer, , onde quer que a estática seja se mudamos isso agora ou se mudamos no futuro, onde quer que a pasta esteja jangles vai descobrir onde essa é a subpasta de imagens dentro da pasta estática novamente, não sabemos onde isso está, então é muito relativo neste ponto e o logotipo do arquivo ponto PNG Agora, para fazer este trabalho, nós realmente temos uma carga isso aqui. Então vamos carregar a tag estática. E quando atualizamos sua página, você não vê nada muda. E mesmo se olharmos para a fonte aqui, ele parece exatamente a mesma barra estática imagens barra logotipo ponto PNG Parece que nada mudou, mas na produção, por exemplo, se você tem que esperar até ponto io e nós clicar com o botão direito e inspecionar aqui, você pode dizer sim. Isso também está usando estático. Eles poderiam ter usado qualquer outra pasta. Eles têm uma subpasta chamada Image, mas então eles têm impressões digitais ativadas. Então, cada vez que eles coletam estática cada vez que eles tinham mais ativos para o site. Você vai ter um hash aleatório e efetivamente o que isso faz. São bustos de dinheiro, todos os seus bens, todos os seus CSS, todos vocês, JavaScript, todas as suas imagens. Então, isso é se você estiver usando a Amazon s três ou nuvens ou espaços oceânicos digitais ou qualquer coisa que possa ter descontá-lo imediatamente é preso. E é por isso que normalmente, nós gostamos de usar estática. Então tem benefícios, sério? A outra coisa que fiz foi adicionar um Lincoln aqui. Então, se eu voltar para a nossa página, eu só tenho um link, e o que eu vou fazer aqui é que eu vou realmente fazer outro loop. Então, para eu em 123 eu só quero três desses itens. E então eu só fiz alguns em amassar e adicionei o final de quatro tag lá dentro. Vamos em frente. E eu também. Este será o nosso cardápio no futuro. Então, para cada olho, para cada inteiro em 123 mostrar link um link para link três. E assim, temos a ligação um ligada à ligação três. Por favor, não vás a lado nenhum. Poderíamos codificar isso se quiséssemos, mas na verdade não sabemos se nosso futuro cliente ou futuro Eus vão manter esses links. Então, por exemplo, eu poderia dizer Link um sempre vai para serviços de corte. Mas e se um dia eu for à minha página de serviços e disser, não quero que seja chamado de serviços? Eu queria ser chamado de serviços de manutenção de foguetes. E talvez isso seja melhor para S. E. O. Bem, de repente, meu link que vai para os serviços, esta página vai quebrar, então nós não queremos fazer isso também. Na verdade, não vou dizer isso. Vou manter os serviços de adição e é assim que adicionamos um cabeçalho. E a seguir, vou adicionar um rodapé. Então, se voltarmos para a nossa base, temos inclui Rodapé. Mas nossa página de rodapé atualmente não tem nada nele. Ok, então novamente, eu apenas colado Ah, modelo, rodapé aqui. É um monte de e-mails e tudo mais. há realmente nada acontecendo aqui, exceto que há um para loop toe criar links falsos novamente, assim como fizemos no cabeçalho e ah sim, é sobre isso. Então vamos em frente e dar uma olhada nisso apenas como uma prévia rápida. Então eu vou me livrar desse pergaminho para baixo, e eu apenas atualizei minha página e lá vamos nós. Nós temos uma visão global para uh, texto lá dentro, um botão que eventualmente vai para algum lugar. Eu acho que ícones de mídia social horas para fazer é links 12 e três. E então esses são todos os recursos que vamos adicionar em um pouco mais tarde. Mas por enquanto, é bom saber que estamos começando a criar um site que se parece com algo realmente se parece com um site. Pelo menos eu posso chegar à página inicial de qualquer página neste momento e em futuras lições, vamos adicionar um cabeçalho adequado aqui. Ah, navegação adequada. Então vamos criar itens de menu. Vamos criar três deles lá dentro. Nós vamos então copiar, no entanto, para no entanto, que eles também loop através dos links e criar exatamente os mesmos links aqui em baixo. Nós vamos adicionar configurações globais de site para o contato conosco para as horas de configurações de mídia social para os links. Vamos certificar-nos de que isto é personalizável. Isto é personalizável, invisível. E esta página isso para fazer botão realmente links para uma página adequada. Então vamos chegar a tudo isso na estrada. Mas, por enquanto, vamos mantê-lo aqui como espaço reservado. 14. Adição de ferramentas de depu: Ok, nosso site está começando a ficar complexo o suficiente para que nós provavelmente devemos começar a considerar algumas ferramentas de depuração, algo que vai nos ajudar ao longo do caminho para descobrir as coisas. Descobrir se há um problema que não nos deparamos com nada, mas vai ajudar-nos ao longo do caminho. Então vamos instalar duas coisas. O 1º 1 que vamos instalar vai ser criar novo arquivo aqui vai ser chamado Django Debug Tool are, e o 2º 1 vai ser chamado P You d Be. E isso é um píton interactivo de bugger. Então é um pouco melhor do que o “D” normal. É uma ferramenta. Eu gosto destes dois ar totalmente opcional. Se você tem melhores ferramentas de depuração que você prefere usar, definitivamente usá-los. Mas estes ar para isso. Absolutamente adoro isso. Eu praticamente coloquei em todos os projetos só porque me ajuda tremendamente. Então vamos em frente, abra nosso terminal e cancele nosso servidor. E enquanto estamos dentro do nosso ambiente, então qualquer ambiente virtual que você está usando, seja Pippen ven vor v invy Docker, vagabundo, qualquer coisa assim. Apenas certifique-se de que você está dentro do seu ambiente e digite Pip. Instale Django Debug toolbar e você pode ver que instalado com sucesso Jingo Debug toolbar. A versão dois pontos uma vez permite que você pip show Django debug para uma barra, e isso vai nos dar as versões reais. Temos um nome aqui. Esse é o nosso nome. E nós também temos uma versão que é 2.1 tão legal Nós temos isso instalado em um ambiente virtual . Agora a primeira coisa que queremos fazer é abrir requisitos dot txt Claro, o que quer que esteja lá, vamos em frente e criar um novo arquivo oferecer este chamado dev dot txt e excluído. A razão pela qual fizemos isso é porque eu quero dev dot txt e requisitos dot txt toe live um ao lado do outro em nosso diretório de projeto para que você possa ver que eu tenho requisitos para fora txt na mesma pasta. Eu tenho dev dot txt Agora o que nós vamos dizer interior dev dot txt é exigir os requisitos dot txt arquivo e abaixo dele, podemos colocar Django debug Toolbar é igual a igual a versão 2.1. Então, agora, quando você gasta um novo projeto. Em vez de fazer pip install, traça nossos requisitos como o que normalmente fazemos para um novo projeto. Você pode fazer Pip Install Dash são dev dot txt e ele irá instalar de seus requisitos de base, mas também os requisitos de desenvolvimento, como depuração para uma barra ou P. Você d ser Não, mas instala-lo em nosso ambiente virtual. Mas isso não está instalado no nosso projeto. Então vamos em frente e fechar isso e aquilo e vamos abrir o Dev Dot Pie. Então estas são as nossas configurações de desenvolvimento. Podemos adicionar nossas próprias configurações de desenvolvimento e aqui, ou podemos substituí-las com qualquer configuração local que queremos em um arquivo de pizza de ponto local. Eu só vou jogá-los aqui porque quando eu cometer isso, eu quero que outras pessoas tenham essas mesmas mudanças. Muitas vezes nós realmente não cometer arquivos locais DUP altos ou arquivos locais em tudo apenas porque é um pequeno ajuste extra que você precisa fazer para colocar o projeto em execução em seu computador. Enquanto eu quero que todos tenham o, então eu vou colocar isso no arquivo do Dev Dot pie agora. A primeira coisa que eu quero fazer é adicionar isso aos meus APs instalados. Vamos fazer APS instalado e isso está vindo da base dot pie. Então, se abrirmos com base no Pie Online 26 até a Linha 52, temos nossos APs instalados . Então nós estamos basicamente dizendo, Ei, Django, use as configurações básicas Isso é legal. E também pegue seus APs instalados e adicione um pouco de Maurin lá. Então vamos em frente e fazer Plus é igual. E vamos lançar uma lista de itens aqui, e esta lista vai ser barra de ferramentas de depuração. E neste momento, podemos reexecutar o servidor dela se quisermos ver se alguma coisa aparece algum tipo de erro. Olhe para isso. E diz: “ Ei, Ei, Django, barra de ferramentas de depuração Middleware está faltando. Devemos adicionar isso ao nosso middleware. Ok, vamos em frente e adicionar isso ao meio dela onde agora tudo isso pode ser encontrado na barra de ferramentas de depuração jangle. Leia-me as instruções. Então, se você for para, eu acho que é ah, ler as docks ou Django debug toolbar dot Leia as docks. Um Google rápido irá dizer-lhe exatamente onde isso está. Ele lhe dirá exatamente como instalar isso. Isto é realmente apenas eu estou fazendo a maior parte disso da memória aqui, então vamos fazer middleware. E novamente, vamos adicionar ao nosso middleware, e vamos dar a isso uma lista do middleware da barra de ferramentas de depuração. O que foi aquela reclamação sobre este aqui? Queremos selecionar tudo isso e colá-lo lá dentro. É disso que se está a queixar, e por último, esta é estranha. Mas Django Debug Toolbar requer que nós demos algum tipo de I p interno que é permitido usar . E para isso, só queremos usar 127.0 ponto 0.1. Esse é o seu host local Salvar. Vamos verificar o nosso terminal. Tudo parece bem em terra terminal. E vamos atualizar nossa página aqui e neste momento você realmente não pode dizer, mas está tentando funcionar. Temos mais um passo a fazer aqui, mas está realmente tentando funcionar. Então, geralmente vamos ver um pequeno ícone do Django aqui em cima, e essa será a nossa ferramenta de criação de perfil. Então a última coisa que precisamos fazer é abrir nosso “você “ou então “dot pie “e isso só vive sob o “Rocket Man”. Aqui temos uma pasta Rocket Man, ao lado de definir estático e modelos. Nós temos um arquivo chamado você URLs dot pie e aqui nós queremos basicamente adicionar alguns extras você RL's para que a barra de ferramentas de depuração jangle é permitido para mostrar o que ele quer mostrar a você . Então vamos entrar aqui devido a fazer para fazer configurações. Vamos dizer, se a depuração de configurações for verdadeira, isso significa que estamos desenvolvendo localmente. A depuração só é verdadeira quando você desenvolve localmente. Uma vez que você entra em produção, você deve ter desmascarado ganhos. Muitas vezes você empurra Engine X ou algum outro tipo de aplicativo servindo seus arquivos estáticos. Mas, por enquanto, está tudo bem. Vamos importar a barra de ferramentas de depuração, e não precisamos fazer nada com estes. E vamos apenas ir em frente e adicionar barra de ferramentas de depuração para padrões rul. Então, novamente, isso só vai aparecer para o nosso desenvolvimento local. Então vocês são todos padrões, é igual aos seus padrões antigos, e vamos mudar isso de uma maneira diferente. Vamos adicionar padrões de Uriel no final. Você é L padrões é igual a qualquer que seja a lista mais padrões neurais existentes. Mas esse caminho sublinhou. Sublinhado de depuração. Barra sublinhado. E então vamos fazer incluir depuração em uma barra que você ou então agora que vai quebrar porque provavelmente não temos caminho ou incluir instalado ou incluído da maneira correta. Provavelmente está instalado para chegar ao Django, mas provavelmente não é importado da maneira que esperamos que seja importado. Então vamos voltar ao topo. Temos o Django você ou então temos certeza de que você está mais, mas queremos do django dot urals importar Incluir no passado. Certo, vamos voltar e atualizar nossa página e ainda não está aparecendo, então obviamente fiz algo errado. Voltar para dev dot pie instalado APS middleware instalado. Não, era suposto ter sido instalado. Não. Ervilhas internas. Vamos em frente e dar uma atualização e tem ah, aí está. Então, acho que é um pouco irritante. Quero dizer, há alguns passos, mas novamente, isso está tudo documentado neste vídeo ou na barra de ferramentas da selva Leia os Patos . Então aqui temos jangle debug barra de ferramentas. Ele nos diz que a versão que estamos usando o tempo de processamento nos mostra ou configurações. Quantas consultas SQL. Este é um grande problema porque você está trabalhando com um sistema de gerenciamento de conteúdo. Você pode acabar inchando isso para ser muito, idealmente, idealmente, atirar para menos de 100 consultas, se você puder. Se você vir um site que tem 1000 consultas, algo definitivamente precisa mudar. Isto é, isso é terrível. Quantos arquivos estáticos estamos usando e realmente voltar para as consultas SQL? Podemos ver quais foram executados aqui. Isso é muito legal Weekend Diga, Ei, explique-se e ele faz. Isso nos diz o que está acontecendo. Isso é muito legal para que possamos ver nossos arquivos estáticos. Também podemos ver nossos modelos aqui. Nós renderizamos 13 modelos, então temos uma página de listagem de serviço melhor. Sabemos de onde vem isso. Isto é realmente útil. Quando você começou um projeto existente e você é como, Oh, onde está este modelo? De onde vêm esses modelos? Não sei de onde estão vindo. Isso lhe dirá exatamente do que está vindo. Isso vem de serviços barra página de listagem de serviço. Isso é muito legal. Sabemos que está usando baseado em HTML. Tem um monte de coisas de Wag Tail aqui. Então ele está usando a barra de usuário mais peso dizendo coisas homens, e nós temos um incluir para Header e incluir For Our Rodapé estava nos dizendo todos os tipos de coisas, até mesmo nos diz o que está acontecendo com descontar e sinais e registro e tudo essas coisas boas . Então esta é uma ferramenta completa de criação de perfil. Os maiores ajudantes aqui são suas consultas SQL e seus modelos. Se você tem um site que está carregando muito, muito lento ou você não sabe de onde um modelo está vindo ou de onde alguns dados estão vindo em um determinado modelo, isso vai ajudá-lo tremendamente. Então isso é para uma ferramenta número um. O número dois se chamava P você seria. Então, vamos voltar aqui. Este é realmente super fácil de instalar, então fazemos Pip instalar P você d ser. Vamos em frente e fazer pip show p youd Be e ele está usando 2019 dot para ir em frente e reiniciar o nosso servidor com Python Men Shop. Eu rodo servidor 0.0 dot 0.0 cool e 8000 e poderíamos fechar todos esses. E vamos abrir o dev dot txt novamente. E vamos colocar P D. B é igual a igual a 2019 ponto também. Então estamos versão bloqueando a versão do PDB que estamos usando em nosso projeto em apenas os requisitos de desenvolvimento . E para este, isso é literalmente tudo o que precisamos fazer. Então vamos dar uma chance a este. Vamos para modelos de serviço e para ativar este, isso é super fácil. Você só joga onde quer que esteja, tendo alguns problemas quando precisa. Você precisa depurar algo e você apenas digitar import você d ser dois-pontos e, em seguida, p u 0.2 chaves de banco de dados. E isso vai executar o seu “d bugger” para você. Então, o que? Isso vai para você? Isso vai me dizer tudo a que tenho acesso nesta visão em particular? Todas as variáveis, todos os dados, tudo. Vamos em frente e criar uma nova variável aqui. Apenas como exemplo, é chamado de Companhia Espacial é igual a X. Certifique-se de que nossos servidores rodando Ok, parece um ok. Agora vamos voltar para a nossa página de serviços e vamos apenas atualizar esta página. A razão pela qual estamos nesta página, a propósito, é porque temos uma página de listagem de serviços e estamos adicionando contato personalizado. Então nós temos alguma lógica personalizada aqui, não realmente lógica, mas alguns dados personalizados que queremos lançar no modelo. E talvez precisemos checar isso e descobrir o que está acontecendo. Então, entre a página de listagem de serviço e uma atualização de sucesso, e parece que ele só vai carregar para sempre. Mas se você inicializar seu terminal novamente, você vai ver esta página extremamente feia agora. Normalmente há um pequeno pop up no vento no meio lá, você só tem que bater. Eu acredito que é a seta certa e depois entra, e isso vai te trazer aqui. E então você pode bater esquerda e direita, e você pode passar por aqui. Eu costumo ir direto para a seção direita. Você pode ver que a coisa verde está mudando lá, então temos acesso aos guardas. O contexto, os argumentos de palavra-chave, que tiveram acesso a todo o PP. Você seria coisa que não precisamos que já estivessem funcionando. Ele pedido está executando um pedido de uísque. Self é a página de listagem de serviços. Nossa variável personalizada chamada Space Company, é igual a X, e é isso. Temos outras coisas lá dentro que não vamos entrar porque esta é a maior ajuda. Então vamos para o nosso contexto. Vou apertar a tecla da barra. Isso está logo acima da minha chave de retorno, e isso só vai abri-lo contra não super intuitivo, mas é super útil. E no contexto que temos página auto-solicitação e serviços para que possamos realmente ver que quando voltamos aqui para o serviço página Listing, usamos página ponto algo página ponto ponto fotos pagas. Subtitle E então, se eu abrir este novamente usando a mesma chave, podemos ver tudo o que está disponível para nós no modelo. E desde então, role para baixo até eu ver a palavra título dot tono, onde você está? Um título de CEO lesma todo o tipo de coisas. Aqui está o nosso subtítulo. Todos os serviços que podemos fazer no seu foguete. Isso é exatamente certo. E este é o título da página é apenas chamado de serviços. Esta é a nossa página. Você é l Nós já usamos esse antes, e agora podemos realmente ver tudo o que está aqui. Temos um caminho completo. Se você precisar de todo o tipo de coisas, eu vai ser exatamente a mesma coisa. Self e Paige são idênticos, mas o que adicionamos, talvez o que queremos depurar são esses serviços. E isso porque se voltarmos aqui, dissemos que serviços de contexto é igual a objetos de tiro pagos por serviço que vivem esse público. Talvez não saibamos tudo o que está lá dentro. Não conseguimos descobrir alguma coisa. Parece que está jogando alguns dados misteriosos em nós para que possamos entrar aqui. Podemos abrir este e ele diz zero e um, então nós automaticamente sabemos que é uma lista. Não é um dicionário. Os dicionários chamaram Kees. Listas têm índices ou índices apenas para o seu índice zero e um torna uma lista. Então a primeira página vai aparecer, e esta é a página de serviço que poderia realmente ver aparecer. Então zero que é o 1º 1 é uma página de serviço, e então poderíamos usar rolagem todo o caminho para baixo, obtém todos os tipos de coisas Paige. I d. Número cinco. Isso é puro. É a vida? Sim, esse é ao vivo. É fechadura? Não. Não está trancada, Max Count. Nós não aprendemos sobre isso, mas nós vamos, Oh, tipo de coisa em ano e lá faz título. O 1º 1 é a limpeza. Alguém continua caindo e vá para o número dois, seu índice número um. Mas é o 2º 1 da nossa lista. Basta ir até onde diz o título dos pontos novamente brilhando. Então os primeiros serviços de limpeza do segundo serviço estão brilhando, então isso está nos dizendo exatamente o que queremos. Ou neste caso, eu quero ver apenas os títulos, que seria limpar e brilhar nessa ordem, limpar e brilhar. Então isso é muito legal. Essa é outra maneira de realmente apenas depurar o que está sendo apresentado a você em um contato particular . Então, para nós, estamos nos contatos. Aqui é onde ele está sendo executado bem aqui, e este no canto superior direito são todos os dados a que temos acesso. Então, se você está se perguntando, o que é isso? Um nome de campo de título de CEO? Basta entrar aqui, olhar para o nome do CEO ou você pode olhar para a espera até o código-fonte e então, finalmente, para sair daqui, você apenas aperta a letra Q para desistir. Vai reclamar. Sim. Vai reclamar. Nenhuma exceção. Mensagem fornecida. Isso está tudo bem. E vamos nos livrar disso. Não faça isso também. Medo de que o servidor seja reiniciado sozinho, mas se isso não acontecer, você sempre pode reiniciá-lo manualmente. Refresher Pidge. E vimos sobre barra de ferramentas de depuração e tudo mais. Então lá vamos nós. Nós temos Django debug toolbar e P você d ser instalado. Também adicionamos um novo arquivo chamado dev dot txt. Então, sempre que você instalar este projeto, você vai digitar pip install Dash são dev dot t x team e ele irá instalar tudo resto a partir dos requisitos, não txt file, mas também Django debug toolbar e P você d ser. Espero que isso te ajude no futuro novamente se tiver suas próprias ferramentas e não gostar dessas, desconsidere totalmente isso. Mas essas duas ferramentas me ajudaram tremendamente ao longo dos anos e até hoje eu ainda o instalei em quase todos os projetos só para que eu possa ter aquela pequena mãoextra mão 15. Página de Flex/Misc: Tudo bem, vamos em frente e criar outro tipo de página. Agora, esta não é a coisa mais excitante que temos feito até agora. Mas vamos criar um tipo de página normal. Vou chamar-lhe uma página flexível. Algumas pessoas chamam de página genérica ou página básica. Algumas pessoas chamam de página diversificada ou uma página padrão, mas realmente, a idéia é que temos algum tipo de página. Ele não tem nenhum propósito real, exceto para servir conteúdo. Portanto, esta página não vai necessariamente estar relacionada com ah, blawg ou serviços. Não é como uma página de detalhes de serviço onde ele realmente tem um propósito específico. Esta é apenas uma página de conteúdo regular. Não, ainda não vamos adicionar conteúdo, mas precisamos criar esta página para futuras Lições. Vamos em frente, ative seu ambiente virtual e vá em frente e execute. Python conseguiu. Eu começo o aplicativo. Eu vou chamá-lo de Flex, e então vá em frente e execute seu servidor com Python gerenciado, eu rodo servidor Porta 8000 e em nosso código, eu vou abrir a base dot pie e logo abaixo dos serviços eu tenho um novo aplicativo aqui chamado Flex e você pode realmente ver no meu editor aqui. Tenho uma nova pasta chamada Flex, por isso vou guardar e abrir o Flex. E eu vou me livrar de algumas coisas que eu sei que não precisamos porque Wag Tail cuida de muitas coisas para nós. Então, vistas para cima. Não precisamos. Não estamos fazendo testes. Não estamos a fazer nada com o nosso administrador. Queremos manter as migrações nele. APs e modelos, essa torta e realmente tudo o que vamos fazer é criar uma página regular mais uma vez. Então nós vamos fazer a partir de esperar até a página de importação de modelos de ponto núcleo ponto, e então nós vamos criar uma nova página chamada Flex Page, e ele vai apenas herdar o modelo de página. E por enquanto, podemos passar, e isso seria bom o suficiente para criar uma página. Agora vamos realmente dar um passo adiante. Vamos fazer classe Metta, e vamos dar a isso um ver nomes vangloriar. Então vamos ver que podemos realmente mudar o nome aqui, modo que é devido para ambos Nome é igual a flex, e seria normalmente chamado apenas Flex Page. Mas vamos chamá-la de página Flex Miscelânea, e o verboso chamado plural vai ser flex páginas faltando assim. Agora, se abrirmos um navegador e eu estou apenas editando a página inicial aqui, se eu for para Adicionar Child Pidge, nós temos uma página flexível misc aqui. Eu só vou fazer isso um pouco maior agora quando eu clicar nisso porque eu não fiz migrações, Eu espero que isso me jogue o clássico 404 Nós já corremos para este ar uma vez, e isso é muito esperado comportamento. Então vamos voltar para o nosso terminal. Cancele isso, e eu só vou limpar essa página fora. E agora eu vou executar python gerenciar dot pie, fazer migrações. E então, mais uma vez python gerenciado, eu migro e novamente, o que isso faz é quando você faz migrações como esta apenas criou um arquivo chamado 0001 sublinhado inicial dot pie. E isso realmente apenas escreve instruções python IQ para o que o Django deve fazer para começar a moldar seu banco de dados para que esta página realmente funcione para nós e, em seguida, quando executamos Python gerenciado high migrate. aplicará este novo arquivo de migração, e ele irá realmente estruturar a página que estamos procurando Teoh para criar em nosso banco de dados. Então ele gerencia nossa tabela de banco de dados em colunas para nós. Agora vamos em frente, execute novamente nosso servidor, feche isso e atualize. E em um segundo, isso vai carregar. Agora podemos criar uma nova página flexível. Então, vamos chamar isso. Eu não sei sobre nós. Só uma página genérica. Agora não há mais nada nesta página. Vamos mantê-la assim só por um tempo. Só precisamos que esta página esteja pronta e funcionando. Então vá em frente, publique esta página. As coisas estavam bem, quando clicamos de você ao vivo. Já vimos isso antes. Já vimos isso várias vezes. Nós estamos indo para obter um modelo, não existe erro. E assim como esse modelo não existe em cerca de nós. Ele está à procura de flex slash flex sublinhado tiro pago. HTML. Podemos realmente ir e mudar exatamente quais páginas estão procurando. Sabemos que se olharmos aqui usando o motor Django, esse tipo certo de nesta área de ar da mão direita. Podemos ver que ele está procurando Flex Page na pasta Flex, que vive na pasta Modelos. Ele também está procurando no aplicativo doméstico e no aplicativo de pesquisa e, em seguida, também dentro de todos os nossos pacotes. Vamos em frente, fazer esse modelo realmente existir. Abra nosso código e eu vou fechar tudo isso abrir, Rocket Man, Rocket Man, entrar em modelos e vamos criar uma nova pasta aqui chamada Flex e, em seguida, uma nova página chamada Flex page dot html. E isso é exatamente onde Wag caudas procurando este modelo. Em seguida, precisamos realmente estender isso a partir de uma página. Vamos estender isso a partir de email hte baseado. É daí que todo o nosso HTML vai vir originalmente, e nós vamos apenas sobrescrever um pouco aqui. Vamos criar um novo bloco, e vamos chamá-lo de conteúdo. Agora, se você está apenas se juntando a nós, se você abrir com base em HTML, nós temos um bloqueio aqui chamado conteúdo banner e Js extras. Nós vamos pegar este conteúdo um, e nós vamos apenas injetar um monte de HTML bem aqui. Então, o que? Eu vou fazer é apenas o certo. Algum código bootstrap bem rápido. Então eu tenho uma fila. Eu tenho a coluna média oito, e vamos compensar isso por dois Então compensar MD para e eu tenho um H um aqui. Eu tenho uma classe personalizada que eu vou estar usando chamado título interno CC, e aqui nós estamos apenas indo para usar o título página ponto página título ponto e todas as maneiras dizer Paige vem com um campo chamado Title, então nós sabemos que temos acesso a Isso. Vamos em frente e atualizar nossa página de sempre e podemos ver que está lá. Nós temos um pouco sobre nós título. Isso é exatamente o que eu entrei. Wag Tail é um sistema de gerenciamento de conteúdo que é o título da nossa página. Nenhum título de nossa página aparece aqui, então isso é tudo o que há para realmente criar um novo aplicativo e uma página do zero novamente. Vamos adicionar um pouco mais a esta página à medida que começamos a entrar em campos de fluxo um pouco abaixo da estrada para que esta página possa ser completamente personalizável. Então vá em frente, faça o commit que salve , faça o que precisar , e quando estiver pronto, iremos para o próximo vídeo 16. Objetos de Testimonial: Até agora, temos criado páginas Wag Tail com apenas alguns campos personalizados. Isto tem sido, em grande parte, apenas coisas de weg tale. Mas agora vamos dar um passo mais ou menos para trás ou para fora. E vamos trabalhar com o Django. E vamos permitir que um modelo de jingle seja acessível dentro do wag. Diga ao administrador. Agora, basicamente, com o modelo Wag Tail Inman, não vamos precisar do modelo Django Inman. Agora, se o seu novo d jango sempre que você trabalha com modelos e você cria novos dados, ele vem com o admin do Django, e você pode gerenciar todos os seus dados dessa forma. Bem, quando você cria um caminho até ficar feliz agora você tem que Edmunds e nós vamos basicamente dizer, “ Não use o Jan Goodman em tudo, eu nem mesmo mostrei a você o Jangle Wedemen”. Não vamos dar uma olhada nisso. Vamos simplesmente usar o Wag diz ao modelo Edmund. Então eu estou no meu ambiente virtual e eu tinha meu servidor em execução, então eu vou cancelar isso e eu vou criar um novo aplicativo. Então eu vou fazer python gerenciar dot pie e vamos criar um novo aplicativo chamado depoimentos. Se eu pudesse soletrar o direito de testar o dinheiro e então eu vou rodar aquele servidor novamente e abrir meu código. Feche as coisas da última lição e você pode ver aqui eu tenho uma nova pasta chamada Depoimentos. Agora, as vistas são realmente apenas uma coisa de jangle. Você não precisa muito dele quando você está lidando com wag tell a menos que você esteja escrevendo uma visualização jangle personalizada . Então vamos nos livrar desse arquivo. Bem, vamos escrever qualquer teste. Acho que não precisamos fazer um teste para isso. E nós estamos realmente indo para manter nossos anúncios modelos APS DupUy In It Up High e Migrações Pasta. Então a maior mudança aqui é que nós estamos realmente apenas mantendo o arquivo admin dupuy. Vamos em frente e abrir modelos Dot Pie. E antes de fazermos isso, vamos em frente e abrir a torta de pontos base e vamos realmente ativar isso. Então temos todos esses APS diferentes. Temos um novo aplicativo aqui chamado depoimentos que corresponde ao nome da pasta. Onde você foi? Testemunhos. Bem aqui. Não, vamos salvar isso e fechar baseado na torta? Não, criamos um aplicativo de jingle, e isso é praticamente tudo que precisamos neste momento. Vamos dizer classe e vamos adicionar um testemunho, e ele vai herdar modelos modelo ponto. Isto é apenas um jangle reto. Este momento não tem nada a ver com Wag Tail. E vamos chamar isso de aula de depoimento definitivamente precisa de um médico melhor String. Mas, por enquanto, é tudo o que vamos colocar lá. O que é um testemunho? Depoimentos Uma citação e tem uma pessoa. Então, vamos dizer atribuição. Então, qual é a citação agora? Isto vai parecer muito com um campo de cauda normal. Então, se formos para casa modelos dot pie, temos chumbo Texas igual a um campo de char. Temos chaves estrangeiras. Reparem como é usar modelos que torta aqui? Basicamente, vamos fazer exatamente a mesma coisa. Só que desta vez não é uma maneira. Diga à Paige que é um modelo de jangle. Então, uma citação. Quanto tempo queremos que a citação dela seja? Vamos nos dar um campo de texto com um comprimento máximo de algo relativamente curto. 500 caracteres. Isto pode estar em branco? Não. Isto pode ser? Não. Não, este é um campo obrigatório e a atribuição ia basicamente fazer a mesma coisa aqui, mas vamos usar um campo de caracteres, então este vai ter um comprimento máximo de se. Talvez isso precise ter um nome e um nome comercial. Então Caleb Tallinn da programação para todos. Então, eu só vou adivinhar que são cerca de 50 caracteres. Posso estar em branco? Não. Isto pode ser? Não. Não. E eu vou dividir eles em suas próprias linhas porque isso só vai tornar a vida um pouco mais fácil se pudermos ver tudo isso em linhas diferentes. Lá vamos nós. Agora podemos fazer algumas coisas diferentes aqui. Podemos, opcionalmente, dar a este um nome detalhado. Fizemos isso na última lição para vangloriar. Nome é igual a seu testemunho de testemunho e o verboso chamado plural poderia ser depoimentos. Agora, Jangles já vai fazer isso por nós. Wag Tail já faz isso por nós. Não precisamos definir isso porque, bem, bem, vai levar nosso nome de classe, depoimento e plural para os olhos plurais. Algo em Inglês Basicamente você adiciona Justin s E então ele está dizendo, OK, OK, eu vou apenas adicionar um s para qualquer que seja o para a maioria do nome é tão tecnicamente isso é opcional. Não é necessário agora. Se você quisesse mudar o nome, mas queria manter o nome do modelo como testemunho, você poderia fazer isso. Isto é para fins de exibição. Em seguida, queremos dar-lhe uma string. Então a morte sublinha. Sublinhado de string. Sublinhado str interno Ele leva um parâmetro auto porque ele está em um objeto. Está em uma classe dentro de Python, então é preciso auto. E isso vai ser apenas a representação de string deste item. E eu vou mostrar a vocês como isso parece em um pouco a representação de string desta classe para este objeto e nós vamos apenas retornar a si mesmo citação ou atribuição Vamos fazer auto não citar. Na verdade, não vamos fazer uma citação. Vamos retornar uma string F. Então auto ponto aspas por auto-atribuição de ponto Então ele vai ter um nome de string muito longo. Provavelmente muito tempo para ser totalmente honesto, mas é com isso que vamos trabalhar agora. Vamos voltar para o nosso servidor. Cancele e vamos executar Python, gerenciar essa pizza fazer migrações e tudo o que isso vai fazer é criar aquele clássico arquivo de pizza de ponto inicial 001 . Já vimos isso antes. Isso é basicamente apenas nossas instruções escritas em python sobre como jangles vai estruturar nosso banco de dados para nós. Agora vamos realmente aplicar aqueles com Python gerenciado até alta migração que funciona. Vamos em frente, reexecutar o servidor dela e vamos voltar ao nosso administrador. Então, eu estou de volta no meu momento dizendo aos homens aqui, e eu vou apenas carregar uma página e você vai ver quando carregar, nada mudou. Você não vai ser capaz de encontrar depoimentos em nenhum lugar aqui. O fato é que ele existe. Nós estruturamos nosso banco de dados com depoimentos ou com uma tabela de depoimentos, que podemos ver em nosso modelo aqui. No entanto, não temos acesso a isso. Então vamos em frente e nos dar acesso a nosso próprio pedaço de dados aqui para que possamos adicionar depoimentos. Então vamos em frente. Abra na Minda Pie. Esta é a primeira vez que abrimos no Min Dot Pie e eu realmente vou me livrar de tudo isso. Este é Django Wittman, e vamos usar Wag Tails Admin. Então vamos fazer, Ah, Ah, um pouco de importação aqui. Então vamos fazer de Wag Tail Dodge Con Trib dot modelo admin dot opções de importação. E queremos importar o modelo Edmund e também o modelo admin Register. Agora, antes de continuarmos, vocês podem ver que isso vem do pacote chamado Con Trib. Eu não sou realmente um pacote. É mais de, ah, ah, titular para contribuições para recursos adicionais que Wag Tail pode vir com. Precisamos ter certeza de que isso está habilitado. Então vamos abrir nossa torta de ponto base e vamos olhar aqui para baixo para wag tail dot con Trib dot model admin. Então fazemos o modelo Edmon. Eu não vejo isso em lugar nenhum aqui. Então nós vamos querer habilitar isso, e eu só vou colocá-lo com o resto da contribuição Weddell dot con Trib dot model Edmund, Salve isso. Vamos verificar o terminal dela. Tudo parece estar bem aqui em cima. Volte para o nosso navegador. Dê uma atualização a isso. A vida vai ficar boa quando eu carregar. Lá vamos nós de novo. Não ia ver nada. Então está fechado baseado na torta. Vamos continuar registrando nossa inscrição aqui. Em seguida, precisamos realmente importar o próprio testemunho. Então, porque esta não é a mesma pasta em min dot pie e modelos top high, podemos apenas fazer a partir de modelos de ponto importar depoimento. Obrigado. Código V para auto sentir isso por mim. Em seguida, vamos em frente e realmente registrar este modelo. O Inman. Agora, o que precisamos fazer aqui é criar um modelo para homens com nosso testemunho. Essa é a aula aqui. E então nós realmente precisamos registrá-lo. Então vamos criar uma classe uma nova classe e admitir na classe e depois registrar isso. Então vamos chamar isso de testemunho. Administrador poderia ser chamado realmente qualquer coisa e vai herdar modelo admitir nozes. Aquele ali. Obrigado. Ter esse médico de depoimento em homens que é um tempo testado e sem sentido médico. Mas você conhece doutrinas, doutor. String So modelo é igual a isso é onde começamos a realmente definir nossas mulheres modelo. Então modelo é igual para testá-lo memorial, e isso precisa coincidir com a classe de testemunho real. Esse é o modelo Django que vemos nos modelos dot pie. É este aqui. Em seguida, vamos fazer o rótulo do menu. O que queremos chamar a isto na nossa conversa Telemann. Então, quando aparecer no menu dela aqui, como vamos chamá-lo? Vou chamar de depoimentos. Vamos dar-lhe um ícone de menu também, e eu vou apenas dar-lhe um espaço reservado. Um pedido de menu em algum lugar entre 101.000 edição. Vamos, eu não sei. Vamos dar um 290. Adicione dois menu de configurações e você pode encontrar todas essas configurações na documentação, bem como nas docas que aguardam até o ponto io. Não quero adicionar isto ao menu Definições. O que isso está dizendo é que ele lá, Não vamos adicionar lá, nós não precisamos dele lá. Excluir do Explorer é igual a false. Não vamos ser excluídos do Explorer, e há mais dois aqui exibição de lista, e este vai ser igual a você. Algo que não vamos acrescentar ainda. Neste fazer campos de pesquisa é igual a algo também. Também não vamos acrescentar isso. Vamos em frente e salvar isso. Verifique o nosso terminal. Certifique-se de que ele realmente foi atualizado. Ocasionalmente, não. E vamos voltar para a nossa página de cauda e apertar Refresh. E com certeza, você vê que ele ainda não funciona Bem, isso é porque apenas um minuto atrás, alguns minutos atrás, eu estava dizendo que nós precisamos criar um modelo de admissão e então nós precisamos registrá-lo. Então vamos pegar este modelo tinha sido registro e vamos adicionar isso como um decorador. Então nós vamos colocar isso lá bater Save novamente. Certifique-se de que o Terminal é o Django Server reinicia sozinho. Agora vamos revigorante. Veremos aqui do lado. Vai dizer depoimentos assim com o nosso pequeno ícone. É um ícone de espaço reservado. Nós especificamos que um depoimentos. Não temos um testemunho. Vamos em frente e adicionar um. O que fazer ou não. Não há nenhuma tentativa clássico Yoda para ir em frente e salvar, e nós temos um testemunho. Podemos adicionar mais um aqui, e isso vai ser oh, de Chewbacca, e eles são realmente então nós temos depoimentos em seu Isso é muito legal. Agora, a qualquer momento, interno começa funções de contexto quando estamos editando uma página como se eu fosse referenciá-la . Mas vamos falar sobre isso. Temos uma página Modelos de Serviço aqui, A página de listagem de serviços e Inter obter contexto. Agora podemos realmente dizer depoimentos ponto objetos ponto tudo, e podemos obter todos os depoimentos. Então, isso nos permite, como desenvolvedores, para permitir que pessoas de entrada de conteúdo ou seu cliente para inserir alguma forma de dados. E então podemos usá-lo um pouco mais tarde. Muito bem, vamos invulgar essa lista de exibição, e queremos definir dois campos aqui. Então vai ser assim que é exibido agora. É apenas uma coluna apenas este depoimento e esta é a representação da string. Então essa string que o método str aqui diz a citação de quem disse isso. Então, se fizermos isso um monte de lixo aqui salvar isso, esperar o servidor para atualizar, nós vamos ver todo esse lixo realmente aparece em sua página aqui exatamente assim. Essa é a representação da string. Não queremos isso porque parece terrível. E em vez de apenas mostrar a representação da cadeia de caracteres da nossa classe, o que podemos dizer é, Ei, espere até mostrar a citação e a atribuição como colunas. Vamos em frente e adicionar cotação em minúsculas e atribuição. Vá em frente, salve e atualize nossa página. E você olharia para isso? Temos uma atribuição e é uma espécie de tudo. Agora vamos adicionar alguma pesquisa porque talvez como uma empresa de manutenção de foguetes, temos tantos clientes que eu só consigo pensar, como três do topo da minha cabeça, origem azul, espaço X e NASA, Talvez Virgin Galactic. Temos quatro clientes, mas sim, cada um nos escreve 500 depoimentos. Então temos 2000 depoimentos do lado dela, e queremos ser capazes de procurá-los. Quais campos queremos pesquisar? Queremos ser capazes de pesquisar através de citação e a atribuição sobre o que isso está indo para dio . É um hey, eu sei que há buscas embutidas nisso. E então, hum, lá está a barra de pesquisa e vamos digitar G R aparece com Ger. Vamos digitar Yoda, e ele encontra Yoda para nós. Mas no futuro, vamos querer ser capazes de selecionar alguns destes. Queremos que a pessoa de entrada de conteúdo ou um cliente diga, “ Oh, na verdade, eu só quero que essa citação particular de Yoda apareça em nossa página, e agora eles não têm como fazer isso de maneira alguma. Diga, há esse recurso chamado painel seletor de trechos, e como um fluxo preenchido, é um bloco de seleção de trechos. E o que isso faz é se registrarmos isso como um trecho de aspas, então nos tornarmos partes reutilizáveis de dados com uma interface gráfica do usuário dentro de Wag Tail. Vamos resolver isso um pouco mais tarde, mas por enquanto, vamos registrar isso como um trecho. Então tudo o que temos que fazer agora é voltar para as nossas modelos Dot Pie e no topo aqui. Vamos querer registrar isso como uma forma até trechos. Então isso vem de trechos de ponto de cauda de wag. Principais modelos, snippet de registro de importação, aquele ali mesmo, e podemos usar isso como decorador ou ocasionalmente você verá isso usado como uma função. E então você poderia colocar seu testemunho aqui assim. Nós não vamos usá-lo como uma função nós vamos usá-lo como um decorador em Python porque tudo é um objeto que você pode usá-los de forma intercambiável. Use um ou outro. Mas não use os dois . Vamos em frente, Refresher página e de repente. Consulte a seção chamada Snippets Mostrar. Agora, os trechos novamente são partes de dados reutilizáveis. Temos uma seção chamada Depoimentos. Ele entende que temos depoimentos aqui é chamado Testemunho está usando o nome verboso depoimentos plurais. É clicar nisso, e agora, neste ponto, podemos selecionar um monte de Leeds. Vamos fazer isso um pouco menor. Set parece um pouco mais agradável. Podemos selecionar um monte desses enfraquecer, apagar um monte deles ao mesmo tempo. Podemos editá-los. Podemos apagar um de cada vez, se quisermos. Mas o bom é que, eventualmente no final da estrada, assim como um painel seletor de páginas ou um painel seletor de imagens, esse pequeno motile que aparece permite que você escolha uma página ou uma imagem. Nós vamos ser capazes de dizer, Ei, Ei, mostre-nos um motel onde podemos selecionar apenas depoimentos, então isso está chegando, descendo a estrada. Então essencialmente o que fizemos foi criar um modelo de jingle registrado com Wag Tail . Então o Waggle é agora o nosso painel de homens. Então não temos que usar o jangle Admita que adicionamos várias colunas. Eles são uma espécie de tudo que nós adicionamos pesquisa, enfraquecer, pesquisar através da atribuição ou da coluna de cotação E então nós registramos como um snippet e agora nossos dados podem ser usados em uma interface gráfica de usuário ou em algo como a função get context ou o método get context. 17. Boas-vindas à StreamFields: Vamos falar sobre campos de fluxo. Eu mencionei isso uma e outra vez. Este é um conceito que faz caminho dizer extremamente poderoso. Agora, os campos de fluxo são uma característica incrivelmente bonita. Eles permitem que você adicione seções de conteúdo praticamente em qualquer lugar da sua página. Você pode adicionar campos de fluxo ilimitados e seu conteúdo não precisa estar em nenhuma ordem específica. Então, se visualizarmos nossa página do Rocket Man agora, temos cabeçalho uma seção de heróis, nada aqui e depois uma seção de rodapé que está tudo em ordem. E isso vai continuar assim porque precisávamos dessa maneira. Precisamos de um modelo constante ou um layout para todo o nosso site. Mas bem no meio aqui temos todo tipo de conteúdo diferente e podemos misturá-lo e combiná-lo com um campo de fluxo. Nenhum exemplo disso é provavelmente um exemplo muito feio. Aquele está aqui? Sim, aqui vamos nós. Então, no site aprendido wag tail dot com, esta é uma página de detalhes tutorial que eu tenho. Ele pega automaticamente o nome da tag e o nome da página, e este é um título. Este é um campo de fluxo e então eu tenho uma seção de tecnologia avançada aqui para que eu possa adicionar links, imagens e coisas assim. E então eu tenho outro título aqui, um texto mais básico. E então eu tenho uma seção de código e eu posso escrever qualquer tipo de código. Eu quero novamente outro título para mais texto e um pouco mais de código. E eu posso misturar e combinar isso da maneira que eu quiser. Então este é Não, este não é o melhor exemplo. Vamos ver se encontro um melhor. Ok, eu encontrei um finalmente, como registrar um modelo jingle com o administrador do modelo wag tails, que na verdade acho que foi a nossa última lição. Então, se você está procurando por código-fonte, ele está nesta página. Então você pode ver aqui. Eu tenho um título apenas como a brincadeira e eu tenho um campo de fluxo onde eu posso literalmente apenas colocar a essência. Você é Ellen aqui. Então eu tenho apenas o seu tudo, e ele automaticamente faz o realce e coisas de um hub get. Você, Errol. Posso misturar e combinar tudo o que quiserem. E assim como na outra página, eu poderia mover isso para cima e para baixo. Eu poderia adicionar conteúdo entre seções. Posso adicionar títulos onde quiser. Não há formatação rigorosa, e é isso que um campo de fluxo nos permite fazer. Mas acho que um exemplo ainda melhor seria, digamos, página de destino. Então digamos que você tem uma página inicial onde você está tentando converter alguém. Na verdade, acabei de pensar em um exemplo ainda melhor. Então aqui está um site Wag Tail. É do amplificador dando organização de ponto para que eles tenham uma seção de banner aqui. Isso não faz parte de um fluxo cheio porque sempre vai haver um banner aqui, mas eles podem trocar as imagens, textos e coisas assim. Então temos uma seção aqui que eles podem mover para cima ou para baixo. Então eles têm esta seção das três cartas, e eles poderiam movê-la para baixo, seção para cima uma seção ou excluí-la completamente. E então eles têm outro campo de riacho aqui. Por que começou a dar círculo? Eles poderiam mover isso para cima ou para baixo que pode personalizar tudo dentro dele. Então eles precisam se inscrever, se inscrever em um boletim informativo para receber filantropia, recursos de treinamento e oportunidades de aprendizagem, conceder oportunidades postadas por círculos de doação, e ele pediu um endereço de e-mail. Depois há outra seção aqui, um campo de fluxo, outro aqui e um do fundo. E poderíamos dizer, quer saber? Talvez queiramos este dedo verde. Também estar aqui no meio. Ser capaz de mudar seu conteúdo assim torna suas páginas realmente, muito flexíveis, mantendo um design agradável. Agora, se você já está familiarizado com os campos do Django Stream, vamos parecer muito com um modelo padrão ah misturado com o formulário jangle. Mas se você é novinho em folha no jangle, sua nova marca na cauda Wag vai se parecer muito com o que já trabalhamos com uma ligeira diferença. E isso é como a diferença, na maior parte, é em vez de dizer modelos que campo de texto, vamos acabar dizendo blocos, bloco de texto e em vez de cobertores falsos e falso de Noah, nós vamos para estar dizendo: É necessário verdadeiro ou falso? Tirando isso, quase nada vai mudar. Tudo o que escrevemos já será muito familiar para você. Agora neste vídeo, não vamos escrever nenhum campo de fluxo. Eu só queria lhe dar uma introdução rápida sobre o que é um campo de fluxo e por que é importante. E então, como um último tipo de importantes campos de fluxo notáveis e como eles são armazenados no banco de dados agora em seu bloco de depoimento ou um modelo de depoimento, nós temos cotas iguais a modelos campo de texto ponto em nosso banco de dados. Qualquer que seja a rainha do banco de dados abusar disso será um campo de texto ou uma coluna de texto com um comprimento máximo de 500. A atribuição vai ser ah, provavelmente de arco nosso campo ou um campo de caracteres regular com o comprimento máximo de 50 caracteres que você também pode colocar em seus campos. Positivo enterrado seus campos, chaves estrangeiras muitos para muitos relacionamentos. Coisas assim e essas são todas armazenadas em suas próprias colunas. Mas um campo de fluxo não é armazenado assim. Um campo de fluxo é basicamente todo o seu fluxo. Os dados de campo serão armazenados como um objeto Jason gigante, e a razão para isso é porque isso permite que sua página para procurar todos os seus campos personalizados realmente rapidamente e manter a ordem de todo o seu conteúdo enquanto ainda apenas realizando consultas de banco de dados quando é realmente absolutamente necessário. Mas como um desenvolvedor python que poderia fazer a análise de seus dados de campo de fluxo. Ah, um pouco complicado porque é tudo J solidificado, e é um pouco mais difícil puxá-lo por todo o banco de dados como você esperaria. Então, há principalmente profissionais. É 90% de prosa, mas há um pequeno golpe lá. Se você está olhando para realmente automatizar seus campos de fluxo e você quer talvez alguém para preencher um formulário em sua página e criar um campo de fluxo na estrada, talvez essa não seja a melhor abordagem, porque isso vai ser um pouco um pouco mais difícil do que apenas usar um campo regular e apenas atualizar um modelo regular. Independentemente disso, vamos em frente e saltar diretamente para fluxos, campos 18. Criando o aplicativo StreamField: como qualquer coisa no mundo da programação, existem várias maneiras diferentes de alcançar o mesmo resultado final exato. Neste curso. Temos colocado todas as nossas páginas em seus próprios APs em vez de um grande aplicativo chamado páginas . Mas, hey, algumas pessoas gostam de colocar todas as suas páginas em um aplicativo, e isso é totalmente OK. Não vou te dizer que isso é certo ou errado para mim. Eu gosto de dividir as coisas para que eu possa encontrá-las muito mais facilmente. A mesma idéia pode ser aplicada aos campos de fluxo, embora eu vou estar criando um aplicativo apenas quatro campos de fluxo para que nós não correr em importações circulares e nós temos uma área dedicada para todos os nossos campos de fluxo. Ele nos ajuda a encontrar nossas seções de conteúdo personalizadas. Ah, muito mais fácil, eu acho. Então, em vez de espalhá-los para fora em fluxo, sente que são apenas para a página inicial sem campos de fluxo no aplicativo de casa. E então temos campos de fluxo na Apple serviços. Temos campos de fluxo em, como se eu não conhecesse o aplicativo de página flexível. Vamos juntá-los todos para que possamos encontrá-los bem e facilmente, então o que vou fazer aqui é entrar no meu ambiente virtual. Fonte. Rocketman Vin foi ativado. É assim que fazemos. Então vamos em frente e fazer python gerenciar dot pie. Iniciar AP Streams and Streams é Haverá uma terminologia curta para os campos de fluxo de palavras , e vamos em frente e fazer Python gerenciado em PI corre sobre e vamos fazer isso na porta 8000. Vamos abrir nosso código e podemos ver que há uma nova seção aqui chamada Streams. Vamos em frente e ativar este novo aplicativo, então entre com base no alto do nosso APS instalado. Novamente, já fizemos este número de vezes. Vamos em frente e adicionar fluxos aqui. Salve perto que e vamos procurar fluxos agora. Na verdade, não precisamos muito disso. Não precisamos de vistas. Eles vão ter seus próprios modelos, e campos de fluxo também serão incluídos em páginas diferentes. Não vamos escrever nenhum teste, então não precisamos fazer isso. Modelos enquanto campos de fluxo são suas próprias coisas, então o que vamos fazer é renomear modelos. Dois quarteirões. Eu acho que você poderia chamá-lo de modelos, se você quiser. Eu gosto do Colin. Bloqueia a APS. Nós estamos indo. Teoh, mantenha o administrador. Nós vamos deletar. Então, temos migrações nele. APS e blocos e em blocos. Eu ia apagar isso. E agora nós temos o que parece um aplicativo jangle que nós meio que mutamos um pouco. Então, nem temos mais um arquivo de parada de modelo. É apenas bloco Stop, I Agora, a razão pela qual eu estou chamando de bloco é porque cada campo de fluxo, cada campo de fluxo que acabamos criando é na verdade um bloco de algum tipo. Então talvez seja um bloco char ou um bloco seletor de imagem ou um bloco de escolha. Vamos passar por um monte de blocos diferentes juntos, mas por enquanto só precisamos ter certeza de que temos fluxos funcionando, que temos fluxos habilitados com base na pizza e que temos uma parada de bloco. Eu arquivo uma vez que você tem que cabeça sobre a próxima lição e nós vamos criar nosso primeiro campo de fluxo 19. Seu primeiro dia StreamField: Oakley localmente, vamos em frente e criar um primeiro campo de fluxo. Este vai ser um campo de fluxo baseado em texto básico, então vamos em frente e abrir nosso bloco de fluxos. Pare, eu arquivo e vamos criar nosso primeiro bloco atingido. E o que eu estou dizendo aqui está bloqueado. Agora vamos criar um bloco atingido com apenas um único campo dentro. Vai ser apenas um campo de texto normal. E em vez de usar algo como modelos holandeses, nosso campo, podemos usar algo como blocos ponto hr bloco. E isso é estritamente wag tell neste ponto, isso é sempre dizer todo o caminho. Agora, na raiz dele eventualmente se decompõe em Django. Mas isso é praticamente sempre dizer agora. Agora a coisa boa sobre campos de fluxo é que eles podem ser seções de conteúdo que podem ser ordenados para cima e para baixo para que você possa dizer, como Olá, Mundo é o 1º 1 Meu nome é Caleb é um 2º 1 Eu gosto de cabras é o 3º 1 e é exatamente como movendo isso para cima e para baixo. Mas você pode fazer isso com blocos inteiros de conteúdo. Isso é uma coisa muito legal. A outra coisa boa sobre isso é que campos de fluxo podem ser aninhados, eles podem ser reutilizados, e na verdade, nós vamos entrar nisso um pouco mais tarde. Então vamos em frente e começar com isso. A primeira coisa que precisamos fazer é importar isso. Vamos fazer a partir de wag tail dot core blocos importantes. Não note que isso está usando os blocos de palavras e nosso arquivo é chamado Blocks up High. Não há nenhuma relação lá. Acontece que eu chamei isso de quarteirões. I Ele não precisa ser chamado bloco Parar I. Este é simplesmente onde eu estou armazenando este arquivo, e Wag Tail também tem um arquivo chamado Blocos Que Pie. Agora vamos criar nossa primeira classe aqui um título blocos. Vamos chamar este bloco título classe e vai herdar de blocos ponto golpeado bloco, e ele vai ter um único campo aqui. Apenas texto de texto é igual a dois blocos bloco ponto hr, e aqui podemos dizer em vez de branco é igual a verdadeiro ou falso ou não é igual a verdadeiro ou falso. Podemos dizer que isso é necessário. Verdadeiro ou falso. Sim, isso é necessário. Esse é o padrão. Pode realmente vê-lo aqui, diz Char. Bloco requer igual a true. Esse é o padrão. Também posso ajudar-nos. Comprimento máximo do texto, comprimento médio, validadores personalizados, coisas assim. Vamos em frente e nos dar alguma ajuda. Texto. Ia dizer ajuda Texto é texto para exibir. Não precisamos de painéis. Não precisamos de nada assim. Aguarde até assumir automaticamente que se você tem um campo de fluxo aqui, ele deve ser mostrado. Vamos em frente e trabalhar com alguns metadados também. Então, primeiro lugar, podemos nos dar um modelo, e isso vai estar em algum lugar. Voltaremos a isso em um segundo. Podemos dar-nos um ícone. Voltaremos a isso em um segundo. Nós nos damos um nome personalizado rótulo se quiséssemos. Voltaremos a isso em um segundo e também algumas mensagens de ajuda, que, se você não adivinhou, voltaremos a isso em apenas um segundo. Então, o modelo vai ser exatamente como o nosso caminho. Diga às páginas se isso estava acordado até que as páginas seriam título bloqueado cada um para melão, ele viveria dentro da pasta Streams porque este é o aplicativo streams. Então é aqui que ele iria procurá-lo automaticamente. Mas não é uma abanada. Diga à Paige que é um campo de fluxo e que vai fazer algo muito, muito parecido. Mas ao invés de adivinhar, sempre gosto de colocar isso aí. Então eu vou assumir que todos os meus campos de fluxo vão viver na pasta templates em uma subpasta chamada Streams, e isso vai ser chamado título bloco dot html. Gosto de fazer isso. Então, se você olhasse para o meu código pela primeira vez, você seria capaz de olhar para esse sentimento de sonho atrás. Eu sei exatamente onde esse modelo está. Vamos dar a isso um ícone e editar ícone, e o rótulo vai ser apenas título. Caso contrário, ele pode ser chamado de Bloco de Título ou qualquer outra coisa que queremos chamá-lo, e o texto de ajuda vai ser centrado texto para exibir na página e que é assim que nós criamos uma sensação de fluxo agora que não está disponível em qualquer página em tudo. Então, se voltarmos aqui e tentarmos fazer a nossa página inicial, vamos ver que nada mudou. Adicionamos texto do botão de texto do lead text, banner , imagem de fundo, mas não adicionamos uma nova seção aqui. Este é o lugar onde o painel entra para realmente expor os campos de fluxo para a interface de administração . Então vamos em frente e adicionar isso para digamos apenas a página inicial para que nossa página inicial possa ter algum conteúdo personalizado nele. Vou em frente e derrubar aquele painel esquerdo, então estou em casa. Modelos dot pie e aqui eu quero fazer a partir de fluxos blocos de pontos. Esse é o meu arquivo de blocos aqui, não a espera até o núcleo um. Esse é o meu bloco de títulos de importação de arquivos de blocos, Tyto Block. Alternativamente, nós também poderia fazer a partir de fluxos blocos de importação e, em seguida, um pouco mais tarde, em vez de apenas usar bloco título, poderíamos usar bloco bloco início título. Na verdade, é assim que vamos fazer agora. Então nós estamos indo apenas fazer a partir de fluxos importar blocos próximo em nossa página inicial aqui em baixo. Vamos em frente e adicionar alguns campos de fluxo personalizados. Agora, um campo de fluxo é seu próprio tipo de campo. Assim como temos um campo de caracteres ou um campo de texto. Isto vem de Wag Tail. Este é um riacho cheio. Então é chamado de corpo. É assim que lhe vamos chamar. Isso vai ser um campo de fluxo, e isso vai levar uma lista de topos. Então é uma aula. Seu primeiro parâmetro é uma lista, e aqui vai ser um monte de topos. Então vamos chamar esse título. É um para definir tombamento, então o primeiro 1 vai ser o que é chamado no banco de dados. Então, novamente, lembra como eu mencionei que os campos de fluxo de cauda estão todos armazenados em Jason? Bem, essa é a chave. É assim que ele sabe o que vai ser. Então vamos chamar esse título. Pode chamá-lo do que quiser. Ele não tem que ser título, e nós vamos dizer blocos bloco título ponto com parênteses porque é uma classe. Eu só lanço um comum lá para boas práticas, eu acho. Vamos deixar este campo ser conhecido? Sim, vamos dizer que a página inicial pode não ter nenhum conteúdo personalizado e estar em branco. Vamos também dizer que sim. Isso significa que você pode salvar a página inicial sem adicionar quaisquer campos de fluxo extra são ou conteúdo personalizado a ela. Agora temos este corpo. O que fazemos com isso? Vamos até nossos painéis de conteúdo aqui, e precisamos nos expor com um novo painel. Assim é criar uma nova linha de até mesmo mover que um pouco para cima lá. Vamos criar um novo painel chamado painel de campo Stream, e vamos colocar o corpo aqui agora. Se nos salvarmos, é provável que o nosso terminal vá reclamar porque, primeiro lugar, aquilo era uma mesa. Vai reclamar sobre fluxo, painel de campo e campo de fluxo não sendo importado. Então vamos em frente e certificar-nos de que o ar é importado. Então, em nossos manipuladores de edição aqui, temos painel de seleção de página do painel de campo que está em um painel de campo de fluxo aqui, e o campo de fluxo em si realmente vem de campos de ponto decoração Wag Tail Importar campo de fluxo . Tudo bem, vamos dizer isso e ver Ei, olhe para os terminais não reclamando de nada. Vamos ver a página e, como esperado, o ar operacional. Não há tal coluna. Corpo do ponto da página inicial. Basicamente, esta é uma área SQL dizendo que a nossa home page não tem uma coluna na tabela que vive no corpo frio. Vamos em frente e fazer com que nossas migrações façam migrações, apliquem migrações executem novamente nosso servidor. Vamos atualizar sua página e vamos ver uma vez que ele carrega quer cargas, Role todo o caminho para baixo. Nós temos uma nova seção aqui agora, se você estava usando Wag Tail 2.6 ou anterior, isso vai parecer um pouco diferente e para usar Espere até 2.7 ou mais recente vai olhar algo ao longo dessas linhas. Então eu tenho uma nova seção aqui chamada título, e eu poderia colocar o que eu quiser aqui. Isso é uma roda. Torne seus foguetes mais eficiente de combustível, texto centrado para exibir na página que seu texto de ajuda. Temos mais SMS lá dentro. É um campo obrigatório. Vamos em frente e salvar isso. Agora, quando visualizarmos isso, não vamos realmente ver isso, porque em nosso modelo de página inicial, não especificamos que realmente queremos mostrar isso. Então, nosso próximo passo agora é abrir página inicial dot html. Essa não é a certa. Página inicial dot html Essa é a nossa página inicial. E na nossa página inicial, temos uma seção para o nosso banner. Vou fazer isso um pouco menor lá. Então eu tenho uma seção para um banner. Vamos recolher isso e vamos criar um novo bloco para um conteúdo. E mais uma vez, apenas como um pequeno refrescante aqui. Se abrirmos com base em HTML, temos uma seção aqui apenas para um conteúdo. Nós vamos injetar nossos campos de fluxo aqui, e fazer isso é realmente super fácil. Nós só precisamos basicamente loop sobre cada um, um bloco de quatro, no corpo da página ponto incluir Bloquear o bloco que estavam looping sobre. Esse é o valor ali mesmo e quatro agora para este dedo do pé realmente registrar porque esta é uma função wag tail. Isso não vem com padrão, Django. Precisamos ter certeza de que podemos nos usar. Então, vamos também carregar junto com a nossa espera até imagens tags wag tail core tags. Vamos salvar isso e atualizar sua página. E agora podemos ver que o modelo não existe, então estamos realmente chegando em algum lugar. Isso está dizendo que nosso bloco título do Streams Air ainda não tem um modelo. Vamos em frente e adicionar esse modelo. Então abra o meu site e, em seguida, vá para modelos. E aqui estava à procura de streams barra título bloco dot html. Novamente. De onde eu tirei isso foi que eu especifiquei especificamente para morar aqui, e você pode ver onde ele está olhando. Está olhando em modelos. título do Streams foi bloqueado. Html Ele também está olhando em modelos home. Bloco Título do Streams. Papai, ela é macho. Ele também está procurando em fluxos de modelo de busca. Título bloqueado. Html Vamos apenas colocar. O primeiro lugar é olhar que parece mais eficiente. Então temos um título bloqueando aqui. Então vamos fazer algo muito feio. H um, esta é uma página de atualização de bloco de título e oh! Oh, aí está. Há um bloco de título. Está bem, está bem. Estamos chegando tão perto disso. Ok, então eu só atirei um pouco de html aqui com um H três e uma aula personalizada naquela idade três. E agora eu poderia dizer qualquer coisa aqui. Tudo bem? Não diz nada aqui. Está parecendo um pouco mais estiloso. Vamos em frente e realmente jogar esse texto aqui quando você usar o valor em texto de ponto minúsculo . Agora, se você está se perguntando câmera, onde você tirou valor? Eu posso usar valor ou eu posso usar eu mesmo, que todos fazem mais sentido para você lá exatamente o mesmo. E isso está vindo do nosso próprio quarteirão. Então bloco de título e colocar estes juntos bloco de título está usando este modelo e dentro dele, assim como o texto de ponto de página ou título de banner de ponto de página. Este tem texto de ponto de bloco de título. Agora não é uma página. Então não vamos chamá-lo de Paige para transmitir campos. Vamos dar-lhe o valor. O valor é o que quer que o campo de fluxo é ou auto-ponto qualquer que seja o nome do campo é novamente, eu vou chamar esse valor. Vamos em frente e atualizar esta página. Bem, faça seus foguetes mais eficientes em termos de combustível, e isso é exatamente o que colocamos na página inicial dela. Agora vamos dar uma olhada na razão de estarmos usando um fluxo preenchido para isso é que eu coloquei qualquer coisa aqui, eu vou colocar alarme ipsum lá dentro e abaixo dele. Vou colocar isto abaixo do original. E vamos visualizar esse alarmismo no topo, o original e um na parte inferior. E se eu não gostasse disso, eu poderia sempre mover este para cima. E então o original agora está na pré-visualização de hit inferior novamente. Role para baixo. Bem, faça seus foguetes mais eficientes em termos de combustível. Agora está no fundo. Agora vamos pegar essas seções inteiras e movê-las para cima e para baixo. Isto é apenas onde começa porque este é apenas um campo de título que podemos fazer é com seções inteiras de conteúdo com imagens e vídeos, documentos, links, todo tipo de coisas. Eu vou fechar essa pré-visualização e eu vou para Eu não vou salvar esta página agora. Uma última coisa. Quando você está trabalhando com campos de fluxo porque eles são um tipo especial e complexo de campo, ele não tem apenas uma coluna regular com um único valor, e é um grande blob Jason. É sempre uma boa idéia, e eu não acho que isso vai precisar de nenhuma migração, mas eu acho que é sempre uma boa idéia para quando você terminar de trabalhar com eles. Sempre gerenciado alto, faça migrações sem alterações detectadas. Mas se você tem trabalhado com eles, se você fez algo extra, você terá alterações detectadas, caso em que você também será executado. Python gerenciado alto e para executá-los, você usa migrações. Correto? Sim, use o meu grande, e isso aplicará suas mudanças para você. Vamos passar para o próximo, onde podemos criar seções de campos de fluxo onde podemos adicionar mais e mais e mais e mais como uma lista. Na verdade, é chamado de bloco de listas. Assim que você terminar de brincar com isso, se você quiser definitivamente se sentir livre para experimentar com um código e quando você estiver pronto, vamos para a próxima lição, onde vamos pegar nosso próximo tipo de campo extremo. 20. Repetição de campos de transmissão: Haverá um momento em que você precisa repetir conteúdo semelhante uma e outra vez, tipo de usar o mesmo modelo e trocar diferentes partes do conteúdo. Listas de qualquer coisa são realmente bons candidatos para essa coisa chamada bloqueio de lista. Então, na última lição, aprendemos sobre um bloco atingido. Este vamos usar um bloco de lista, e este tem uma sintaxe estranha. Mas é um recurso muito, muito poderoso em campos de fluxo de cauda de wag. Então, em nosso site estavam criando um bloco de conteúdo repetido onde a pessoa de entrada de conteúdo pode adicionar itens limitados se quisesse. Mas todos eles vão ser formatados exatamente da mesma maneira. E vamos fazer isso com cartões de bootstrap. Então, se você ainda não tem seu servidor funcionando, certifique-se de entrar em seu ambiente virtual e você está executando seu servidor Django. Em seguida, eu vou abrir o bloco Parar I Isso está no meu aplicativo streams. Então fluxos de barras blocos tão piedosos onde isso é aquilo e aqui é onde criamos nosso bloco título. Em seguida, vamos criar um novo tipo de campo de fluxo. Este vai ser chamado de bloco de lista. Na verdade, ainda é tecnicamente um bloco atingido, mas vamos jogar um bloco de lista dentro dele, e então vamos fazer um loop através dele uma e outra e outra vez. Então você pode pensar em um bloco de lista, realmente como uma lista muito chique. E então dentro desta lista chique, vamos ter outro bloco atingido. Então, novamente, a sintaxe fica muito estranha, e eu vou tentar o meu melhor para descrevê-la à medida que avançamos e isso vai acontecer no início. Não só vai parecer estranho, mas vai parecer um pouco complicado. Provavelmente já soa complicado se você é novinho em folha no Wag Tail. Mas uma vez que você escreve alguns desses, eles realmente começam a fazer muito sentido. Então vamos começar com um exemplo muito simples. Vamos adicionar um bloco de char título e um bloco de texto e adicionar ah meta class Wissem alguns dados lá. Então vamos em frente e criar classe. Vamos chamá-lo de bloqueio de cartões porque é isso que eventualmente vai ser. O Calder. Isso é o que ele vai fazer. E aqui, isto vai ser apenas um bloco atingido, um bloco de ataque regular. Agora, aqui é onde começa a ficar um pouco estranho. Então nós vamos ter cartões aqui, e isso vai ser bloco de blocos de lista de pontos. Então isso já está começando a parecer um pouco bizarro. E então dentro deste bloco de lista, vamos fazer bloqueio de início de bloqueio. Agora, é aqui que fica estranho porque nossas classes de bloqueio estavam definindo um bloco de lista . Temos outro bloco atingido dentro dele. E aqui, é aqui que vamos colocar todos os nossos campos personalizados. Então esta é uma lista de casais como um campo de fluxo regular, assim como em nossos modelos de casa que torta temos campo de fluxo e é uma lista de dois problemas de pares . Vai ser exatamente a mesma coisa. Aqui está uma lista de dois pares de casais, então o primeiro 1 vai ser uma vírgula título, e então vamos usar blocos ponto HR bloco parece muito com blocos bloco HR do nosso bloco título. Isto vai precisar de um comprimento máximo. Queremos nos dar um comprimento máximo de talvez 100 ou mais, e podemos dar-lhe algum imposto de ajuda, então o imposto de ajuda vai ser Eventualmente. Este vai ser o texto do Bolds intitulado para este cartão, e eu gosto de colocar o que o comprimento máximo é para que seu cliente, seus clientes, pessoas continentais saibam o que esperar. Então, há um comprimento máximo de 100 caracteres Agora, se eu realmente usar controle remoto, quero dizer, há uma linha muito longa, e eventualmente eu iria quebrar isso. Mas por enquanto, vou manter isso em uma linha porque também vou criar um texto aqui em uma segunda linha. Se eu colocar isso em muitas linhas, isso começa a parecer um pouco complicado. Então isso vai ser blocos bloco de texto ponto. Então, em vez de ah, campo de texto, é um bloco de texto. Comprimento máximo para este vai ser um gritante 255 caracteres, isso é tudo, e os impostos de ajuda vai dizer o texto opcional para este cartão, O comprimento Max é 250 caracteres, e vamos também dizer que este é opcional dizendo necessário é igual a false. Era como metadados aqui. Então classe meta, eu vou fazer aquele maior mais para que possamos ver isso um pouco mais fácil, você sabe, derrubar isso. Eles são, então nós temos classe meta. E aqui vamos especificar modelo, assim como fizemos com seu último. Nós vamos dizer que ele vai para fluxos e isso vai ser um cartão bloco dot html e algo não está certo porque meu realce de sintaxe está quebrado. O que eu invadi aqui? Lá está ele. Falta-me um suporte que parece melhor. Vou dar a isto um ícone de uma imagem e um rótulo de cartões padrão ANA. Quero dizer, para garantir que meus terminais não vão reclamar. E com certeza, é sobre um bloco preso. Acho que foi quando fiz o erro de digitação original. Vamos em frente e reiniciar o Django. E não, certeza, bloqueio preso não é uma coisa. Onde está preso? Bloquear? Aí está você. Eu estava olhando para os blocos errados que atingiu o bloco Ok, terminal e está feliz com o nosso código. Vamos também voltar para a nossa casa Slash modelos Dot Pie. Você pode ver que eu estou na pasta pessoal modelos dot pie, e agora eu vou criar mais dois pares derrubando aqui, e este vai ser cartões. E isso vai vir de Block Start cards bloco e novamente. Basta colocar um comentário O fim para uma boa prática. Vamos voltar à nossa página inicial e vamos editá-la. Vou esperar que carregue. Vamos criar um novo aqui e olhar para isso. Temos um bloco de título, o que foi criado na última lição. Nós também temos um padrão cartões Agora. Este é o lugar onde fica realmente legal porque isso parece um pouco aninhado agora, então este pode ser o título número um, e texto pode ser qualquer tipo de Texas completamente opcional. Então digamos que o 1º 1 será opcional. Título um com texto opcional e vamos em frente. Aperte esse sinal de mais e crie outro. E estes são realmente e totalmente trocáveis, também, então nós podemos trocar estes para cima e para baixo, e este vai dizer, título número dois, porque eu não estou me sentindo criativo com meus títulos e este. Vamos ter um texto ipsum quente lá dentro. Vamos em frente e salvar isso. Agora eu vou ver ao vivo e ele vai dizer que eu sei que ele vai dizer que isso não pode encontrar o modelo. Claro, olhe para esse modelo não existe. Está à procura de riachos. Cartões bloqueados. HTML. Vamos em frente e criar esse arquivo agora. Então, em modelos de um foguete, já temos uma pasta chamada Streams. Vamos criar um novo arquivo aqui chamado cartões bloco dot html e vamos apenas reembolsos é Vamos apenas loop através disso muito rapidamente. Ainda não vamos fazer com que isto pareça bom. Nós só vamos fazer um loop através disso, então eu vou dizer quatro cada cartão em cartões de valor pontos. Nós também poderia fazer cartão de auto-ponto, então eu vou usar estes intercambiavelmente garganta diferentes campos de fluxo, e eu vou acabar com isso. Então o que eu estou fazendo aqui é que eu estou dizendo neste campo de fluxo particular, nenhum arquivo errado seu Rio. Neste campo de fluxo particular, eu tenho uma variável chamada cartões de auto-ponto. Cartões de auto-ponto. Programação orientada a objetos dita que se eu fosse acessar isso em um método, ele seria chamado auto-dot cards. É uma lista. Block está bem no nome. É uma lista, então é um loop de enfraquecimento irritável através dele para que possamos dizer para cada cartão em cartões de auto-ponto. E então podemos ir e pegar cada um desses para que possamos dizer que o título vai ser um título H três pontos de cartas. E também podemos dizer, se o texto do ponto do cartão podemos colocar parágrafo aqui texto do ponto do cartão e que se e vamos também adicionar um monte de regras horizontais para tornar isso muito, muito feio, mas também muito perceptível com onde nós estão trabalhando, vá em frente e atualize esta página. Olhe para o título um opcional sem impostos. Não há impostos lá dentro, com direito a algum texto lá dentro em um monte de regras horizontais para tornar a página super feia. Agora vamos voltar a isto. Só um segundo aqui em suas modelos não torta. Adicionamos algo ao nosso campo corporal. Por que não aplicamos migrações? Bem, porque isso é basicamente um campo de texto. Armazenar muito Jason no banco de dados não precisa necessariamente de migrações para serem aplicadas, embora as chances sejam, se você tentar executar migrações agora, ele diria que houve alterações detectadas. Vamos executar migrações no final desta lição de qualquer maneira, mas não precisamos fazer isso agora, certo? Eu acho que ainda temos um pouco de tempo neste vídeo, então vamos em frente e adicionar mais alguns itens aqui. Então vamos dizer que cada carta é um título. Cada cartão tem, hum, texto. Vamos ver. Cada cartão tem uma imagem, e vamos usar um bloco seletor de imagens que não importamos este ano, não uma imagem de painel. Sorte mais picante. Isto vai ser necessário. Dois exigidos por padrão para que não temos que colocar necessário é igual a verdadeira ajuda. Texas Eagle to Image será auto magicamente corrompido para Ah, se eu me lembro corretamente em algum lugar em torno de 570 pixels por 370 pixels e vamos definir este corte no modelo, vamos em frente e salvar isso e vamos atualizar nosso página creditável ou home page. Oh, ele não vai carregar porque eu não adicionei bloco seletor de imagem, Vamos em frente e adicionar isso aqui agora. Então fazemos de maneira dizer imagens de ponto, blocos de pato, imagem de importação , bloco de seleção. Lá vamos nós. Agora ele vai se conectar. E se eu rolar para baixo, temos uma pequena seção de imagens aqui. Então eu vou dizer que vai ser o 1º 1 e este vai ser o 2º 1 vai em frente e salvar isso. Ele vai para quando eu atualizar a página vai loop sobre tudo. Não há imagens porque não contamos. dedo do pé tem alguma imagem? Vamos dizer a ele para ter algumas imagens agora, antes que possamos usar imagens em tudo com Wag Tail e cortá-las automaticamente e todas essas coisas boas, o que precisamos fazer é dizer, carregar, esperar até image tags, e que nos permite usar uma tag template chamada Image. Vamos colocar isso em um loop for. E porque sabemos que este é um campo obrigatório, ele estará sempre aqui. Eu vou dizer quatro. Todas as imagens que temos vamos usar o cartão de imagem. Como é que lhe chamamos? O que é que nós chamamos? Provavelmente só imagem. Sim. Com certeza, chamei de imagem. Então eu só peguei isso do primeiro valor em nossos pares duplos aqui. Então o primeiro set em nosso Topple é chamado imagem. Este chama-se Texans chamado Title. É de onde estamos pegando isso. Então este chamado imagem, e eu só vou usar isso lá. Vou usar o método do filme. Há Max com métodos, altura e largura métodos, bem como, para que você possa definir uma altura máxima ou máxima com em suas imagens. Coisas assim iam dizer: “Sinta sempre este dedo do pé.” Seja sempre 570 pixels por 370 pixels. E então vamos simplesmente armazenar isso como uma variável chamada imagem. Vamos em frente e criar uma nova imagem aqui e para a fonte. Vamos fazer imagem que você está no altar é imagem ponto alta, e então eu sou G fósforos aqui, aqui e aqui. Não tem nada a ver com a tag HTML, e na verdade eu posso mudar isso só para provar isso. Vamos chamar-lhe a imagem. Vamos em frente, salvar e atualizar nossa página, e vamos ver uma imagem lá está. Há o nosso 1º e o 2º 1 e se eu inspecionar este elemento aqui, certeza, ali está. 570 por 370 pegou minha imagem e cortou perfeitamente. Agora eu acho que isso é suficiente para este vídeo em particular. No próximo, vamos começar a abstrair algumas das partes mais complicadas em outras classes que podemos reutilizar. Então, em nossos blocos, não precisamos necessariamente colocar tudo isso aqui. Podemos fazer com que pareça mais com este aqui em cima porque este aqui em baixo é honestamente, isso é meio difícil de ler. Então vamos retocar isso um pouco. E eu também mencionei, em algum momento podemos executar migrações teve. Vamos fazer isso. Python conseguiu até alto. Faça migrações. Vamos ver o que acontece. Com certeza, altere o corpo do campo na página inicial e vamos aplicar essa migração. Está tudo bem. Não se esqueça em nenhum momento. Se você ficar preso, sempre olhe para o código-fonte. Está completamente disponível para você. Caso contrário, vamos para a próxima lição onde continuamos a operar dentro da nossa lista. Bloquear 21. Simplificando o fluxo de repetição: Tudo bem. Pegando da última lição. Esta é a segunda parte da lição de campo de repetição do fluxo. Este é um tópico bastante grande, por isso é dividido em pelo menos dois vídeos. Agora, se você não assistiu o 1º 1 você vai precisar assistir o 1º 1 Caso contrário, você provavelmente não vai saber muito sobre o que está acontecendo com este neste vídeo. Então agora que temos um campo de fluxo de estilo de bloco de lista simples, basicamente temos bloco atingido com este bloco, instruir bloqueio nele e, em seguida, conjuntos de templos aqui. Vamos em frente e tornar isso ainda mais complicado, então a primeira coisa que vamos fazer aqui é adicionar um link e precisamos adicionar três campos . Precisamos adicionar um texto de link porque queremos que o texto seja personalizado. Queremos um link interno para outra página de cauda wag ou queremos um link externo para uma página. Não está em nosso site, então vamos em frente e meio que apenas hash para fora muito rapidamente. Então nós temos bloco começar HR bloco, e nós podemos preencher isso em apenas um segundo. Vamos chamar esse texto de link. A 2ª 1 que vamos chamar de Página Interna, e este vai ser algum tipo de sapatos pagos ou ainda não sabemos disso. Voltaremos a ele, e a 3ª 1 será uma ligação externa. E aqui, este é o Block. Comece seu bloco L. Assim como, uh, vocês são todos modelos de campo que são todos de campo. Este é um bloco que você era um bloco. Ok, então o link externo vai ser necessário? Nós vamos dizer não, porque os links serão opcionais inteiramente a página interna. Como escolhemos uma página interna? Espere até que nos dá uma pequena ferramenta bonita aqui chamada de bloco de seleção de páginas, que também pode dizer necessário é igual a falso Certifique-se de que você tem que acalmar no final do que e nosso texto link. Precisamos de um comprimento máximo. Digamos 50 e padrão vai dizer mais detalhes. Também coloque uma vírgula no final disso. Vamos ver. Ok. Presumivelmente eu não tenho nenhum erro de digitação lá. Vamos em frente e editar nossa página inicial. E aqui podemos ver que há texto de link e página interna, um link externo. Então, na página interna me permite escolher a página inicial ou a página Serviços ou a página sobre ou qualquer uma das páginas de detalhes do serviço. Então, para este, vou selecionar a limpeza. E para o 1º 1 vou colocar um Earl externo aqui. Então, http wag tail dot io Tudo bem, isso salvou. E quando visualizarmos nossa página novamente porque não modificamos nada, um modelo, ainda não veremos nenhuma dessas alterações. Então vamos voltar para o nosso modelo e vamos criar um Lincoln aqui para criar uma tag A. O rascunho vai ser um pouco de lógica de modelo. Então vamos deixar isso para o fim, suponho. E aqui, vamos colocar o texto do botão. Temos aqui um texano chamado cartão ponto Link texto, e onde eu consegui isso era para cada cartão em cartões. Então é de onde estou recebendo o cartão. Há texto de título, texto link de imagem, página interna, um link externo. Estou recebendo o texto do link daqui, e eu estou apenas jogando isso lá então vamos em frente, salve isso e atualize nossa página. E vamos ver mais detalhes para detalhes. E, de fato, isso deveria dizer mais detalhes. Mas isso já estava salvo. Então é tarde demais. Ah, e agora precisamos verificar se temos uma página interna ou um link externo para usar . Então vamos fazer isso aqui. Podemos basicamente, certo. Eu vou escrever isso pelo longo caminho e então eu vou enfiar tudo em uma linha indo para, se cartão ponto página interna carro ponto ponto página interna que você é l. Porque é um objeto de página e objetos de página sempre têm dot u R l Neles, eles sempre têm a propriedade UL. Então podemos dizer, LF cartão ponto página externa, De onde isso vem? Aí está você. Link externo é o que se chama. Em seguida, podemos dizer cartão ponto link externo que um não tem um ponto UL porque é apenas um campo de texto regular. E se é assim que isto vai parecer agora, vou começar a encravar tudo isto numa linha. A quinta ISS e copiar tudo isso e eu vou jogar isso no rascunho A. Aqui está Vá em frente, salve e atualize essa página. E se olharmos para o canto inferior esquerdo, isso é na verdade tentando ir para wag tail dot io. Isso é perfeito. É para onde o 1º 1 deveria ir e este vai para a página de limpeza . Então agora nós somos capazes de realmente adicionar links para o nosso campo de fluxo dentro de nossa lista. Bloco pode ir para qualquer página dentro do branco, dizer qualquer página fora do dedo do pé wag. Agora, vamos em frente e tornar este código um pouco mais agradável de olhar, porque se olharmos para ele agora, quero dizer, isto pode ser legível para muitas pessoas, mas para mim, isto é meio que parece lixo. Como se você me mostrasse este código no início, sim, eu iria lê-lo, e eu seria capaz de analisá-lo com o meu próprio cérebro. Mas só de olhar, eu vou. O que é aquilo tudo lá em baixo? Isto não parece muito bom. Eu realmente não quero lidar com isso. Então vamos em frente e como extrair todos nós, e vamos colocar isso em uma nova classe chamada cartão, e isso vai ser um bloco atingido, e o que eu posso fazer é pegar toda essa cópia e colar, e não podemos usá-lo neste formato específico. Mas o que posso fazer é usar meu editor para me ajudar a trapacear um pouco, e posso em seus vários lugares ao mesmo tempo. E nós podemos fazer isso. Podemos selecionar todos os blocos que estão pegando o bloco R. Vamos pegar todos os blocos. Mas tudo isso na nova linha, isso não vai funcionar do jeito que eu esperava. Então vamos em frente para isso em um novo empréstimo. Livre-se dessas duas linhas. Tudo bem, então aqui você pode ver, eu coloquei tudo em sua própria linha, e parece muito mais com nosso bloco de título. Ele se parece muito mais com uma página wag tail parece muito mais amigável ao Django, e não precisa mais se parecer com isso. Agora nós não estamos realmente indo para habilitar isso, como é o próprio campo de fluxo. Vamos usar isso no lugar de tudo isso. Então o que eu vou fazer é eu vou apagar isso, e eu também vou apagar isso e eu vou simplesmente colocar cartão. É um bloco de lista de cartões. Agora, quando eu voltar para o meu navegador e eu vou editar esta página Ah, eu ainda tenho todos esses cartões aqui. Então eu tenho o título, o texto para a imagem do texto do link, página interna, todas essas coisas boas. Então, só para ter certeza de que isso está funcionando, vamos em frente e jogar algo louco aqui. Zebra, zebra, zebra. Não sei por que escolhi uma zebra e vamos atualizar sua página e ver isso . Então agora nós totalmente na verdade nós removemos completamente todo esse ruído, todo esse código não fácil, e nós colocamos em sua própria classe. Agora, a coisa boa sobre isso é que podemos realmente ir um passo adiante e podemos tirar nosso link também porque vamos estar usando isso em vários lugares diferentes. Então eu vou cortar isso e eu vou criar mais uma classe aqui. É apenas chamado de bloqueio blocos ponto atingido e jogar isso lá Agora, um pouco mais tarde, podemos realmente dar um passo adiante, e podemos adicionar validação a isso. Então, sempre que alguém usa um link em qualquer Stringfield em qualquer lugar, podemos dizer que a página interna ou o link externo tem que ser. Infelizmente, um deles absolutamente tem que ser definido. Atualmente, ambos não são necessários, então você pode teoricamente ter uma seção sem um link. Bem, você realmente não quer isso em tudo, então nós podemos ter certeza que isso é sempre dito Nós vamos falar sobre isso na estrada. Então agora temos um bloco atingido para um link, e em vez de nosso cartão ter os três campos aqui e meio que olhar bastante longo, podemos saber apenas dizer que link é igual ao nosso link. E vai haver algum tipo de mensagem de ajuda? Poderíamos fazer ajudar Texas igual a inserir um link se quiséssemos inserir um link ou selecionar uma página ? Então, agora, se retrocedermos isso, nosso bloco de cartas é um bloco de lista de cartas, e isso é apenas usar isso. Cada cartão tem um título, texto, imagem e link. E agora esse link também tem um texto de link, página interna e um link externo. Vamos em frente e editar nossa página. Vamos ver uma mudança aqui, enquanto que se eu manter rolagem e baixo, continue rolando para baixo. Temos uma secção de ligação aqui. Digite o link ou selecione uma página com texto do link, página interna e o link externo. Agora, se você se lembra, esses links estavam realmente funcionando e você pode ver no canto inferior esquerdo aqui. Ainda não atualizei minha página. Está funcionando. É o jeito dele. Diga dot io e se eu atualizar minha página, vamos ver que o link não funciona mais agora. A razão para isso é porque dissemos no bloco de cartão, já não temos carro ligação externa DOT. Temos cartão ponto link ponto link link externo ou link ponto cartão porque ele está pensando em outro texto link ponto classe. Então vamos voltar para o nosso modelo e onde ele diz carro ponto página interna ou carro ponto link externo. Nós vamos pegar todos esses e fazer cartão ponto link ponto cartão de página interna ponto ligado para fora página interna ponto ponto Você é Oh, então está ficando meio longo. Estávamos meio que começando a atravessar nosso campo de fluxo em Wag Tell em si mesmo ou temos cartão que link ponto link link externo. Vamos continuar e salvar essa atualização de nossa página e você verá que isso ainda não funciona. Agora é neste momento que você pode estar pensando que algo está quebrado e você não estaria errado em pensar isso. Mas a razão pela qual isso não aparece novamente é por causa do que vimos originalmente. Esta é realmente sua própria seção agora, então o texto do link tecnicamente não existe. É o texto do link de ponto vinculado. Ele é vinculado ponto página interna. Ele é vinculado ponto página externa. Então, se escolhermos uma página aqui e esta só vai para a home page e esta de baixo vai para wag tail dot io e vamos colocar no Lincoln externo aqui. Http esperar até ponto io salvar na página de atualização e eles ainda não aparecem. E eu estou disposto a apostar que eles estão trabalhando e que eu tinha acabado de cometer um erro. Vamos em frente e dissecar isso. Aposto que cometi um erro em algum lugar. E se estás a gritar para o teu ecrã a dizer Caleb, sei que o teu erro é fantástico, mas vou ter de ser baixo. Olhe para isso. Aí está o link. Não há texto lá dentro. Isso é interessante. Deve ser exatamente a mesma coisa aqui. Isto ainda vai funcionar. Espere até ponto Io sem link. Então esse é meu erro, e meu cursor já estava nele. Era cartão para ponto link texto querido. Vamos em frente. Salve essa atualização mais uma vez. Alto assim. Com certeza, inferior esquerdo, diz “wag tail dot io”. É para onde vai me levar quando eu clicar nele. Vai me levar a esperar até o ponto para ver isso, e aquele de cima vai me levar para a página inicial. Então, como uma breve recapitulação, o que fizemos nesses dois vídeos é que criamos um bloco atingido com um bloco de lista dentro dele, efetivamente criando uma lista de blocos atingidos. Nós originalmente criamos um bloco bastante longo golpeado, e então nós meio que abstraímos de si mesmo em sua própria classe. Chamamos esse cartão de classe e dissemos Basta fazer uma lista de blocos de cartas atingidas.” Mas também tínhamos links naquele bloco de ataque no bloco de cartas, e dissemos: “ Isso é demais. Então vamos em frente e realmente transformar esses links em sua própria classe, seu próprio bloco de ataque, que foi o que fizemos aqui em cima. E nós jogamos isso lá dentro. Mas agora, porque temos para cada cartão em cartões de auto-ponto e temos link indo para outra classe em nosso modelo estavam usando cartão ponto link ponto link, cartão de texto, querido ponto página interna. E é realmente só dizer para cada cartão em cartões link ponto texto link e que, meu amigo, é um bloco de lista. Então, novamente, a sintaxe que contra muito estranho eu não vou mentir. É muito estranho, e é um pouco confuso no início, mas definitivamente dar uma chance para tentar fazer alguns de si mesmo. E quando você começa a fazer alguns desses por conta própria, você começa a ficar muito bonita. Isto não é tudo o que eu queria. Este não é um campo de fluxo bonito. Então, o que? Eu estou indo para Dio é eu realmente vou desvanecer isso e eu vou jogar em um monte de HTML e nós vamos preencher isso juntos. Tudo bem, então eu acabei de adicionar um monte de HTML aqui e nós vamos preencher isso juntos. Então este é apenas um tipo padrão de bloco bootstrap. Então, provavelmente não vai parecer o melhor neste momento. Sim, aqui vamos nós. Vai ficar igual a isto. Então temos um cartão no cartão esquerdo à direita porque temos dois itens e nosso bloco de lista . Temos um título, um texto, um texto, um botão e um link. E isso deveria ir a algum lugar. Então vamos em frente e realmente fazer algo com isso. Qual é a maior vitória que podemos ganhar aqui? O que vai realmente animar esta exibição? Vamos adicionar uma imagem. Então nós temos nossas tags de imagem wag tail carregadas. Vamos em frente e adicionar nossa imagem imagem imagem cartão ponto imagem. E novamente, eu estou recebendo isso da imagem do cartão ponto. Phil, eu tenho um espaço reservado aqui para 1773 por 369 Vamos fazer 573 por 369 embora eu acho que isso ajudou. Texto está dizendo algo diferente, não é? Sim. 570 por 370 Vamos fazer isso direito. 5 70 por 3 70 como imagem e vamos substituir isso. Eu sou G. Você não é eu e o altar. Vamos mudar isso para Eu sou GED tot não você, Earl dot. Refresque sua página. Olhe isso. Já está começando a parecer muito melhor. Vamos ter o título a seguir. Tínhamos um título aqui. Este vai ser apenas o título do cartão, e novamente, quero dizer, isso pode fazer todo o sentido para você, mas eu realmente vou dirigir isso para casa. Onde consigo o cartão? Aquele título de, quero dizer o bloco da lista. Ele está usando um cartão de classe cartão título ponto. É onde eu estou pegando isso do texto que podemos fazer cartão de texto ponto. Vamos fazer isso em minúsculas, e isso é opcional? Às vezes eu faço esse opcional necessário falso que é, de fato, opcional. Então vamos fazer uma declaração se aqui. Vamos fazer se o cartão ponto texto. Então, se há algum valor lá e se e vamos atualizar nossa página que está vindo muito bem até agora. Vamos agora adicionar esse link. Esse link vai ser o cartão de texto Link ponto o texto link ponto link link. E de novo, onde é que eu arranjei essa? Eu tenho um bloco de lista de cartões aqui. Estou passando por cada cartão chamado. Ainda quatro cartas em cartas. É cartão ponto Link está aqui, então cada cartão ponto link ponto link texto que é de onde eu estou recebendo isso. E agora eu preciso preencher esses links aqueles árbitros da idade. Então vamos fazer um pouco de lógica aqui. Vamos fazer se o cartão ponto link morreu página interna, então vamos usar a página interna você ou então vamos fazer cartão ponto link página interna ponto Você Earl else. Se o ponto do seu cartão Elliff ligou esse link externo, foi assim que eu chamei? Link externo e interno da página. Vamos em frente e fazer cartão patinho que link externo e finalmente em breve outra declaração aqui. Vamos fazer isso ir. Absolutamente nenhum com um sinal numérico. E se e espero que eu tenha toda essa sintaxe, certo? Se eu não tivesse Jenkins me avisaria porque vai haver um pouco de cabelo na página. Com certeza, não, tudo funcionou. Embora quando eu passar o mouse aqui, ele diz host local da parte inferior esquerda, Ele diz cartão host local ponto link link link externo. Algo não está certo que deveria estar lá e confira isso. Isso vai para abanar a cauda. Tudo aqui parece bom e personalizado. Este vai para a página inicial exatamente como eu esperava. Clique nisso. Certifique-se de que ele vá para o exílio ponto io e olhe para isso. Temos boas cartas acontecendo em cartões repetíveis. Podemos adicionar quantos quisermos. Você pode adicionar centenas ou milhares deles se quiser diminuir a velocidade da página depois de um tempo. Mas você pode adicionar quantos quiser. Vou deixar isto às duas e seguir em frente através deste curso. Eu poderia realmente retocar alguns deste conteúdo também, então você pode realmente não ver em como o próximo vídeo que este diz título para ele pode dizer algo um pouco diferente. Próximo. Eu acho que devemos continuar com esta regra que estava em vigor, e nós temos uma pequena maneira de adicionar alguma lógica extra aqui. Então, em vez de dizer se cartão ponto ligado ponto página interna outro cartão não ligado no linkexterno link yada, yada, , tudo isso, em vez de dizer que podemos encurtar isso, Acho que devemos ir em frente e fazer isso com uma coisa chamada valor atingido. Faremos isso no próximo vídeo, porém, assim que você estiver pronto para seguir em frente e aprenderemos sobre como simplificar uma parte dessa lógica de template. 22. Lógica de campo personalizado: com um bloco atingido, podemos adicionar personalizado, lógica e valores sem ter que realmente mapeá-lo de volta para um objeto de dados armazenado, que é realmente apenas conversa extravagante para dizer que nós realmente não temos que armazenar dados extras como nós não precisamos Outro campo aqui chamado, como você oficial, Earl. O que podemos fazer é adicionar alguma lógica adicional aqui agora, In Django. Se fosse um modelo, pareceria algo como classe. Vocês são modelos, esse modelo. E seria como se você tivesse uma propriedade aqui surda, algo de auto-retorno. Sabe, sua lógica estaria aqui, e então você voltaria. O que mais estiver lá dentro. Basicamente, você usaria o decorador da propriedade. Bem, não estamos fazendo isso porque não estamos usando na propriedade. Não estamos usando um modelo de jangle. Estamos usando uma espera até o bloco atingido, seção de campo extremo. Então, essencialmente, o que eu gostaria de fazer neste vídeo é se livrar de praticamente toda essa lógica e apenas dizer se o carro querido que você é el existe, use que você, Earl, o que quer que seja. Então o templo ele não precisa mais verificar para ver se sua página interna ou uma página externa precisa ser uma ou outra, e nós vamos fazê-los com uma coisinha legal chamada valor atingido. Então, em nosso link, podemos realmente dizer classe Meta. Vamos nos dar uma classe de valor e nós vamos nos dar um valor Classe de valor de link valor, valor link. Não, isso não existe atualmente. O valor do link não existe, mas vamos fazê-lo existir. Então aqui em cima, eu vou dizer que o valor do link de classe agora vai existir. Blocos valor traçado, não instruir Bloco nem um bloco de lista, mas instruir valor. E isso vai adicionar lógica adicional para nossos links. E então o que eu quero isso para Dio é em vez de dizer, link dot página interna, eu quero que nosso modelo seja capaz de dizer link dot você Earl, e ele vai descobrir qual deles está aqui, e ele vai apenas retornar o que estiver disponível. Agora, isso é realmente bem simples. Temos que fazer o tipo. Você é l auto, eles são surdos, Você, Earl, e vamos em frente e obter essa página interna para a página interna vai ser auto. Não obter Internal Page e porque nós vinculamos essa classe de valor para desvincular valor aqui em cima , sempre que ponto u R l vai ser chamado, ele vai dizer, Ei, pegue essa página interna, o que quer que seja, e armazenar isso em uma variável que agora temos acesso a que vamos fazer o link externo. Vamos fazer link externo é igual a auto cavado ainda ex link eterno. E eu gosto de colocar isso em suas próprias variáveis só porque parece tornar meu código um pouco mais fácil de ler um pouco mais adiante. Então agora eu posso dizer, se Internal Page, porque esta é uma variável local, eu posso fazer isso. Se a Página Interna estiver definida, eu poderia retornar a página interna, não é, Earl? E parece exatamente como o que está em nosso modelo temos Se ponto carro ligado na página interna , em seguida, mostrar carro ponto link ponto página interna Aqui é dot u r l. Nós poderíamos fazer exatamente a mesma coisa em nossa lógica python. Nós também podemos fazer LF link externo e poderíamos apenas retornar que também link externo. E por último, se quiséssemos, não poderíamos devolver nada. E se quiséssemos que ele fizesse isso um pouco, podemos dizer que isso sempre retornará uma corda. Vamos em frente e dizer isso. Confira nosso terminal. Não há reclamações, então não tenho erros de digitação. Com sorte, vamos voltar para nossas cartas aqui, e eu vou colocar isso perto do título. É um lugar que eu posso ver colocar a regra horizontal lá dentro e vamos fazer o link do cartão ponto ponto ponto você Earl. , Agora, a razão pela qual eu estou usando o link do ponto do carro que você está apenas é dos dois últimos vídeos onde estamos falando de um bloco de lista. E agora temos uma verdadeira cadeia de eventos acontecendo aqui temos um bloco batido chamado bloco de cartas , e dentro dele há um bloco de listas de cartas. Dentro de cada cartão é uma imagem de texto de título e um link, e dentro desse link há mais três campos, texto de link, página interna e link externo. Mas também estamos dizendo, Ei, há uma classe de valor aqui, então dê-lhes alguma lógica extra para que a classe de valor esse valor de link venha aqui e sempre que fizermos ponto u r l no próprio link. Então isso é exatamente como adicionar você era tudo é igual a alguma lógica personalizada. É exatamente assim que a lógica personalizada agora vai procurar a página interna. Se existir, vai dar-nos a rapariga. Se houver um link externo em vez disso, ele vai nos dar isso. E se não houver um vai retornar apenas uma string vazia. O que acha disso para uma cadeia de eventos? Isso é muito bom, não é? Então agora estamos fazendo cartão ponto ligado em u R L em vez de ponto de carro ligado na página interna carro adulto coisa ponto link externo. Vamos em frente e nos dê um rápido, rápido, um pouco de refrescante. Este diz Slash, porque vai para a página inicial. E este aqui diz http wag tail, não olhe porque não há nenhuma página definida para este. É um link externo. Então, agora vamos limpar isso. Vamos nos livrar disso. E vamos selecionar toda essa lógica do nosso último vídeo, todas as três seções, e podemos simplesmente fazer se cartão ponto link ponto u R L cartão que link que você está bem, caso contrário, não há nada lá dentro. Então, na verdade, nem precisamos fazer isso. Vamos apenas fazer isso. Vamos sempre colocar essa ligação com você, Earl. Então, mesmo que não haja nada lá dentro, tudo bem. Claro, o esquerdo ainda vai para a página inicial, e o direito ainda vai para wag tail dot io. E neste ponto, podemos realmente fazer o nosso modelo olhar e se sentir um pouco mais agradável. Gosto de fazer esta parte porque podemos dizer no início do nosso A tag se o cartão ponto link ponto você, Earl e vamos até o final e fazer E se e vamos também procurar as etiquetas de fechamento e basicamente fazer exatamente a mesma coisa Se cartão ponto link ponto u r l. E eu vou explicar o que estou fazendo aqui em apenas um segundo. E se assim for, isto é dizer que se há um link, você bem, então basicamente, se ele retorna qualquer coisa diferente de uma string vazia nos fornecer um link com esse link você onde l dentro dele e da mesma forma aqui em baixo estavam dizendo, Se esse link você onde tudo existe, também, feche esse link. Então, agora, se salvarmos esta página, não veremos nenhuma diferença. Ambos têm ligações. Estes são os dois links. Você pode ver no canto inferior esquerdo que eles estão alternando para frente e para trás. Mas só por diversão, Z vamos em frente e nos livrar daquele que liga de volta para a página inicial. Este é Zebra, Zebra Zebra, e este vai para a página inicial. Vamos esclarecer essa escolha. Então ele não está indo para a home page, e ele não está indo para nenhuma página externa ou página interna. É Click publicar e atualizar nossa página, e este não é um link. Na verdade quebrou algo lá, no entanto, e isso foi porque eu estava tentando ser chique e editar três lugares ao mesmo tempo. E com certeza, o cartão à esquerda não tem mais links em nenhum lugar, e o cartão à direita ainda tem. E é assim que adicionamos lógica extra aos nossos campos de fluxo usando um valor de estrutura. Agora não tem que ser apenas com um link. Você pode fazer isso em qualquer bloco atingido. Tudo que você tem que fazer é valorizar. Classe sublinhado é igual a qualquer que seja o seu valor de link vai ser seu ou realmente o que quer que o valor atingido vai ser chamado esse nome de classe, e então você pode pegar seus valores de qualquer campo que você tenha escrito. Então você pode executar alguma lógica e retornar o que quiser. Pessoalmente, eu acho que esta é uma característica fantástica que eu não vejo o suficiente lá fora. Eu realmente, realmente gosto deste. Eu acho que é uma maneira agradável e limpa de dar aos seus campos de fluxo um pouco de lógica extra sem atrapalhar o seu template. Neste ponto no tempo, eu recomendo muito dar uma olhada no código-fonte, mesmo apenas sinta-se livre para totalmente roubar meu código-fonte e apenas mexer com ele. Experiência. Tente quebrá-lo se você quiser, porque há quatro seções para isso. Ali está o bloco de cartas. Há o bloco de cartas, há o bloco de ligação. E depois há a ligação. O valor atingiu valor, então definitivamente dê uma chance. Divirta-se com ele de novo. Não tenha medo de quebrá-lo. E quando você estiver pronto para seguir em frente para o próximo campo de sonhos. Vamos em frente e criar um campo de fluxo onde teremos uma imagem e algum texto. 23. Bloco de imagem e texto: Certo, vamos dar um passo atrás e não trabalhar com algo tão complicado. Lista de blocos. Eles têm, Ah, muitas partes, e é muito fácil estendê-lo. Como vimos nas últimas três lições, vamos voltar a um bloco de ataque regular e vamos apenas adicionar uma imagem e talvez algumas opções de alinhamento de imagem . Vamos reutilizar o link que usamos em nosso criado no último vídeo, e isso também é adicionar uma imagem. Então, primeiro, vamos em frente e abrir nosso arquivo de pizza de blocos de streams, e eu vou recolher isso completamente. Faça isso apenas um menor, e não importa onde você quer colocá-lo. Acho que posso pôr isto no fundo. Eu sei que quero criar uma nova classe, e eu só vou chamar imagem e bloco de texto porque eu não quero nomeá-los muito criativamente. Quero nomear esses verbosos Lee, as pessoas saibam exatamente o que estão olhando. Este vai ser um bloco atingido, um bloco de ataque regular, e eu sei que vai ser uma sorte golpeada porque vai ter vários valores aqui. Então ele vai ter um alinhamento de imagem. Vamos dar a essa seção um título, algum texto e um link. Bem, sabemos que Link já está pronto. Link é igual a link. Agora, de onde vem isto? Criamos uma classe aqui chamada Link. Usamos no nosso cartão. Agora podemos reutilizar-nos por todo o lado. É um bloco atingido, e já tem valor personalizado chamado dot u R L. Então agora eu posso usar isso em qualquer lugar. Então este, quando se trata de adicionar, mas no texto selecionando uma página de cauda wag ou uma página externa estão copiando e colando um link para uma página externa. Isso já está feito. São três campos em uma linha. É uma imagem agradável e fácil. Já usamos este. Seletor de imagens, bloco, e poderíamos ajudar. Texto sobre este aqui. Isto também vai ser necessário. Então, digamos que a imagem será automaticamente recortada magicamente. Esta vai ser uma imagem maior. Então eu acredito que é 768 Não, eu disse isso errado. 786 60 Parece estranho. 7 86 por 552 pixels. Se eu me lembro do design corretamente alinhamento da imagem, este vai ser um novo. Isto vai ser blocos bloco escolha ponto agora. Um bloco de escolha parece muito interessante. Então nós temos opções aqui, e isso vai ser um par de duplas, basicamente. Então você tem escolhas que podemos colocar esquerda e esquerda, e eu vou te dizer o que isso significa em segundos com a esquerda, uma na direita, outra significa direita e direita, e isso foi muito confuso o que eu disse. Então, cada problema tem dois valores nele. A esquerda é o que vamos ter acesso ao modelo interno e o direito é o que vai ser exibido para que possamos dizer imagem para a esquerda. Totti esquerda para a esquerda e imagem para a direita. Isso deixa isso um pouco claro. Nós também podemos dar-lhe um valor padrão, então o padrão vai ser deixado. Digamos que a imagem esteja sempre à esquerda, e como todos os outros, também podemos nos ajudar. Texto aqui. Também podemos dividir isso em novas linhas. Então parece um pouco mais consistente. Ajuda Texas igual a imagem à esquerda com texto à direita ou imagem à direita com texto à esquerda. Nosso título vai ser blocos Tut char bloco. Já vimos este antes. Vamos dar a isso um comprimento máximo de algo como 60 caracteres e ajudar o texto comprimento máximo de 60 caracteres. O texto é igual ao stud de bloco. Você quer HR Block Sim, não vai demorar muito. Texto. Então bloco de RH com comprimento máximo do que costumava ser um tweet. 140 caracteres, e nós vamos fazer este opcional obrigatório é falso e nós temos um Lincoln aqui. Em seguida, vamos em frente. Especifique algumas opções meta. Para onde vai esse modelo? Digamos córregos. Imagem e bloco de texto dot html e ícone. Vou dar-lhe um ícone de imagem, e o rótulo vai ser imagem e texto com um N por cento no meio. Então ele não diz e ele apenas diz imagem comercial e texto. Agora isso é tudo legal. E espero que eu não tenha erros de digitação. meu terminal não pensa assim. Eu vou copiar esta imagem de valor e bloco de texto apenas esse texto e eu vou abrir modelos de casa que torta e no meu corpo aqui, onde eu tenho o campo de fluxo de título e o campo de fluxo de cartão, eu só vou adicionar imagem e blocos de texto ponto imagem e bloco de texto. Agora não há atualmente nenhum modelo, mas vamos em frente e ver como isso se parece em nosso back-end. Quando editamos nossa página, alguém errado lá bloco não é definido. Sim, isso está correto. Bloco é, de fato, não definido seus blocos. É atualizar nossa página, e quando eu clicar nisso mais, agora temos imagem e texto notado o comercial e lá que é o rótulo. Então agora podemos selecionar uma imagem, qualquer imagem. É como aquele. Queremos alinhamentos de imagem para a esquerda ou alinhamento de imagem para a direita? Vamos a imagem vai ser para o título da amostra esquerda aqui. Exemplo de mensagens aqui. Exemplo de texto aqui. Vincule mais detalhes. Sim, vamos com mais detalhes. Uma página interna Vamos com o brilho. Na verdade, vamos mudar um pouco disso. Esse é o título dos foguetes mais limpos que já existiram, e o texto vai dizer que nenhum foguete nunca esteve tão brilhante. É tão brilhante, é quase sem fricção. Vá em frente e guarde isso. Publique nossa página e novamente quando apertamos Atualizar. Isso vai procurar um modelo de campo de fluxo que não existe. Sim, e ele está procurando imagem e bloco de texto, e nós sabemos que vai procurar em todos esses lugares diferentes para ele. Então vamos em frente e fazer isso existir sob meu projeto ROCKETMAN ou qualquer que seja o seu projeto vai ser chamado ou é chamado sob templates sob streams, vamos criar um novo aqui. Imagem e bloco de texto dot html. Não, este ponto. Não há nada aqui que não tenhamos lidado com exceção do alinhamento de imagens. Então, vamos abordar o alinhamento da imagem primeiro. E então vamos, uh, eu acho que vamos passar por todos os outros e meio que sentir isso. Eu não faria parecer legal. Vejamos o alinhamento da imagem dela. Tudo o que precisamos fazer para isso é um alinhamento de imagem auto-ponto, e isso vai coincidir com este texto aqui e novamente. Quando você está em um campo de fluxo, pode ser ponto de valor, alinhamento de imagem ou auto. Aquela linha de imagem Então vamos dizer alinhando. Vamos dar isso em H um. E quando atualizamos nossa página fazer, fazer, fazer, fazer, fazer, fazer, vai estar alinhando à esquerda agora não tem nada a ver com esta seção. Não se confunda com isso. Esta vai ser a sua própria secção aqui. Esta não é uma seção completamente diferente que já existe. Ok, então o que eu vou fazer aqui é eu vou desaparecer. Vou acertar um monte de html e depois vamos preencher as peças que faltam juntos. Ok, então eu escrevi um monte de HTML aqui, e nós vamos preencher os pedaços que faltam. Mas vamos dar uma olhada no que isso parece agora. Então, quando eu atualizo minha página, eu tenho uma imagem aqui que tem um link. Você pode ver que no canto inferior esquerdo há um título, algum texto e um botão opcional. Embora atualmente seja codificado, por isso não é opcional. Definitivamente está lá todas as vezes. Então precisamos fazer algum trabalho aqui. Precisamos do dedo do pé, basicamente remover tudo o que fazer e remover esta imagem de espaço reservado. Então vamos apenas trabalhar para baixo este um de cada vez, e vamos olhar para cada um dos para fazer está aqui. Então CC I 80 seção de imagem e texto. Quero que sejamos alinhados. Então isso vai ser auto-alinhamento de imagem ponto e esta é caixa flexível. Então isso vai ser para a esquerda ou para a direita, e apenas corresponde com o CSS. Em seguida, vamos fazer a foto. Eu sei que há um oito áspero aqui em cima, mas vamos ver a foto primeiro. Então nós queremos imagem auto ponto Como nós chamamos isso? Não apenas imagem. Essa é fácil. Queremos ter certeza de que ele sempre preenche exatamente 786 pixels por 552 pixels como eu sou G e eu vou substituir isso com imagem dot TRL. O altar precisa ser substituído. Mesmo que não haja todo o texto lá, é sempre bom ter pelo menos os atributos antigos lá dentro. Vamos em frente e atualizar esta página. Algo quebrou. Oh, isso não é estranho? Marca de bloqueio inválida na imagem da linha 11. Esqueceu-se de se registar? Carregue este Take. Você está absolutamente certo. Eu fiz. Vamos adicionar tags de imagens de cauda wag. E lembre-se, toda vez que usamos a etiqueta de imagem Wag Tail, sempre precisamos carregar. Aguarde até que as imagens sublinhem tags. Agora vamos refrescar. Tudo bem, certo, tudo bem, isso não parece tão ruim. Certo, vamos fazer o texto do título e o botão. Então o título está bem aqui. Nós estamos indo para dio auto dot título. Presumivelmente foi assim que eu lhe chamei. Sim, próximo título vai ser texto. Este é opcional. Então, porque isso é opcional, se auto ponto texto e se e aqui, vamos fazer auto-ponto texto olhar que os foguetes mais limpos já existiram. Nenhum foguete nunca esteve tão brilhante. É tão brilhante, é quase sem fricção. Isso é um pouco para fazer lá dentro. Agora este vai ser um pouco diferente. Isso não vai ser texto de link auto-ponto. Isso vai duvidar de si mesmo. Link ponto link texto link, texto. Lá vamos nós. E a razão para isso é porque link é igual a link. Bem, esta é outra classe, então você pode pensar nisso como link é igual a, e então ele vai tipo de entrar em como uma subseção de si mesmo e seu texto de link tem é igual a e tipo de. Se você pensar sobre isso assim, seu link pensamento texto link é igual a, e agora precisamos adicionar nossos links em anos. Então vamos encontrar tudo isso. Deve haver alguns deles lá dentro. Sim, dois deles. Então isso sempre vai ser tão ponto link dot u R l. E nós estamos recebendo esse do nosso valor atingido. Então temos um link que estamos usando aqui link texto,página interna, link página interna externo e está usando um valor de link ou um valor de traçado. E nos dá o valor do ponto u R L. Então esta é a lógica de campo de fluxo personalizado. Isso realmente não existe no campo de fluxo, mas assim que o campo de fluxo está sendo renderizado na página, ele existe. Então temos acesso ao link que você é l Agora, Por último, devemos fazer esses links opcionais. E a razão pela qual vamos torná-los opcionais é porque temos uma página interna um link externo, e ambos não são necessários. Ambos são opcionais, então há uma maneira de alguém ignorar os dois campos e não haverá realmente um link. Então vamos apenas ir em frente e resolver esse problema agora com se auto ponto ligado que você iria se certificar de que isso existe e se e nós queremos fazer a mesma coisa com nossa tag de fechamento e se e isso é limpar isso, há um mais. Onde você está? Bem ali. Você tem que ligar existe. Mostre o link. E se vamos em frente, tudo bem, então isso agora vai se ligar ao nosso serviço brilhante. Então, em nossa página inicial, agora temos um banner e temos um campo de fluxo aqui que diz os foguetes mais limpos já existiram com o link que vai para mais detalhes. E quando clicamos, ele vai para o nosso serviço brilhante. E é assim que criamos mais um campo de fluxo, um campo de fluxo de bloco atingido com um alinhamento de imagem seletor de imagem, que é tecnicamente um texto de título de bloco de escolha. E já estamos reutilizando os componentes do link em duas seções. Então estamos realmente fazendo uso disso 24. Bloco de rádio: Oakley Doak. No início de seu último vídeo, criamos alinhamento de imagem com o bloco de escolha. Agora, um bloco de escolha pode ser ótimo se você tiver várias opções. Mas se você tem apenas duas opções, às vezes você só quer, como uma opção de seleção de rádio onde é como você em selecionar uma ou outra com pequenas caixas . Então, neste vídeo, vou mostrar-te como fazer isso. Vamos abrir o nosso quarteirão. Parar I. E no último vídeo que criamos, alinhamento de imagem é igual ao bloco começa Chooser bloco. Na verdade, vamos substituir isso por mais, ah,bloco de ah, seleção de rádio. Então, vou escrever o código primeiro. Depois vamos fazer algumas importações e depois vamos substituir isto. Então vamos em frente e escrever bloco de seleção de rádio de classe. Eu acho que não é realmente um seletor como um seletor de páginas ou eu estou em sapatos. Ou talvez não vamos chamar isso. Vamos chamá-lo de um bloco de seleção de rádio bloco bloco escolha de ponto e você pode notar que este é o mesmo que este, e agora nós estamos realmente herdando isso diretamente. Agora, se quiséssemos, poderíamos continuar dissecando esse código-fonte. Poderíamos clicar com o botão direito e ir para a definição. Ou você pode ver o código-fonte em Get Hub em get hub dot com tal cauda wag slash wag tail E aqui nós fomos. Escolha é um pouco de ah aqui dentro, um monte de coisas acontecendo. Arranja escolhas culpadas e podes passar pouco tempo aqui. Eu só meio que ir através do código-fonte não é realmente muito tempo se você se livrar de todas as cadeias de doca e os comentários. Mas se você quisesse, você sempre poderia explorar isso. Eu sempre encorajo você a olhar para o código-fonte, mesmo que não faça sentido no início. É bom apenas ler sobre isso, porque de vez em quando algo clica. Vamos fazer definitivamente. Vimos essa função. Então vamos passar nas artes e nos quarks. Vamos executar super sobre isso para que ele já é executado nele a partir do bloco Choice. E vamos também passar em qualquer tipo de nossos ovos e coros que vão ser passados para lá estão no reboque. Este. Ah, e então vamos definir um widget de campo se eu me lembro disso corretamente. É campo de auto-ponto que widget é igual a formulários. Então este é um formulário de jangle que iria importar isso em apenas um segundo. Acredito que seja uma seleção de rádio. E então podemos dizer que as escolhas vão ser qualquer que seja o campo auto-feito, esse widget que as escolhas são. Agora, se você não entende todos nós porque talvez você seja novo no Django ou talvez você não saiba nada disso tudo. Então, honestamente, não sintas que tens de ir e aprender tudo isto. E se você gosta desse recurso, não se esqueça que pode roubá-lo, certo para o meu código-fonte, ele está disponível para você. Agora o que vamos fazer é importar isto. Eu também vou consertar alguns do meu tipo estava lá. Você não viu nada. Não houve erros de digitação. Agora eu vou rolar todo o caminho até a minha página e eu vou fazer a partir de formulários de importação do Django e eu vou voltar para baixo até onde os formulários estão. E onde estão o caminho em vez de blocos? Inicie o bloco de escolha. Tudo o que vou fazer é substituí-lo por este texto aqui. Radio Select Block Vamos mudar isso para um bloco de seleção de rádio. É, no seu núcleo, um bloco de escolha. Tudo o que dissemos foi usado um widget de campo diferente e assim tudo o resto que estamos aplicando padrão, ajuda, texto e escolhas. Eles já vão ser aplicados. De qualquer forma, essas são a palavra-chave são ovos que estavam passando nele, que está correndo super, que vai correr super no bloco de ações Choice block. Então, tudo ainda está passando pelo rio acima. Vamos em frente e salvar isso. Quarks não está definido. Sim, porque não são coros, seus shows principais que parecem mais saudáveis. Vamos em frente e atualizar nossa página. E você poderia olhar para essa imagem de alinhamento de imagem, a imagem esquerda para a imagem direita imagem esquerda para a direita, e nada vai mudar em seu modelo. Tudo o que fizemos foi trocar os widgets que esperavam até serem usados para uma seleção de rádio. Então, em vez de uma lista suspensa, dissemos, use uma seleção de rádio. Se você gosta desse tipo de coisa, definitivamente sinta-se livre para usá-lo. Se você acha que isso é totalmente inútil em uma espécie de desperdício de seu tempo como desenvolvedor, ignore e vamos passar para a próxima lição 25. Chamada para bloqueio de ação: Vejamos a criação de outro novo campo de fluxo, um campo de fluxo de chamada à ação. Digamos que alguém está na nossa página e estamos tentando vendê-los em nossos serviços de manutenção de foguetes , e queremos que eles nos contatem. Bem, atualmente, nós rolamos a página para baixo. Não há maneira real de nos contatar. Eventualmente, podemos criar um paciente de contato. Nós vamos. Definitivamente chegaremos lá. Mas neste momento, nós só queremos criar algum tipo de chamada para o Bloco de Ação. Agora, este vai ser apenas um título muito básico e link e literalmente nada mais. Então vamos em frente e adicionar esse bloco. Agora vou fechar tudo isso e fingir que estou começando do zero . Vamos em frente. Abrir blocos barra. Não. Isso é errado. Vamos em frente e abrir fluxos barra bloco. E no final da minha página, vou adicionar classe. Call to action block, block start block block e eu estou apenas fazer algum espaço para trabalhar lá. Ok, então eu disse, vai haver um título que vai ser algo e um link, e isso vai ser alguma coisa. Bem, sabemos que o link já está definido, tão legal que está feito. E o título é simplesmente vai ser um bloco de caracteres, e nós vamos nos dar um comprimento máximo de talvez 200 para que possa ser bastante longo. Se quiséssemos que fosse e ajudar Texas vai dizer comprimento máximo de 200 caracteres, vamos em frente e adicionar Nosso modelo de classe meta vai ser fluxos barra Bem, vamos fazer este um pouco diferente. Ele vai estar procurando por uma chamada à ação bloqueada html. E, na verdade, vamos ver o que ele vai procurar. Apenas como prova. Não vamos dar um modelo. Eu vou dar-lhe como um ícone, no entanto, e então eu vou dar-lhe um rótulo chamado Call to Action. Na verdade, isso é ótimo. isso não faz nada, Masisso não faz nada, porque precisamos ir até nossa página inicial e habilitar isso. Então, no corpo dela, temos que digitar. Eu não sei. C t uma chamada de início de bloco para Bloco de Ação. E lembre-se que este Texas realmente não está sendo usado por nós agora, há uma maneira de percorrer cada campo de fluxo único e detectar qual fluxo sente que é , mas nós não vamos fazer isso. Vamos verificar se o terminal diz que não há problemas. Isso é uma boa notícia. Vamos em frente e editar nossa página inicial e devemos ver uma chamada à ação bloqueando aqui. Mas Babu, lá se chama Ação, e a ação vai ser algo nas longas filas dos melhores foguetes já causaram. Eu não sei. Acho que estamos fazendo foguetes agora. Provavelmente não. Eu vou me trocar. Contento-me um pouco mais tarde. Uh, vamos eu quero fazer isso brilhando. Não, não vamos brilhar. Vamos fazer a limpeza. E vamos nos mudar dos melhores foguetes de sempre para algo um pouco mais aplicável aqui. Ele era um foguete no espaço recentemente? Limpe isso. Limpe seu foguete agora pode imaginar que eles ficam muito sujos com todo esse combustível sendo usado e, uh , você sabe, entrando e saindo da atmosfera e tudo mais. Tudo bem, isso está salvo. Vamos atualizar sua página. E você olharia para isso? Na verdade, não está dizendo que o modelo não existe. É apenas renderizá-lo direto para a página. Não, isso é legal e tudo mais. Mas não queremos isso. Queremos que isso realmente tenha um campo de fluxo adequado. Vamos dizer que tem que viver no chamado Action. HTML bloqueado. E quando eu atualizar esta página agora, vamos ver que simplesmente não existe. Área Já vimos isso. Oh, meu Deus. 100 vezes agora, vamos em frente e fazer isso existir. Modelos Rocket Man, fluxos e nova chamada de arquivo para bloco de ação html ponto. Tudo bem, então eu acabei de adicionar minha chamada ao bloco de ação lá, e você pode realmente ver o que eu fiz. Há então há um título e vai haver um link. Na verdade, não acho que Link está certo. Na verdade, isso deveria ser classe. Isso parece melhor. Ok, agora só precisamos adicionar nosso título novamente. Isto está vindo de um campo de riacho. Então, um campo de fluxo enfraquece-se título de ponto ou título de ponto de valor. Vamos em frente e fazer auto-ponto título para não ser confundido com um título de página. E porque este é um link que vem da chamada ação, Então auto link ponto vai nos dar texto link,página interna, página interna link externo e através da lógica de campo de fluxo aduaneiro Você é l então aqui podemos dio auto link de ponto. Você não é? Não, essa é a errada. Texto do link. E para a garota, aqui é onde estávamos fazendo auto-ponto Link que você é Huzzah! Seu foguete e espaço foram recentemente? Limpe isso. Limpe seu foguete agora e nos traz para o nosso serviço de limpeza de foguetes beleza página. Agora, isso tem sido divertido, mas, uh, eu acho que é hora de começar a entrar em alguns tipos diferentes de campos de fluxo e também jogar com coisas como um bloco de seleção de trechos onde podemos realmente selecione um depoimento . 26. Testemunhos e snippets: Era uma vez, muitos, muitos vídeos atrás, criamos esta seção de depoimentos. Nós tivemos citações de Yoda e Chewbacca, e então nós também registramos são testemunhos como um trecho, e este testemunho foi na verdade um modelo jangle. Não tem nada a ver com Wag Tail, exceto pelo fato de que nós o registramos no Wag Tell Edmon e registramos como um cheirá-lo. Agora snippets são bons porque eles são pedaços de dados como este que podemos selecionar usando uma interface gráfica de usuário pegajosa. E neste vídeo, é exatamente o que vamos fazer. Vamos permitir que as pessoas selecionem um testemunho e criem um campo de transmissão de depoimentos. Mas em vez de ter que escrever o campo de fluxo uma e outra vez porque talvez o mesmo ,o mesmo testemunho será usado em quatro páginas diferentes. , Nós simplesmente vamos dizer, Selecione um destes, e quando nós mudá-lo em uma página, ele irá mudá-lo em cada página. E vamos direto para a nossa página inicial modelos que torta. E aqui estamos indo diretamente para um novo campo de fluxo, e este vai ser chamado de testemunho porque vamos estar usando um campo de fluxo que é apenas um tipo específico. Por exemplo, temos este bloco de título. É um bloco atingido e só tem um campo. Então, por que estamos usando blocos que golpearam bloco quando você sabe que poderíamos usar blocos ponto char bloco em vez disso? Agora, se tivermos mais de um campo, como no cartão ou nossa imagem e bloco de texto, mesmo em nossa chamada de ação Bloco? Claro, faz sentido usar um bloco atingido, mas quando você só tem um campo, às vezes é mais fácil simplesmente não usar um bloco atingido tudo e usar o que esperar até que nos dê fora da caixa. Então o que vamos fazer aqui é dizer que nosso próximo campo de sonho é chamado testemunho, e vamos usar um bloco de seleção de trechos, que não vem do nosso arquivo de blocos e no topo da nossa página aqui. Queremos fazer a partir de trechos de ponto de cauda wag blocos de pontos, snippet de importação, bloco de usuário. E se olharmos para o nosso terminal, você pode ver claramente que ele está reclamando. Temos um argumento posicional. Modelo de alvo ausente. Ele não sabe qual snippet selecionar. Agora, mesmo que nosso site realmente só tenha um aqui, ainda precisamos dizer qual modelo selecionar. Isso é realmente muito fácil de especificar. Aqui podemos simplesmente dizer, dentro do bloco, passá-lo diretamente. Podemos dizer que o modelo Target vai ser. Qual modelo queremos usar? Bem, em uma corda, então nós vamos meio preguiçoso carregar este testemunho enguias. Posso soletrar depoimentos de matriz? Não teste Moughniyah Will. Não faço ideia se soletra direito. Meu terminal vai saber, embora pareça OK. Vamos em frente e isso é página inicial do editor na página inicial da página que rolar para a parte inferior temos um novo aqui chamado Testemunho automaticamente nos dá o nome e esse nome está simplesmente vindo daqui. Vamos fazer isso um pouco menor. Esse nome vem daqui, então ele está sendo usado neste momento porque não estamos dando nenhum tipo de rotulagem extra . O ícone é o ícone de snippet, apenas um par de folhas que vem padrão e agora ele vai nos dizer para escolher um testemunho, e neste ponto, vamos escolher Chewbacca clássico. Vamos publicar, e quando carregarmos nossa página, não será exatamente o que esperamos. Vamos rolar até aqui e esfriar. Vemos o testemunho, mas não podemos fazer muito uso dele neste momento. Então vamos em frente e nos passar um modelo personalizado também. E neste ponto, acho que é mais fácil se colocarmos isso em linhas separadas. Então, o primeiro parâmetro, o primeiro argumento de palavra-chave de parâmetro posicional, em vez disso, é o modelo de destino. O 2º 1 que vamos dar é um modelo, e isso, neste momento não é diferente. Em seguida, passando um modelo no meta classe. Então, vamos simplesmente dizer que este temporário precisa viver em streams barra sim, Imo nial bloco dot html E agora, quando atualizamos nossa página, vamos ver quando ela carrega. A propósito, se o seu lado carregar muito devagar assim e você está ficando impaciente com ele, é essa coisa aqui, barra de ferramentas de depuração do Django. Esta é uma ferramenta de criação de perfil, então ele vai registrar todas as consultas, todos os arquivos estáticos, tudo lá dentro. Se isso estiver demorando muito, você pode simplesmente entrar em suas configurações altas e desativá-lo. Então estamos vendo o temido modelo não existe erro. Na verdade, ele não é temido. Sabemos exatamente o que está fazendo. Está tentando procurar um bloco de testemunho em todos os tipos de lugares diferentes. Vamos fazer com que exista. Então, em nossos fluxos, vamos em frente e adicionar um bloco de testemunho html. E neste ponto, é meio difícil de entender o que temos acesso porque interior c t um bloco Nós tínhamos um título, então era título de auto-dúvida ou em nosso bloco de texto. Acho que foi só uma mensagem. Sim, tão interno em nosso modelo, teríamos acabado de dizer texto auto-ponto ou texto de ponto de valor. Mas o que fazemos em um bloco de testemunho ou em um bloco de seleção de trechos? Em vez disso, quando não sabemos o que está sendo dado, então o que podemos fazer é começar a experimentar. A primeira coisa que podemos fazer é passar por si mesmo. Vamos ver o que isso retorna. Você pode ver que diz ordem por Chewbacca. Bem, esse não é o depoimento. O depoimento é G R R R R R R R e a atribuição é Chewbacca. Então, se abrirmos depoimentos, o arquivo de modelos, veremos que temos uma citação aqui e a atribuição. Nós também temos sublinhado sublinhado str sublinhado sublinhado. Então, a Dunder encadeou e é isso que está retornando é retornar a representação de cordas de si mesmo. Nós não queremos isso. A coisa boa sobre isso é que sempre que você vê um objeto retornando a representação de string de si mesmo, isso é porque é todo o objeto que está sendo retornado. Ele só não sabe se você quer ver a citação ou a atribuição Fielder ou o que você quer ver? Então só diz: “ Ok, Ok, bem, eu vou te dar o nome que você deu e é por isso. E é exatamente por isso que estabelecemos isso antes foi, uh, para ajudar, mas também faz parecer um pouco mais agradável. Então vamos em frente e tentar a citação DOT. E quando atualizamos sua página, lá está. Há citação e atribuição, e mais uma vez, eu vou atualizar sua página e ele vai dizer Chewbacca exatamente assim. Tudo bem, então eu não queria que você me observasse, certo? Todo esse HTML chato testar o fato de que eu fiz alguns erros de digitação, meu CSS que não funcionou da maneira certa na primeira vez. Então eu desmaiei, desmaiei, e vamos preencher isso juntos. Então vamos dar uma olhada no que isso parece agora com apenas o texto para fazer lá. Temos uma citação que precisamos preencher e atribuir que precisamos preencher. Então agora que sabemos como acessar esse enfraquecimento, simplesmente faça aspas de auto-ponto e aqui embaixo podemos fazer auto-atribuição de pontos e novamente, estou recebendo isso diretamente do próprio snippet porque temos um testemunho aqui. É um modelo. É um modelo de jangle, mas está registrado como um trecho e não usamos um bloco de ataque. Nós dissemos, Basta selecionar esse pedaço de conteúdo. Selecione esse depoimento. Só aquele testemunho cru. Este modelo de testemunho agora se torna entre aspas ou o valor. Então vamos verificar isso. Oh, sim, isso está parecendo muito bom. Ok, nós temos mais uma coisa aqui porque eu realmente quero isso. O que há em um traço EM? Comece o longo. Acho que é uma longa. Sim, é. É um pequeno traço ali. E agora temos um bloco de seleção de trechos, e a qualquer momento, podemos mudar depoimentos. Vamos fazer dois exemplos aqui. Vamos editar este depoimento. O que mais Baco diz? Ah, ele dispara uma arma então diz P p p u você é você atualizar. Repare que não mudei a página. Mudei os dados do depoimento. Eu não mudei a página. E quando eu voltar para a página aqui, bem, esta é a antiga porque eu carrego as páginas aproximadamente ao mesmo tempo. Se eu escolher outro testemunho, olhe para isso. Eu posso selecionar, dar às pessoas esperança você por Ibaka ou fazer ou não fazer. Não há tentativa Biota. Então, quero dizer, é como aquele que publica. Atualize a página e isso também mudará. Huzzah! Agora temos duas maneiras diferentes de alterar dados em nosso site. A coisa boa sobre isso é que, se você quiser, você poderia adicionar este bloco de seleção de trechos para sua página flexível para sua página de serviço para uma futura página de blog de sua. E se você fosse, eu não sei acidentalmente fazer um erro de digitação aqui. Você não teria que ir e se trocar em quatro páginas diferentes. Você poderia literalmente entrar aqui. Altere-o uma vez, e ele irá alterá-lo em todo o seu site para você. E lá temos. Agora estamos usando um campo de fluxo de cauda wag para selecionar dados do modelo jangle. Isso é muito legal. 27. StreamField: Vamos dar uma olhada em campos de fluxo baseados em tabela. Agora. Se você vem de um tipo de papel de desenvolvedor de front-end, você vai pensar, por que nós usaríamos tabelas? As mesas estão obsoletas. As mesas são a pior coisa alguma vez inventada. Não há nada pior do que uma mesa quando se trata da Internet. E enquanto na maioria das vezes eu concordaria com você, há alguns casos em que você precisa usar a tabela. Às vezes você só quer uma mesa. Eu não sei. Há razões para eles. E, ah, nós vamos cobrir isso neste curso. Então, primeiro, precisamos habilitar essas coisas, e eu estou indo apenas para referenciar as docas porque eu não faço esta com muita frequência. Então não me lembro do topo da minha cabeça, que também é ótimo porque pode mostrar que até as pessoas da equipe principal fazem referência docas. Então eu já tenho isso. Ah, aqui está a fechadura da mesa e vai criar algo assim. Vamos entrar nisso daqui a pouco. Ah, a maior coisa que temos que fazer, no entanto, é tomar a espera até tabela contrato sublinhado bloco aplicativo e habilitá-lo. Então vamos abrir nossa base por base baseado em torta e jogar isso lá dentro. E coloquei isso com os outros contratos. E então podemos fechar isso agora para manter esse aspecto um pouco apresentável para que o código não pareça apenas uma bagunça gigante. Eu vou tipo de ir sobre a adição de um bloco de tabela de uma forma rotunda. Mas o atalho que pegamos no último vídeo você pode absolutamente usar também. E se você não se lembra qual era o atalho, definitivamente assistiu o vídeo no bloco de depoimentos de trechos porque adicionamos um trecho sem fazer nada em nosso bloco. Então o que vou fazer aqui é fazer uma importação. Na verdade, o primeiro 1 aqui de espera até que a tabela de contrato, blocos de blocos de importação bloco de tabela. Ok, isso é jogar isso no topo da nossa página e ir todo o caminho de volta para baixo. Vou ter uma aula. O que queremos chamar a isto? Um bloco de preços, talvez um bloco de tabela de preços, eu suponho. Digamos que há um bloco de mesa aqui, tratando de eu não sei, bloco de tabela de preços. Eu não sei se você vai usar um bloco de tabela de preços ou não. Mas, ei, quer saber? Vamos adicionar um de qualquer maneira. Isso é em um modelo meta classe é igual a. Então nós sabemos qual modelo para você é tabela de preços bloco dot html E eu estou realmente indo para desativar isso apenas por enquanto. A gravadora vai ser uma tabela de preços, eu acho, porque é assim que estamos chamando. Icahn vai ser uma mesa e texto de ajuda será. Você estava tabelas de preços deve sempre ter quatro colunas ou algum outro conselho como esse. Então não, podemos pegar isso. Vá para as nossas modelos de casa que torta pegando esta porque você não pode ver isso. Estou apontando com meus olhos, mas bloco de tabela de preços e vamos adicioná-lo à nossa tabela de preços da página inicial . Claro, e vamos adicionar bloco começar bloco tabela de preços bloco e é isso Checker Terminal. Não há reclamações. Isso é uma boa notícia, e essa é a página inicial do editor Agora nós provavelmente não queremos bloquear preços em nossa tabela de preços da página inicial , mas se quiséssemos, poderíamos colocá-lo lá. Poderíamos colocá-lo em qualquer outra página também, o que faremos em um vídeo mais tarde. Então eu apenas selecionei nossa tabela, e por padrão nós ainda é o cabeçalho Roa é o cabeçalho da coluna. Então, tipo, essas devem ser ousadas? E estes devem ser ousados? E a legenda da tabela é principalmente para leitores de tela. Ele ajuda os leitores de tela com acessibilidade para que as pessoas que têm dificuldade em ver o que está em seu site entendam o que é a tabela. Só dá a esses dispositivos um pouco mais de contexto. É realmente útil. Então vamos dizer tabela de preços de pacotes de foguetes. É assim que vamos chamar isto. E eu quero que a primeira fila aqui seja um cabeçalho. Então deveria. Com sorte, as pessoas, se não for, tornarão ousado. E nós vamos ter ah pacote padrão padrão, pacote padrão e um pacote premium. Temos um pacote padrão de limpeza de foguetes vai ter uma caixa de seleção. Vamos em frente e adicionar uma caixa de seleção. Aquele cara ali e também vem com premium. Mas o que mais? foguete de limpeza de foguetes é apenas um pacote premium. Oh, não, eu estou fora levantado. Ok, clique com o botão direito Inserir linha abaixo de combustível de foguete Se você receber nosso pacote premium bem, até mesmo abasteça seu foguete para você. Ah, responda. Mais uma linha abaixo da pintura do foguete. Vamos repintar seu foguete no caso de perder tinta quando estava entrando na atmosfera . Isso é bom o suficiente por enquanto. Vamos em frente e publicar este clique ver Vida indo todo o caminho para baixo e podemos ver que esta é uma tabela de tipos. E com certeza, no código-fonte, é, de fato, uma tabela. Agora o que precisamos fazer é voltar, habilitar nosso modelo. Agora, o problema com isso é que não sabemos de onde obter esse código-fonte. Então, o que é que vamos colocar neste modelo? Bem, só temos uma maneira de fazer isso. Precisamos chegar ao código a partir do código-fonte. Então eu vou clicar com o botão direito no meu bloqueio de tabela, ir para definição. E eu só vou esfolar aqui para onde está o modelo? Tem que estar aqui em algum lugar. Lá está ele. No fundo. Ele já está definindo um bloco de tabela modelo, blocos tabela dot html. Agora, posso abrir isso aqui. Eu não posso abrir isso aqui porque eu não tenho um salto rápido como esse. Então aqui está o que eu estou indo para dio obter hub ponto com barra maneira dizer barra wag cauda e eu vou procurar tabela blocos tabela dot html. Então é apenas indo aqui tabo dot html Ao pesquisar este repositório e isso parece certo, Espere até Con Trib bloco de tabela. Nós importamos esses modelos. Bloco de tabela, blocos tabela ponto HTM próprio. Lá está ele. E aqui está o código-fonte que podemos usar. Então o que eu vou fazer é copiar tudo isso para o meu novo modelo. Podemos fechar este em meus novos modelos chamados Bloco de Tabela de Preços. Ainda não criei isso, , então vamos em frente e criá-lo na pasta Streams. Vamos fazer louvando tabela bloco dot html e jogar isso lá. Poderíamos até ter um título falso. Só sabemos que esta é uma página de atualização personalizada. Com certeza, isso é costume. Agora, neste momento, você pode passar por isso e você pode dizer que o cabeça da mesa deve, de fato, eu não sei um mínimo com 300 pixels ou algo assim. Você também pode dar a classe da tabela. Eles são os elementos da tabela, uma classe de tabela de tabela, responsivo. Basta jogar bloquear coisas como essa e você pode personalizar isso para ser exatamente o que você precisa que ele seja. Agora eu vou apenas copiar o que eu fiz pré para este aqui. Não há muita personalização nisso. Para ser totalmente honesto, eu realmente fiz isso parecer um pouco mais agradável com aulas de bootstrap para que você possa ver que Ah, meus códigos um pouco diferentes. Eu realmente fiz no mínimo com 300 pixels para a primeira coluna e para cada chamada para cada outra coluna, há uma largura mínima de 170 pixels. Agora, vamos atualizar esta página e ver o que conseguimos. Podemos ver no fundo aqui. Ah, eu realmente fiz uma coisa interessante aqui onde eu quero realmente preços na parte inferior, mas isso pode não ser o que você quer. Então vou procurar por isso. E acontece que eu sei que eu adicionei isso aqui é Rodapé. Eu não quero isso. Vamos nos livrar dele. Isso é apenas tentar tornar esta coluna nesta coluna Negrito na parte inferior. Nós não queremos isso. Isso parece melhor. E agora nós podemos realmente entrar em modo responsivo aqui. Onde é que eu cheguei lá? É modo responsivo devido a fazer isso. Um cartão. Temos uma mesa aqui que atravessa todo o caminho. Então olhe para aquela mesa responsiva. Agora, a próxima coisa a observar é que podemos adicionar configurações personalizadas. Então temos uma configuração padrão, mas podemos adicionar algumas coisas extras. Podemos mudar o padrão aqui se quisermos Teoh. Então sobressalente mínimo. Rose, com quantas filas você começa? Quantas colunas você começa? Com coisas assim. Não vou necessariamente aplicar nada personalizado, mas vou mostrar-te como fazer isto. Vou pegar tudo isso das docas. E onde estou? Na página inicial. Vou querer passar na mesa. Opções é igual a novas opções de tabela agora. Novas opções de tabela ainda não existem. Vamos fazer com que esta variável exista em apenas um momento. Algo para rolar para cima aqui, criar um novo chamado Novas Opções de Tabela é igual, e é realmente apenas um dicionário. O mínimo Spare Rosa zero. Eu não sei. Começando Rose vai ser quatro colunas iniciais indo antes então, em vez de um três por três, vai ter ah, quatro por quatro cabeçalhos de coluna. Sim, temos cabeçalhos de coluna, cabeçalhos de linha. Na verdade, é também. Cabeçalhos de coluna. False, mas Cabeçalhos de linha, Menu de contexto verdadeiro. Podemos mudar um monte dessas coisas aqui também. Texto do editor. Esse é o que queremos. Terei medo da linguagem. A altura, renderizadores. Há todo o tipo de coisas aqui. Nós estaríamos neste vídeo juntos por um bom tempo se passássemos por todas as diferentes opções. Mas definitivamente verificar as docas e também verificar o Eu acho que é chamado Hansen Table . Sim, Hansen Tabela 6.2. Aqui há configurações diferentes que você pode verificar na documentação também, mas vamos em frente e ver como minhas novas configurações se parecem, então não vamos ver aqui porque esta tabela já está definida. Mas vamos em frente e adicionar uma nova tabela de preços. Olhe para isso. Temos uma grade de quatro por quatro dentro de uma grade de três por três. Então, há alguma habilidade de personalização lá naquele fim de semana. Enfraquecer Dio. A coisa boa sobre isso é que se você tem um cliente, quem quer apenas, tipo, exibir coisas em uma mesa. Mas já está em uma planilha que você pode copiar. Como no Google Sheets, eu acredito. Funciona muito bem. Você poderia simplesmente copiar todas as células e literalmente apenas colá-lo lá dentro. E eles funcionam muito bem. Mas eu vou deletar esse, e eu vou salvar a página e nós terminaremos com tabelas personalizadas. Então é assim que fazemos tabelas e tipo de trabalho com a alteração das opções de tabela padrão. 28. RichText StreamField: Vamos agora adicionar nosso primeiro campo de fluxo à nossa página flexível. Afinal, temos adicionado todos esses campos de fluxo à página inicial dela, e estamos tornando-o muito flexível, que é bom. Mas não é realmente o propósito da página inicial do Flex Pages ser super flexível. Então vamos apenas ir em frente, fechar nosso código aqui e ir para modelos flexíveis dot pie e podemos ver Sim, há nada aqui, nem um único campo personalizado. Agora, se eu dividir minha tela aqui e aqui eu vou para casa modelos Dot Pie, nós podemos ver oh, busca de coisas. Vamos nos livrar disso. E nós basicamente queremos da nossa página inicial, essa seção inteira do corpo para que possamos literalmente copiar isso. Ou se você quiser a prática, você pode escrever à mão. Isso é totalmente legal. Na verdade, é provavelmente uma maneira melhor de fazer isso. E então agora estamos Flex Page tem este corpo é igual a stream fielded, tem cartões de título, imagem e texto chamado a ação, um trecho de testemunho, bloco de seleção e uma tabela de preços. Isso é ótimo, mas o corpo não vai aparecer. Na verdade, precisamos dos painéis. Os painéis são importantes. Esses painéis de conteúdo nos permitem expor o campo do corpo. Porque novamente, Wag Tail e Django, eles não fazem suposições sobre que tipo de dados queremos realmente ter acessível para nosso cliente ou dois. As pessoas de entrada de conteúdo. Então vamos fazer painéis de conteúdo é igual a painéis de conteúdo. Além disso, e depois queremos adicionar um painel de campo de fluxo e ao corpo dela. Agora, se vamos salvar esta página e nós Sim, certeza, vamos verificar o nosso terminal. Vai dizer que Stream Field não está definido. Basicamente, este arquivo diz, o que é um campo de fluxo? Então nós vamos até aqui e fazemos do direito para ponto campos de ponto núcleo importar um campo de fluxo, e isso também é fazer de Quito dot admin dot edit manipuladores importam um painel de campo de fluxo. Vamos em frente e salvar isso. Blocos não estão definidos. Bem, isso faz sentido. Temos todo o tipo de quarteirões aqui. Estamos usando nosso próprio costume. Blocos também estavam usando um bloco de seleção de trechos, então precisamos importá-los também. Isso é importar o nosso bloco, por isso é fazer a partir de fluxos, blocos de importação e Vamos também importar o painel de seleção estúpido de forma trechos de ponto cauda blocos de ponto importação snippet , bloco de seleção. O que mais estamos perdendo? novas opções de tabela não estão definidas porque as novas opções de tabela estão na página inicial. Poderíamos importar isso também, se quiséssemos. Poderíamos fazer a partir de mottoes ponto casa importar novas opções de tabela. E lá vamos nós. Agora, se realmente entrarmos, edita uma destas páginas. Claro o suficiente. Sim, vimos aquele ar. Vamos vê-lo de novo, como esperado. Espere até agora está olhando para o nosso campo de corpo, todos esses campos de fluxo e não existe. Então, agora vou cancelar meu servidor, e vou fazer migrações. Mas eu vou executá-lo apenas em um aplicativo específico. Então eu vou fazer python gerenciado. Eu faço migrações. E é o aplicativo flexível em que estou trabalhando. Hadfield encorpado página Flex Isso parece bom. Python gerenciou um servidor de execução de migração de pizza novamente e quando atualizarmos, isso desaparecerá. Uh, não. Temos cartões padrão de título, imagem e imposto chamado tabela de preços de ação. E tudo isso funcionaria exatamente da mesma maneira que configuramos na página inicial. Então, dentro de apenas alguns minutos, somos capazes de personalizar completamente nossa página flexível, e ele só vai funcionar. Fizemos o trabalho uma vez em nossos modelos de barra a que nossa página inicial aqui fizemos o trabalho uma vez. Por que quereríamos fazer isso de novo e de novo? E isso é exatamente o que estamos fazendo aqui é que tendemos a trabalhar uma vez que estamos apenas indo para alavancar esse trabalho novamente. Isso é legal, mas queremos adicionar rich text. Então vamos em frente e adicionar algum rich text personalizado aqui. Poderíamos nos livrar disso, e eu vou fazer um maior de novo. Neste ponto, rich text pode ser importado de duas maneiras diferentes e eu vou mostrar-lhe os dois caminhos. O primeiro caminho é muito, muito simples. Se você está apenas usando apenas rich text e você não precisa como, um campo de título especial ou como opções de alinhamento de texto ou qualquer coisa personalizada e você realmente quer um editor wiz e peruca, este primeiro caminho é definitivamente o caminho a seguir. Então vamos fazer a partir de blocos de importação de núcleo wag tail dot, mas também temos bloco, então você quer renomear um desses. Não importa qual renomeamos, desde que o renomeemos de forma consistente. Então, se nós renomeamos nossos blocos, nós temos que renomear este e aquele e aquele e aquele outro ou uma maneira mais fácil porque há menos desses enfraquecem renomear o l um abanado. Então, blocos de cauda abanada é o que eu vou chamar a isto. Então, importe blocos também. Diga aos blocos que também podemos colocar isso em linhas separadas para fazer isso, você sabe, um pouco mais agradável. Olhe para Vamos em frente e adicionar imposto rico. Apenas um campo de rich text padrão. Vamos fazer um novo campo de fluxo. É o primeiro valor vai ser rich text novamente. Não precisa ser rich text. Isso é exatamente o que eu vou chamá-lo. E agora vou dar a isso um bloco de rich text. Salve isso e vamos em frente e atualizar esta página e vamos ver que eu vou agora ter uma opção para um completo com a peruca. Olha para isto. Ele vem com itálico ousado. H dois h três h quatro ordenados lista uma lista Nord A regras horizontais. Você pode até mesmo incorporar vídeos que você pode vincular a praticamente qualquer coisa um link interno, link externo, link e-mail, link telefone ou uma âncora. O link de âncora longo é novo para 2.7 documentos, e você pode até adicionar uma imagem aqui. Se você quisesse, eu diria que este vai estar alinhado à esquerda. Agora, agora, isso é muito, muito legal porque eu posso dizer que este é um H três transformou isso em um H três colocar regra horizontal aqui e eu posso dizer isso, mas nenhum de seus campos de fluxo vai Apareça. E mais uma vez, isto é, eu realmente esqueci disso. Já faz algum tempo desde que trabalhamos nisso. Então, abre a nossa página inicial e lembra-te disto. Sim, só precisamos daquele eso. Vou literalmente copiar isso. Abra minha página flexível, venha aqui e cole-a. E então tudo o que estamos dizendo é que no baseado no tht mail, há um bloco chamado conteúdo. O que quer que esteja aí, vamos anular. Vamos injetar nossos campos de fluxo nisso agora. Isso vai funcionar, não da maneira que você esperaria porque incluir bloco não existe. Então precisamos carregar as etiquetas do núcleo da cauda do wag. Vamos atualizar nossa página. Bloquear conteúdo aparece mais de uma vez. Sim, porque isso não é um banner. Por alguma razão, pensei que era uma bandeira. Vamos nos livrar disso. Vamos nos livrar disso. Só podemos ter um conteúdo de bloco por página. Como estão, olhe para isso. Temos aqui alguns texanos ricos. Isto vai aparecer como e h três. Com certeza, aí está. Este é um parágrafo regular. Com certeza, aí está. Mas e se quiséssemos colocar isso em seu próprio modelo? Porque neste momento, isto não se encaixa com o resto do que estamos a construir. Então vamos em frente. E vamos dizer isso para usar seu próprio modelo de modelo é igual a fluxos. E vamos chamar isso de um bloco de texto simples e rico. E isso vai ser chamado de simples, porque eventualmente nós vamos realmente limitar quais recursos você pode adicionar aqui. Então vamos nos livrar dos títulos porque já existe um título. Vamos fazer um monte de outras coisas agora que o modelo não existe. Vamos fazer com que exista tão simples. Rich text bloco dot html e que vai para estes fluxos pasta. E então eu escrevi um pouco de HTML aqui. E quando analisarmos esta página de detectores ricos, o texto rico vai para aqui. Mas o que colocamos aqui? Bem, vamos em frente e nos colocar. Claro que podemos fazer isso. Já fizemos isso antes. Isso é ótimo. Vamos editar isso mais uma vez e vamos colocar um link lá só para realmente dirigir isso para casa. Vamos pegar um link e ligar Teoh. Eu realmente não importa a página sobre nós. É apenas um conteúdo de amostra e nós só queremos que isso vinculado apareça. E com certeza, nosso link aparece como esperado. Agora, se porque enquanto estou editando isso, e se eu não quiser imagens aqui? E se eu não quiser que as pessoas vinculem a documentos e eu não quiser h 23 ou quatro lá dentro? Bem, com um bloco de texto rico, temos esse argumento de palavra-chave legal chamado recursos, e podemos dizer quais recursos queremos. Então nós temos ousado itálico, então vamos digitar metal negrito Oh, e eu apenas pensei em uma boa piada que eu estou totalmente colocando aqui. Minha fonte favorita como ator. Vitória ousada itálica. Ha! OK. Não queremos 23 ou 4 horas, mas queremos as duas listas. Não queremos 23 ou 4 horas, Então vamos em frente e colocar a lista aqui. Até lista ordenada. Até uma lista Norden. Não quero a regra horizontal. Livre-se disso. Não quero mais nada, exceto links. Então vamos em frente e colocar Link e vamos atualizar sua página e vamos ver essas opções mudar aqui. E você olharia para aquela lista ordenada ousada itálica na lista ordenada e um link? Além disso, você sabe, a quebra de linha que sempre vem com uma semana ocupada não pode realmente se livrar disso. Desfazer e refazer. E se for algum ponto no tempo, você está pensando: “Ei, “Ei, Caleb, quero dizer, é legal que você possa limitar recursos, mas de onde você tirou isso? Como você sabe colocar negrito ou itálico ou oh al ou você l ou Link ou qualquer coisa assim lá dentro ? Nas docas. Essa é a minha resposta não incrível. Eu era apenas as docas. Eso se você entrar nas docas e você apenas olhar para personalizar o Onde estamos? Ouça tópicos avançados Personalizando cauda Wag Personalizando a interface de edição. Você pode realmente ver que os identificadores de recurso fornecidos em um isolamento waittil padrão são os seguintes. H 12345 e seis Então você pode realmente habilitar H um, 45 e seis. Negrito itálico. Oh bem ul regra horizontal link uma imagem de link de documento e incorporar. Há também alguns identificadores adicionais. Eles não estão habilitados por padrão, mas você pode habilitá-los em sua lista para que também possamos colocar código sobrescrito sub script strike e bloquear aspas lá também. Então essa é a opção número um. opção número dois é se você precisa usar rich text em um campo de fluxo regular com alguma outra opção. Vamos em frente e adicionar isso para que possamos criar essencialmente um novo aqui. Tão rico texto com que eu não sei o título sobre isso. Dê-nos um link. Dois blocos feitos rich text com bloco de título, e isso não existe atualmente. Mas se abrirmos fluxos blocos de pontos, podemos adicioná-lo aqui classe, seja lá o que foi chamado que nome muito longo e blocos bloco ponto atingido, e podemos adicionar um título simples como temos feito antes. Título é Eagle dois blocos Tut HR bloco comprimento máximo de talvez 50 ou algo assim. E então poderíamos fazer o texto ou o Não é chamado de texto. O que é chamado de Conteúdo é igual. Fazer blocos ponto um bloco de rich text rich text bloco, e então poderíamos dar-lhe recursos também. Então vamos dar a nossa página uma pequena atualização rápida aqui que vai se livrar deste para nós porque ele não está mais disponível. Temos rich text com título. Dê-lhe um título. Temos Rich Texan aqui. Podemos limitar esses recursos também é igual a Se não queremos nenhum recurso, vamos apenas dar-lhe uma lista vazia. Por último, vamos dar-lhe um pequeno modelo rápido. Seu modelo é igual a streams barra Eu vou reutilizar o simples rich text bloco dot html, e eu vou sentir isso com um título. Qualquer coisa aqui porque eu preciso de um título mãos através de algum ipsum quente lá dentro e eu devo salvar um rascunho. Para que eu possa obter uma versão mais fresca desta página. Podemos ver agora que tudo isso foi desativado. São literalmente apenas parágrafos neste momento. parágrafo Parágrafo, , parágrafo, parágrafo publicar e vamos atualizar a página. Então agora vamos ver algo que ainda não encontramos. Estamos vendo o eu como valor atingido com todas essas outras coisas nele. Agora a razão pela qual isso está aparecendo é porque em nosso modelo, estamos simplesmente dizendo auto estavam dizendo Retornar todo o campo de fluxo em si quando, em vez disso talvez queremos um título. Então auto ponto título e nós queremos o conteúdo, auto dúvida, conteúdo e eu não chamá-lo de conteúdo. Chamei-lhe contexto porque era um erro de digitação. Mas eu vou chamar isso de contexto aqui apenas, você sabe, ir com ele. Então, agora temos algum contexto lá dentro. Agora, se em algum momento você vir sua página mostrando HTML ou coisas que se parecem com HTML, você precisaria usar o filtro de rich text nele, então você carrega as tags wayto core e você simplesmente didio pipe rich text. Agora isso já escapou e parece totalmente bem ou un escapou melhor. Mas às vezes quando você está fazendo isso dessa maneira, você pode realmente ver, como, um link aqui o link HTML real ou algo que se parece muito parecido com ele. E você quer que isso seja HTML. Então você se ajusta para usar o filtro de rich text, e isso resolverá seu problema. Não, não vou manter nada disso no código-fonte. Vou desfazer isso. Feche, e eu vou me livrar disso. E eu vou me livrar deste porque eu vou ficar com a maneira original que fizemos . E essas são duas maneiras diferentes de como podemos adicionar um bloco de rich text aos nossos campos de fluxo de página flexível . 29. StreamField de imagem: tal como a nossa última lição. Nós vamos criar um novo campo de fluxo diretamente de um componente wag tail sem escrever nosso próprio bloco atingido. O que quero dizer com isso é que se abrirmos modelos flexíveis DupUy do último par de lições para aproximadamente as últimas lições, usamos um bloco de seleção de trechos diretamente de esperar até sem usar o nosso fluxo barra parada bloco, Eu arquivo na última lição, nós adicionamos nosso próprio rich text. Nós demos a ele um modelo e limitamos os recursos e nós não usamos o bloco stop I file em tudo. Bem, nós fizemos uma vez e então eu desfiz todo aquele trabalho porque nós não queríamos manter isso neste vídeo. Nesta lição na nossa página flexível, estou na nossa página flexível aqui. Nós vamos adicionar um seletor de imagens simples, e isso vai ser uma imagem maior. Então vamos chamar essa imagem grande e vamos simplesmente dizer a partir de blocos de cauda wag. E se você está apenas sintonizando e agora espere até blocos vem de blocos de importação de decoração Elle abanada e então eu renomeei para esperar dizer blocos Espere, diga blocos, seletor de imagens, bloco e aqui eu vou dar a este um um pouco de mensagens de ajuda, assim como nós normalmente faria em um campo de fluxo regular. Indo para dizer que esta imagem será corrompida em algum lugar em torno de 1200 por 7 75 E vamos também especificar um modelo específico. Nosso modelo. Então vamos colocar isso em streams grande bloco de imagem html. Agora, quando eu voltar para a nossa página sobre EUA, Eu quebrei algo não tem atributos, imagem, sapatos ou bloco. E isso foi porque eu estava honestamente indo um pouco mais rápido. Não é de blocos de cauda abafada. O que eu estava pensando com essa? As imagens são a sua própria besta em Wag Tail. Ele não vem de espera até blocos Ele vem de wag cauda dot imagens di blocos importar imagem seletor bloco Praticamente a mesma coisa que snippet seletor bloco faz. Mas este é um bloco seletor de imagens. Então vamos em frente. Salvo que o nosso terminal está agora muito feliz com o que escrevi Refresher Pidge e eu tenho um grande bloco de imagem aqui para que eu possa adicionar qualquer imagem aqui. Vou apenas adicionar que um publicado e com certeza o suficiente, Quando eu visualizar esta página, obtemos um modelo. Não existe. Erro. Eu nem vou olhar. Eu sei que isso vai acontecer. Vou criar um novo arquivo nos fluxos. Modelos. Subdiretório. Então, modelos de Rocketman, fluxos. Novo arquivo aqui chamado Imagem Grande Bloqueada. Html. Agora posso fazer minha própria representação personalizada aqui. Não tenho de deixar o rabo abanado controlar tudo. Eu posso fazer o que eu quiser neste momento, mas a primeira coisa que eu quero fazer é eu quero carregar as tags de imagens wag tail porque eu quero ser capaz de usar a tag template image. E a imagem em si é todo esse objeto. Tudo o que está sendo passado para o contexto deste modelo é o próprio campo de fluxo . Então, anteriormente nós fizemos auto-ponto imagem em um bloco atingido, mas desta vez não há nenhum bloco atingido. É só uma imagem que vamos fazer. Imagem Phil 1200 por 775 à sua imagem. E então eu posso simplesmente dizer que eu sou Gee, que você é Ah, eu sou g dot lt E sim, lá. Isso está aí? Sim, as pessoas sentiram que era errado esperar até a imagem estar no plural. Lá vamos nós. E olha para isso. É uma imagem bastante grande, não é? Isso não se alinha com o resto do nosso site. Parece que algo está um pouco fora lá, então eu vou adicionar um pouco de template ing aqui. E então Caleb faz a coisa de avançar rápido de novo. Tudo bem? Então eu só adicionei isso lá e fazer para fazer, para fazer. Lá vamos nós. Isso parece um pouco melhor. Parece que as coisas estão alinhando, certo? Oh, sim, assim é melhor. Agora vamos fazer esta página realmente parecer uma coisa como um real pago, você sabe, Vamos ter algum texto. Então, temos texto rico aqui. Vamos em frente e adicionar um pouco mais baixo, um, clássico ou um acima clássico Lauren abaixo, e isso está olhando apenas um pouco mole com a imagem. Vamos em frente e adicionar margem no acesso Y. Lá vamos nós. Isso está parecendo muito bom. Então, você sabe, básico sobre nós página, e é assim que usamos um campo de fluxo de imagem grande diretamente. Agora, se você está vindo do vídeo anterior e você está se perguntando como nós fazemos isso de outra forma. Bem, na verdade já temos vários exemplos disso. Em nossos blocos acima eu seletor de imagens está em algum lugar aqui. Imagem em texto, bloco de imagens igual ao bloco seletor de imagem para que possamos apenas olhar para a imagem e texto bloco dot html template como uma referência para como fazê-lo desta forma. Caso contrário, podemos simplesmente usar os sapatos de imagem ou bloquear diretamente, e não temos que nos preocupar com sub custar um bloco atingido, a fim de obter um bloco seletor de imagem . Podemos usá-lo diretamente, que é muito, muito bom. Você também pode fazer a mesma coisa com nós já vimos isso antes. Tipo de blocos ponto hr bloco. Você pode fazê-lo com blocos de bloco de texto ou bloco de material bloco seletor de página, e eu realmente eu gostaria de incentivá-lo a experimentar isso, criar um campo de fluxo e eu não sei, chamá-lo de página personalizada. Talvez não chame de página em si. Essa é uma palavra que já é usada no contexto do modelo. Você pode ter um problema com isso, mas página personalizada não seria um problema, e então você poderia usar blocos Eu acho que seria Weg toe block, página de acrobacias , bloco de seleção. E você poderia trabalhar do seu jeito a partir daí. Então, talvez vá em frente, dê uma chance, veja como isso acaba. E isso lhe dará uma idéia muito boa de como você pode tipo de bypass usando um bloco atingido completamente se você manter seus campos de fluxo agradável e simples. 30. Validação de campo personalizado: vamos adicionar validação de campo de fluxo personalizado quando se trata de nosso bloco de link, e eu vou realmente apenas puxar isso para cima quando se trata de nosso bloco de link que temos aqui. Nós temos uma página interna e um link externo, e nós adicionamos um valor impressionante aqui em cima. O valor atingido para descobrir qual deles deveria vir primeiro e nos dar a propriedade UL dentro do nosso modelo. Então, basicamente, nós aplicamos alguma lógica adicional ao nosso bloco de links. Mas como esses dois campos não são obrigatórios, eles podem estar vazios e ambos podem ser selecionados. E assim, para as pessoas de entrada de conteúdo. Quando recebem duas opções, eles podem selecionar uma página waittil interna com um bloco seletor de página. Ou eles podem inserir um link externo, que é realmente qualquer link para qualquer outro lugar na Internet. Eles realmente não sabem qual deles vai vir primeiro o tempo todo. Você pode dar a eles um texto de ajuda em ambos os campos, e sim, isso é muito útil. Mas é ainda mais útil se você congar eu os faria programaticamente. Agora o que eu quero dizer com isso é, se nós adicionamos nossa página inicial, deve haver um link aqui em algum lugar. Com certeza, é o nosso primeiro 1. Temos um Lincoln aqui com texto de ligação. Limpe seu foguete agora página interna . E não há nenhum link externo. Mas eu posso se eu quisesse fornecer um link externo. Espere até o ponto e isso me permite salvar isso totalmente bem. Não há problemas com isso agora. Isso em si é o problema é que não há erros porque quando eu voltar e realmente visualizar a página, limpar seu foguete Agora você pode ver no canto inferior esquerdo que ainda me traz para a página de serviços de limpeza. No entanto, eu também adicionei o caminho até ponto io link lá. E quando você está trabalhando com seus clientes, você quer fazer a entrada de conteúdo a coisa mais fácil para eles causar honestamente, manter ah website com bom conteúdo pode ser bastante difícil e então uma boa maneira de contornar isso é simplesmente resolver este problema dando-lhes alguma forma de erros e por isso vamos dar-lhes validação. Agora, a primeira coisa que queremos fazer e eu vou tentar fazer isso um pouco, tudo em uma visão aqui, então eu vou fazer a partir de django dot core dot excepções importar o ar de validação e eu também vou fazer a partir do django dot core Não, não DOC ou que era hábito formas ponto ponto você tills importação sempre lista. E sempre que este link é salvo, podemos executar um método particular aqui chamado Clean. Então podemos dizer que a Death Clean vai tomar a si mesma e um valor. E digamos que não há erros no momento. Este vai ser um dicionário de erros, mas atualmente não há nenhum. E então podemos dizer algo como se você sabe, o que falhar, nós não sabemos o que é. Mudaremos isso em um momento. Podemos ver erros é igual a qualquer que seja o nome do campo é igual a lista de erros e, em seguida, seu texto de erro aqui. E então podemos dizer se há, fato, erros no dicionário. Então, se houver itens em seu dicionário, podemos criar uma validação de validação de erro sempre em seu link e vamos passá-lo alguns parâmetros. O Zehr Param vai ser os erros. Caso contrário, se não houver outros herdeiros, isso não vai executar e enfraquecer simplesmente executar super esse valor limpo agora para passar rapidamente por cima que apenas uma espécie de resumo rápido sempre que isso é salvo, sempre que um link obter salvo e isso pode acontecer várias vezes. Se você tiver vários fluxos, campos usando vários links, esta função limpa vai ser executada. E então estamos dizendo para esta limpeza em particular, um sinal erros para ser um dicionário vazio. E então, se nossa validação passar ou falhar, dependendo do que estamos tentando verificar, podemos dizer erros. Seja qual for o nome do campo agora faz parte de uma lista de erros. Nós importamos lista aérea e validação para cá. Então dizemos, Ei, se houver erros porque podemos fazer várias declarações if aqui, se houver erros, erro de validação vai ser lançado ou vai ser levantado, então nós vamos dizer se houver erros, levante um ar de validação com algum tipo de texto lá, e os parâmetros seriam qualquer que seja o dicionário de erros vai ser. Caso contrário, se não houver herdeiros, continue fazendo sua coisa normal. Isso é o que isso significa. Continue andando, então vamos dar um exemplo rápido a isto? Podemos dizer se verdadeiro, o nome do campo vai ser, digamos, link externo e o texto de erro ou a lista nunca vai ser realmente um erro, mas ele aparece de qualquer maneira. Vamos em frente e salvar isso. E não há nenhum nome de módulo jango que formulário e isso está realmente correto. É django dot forma plural. Isso parece melhor. Certo, então estamos na nossa página. Temos um link externo e uma Internal Inc. Sabemos que não importa o que aconteça, isso vai funcionar. E estamos dizendo, se é verdade, bem, bem, verdade é sempre verdade. Então isso vai ser executado. Vamos então adicionar erros externos ao nosso dicionário de sempre. É um airless. Isso também será verdade, e irá levantar um ar de validação. Então vamos em frente e salvar nosso rascunho. E com certeza, esta página não pôde ser salva devido a erros de validação e confira isso. Não é um ar de verdade, mas aparece de qualquer maneira. Mas Lincolns também usando vários lugares lá. É também, e lá está outra vez e mais uma. Lá está ele novamente, e eu sei que há quatro erros de validação porque há um pouco quatro aqui em cima agora. Esse não é um bom exemplo, porque você não quer executar ou aumentar um ar de validação toda vez que alguém salvar uma página, porque então ele nunca será capaz de salvar sua página. Então vamos em frente e obter alguns dos valores de todo este bloco que está sendo salvo para que possamos dizer que a página interna da página será valor. Não receba a página Interna, e o link externo será o link externo. E assim, neste ponto, temos duas variáveis que podemos usar. Podemos dizer se página interna e link externo vamos em frente e levantar dois erros, um para a página interna um para o link externo. E digamos que ambos os campos não podem ser preenchidos. Selecione ou insira apenas uma opção. Algo assim. Tudo bem, eu vou guardar isso e vamos em frente, salvar um rascunho. Poderíamos facilmente publicar uma página também, e desta vez só temos dois ares de validação. Este é o que estava trabalhando principalmente, porque é perto do topo da página é mais conveniente olhar, mas podemos ver que ambos os campos não podem ser preenchidos. Selecione ou insira apenas uma opção, e ela diz isso para ambos. Isso é fantástico. Vamos fazer o oposto. Vamos fazer Elliff, não página interna e não link externo. Queremos diferentes. Há e queremos que este erro diga algo ao longo das linhas de que você precisa exatamente como pelo menos um destes. Então, por favor, selecione uma página ou digite um você Earl para uma dessas opções. É o Terminal Checker. A vida parece boa e eu vou me livrar dessa, e eu vou me livrar dela, e vamos ver uma era diferente desta vez. Então, apenas um show que podemos publicá-lo em vez de apenas salvar um rascunho para obter erros de validação . Com certeza, aqui está. Polícia. Selecione uma página ou insira uma AL. Para uma dessas opções, vou selecionar a página sobre EUA. Não, eu sei que tem mais um aqui, então vai me dar outro ar de validação. No entanto, este passado o sobre os EUA um totalmente passou. Isso não é um problema. Onde mais estamos procurando? Temos um aqui também dito. Sempre precisa haver uma ligação. Vamos colocar isso como brilhante para fazer. Onde está o outro ar de validação? É isso? Não. No entanto, porque há dois lá. Vamos clicar em publicar. Nossa página foi publicada. Olhe para isso. Eles estão passando por nossas próprias validações. Então agora sabemos que isso sempre será um link interno ou um link externo. Além disso, já temos lógica adicional para o nosso valor de link aqui, dizendo que se houver uma página interna, use essa ou se houver um link externo, use essa e só haverá uma das estes. Haverá um ou outro, mas nunca ambos. E por último, um pouco de limpeza. Aqui, vamos para o topo da página. Feijão legal Coloque-os lá em cima. A vida parece boa, e é assim que adicionamos validação de campo de fluxo personalizado 31. Páginas de limitação: até este ponto, nós criamos um número de páginas diferentes, e nós realmente temos um problema em particular que nós realmente não resolvemos ainda. medida que nosso site cresce, ele pode realmente começar a ficar fora de controle. Por exemplo, podemos adicionar uma página subordinada à nossa página inicial chamada Início. Agora, por que teríamos que páginas iniciais em nosso site? Temos uma página dedicada apenas para home page. Provavelmente não precisamos de uma segunda página inicial. Há alguns casos em que você provavelmente quer isso, mas neste caso, não queremos na nossa página inicial. Já temos uma página de listagem de serviços e podemos criar outra página de listagem de serviços. Nós só queremos um desses, então isso é um problema na nossa rota. Se você clicar nesse pequeno ícone lá em cima, aquele globo e você diz Adicionar página filho, agora podemos dizer que qualquer outro tipo de página exceto a página inicial porque ela já está disponível . Mas podemos dizer que a página de listagem de serviço, a página de serviço ou a página de diversos Flex também pode ser ah, tipo de página inicial. Não queremos isso, então precisamos restringir isso. Felizmente Wag Tail nos dá a capacidade de fazer isso muito facilmente. Então vamos em frente e começar restringindo a rota. Que páginas filho pode rotear tem agora? Nós não temos acesso à página raiz em si que está no pacote de cauda caminho. Mas se eu abrir modelos de casa dot pie e eu especificar os tipos de página aparentes, eu posso dar a isso uma lista de nome AP com o nome do modelo APP chamado dot model, name, model name. Lá vamos nós. Third Time é um encanto, e isso vai dizer que a página inicial sempre tem que ter um pai de qualquer nome do modelo de ponto aplicativo é agora. Isso não existe, mas Wag Tail core dot Page existe. Esta é a nossa página de rota para que possamos salvar isso e vamos voltar aqui na nossa página inicial quando clicarmos. página inicial Adicionar página filho não está mais disponível. Onley pode viver sob nossa página de rota? Então ele ainda está aqui, mas não tem permissão para viver em outro lugar. Agora estamos restringindo a forma como nossos sites foram criados, para que cada site comece com uma página raiz. Então temos uma página inicial e estamos dizendo que não pode haver outra página inicial ou Se entrarmos em nossa página, não podemos listar uma página inicial abaixo da nossa página sobre EUA. Essa opção costumava existir. Já não faz, o que é muito bom. Então estamos começando a limitar um pouco disso. Vamos voltar para uma página raiz e vamos nos livrar dessas outras opções. Vamos nos livrar do Flex Page Service, listando Página e a página de serviço para que nenhum deles possa viver sob a página de rota. Agora. Como iríamos fazer isso é se abrirmos são modelos flex dot pie. Podemos especificar os tipos de página aparentes aqui para que um tipo de página pai é igual a, e esta é apenas uma lista para que a página flexível sempre pode viver sob nossa página inicial. Isso está tudo bem. Já temos essa configuração. É aí que nossa página mora atualmente. Mas também queremos páginas flexíveis para ser Nesta vel abaixo de outras páginas flexíveis para que você possa criar e sobre nós e, em seguida, talvez uma página de equipe e, em seguida, talvez uma página dedicada para cada pessoa em sua empresa. Então vamos dizer que o nome da APP é Flex. Esse é o atual em que estamos agora e página flexível. Então nós estamos realmente apenas dizendo tipos de página pai. Você tem permissão para ser seu próprio pai. Parece um pouco estranho, e a página inicial pode ser sua mãe. Então, digamos que, e eu vou voltar a uma página aqui. Com certeza, isso me permitirá criar uma página flexível aqui. Isso é bom. Eu vou para a raiz. Não tenho mais permissão para criar uma página flexível. Então isso é perfeito. E apenas certifique-se de que isso está funcionando. Vamos lá e realmente confira nossa página flexível aqui. Vamos adicionar uma página filho e, com certeza, ainda é permitido estar lá. Queremos nos livrar dos outros dois, e há uma propriedade de segunda página que podemos atribuir para nos livrarmos disso ou nos livrarmos dos outros dois. Agora temos mais dois numa rota que não queremos. Nós não usamos a página de listagem de serviços ou a página de serviço, então vamos em frente e abrir modelos de serviços mais altos e sua página de listagem de serviços. Isso é o que o tipo de página pai só pode viver por baixo. A página inicial do ponto inicial novamente. Esse é o nome do APP, e este é o nome do modelo. E se deslocarmos para baixo até nossa página de serviço aqui, poderíamos fazer o mesmo tipo de página pai. Mas desta vez queremos que o tipo de página pai seja sempre a página de listagem. Assim, as páginas de serviço sempre, sempre, sempre, sempre, sempre têm que viver abaixo da nossa página de listagem de serviços aqui. Então dizemos serviços ponto página de listagem de serviços E novamente, esse é apenas o aplicativo que estamos atualmente nele e o modelo, que é apenas este aqui em cima. E eu realmente fiz um pouco de um tipo de aqui. Não é o tipo de página pai. É tipos de página pai porque é uma lista que pode ser mais de um. Então, se você está gritando para a tela dizendo: “Ei, “Ei, Caleb, você fez um erro de digitação. Eu definitivamente fiz um erro de digitação lá, então eu vou voltar para a rota em uma página filho, e ele automaticamente diz, Ei, eu só tenho um tipo de página que é permitido viver sob rota. É uma página inicial, então automaticamente me leva até aqui. Certo, então há outra maneira de fazer isso. Na verdade, resolvemos todos os nossos problemas com este método. O outro método é os tipos de sub-página. Então, se clicarmos em adicionar página filho à nossa página de serviço, vamos voltar à nossa página de listagem de serviços aqui. E vamos comentar isso e eu vou revidar porque eu quero ver todas essas opções diferentes. Então, estou na minha página inicial. Eu entro aqui, eu tenho uma página de listagem de serviços que é o tipo de página aqui, e eu posso adicionar uma página listagem de serviços ou uma página de serviço. Agora resolvemos este problema adicionando o tipo de página pai é a página inicial, Mas nós comentamos que fora. Então, agora estamos dizendo que a página de listagem de serviços também pode viver sob serviço. Listening Pitch também pode viver sob uma página de listagem de serviços. Não queremos nada disso. O outro método que podemos fazer aqui é dizer que tipos de sub-página é igual a, e estamos dizendo que tipos de página podemos definir? E nós estamos dizendo que tipos de página, quais páginas filho são autorizados a viver sob nossa página de listagem de serviços, e para isso nós vamos apenas dizer serviços ponto página de serviço e isso vai se livrar de todas as outras opções, exceto a que especifique aqui. Esta é também uma lista. Se quiséssemos que isso vivesse em qualquer outro lugar ou tivesse páginas filho em qualquer outro lugar, poderíamos definir isso também. Desde que não entre em conflito com os tipos de página pai que estão definidos agora, que não aplicáveis em nossa situação atual. Por isso vou guardar isto. E quando eu atualizar esta página, página de listagem de serviços não vai estar lá. E ele assumirá automaticamente que estou tentando criar uma página de serviço assim e vamos dar uma olhada na nossa árvore. Temos uma página de serviço aqui e podemos adicionar outra página de serviço. Oh, você poderia olhar para isso? Na verdade, podemos adicionar uma página de listagem de serviços à nossa página de serviço. Podemos ir Route Home page serviço listagem serviço, detalhe, serviço, listagem, serviço, detalhe, detalhe, listagem de serviços, detalhes de serviço. Nós também não queremos isso. Então vamos primeiro de tudo, nós canhão comentar o que vai resolver esse problema. Mas em seu modelo de página de serviço, também podemos dizer que alguns tipos de página é igual a, e digamos que não queremos nenhum tipo de subpágina. Vamos apenas fornecer uma lista vazia aqui. É isso. Vá em frente e guarde isso. Voltar uma página. E agora não podemos nem criar uma página filho embaixo de nossas páginas de serviço. Isso é perfeito. É aí que eu me retiro vai acabar. Então temos uma página inicial. É este aqui. Temos uma página de listagem. Esse é um que estamos escutando. Todas as páginas filho na Terra, páginas Crianças e então nós temos as próprias páginas filho. Essa é a página de detalhes do serviço da Página de Serviço e não pode ir mais longe. Então, nós efetivamente dissemos que isso é o mais longe que isso pode ir por esta rota. Então agora nós criamos uma estrutura adequada para onde nossas páginas podem viver. Quais páginas podem ser seus pais? Quais páginas podem ser seus Filhos? Mas temos outro problema. Digamos que o nosso site em Lee deve sempre ter uma página de listagem de serviço e dizemos e página filho para a nossa página inicial. Podemos ter tantas páginas flexíveis que quisermos. Isso é o que queremos. Queremos tantos quantos o cliente do cliente ou a entrada de conteúdo que as pessoas desejam criar, mas não queremos atender páginas de listagem. Isso é confuso para a entrada de conteúdo. Então vamos tentar nos livrar dessa. Agora. Fazemos isso de uma maneira ligeiramente diferente porque já especificamos os tipos de página pai. Já especificamos os tipos de página que as páginas filhas podem ser. Vamos simplesmente dizer que Max Count é um. Só pode haver uma página de listagem de serviços neste site. Então agora eu vou voltar para uma página filho, e isso automaticamente assume que eu vou criar uma página de flexores diversos porque não há outras opções que eu não posso mais criar para páginas de listagem de serviço. Há mais uma coisa que temos que fazer aqui na nossa rota. Podemos criar outra página inicial, se quisermos. Eu acho que devemos limitar isso porque esta não é uma instalação multi-site de Wag Tail. Este é um único local de isolamento de abanado, também com cauda Wag. No Django, você tem vários sites correndo fora de uma instalação do Django ou esperar até, mas para este caso, eu só quero ser capaz de criar uma home page abaixo da rota. Então vamos em frente e abrir modelos caseiros dot pie, e nós vamos dizer Max Count é um dedo águia, e isso vai limitá-lo a ter apenas uma página inicial em todo o site. Também podemos, ao mesmo tempo, fazer alguns tipos de página é igual a, e sabemos que a página inicial só vai ter dois tipos de página diferentes. Agora isso já está resolvido devido aos tipos de página pai que definimos. Mas podemos restringir isso ainda mais, dizendo que os tipos de sub-página só pode ser uma página flexível que já é uma regra aceita e serviços ponto página de listagem de serviço. E apenas como um lembrete, esse é o nome do nosso aplicativo, e este é o nome do nosso modelo. Então isso está sendo salvo. E quando eu vou adicionar outra página ao root, ele não nos dá nenhuma opção em tudo. E é assim que limitamos nossas páginas. Agora você pode estar pensando, isso é inútil. Eu não quero fazer isso, e você vai ser o melhor juiz para o seu site. Se isso é bom para você, seu cliente, seu conteúdo, pessoas de entrada, essa é uma decisão que você vai ter que fazer. Mas eu pessoalmente gosto de definir isso para que quando meus clientes entram em um site como este e eles querem criar outra página aqui, outra página de listagem, Bem, eles não podem. Isso vai quebrar alguma da lógica que nós já construímos neste site. Ou, em vez de ser capaz de criar outra página de serviço sob uma página de serviço e simplesmente continuar para sempre, eles só podem criar páginas de serviço sob a página de listagem e novamente que ajuda a manter nossa lógica como desenvolvedores em o código. Então eu acho que este é Ah, realmente poderoso conjunto de recursos ou um trio de recursos. Se você acha que isso não é útil, você não precisa implementar isso. Isto é tudo opcional. Caso contrário, se você gosta, sinta-se livre para usá-lo. Ele vem cozido em com Wag Tail 32. Menus de navegação: Nosso site está se reunindo muito bem, mas ainda não há navegação real. Temos ligações falsas aqui em cima que não vão a lado nenhum. A navegação é absolutamente vital para um site. Só que ainda não construímos. Então vamos começar criando um novo aplicativo chamado menus com o python padrão gerenciado até menus de inicialização alta. Então abra seu terminal e vamos executar Python gerenciado até menus de inicialização alta, e eu só vou reexecutar meu servidor lá. E quando eu abri meu editor, eu vou ver para fechar essas coisas. Terei uma nova pasta aqui chamada Menus. Agora, não vamos precisar de vistas, por isso vou livrar-me disso. Não vamos precisar de exames, por isso vou livrar-me disso. Não vamos precisar de administração. Vamos nos livrar disso. Então eu só tenho migrações nele. APS e modelos, não torta. Agora, em nossos modelos acima arquivo alto, vamos acabar criando um item de menu na classe de menu. Ok, então primeiro, vamos precisar criar um novo menu, um modelo de colesterol. Nós não trabalhamos com modelos de colesterol Mas isso essencialmente nos permite salvar vários itens de uma só vez sem outros objetos sendo criados ou precisando ser criados de antemão para que eles possam tipo de todos salvar ao mesmo tempo. Agora a razão para isso é porque um menu quando há provavelmente apenas um menu, mas ele vai ter um item de menu, outro item de menu e outro item de menu, e queremos que todos eles basicamente salvem ao mesmo tempo. Nós também queremos que estes sejam reordenar um ble, então vamos usar uma coisa chamada uma ordem arável. Então eu vou limpar isso, e a primeira coisa que eu vou adicionar é uma classe chamada Menu, e isso vai ser um modelo de ervas em cluster, e nós temos um modelo de colesterol importado. Isso vem do pacote chamado Clusters de Modelo. Vamos fazer a partir de modelos de ponto de cluster modelo importar modelo arável de cluster, e agora podemos usá-lo. Próximo. Queremos que nosso menu tenha algum tipo de títulos que possamos identificá-lo, e nós também queríamos ter algum tipo de slug para que possamos facilmente identificá-lo em nosso template para que quando tentamos acessar este menu de, digamos, uma tag template, poderíamos apenas passar em uma lesma particular. Basicamente, é um texto baseado em I D, e vamos ser capazes de encontrá-lo muito facilmente. Então vamos em frente e fazer. Título é igual a modelos dot campo char Max Learning coisa. Vamos apenas nos dar um comprimento máximo de 100 caracteres, e a lesma vai ser algo chamado “Slugs Auto”. Campos. Vamos fazer um campo de projétil automático, e ainda não usamos isso, mas vamos entrar nisso em apenas um segundo. Então vamos dizer que este campo de slug automático precisa preencher a partir do título. E o que isso está dizendo é, se não houver uma bala, pegue a lesma título Se eu usar isso, nós também vamos dizer que isso é comestível agora. Auto slug Field vem de outro pacote, diferente, e você não precisa usar o campo slug auto se você não quiser. Você pode simplesmente usar modelos de campo char esquivado, se você gosta. Eu gosto de usar o campo slug auto porque ele me permite ser um pouco mais preguiçoso ao fazer entrada de conteúdo, e eu poderia apenas especificar o título apertar Enter, salvar o modelo ou Salvar o menu, e ele vai criar um para mim se Eu queria. Eso, vamos em frente e usar o campo de projéteis automático. Isso vai vir de extensões do Django, que eu não acredito que nós realmente tenhamos instalado agora. Extensões do Django dot tv dot fields Importar auto, campo slug e vamos ver o que um terminal está dizendo. Não está dizendo absolutamente nada, e isso é porque este é um novo aplicativo. Precisamos adicioná-lo ao nosso novo APS. Então, no nosso baseado em torta, vamos adicionar menus. É só o nome da pasta. Isso é basicamente o que eu chamo, todos os lapsos chamados menus. Então, ele vai coincidir com o fechamento que vamos atualizar nosso terminal. Lá vamos nós. Isto parece mais saudável. Nenhum modelo chamado extensões Jango. Então nós vamos querer cancelar este Do Pip instalar extensões Django, Cool beans. Vamos reexecutar o nosso servidor. Não está mais reclamando, e vamos continuar aqui. Então, não vamos executar nossas migrações ainda. Nós vamos adicionar um pouco mais de coisas aqui, então porque nós vamos acabar registrando isso com caudas wag, modelá-lo, cara, nós precisamos dar esses painéis se dermos painéis. Isso significa que os campos que estavam dizendo para nós serão expostos para que possamos dizer, Ei, dê um painel para um título e dê um painel para a lesma e isso existirá. Eles se tornarão editar Herbal. Você poderá realmente alterar o título ou adicionar o título e alterar ou adicionar um slug. Então está em um painel de campo aqui. Este vai ser o título, e vamos adicionar mais um painel de campo, e este vai ser chamado de painéis de campo Slug também não importados. Então vamos fazer isso. Então nós vamos fazer a partir do meu ponto cauda admin dot editar manipuladores de painel de campo importação verificações terminal Eu não tenho qualquer tipo de é presumivelmente, e estamos quase terminando com esta parte. Então, em seguida, quando eventualmente criar uma migração para isso vai criá-lo uma classe chamada Menu no banco de dados de forma eficaz. E sempre que usamos isso, ele não tem um nome para se chamar, então provavelmente vai dar a ele o nome da memória que é alocada. Então, como às vezes no código python, você verá algo que é como, Ah, você sabe, algo como esse tipo de parece algo ao longo dessas linhas. Se você viu algo assim, é um pouco de memória alocada no seu computador. Então, em vez de dizer que, esse é o nome, vamos dizer que vamos sobrescrever isso com uma string, um auto-título de retorno. E agora estamos dizendo que toda vez que acessamos um menu, objeto vai ser chamado qualquer que seja o título agora, este ponto, vamos cancelar nosso servidor e vamos fazer python gerenciar dot pie. Torne as migrações legais. Eu tenho algumas migrações do último vídeo que fizemos com algumas coisas de página flexível, e eu criei um novo modelo para o menu que é o seu python gerenciado alta migração. Tudo foi aplicado bem, o servidor de três corredores, e nós não vamos ver nada em nosso advento ainda. Não registramos nada aqui, então não veremos nada indo além disso. Também temos apenas um menu. Nós não temos itens de menu, então vamos em frente e adiciona um menu itens Agora. Agora é aqui que vai ficar um pouco mais complicado de entender neste ponto, isso é Você pode pensar nisso apenas como um modelo regular e como um título tem uma lesma, e eventualmente vamos criar alguns itens de menu e vamos relacioná-lo de volta a este menu. Então eu vou criar uma classe chamada item de menu e isso vai ser um pedido. Uma tigela. Agora ainda não temos o pedido Bols importado. Então vamos fazer de caminhoto decoração que os modelos importam ou duráveis. Agora, que tipo de recursos nós queremos nosso dedo do menu Nós queremos que este dedo tem algum tipo de título de link ? Precisávamos ter algum tipo de ligação onde eu e digamos que isso vai ser um link externo. Ah, vamos criar uma página de link. Isso vai ser um link interno e talvez um aberto em uma nova opção de guia, e isso vai ser um booleano. Então, essencialmente, o que vamos fazer é para cada item de link aqui, ele vai ter algum texto. Ele vai ter uma página interna e externa e a opção de ser aberta em uma nova guia ou não. Então isso é um pouco de pseudocodificação. Vamos em frente e realmente adicionar estes aqui. Então vamos adicionar modelos. Campo de caractere em branco é igual a true. Não é igual a verdadeiro. Na verdade, não precisamos adicionar não é igual a true, porque Blank é igual a true. Além disso, é um campo de caracteres, mas vamos Adam comprimento máximo de 50. O link que você bem vai ser um ing externo, então isso vai ser tipicamente, nós diríamos, um campo ul. Mas isso também pode ser um link âncora ovo abaixo da página em algum lugar. Então, pode ser apenas um link que se parece muito com este fundo ou contato e você vai rolar para baixo na página. Então, talvez seja isso que queremos. Então vamos deixar isto em aberto com o HR Field. Dê que no comprimento máximo de 500 porque links externos para ser bastante longo, e também pode estar em branco com a nossa página interna. Vamos em frente e criar uma chave estrangeira para qualquer página do nosso site, então vamos dizer modelos fora chave estrangeira. Espere até a página do ponto central que eles estavam dizendo. De qualquer forma, diga à Paige e cada uma das nossas páginas está herdando essa página normal. Então, se dissermos que vamos verificar para casa, nossa página inicial está realmente importando esta página. E se nós viermos aqui, vamos ver que está vindo de Espere até os modelos centrais Página direita Não core dot modelos página fazer decoração Ser a página AP ser o modelo não é igual a verdadeiro. Sim, vai haver espaço em branco é igual a verdade. Sim, isto pode estar em branco. Isso é opcional. Nós vamos nos dar um nome relacionado também, mas nós não vamos dar nenhum nome especial relacionado. Não vamos usar isso. Então, nós estamos basicamente indo para descartar que Related, nomeado usando um sinal de adição e, em seguida, em excluir o que acontece quando excluímos quaisquer páginas que estão sendo vinculadas. O Teoh. Então, se nós vinculamos a uma página de contato e excluímos a página de contato, o que acontece com este item de menu? Nós vamos dizer que este item de menu é destruído por cascata e, em seguida, por último, temos aberto em uma nova guia e este é simplesmente um campo booleano, então um campo booleano é um verdadeiro ou falso padrão é igual a false e blank é igual a true então pode ser opcional não precisa ser verificado. E porque mais uma vez, vamos mostrar isto à nossa maneira. A Telemann. Eventualmente, vamos registrá-lo no Wag dizendo aos homens o modelo que ele homem, precisamos dizer, Ei, balançado Oh, nós queremos que você realmente mostre tudo isso. Então vamos em frente e criar um painel de campo para o título Link. Vamos criar outro painel de campo que está ficando um pouco baixo. Vamos criar outro painel de campo para o link. Você é l esse link externo que você é. L provavelmente nomear esse link externo você Bem, se quisermos Teoh, vamos criar um painel seletor de página para a página Link. Essa é a nossa página interna. Se ele estiver selecionado e vamos criar mais um painel de campo para o nosso campo booleano chamado Abrir em uma nova guia, não temos nosso painel seletor de páginas importado ainda, então vamos em frente e importar nosso painel seletor de páginas. Isso é tudo bem e bom. Mas o item de menu e o menu, além de estar no mesmo arquivo, não têm qualquer relação entre si. Precisamos criar algum tipo de relacionamento. Agora o que eu estou indo para dio é que eu vou executar migrações novamente e migrá-los executar servidor . E isso só vai realmente criar este item de menu para mim. Agora eu quero vincular este item de menu ao próprio menu, e vamos ver que poderia ser feito com uma coisa chamada chave parental. E ele vai ligar para a classe de menu, e ele vai ter um nome relacionado que nós vamos realmente usar. Este nome relacionado vai ser chamado de itens de menu. Agora vamos em frente e importar a chave dos pais, e eu nunca consigo lembrar de onde vem esta. Eso Você pode realmente me ver cometer um erro aqui. Eu acho que para um cluster modelo campos ponto Importar perente. Uh ha. É provavelmente a primeira vez que acerto na primeira tentativa. Chave parental. Então agora que dizer Hey esta página ou não precisa ser chamado Página, ele poderia literalmente chamado qualquer coisa. Ele só precisa ter algum tipo de conexão com o nosso menu aqui, então vamos guardar isso. Vamos executar migrações mais uma vez, e não é um campo de cluster de modelo. Sabia que ia errar? Acho que é um modelo de campos mais próximos. interrogação. Lá está ele. Ok, vamos em frente. Faça migrações. E agora isso está pedindo Ei, você está tentando adicionar um campo não crédulo chamado página para o item de menu sem um padrão, nós podemos fazer isso. O banco de dados precisa preencher com algo lá dentro. Vamos em frente e selecionar a opção número um, e eu simplesmente vou digitar nenhum. Vá em frente e migre o servidor dela novamente. As coisas parecem um pouco melhores quando não estavam mal, mas as coisas estavam parecendo que estão começando a ficar bem agora. As coisas parecem um pouco melhores quando não estavam mal, Isso é Ah, vamos em frente e realmente registrar isso com Wag Tail para que possamos realmente acessá-lo aqui. Agora há duas maneiras de fazer isso. Podemos registrar isso como um trecho ou podemos apenas registrar isso no menu da seção aqui. Gosto de registrá-lo na secção do menu. Só me sinto um pouco melhor. Então, além de modelos, não torta, vou criar uma marca que você arquivar aqui chamada Wag Tail ganchos dot pie e absolutamente precisa ser chamada. Espere até sublinhar ganchos dot pie. Então, aqui dentro. Vamos fazer duas coisas diferentes. Nós vamos importar para o modelo Edmund, e nós também vamos importar a taxa Decorator Deco. Ou então nós também vamos criar uma nova classe. Nós vamos chamá-lo de homens, você admite, e vai ser um Inman modelo, e nós vamos registrar isso. Então vamos em frente com o primeiro 1 e apenas fazer a importação de Espere até ponto con Trib lema Edmon dot options Importar modelo Littmann. Nós também vamos importar o registro de administrador do modelo. Nós vamos então criar essa classe herdar modelo Litman, o modelo White Tail Lydman Vamos dizer, o quê? qual modelo isso vem? O que estamos realmente admitindo aqui? Vamos dizer, registre este item de menu agora. Precisamos importar isso também. Então, a partir de modelos de ponto, modelos de ponto de menu importantes vem da mesma pasta, então podemos usar modelos de ponto que só vai bem aqui. Importe a classe do menu, o rótulo do menu que tem menus. O ícone do menu vai ser uma lista Você l também se parece com um menu não precisa de uma vírgula lá. A ordem do menu. Este é o lugar onde vai ser encomendado no menu aqui. Então eu vou dizer 200 na verdade não se lembram exatamente onde centenas vão nos colocar. Vamos descobrir nas configurações. Menu é igual a false. E isso quer dizer que não queremos que ele apareça aqui e excluir do Explorer é igual a false. Ok, eu só vou reiniciar o Django aqui apenas para uma boa medida às vezes. SNC Se tivesse reiniciado por conta própria, não teríamos visto que a calma não é permitida sem parênteses circundantes. E isso é porque eu bati. Enter deveria ter sido apenas em uma linha. Foi sobre a última coisa que precisamos registrar este modelo de registro de administrador, e estamos apenas dizendo, Pegue todo esse modelo de classe Inman e registrado com o sistema de menu Wag Tails. Então vamos em frente. Vamos verificar. Espere até que vamos refrescar isso e esperar que ele apareça aqui. Vamos lá, aí está. Menus número dois. Vamos em frente e adicionar um menu. Vamos chamar este cabeçalho do menu. Você pode ver que ele automaticamente preenche conforme eu digito. Isso é graças ao campo de projéteis automático. Vou chamar este cabeçalho e você vai notar que temos um menu aqui. Mas não temos links de menu. Temos de acrescentar isso. Então vamos voltar ao nosso modelo Stop High. E mesmo que tenhamos uma chave parental para o nosso menu aqui com um nome relacionado de itens de menu, ele não está realmente sendo usado no banco de dados que ele está sendo usado. Mas nós simplesmente não temos nada na verdade, em termos de prisão weg sendo exposto agora porque pode haver vários itens, vários itens de menu e porque nós vamos estar usando uma ordem herbal, que nos permite mover um item de menu para cima ou para baixo. Queremos usar uma coisa chamada painel em linha, e isso vai levar o nome relacionado. Esses são os itens do menu, e isso só se relaciona com este nome relacionado aqui. Então é exatamente o mesmo texto, e o rótulo vai ser um único menu. Item no painel de linha não é importado, então vamos importar esse terminal e não está reclamando. Isto é uma boa notícia. Vamos em frente, atualizar esta página e agora podemos adicionar um item de menu e outro item de menu e outro item de menu, e podemos misturar e combinar estes na ordem que quisermos. Vamos adicionar um novo item de menu, e isso será um link para nossos serviços. E nós vamos dizer que esta vai ser uma página de cauda wag quando nós estamos indo para criar outro aqui sobre nós e nós estamos indo para vincular a outra maneira página de detalhes chamado sobre nós salvar. E assim, temos um sistema de menu no lugar no back-end, mas na frente quer esfregão? Ainda não funciona porque ainda não implementamos nada. E a próxima lição vamos criar uma tag template onde podemos realmente ir em frente e pegar este menu do nosso template e percorrer tudo o que precisamos para percorrer a fim de criar nosso menu aqui em cima, nós também vamos crie o pé ou o menu. Aqui em baixo vai ser exatamente o mesmo menu, então vamos usá-lo em dois lugares diferentes. 33. Templates de menu de navegação: Está bem, Dokey. Em nosso último vídeo, criamos um sistema de menus onde poderíamos realmente ir em frente e adicionar um menu. Temos vários menus se quiséssemos, mas criamos um chamado Cabeçalho. E se editarmos isso, há dois itens de menu aqui que poderíamos mover para cima ou para baixo, graças a uma coisa chamada em Ordem Arable. No entanto, ainda não temos acesso a isso aqui. Agora há várias maneiras diferentes de obter acesso a este menu em cada página. Uma dessas maneiras é através de uma tag de modelo. Vamos seguir essa rota em vez de criar um objeto global acessível em cada modelo. Nós vamos apenas usar o modelo tag maneira. Então, vamos criar nossa primeira tag de modelo. Agora eu estou indo para ir em frente perto que nós estamos indo para criar uma nova pasta chamada Template Tags todas uma palavra, e então aqui nós vamos criar outro novo arquivo ou o primeiro novo arquivo lá chamado Menu Tags dot pie e esse nome é vai ser importante, e vou fazer referência a isso daqui a pouco. Agora, aqui vamos criar uma tag de template simples do Django. Então, quando abrimos nosso cabeçalho dot html, vimos outras tags de modelo, então temos estático como um modelo. Podemos vê-lo sendo usado aqui. É uma etiqueta de modelo. Quando usamos esperar até imagens, usamos a tag de modelo de imagem. Vamos agora criar nossa própria tag template, e esta será apenas uma tag simples. Vamos ir em frente e dizer, do Django, Importar template de Vamos para pastas acima ou sim, uma pasta para fora, Vamos subir uma pasta, Ir para modelos e importar nosso menu. Nós vamos precisar adicionar Register é igual a template dot library, e isso vai nos ajudar realmente registrar isso. Esta marca que podemos usar-nos de forma decoradora. Vamos dizer, surdo, surdo, pegue o cardápio. Vamos passar-lhe uma bala no modelo e, em seguida, vamos devolver uma coisa. E para que isso realmente se torne uma tag de modelo adequada. Precisamos então dizer registro dot tag simples, e agora podemos usar-nos bem. E agora podemos usar isso dentro do nosso modelo, e é realmente tão fácil como entrar em Digamos que um arquivo de cabeçalho e dizendo Carregar tags de menu. Lembra quando eu disse que ia fazer referência a esse nome de novo? Marcas de menu é um menu tags acima arquivo alto que é importante. Estes nomes vão coincidir. E o que isso diz é que todas as tags que estão disponíveis neste arquivo agora podem ser usadas dentro de nosso template. Então agora temos acesso a uma tag template chamada Get Menu. Então, se formos em frente e realmente nos chamar de US, eu recebo o menu. É preciso um parâmetro um slug. Vamos chamar esse cabeçalho e de onde eu estou pegando isso é o cabeçalho slug. É por isso que temos uma bala aqui para que possamos selecioná-la. Alternativamente, você poderia usar as idéias bem, mas eu ds eles mudam com o tempo. Se alguém acidentalmente foi para excluir este cabeçalho e criar um novo cabeçalho que eu d vai mudar e você vai precisar de um surdo se envolver em, isso simplesmente não é maneira de viver sua vida. Então, se você usar ah slug, esse problema é realmente facilmente corrigido. E agora vamos dizer isso como uma variável chamada Navegação. E aqui eu vou adicionar H um e eu vou imprimir navegação para ir em frente e atualizar nossa página aqui. Oh, cardápios. As tags ainda não estão registradas. Ok, isso é super vindo. Então, uma de duas coisas acontece aqui. Ou eu não salvei esta página ou porque às vezes quando você trabalha com tags de template, mesmo que você tenha feito uma alteração, Django nem sempre percebe que os arquivos de tag de template mudam. E assim ele não vai se reiniciar sozinho. Então eu só vou dar um chute ao Django aqui e reiniciar meu Django Server três frescura. Lá está ele. Ah, coisa. Agora, no modelo, ele não diz nada aqui. Diz “navegação”. Agora, para rastrear isso para trás, temos um livro muito chamado Navegação e temos uma função chamada Get Menu com um parâmetro de Header. E então nós o atribuímos como um projeto de lei chamado Navegação. Em nossas tags menus, temos uma função chamada get menu. Seu único parâmetro é um slug, e ele simplesmente retorna isso. Agora precisamos realmente ir e olhar para este item de menu com base em sua lesma. Então vamos em frente e dar a isso uma tentativa nós estamos indo para retornar menu morreu. Objetos Doug obter lesma é igual a qualquer que seja a lesma. E se você está se perguntando, hey, você estava recebendo lesma é igual a lesma? Estamos dizendo que a lesma do ponto do menu tem um campo chamado slug é igual ao parâmetro chamado slug. Poderíamos facilmente trocar isto para dizer algo como a bala se quiséssemos torná-la um pouco menos confusa. Vou deixar isso com você. Se você quiser fazer isso, vamos executar uma exceção aqui apenas no caso de esses objetos de menu não existir. Vamos fazer uma exceção. O menu não existe. Retornar objetos ponto do menu ponto nenhum, e o que isso vai fazer é se não conseguimos encontrar um menu que tem o cabeçalho, onde tem o slug de Cabeçalho? Ele vai pegar essa exceção porque Jenga vai nos lançar uma exceção e vai nos dar uma reinicialização rápida sem nada de volta. Então ele ainda está nos dando uma honrosa para que quando vamos para eventualmente Luke geral sobre itens de menu em nosso template, ele não vai nos dar nenhum tipo de problemas. Então eu digo que eu ainda vou dar um chute nisso, mesmo que pareça que ele fez isso sozinho daquela vez. E quando eu atualizo aqui, ele simplesmente diz Cabeçalho. Agora, a razão que isso diz cabeçalho com uma idade maiúscula é porque o título é chamado cabeçalhos. Vamos dizer cabeçalho com, Ah, nome diferente e vamos em frente e mudar isso também. Cabeçalho salvar e eu vou atualizar meu modelo novamente. Cabeçalho com um nome diferente. Se você está se perguntando o que é tudo sobre em nosso menu em si, lembre-se, nós colocamos Dunder Stringed sob e é apenas retornando auto bem, esse título. Isso é o que estabelecemos aqui. Além disso, é o que estabelecemos aqui. Portanto, o campo de título é cabeçalho com um nome diferente. Campo de título é cabeçalho com um nome diferente e a cadeia de caracteres a representação de cadeia de caracteres. O nome da string desse objeto em particular é chamado, seja qual for o título, então é de onde estamos obtendo isso. Então, se você ver que as chances são que você está apenas recebendo o próprio objeto de menu e você precisa loop através dele. Então vamos em frente e passar por isso agora e eu vou me livrar disso. E onde está o nosso aqui? É quatro i em 123 Então isso só vai criar três links para nós, e nós só queremos dizer, em vez de quatro I para item em itens de menu de pontos de navegação ponto tudo agora isso vai ficar um pouco confuso novamente . Então estamos dizendo para a navegação que é toda a classe de menu, todo o objeto de menu esta página inteira essencialmente pontos itens de menu em nosso código. Temos um painel em linha com um nome relacionado usando itens de menu, então ele está pegando todos esses itens de menu ponto tudo então ele vai obter todos eles e nós estamos indo dedo loop através de cada um, certo? E vamos apenas fazer um pequeno teste rápido aqui e vamos imprimir o texto do link do menu. Então, vamos voltar aqui. E o que é que vai ser? O título do link é o que é chamado de título do link do ponto do menu ou título do item querido. Em vez disso. Então, para cada item de menu que temos, vamos chamá-lo de item, e então vamos obter o título do link. Vamos avançar página de atualização, e aqui podemos ver serviços e sobre nós, então ele está realmente funcionando. Agora precisamos trocar este link aqui, e vamos fazer isso em uma declaração se e, em seguida, vamos recolher esta declaração se para fazer um pouco mais de sentido. Então temos uma das duas coisas que já trabalhamos com isso antes. Temos uma das duas propriedades que podemos usar. Link. Você é L. Que vai ser apenas texto regular ou uma página de link. Então, vamos sempre verificar para ver se vai haver uma página de link primeiro. Então, podemos dizer se item ponto link página, podemos imprimir item ponto link página que você é l e nós fazemos o ponto você, Earl, Earl, porque isso vai ser uma página de detalhes maneira. Nós também podemos fazer. Ponto do item LF O que chamamos a esse link? Você é l Este é apenas um texto regular. Então, enfraquecer o item de dio não ligá-lo bem e vamos colocar aqui um link vazio basicamente, e isso é o que ele vai parecer. Então, se lermos isso, isso vai dizer se há um wag HelPage uma impressão de página de link Oh, que você Earl, se não há um, mas há um link. Você bem, um link externo. Imprima esse texto, seja lá o que for. E se não houver nenhum desses, mostre-nos um sinal de número normal como um link, e esse link não vai a lugar nenhum. Então vamos desmoronar tudo isso juntos. Então, tudo que estou fazendo é colocar isso em uma linha, uma linha bruta. Vou cortar isso, e vou movê-lo para cá. Agora, vamos dizer isso e atualizar nossa página. E quando eu clicar neste serviço sobre nós Oh, olhe para isso. Temos um sistema de navegação funcionando, certo? Mas nós temos mais uma coisa que nós adicionamos aqui que nós não implementamos o aberto em nova guia. Então, em nosso link aqui, nós também queremos dizer ok, se o item é suposto ser aberto em uma nova guia, vamos dar a este um alvo de Blank. E se não, eu não defini nenhum desses links para abrir em uma nova guia para que você possa testar isso sozinho . Mas vou deixar isso como está, porque estou muito feliz com isso agora. Nós também trabalhamos com declarações If como este antes, e nós realmente nos moveu para Mawr Python lógica para que nós não temos muita lógica template acontecendo. E esta página tem uma quantidade razoável de lógica de modelo. Então o que podemos fazer aqui é simplesmente dizer link item ponto, mas temos que criar isso primeiro. Então vamos voltar para as nossas modelos, aquela torta. E em nosso item de menu, vamos adicionar uma propriedade jangle aqui com um decorador na propriedade Deaf Link self. E este vai ser o link de ponto no modelo que podemos Você. Então agora podemos usar item não vincular o que quer que isso retorna, Isso é o que item não link vai ser. E podemos dizer que se auto dúvida página link então podemos retornar auto ponto link página, não é, Earl? E esta é realmente a mesma lógica que acabamos de colocar em nosso modelo. Estamos apenas fazendo isso na casa python são modelos podem ficar agradáveis e limpos. Agora nós vamos dizer LF auto-ponto link você é l e novamente eu estou apenas recebendo esses campos de aparecer eu acho que página link você bem, retornar auto ponto link URL caso contrário sempre retornar um simples, link vazio, e isso é apenas indo para sempre retornar a string. A outra coisa que dissemos foi que o título do link pode estar em branco, então tecnicamente o título do link pode não existir. Vamos dizer, se estiver em branco, vamos atribuir algo diferente. Então, novamente aqui, vamos criar uma nova propriedade e podemos usar este modelo interno também. Propriedade surdo Título Self. Agora o que vamos dizer é se há uma página de link e não há um título de link auto-ponto , então basicamente o título do link foi ignorado, mas há uma página Wag Tail foi selecionada. Nós vamos retornar que Espere até os títulos da página em si ponto link página ponto Título é o que vamos retornar. LF há um título de link auto-ponto retornar o título do link auto ponto e, por último, se não houver nenhum título do link e estamos usando um link externo para alguma outra página, podemos apenas dizer título faltando Agora, em nosso modelo, nós pode usar links de pontos e títulos de pontos. Vamos em frente e trocar estes para o título e isso vai ser bom e limpo com link item ponto e é isso. Vá em frente e atualize esta página. E com certeza, parece que nada mudou, mas conseguimos simplificar nosso modelo. Uma última coisa é que queremos agora adicionar isto ao nosso rodapé. Então isso é muito, muito fácil. É literalmente a mesma coisa que um cabeçalho. Nós vamos copiar essa linha toda aqui, então fazer para fazer sua cópia que nós vamos fazer a mesma coisa que fizemos aqui. Nós vamos fazer exatamente a mesma coisa aqui, e basicamente o mesmo menu que vai ser usado no cabeçalho vai ser usado em seu rodapé também. Então vamos usá-lo em dois lugares diferentes. Então é abrir o nosso rodapé dot html. Precisamos carregar etiquetas de menus que combinem com nossos menus, ocupa, eu arquivo colar aquele cara lá dentro. Então vamos executar a função get Manu. O único parâmetro para o slug é Header. Estamos atribuindo isso como navegação e em vez de quatro I e 123 podemos dizer quatro itens em ponto de navegação O que eu chamei isso de novo? Itens do menu? Nem todos. E aqui dentro. Vamos apenas fazer um título de ponto de item de teste simples e menus tags não registradas. , Interessante, interessante. Ok, é porque eu chamei de etiquetas de menu e aquela rolagem para baixo. E lá vamos nós. Chegamos aos serviços de ligações e sobre nós. E se alguma vez quiséssemos mudar a ordem disso, poderíamos literalmente apenas pressionar o botão para baixo ou o botão para cima neste hit save. E quando eu atualizar a página, será sobre nós e, em seguida, sobre nós e serviços, sobre serviços dos EUA e confirmação sobre nós e serviços. Então é aí que entra a conta do pedido. A última coisa que precisamos fazer aqui é onde está isso para Loop? Precisamos adicionar esse link de ponto do item de link, e eu pensei que ia durar um, mas esqueci que temos Se o ponto do item estiver aberto em Nova Guia, queremos que este alvo seja em Branco, e isso é páginas de atualização. Certifique-se de que as coisas estão funcionando como esperado. Vamos para a página de serviços. Sim, vá para a página sobre Yep. E temos um sistema de navegação funcionando. Agora há um pacote não-arável mencionado aqui chamado Wag Tail Menus. Se tudo isso é demais e você não quer lidar com toda essa cabeça sobre nosso KH, eu não posso dizer isso, mas seu jeito culto. Del menus está ligado. Pegue hobbits na torta e você pode ler através das docas aqui. Nós não vamos cobrir isso neste curso, mas ele cria um sistema de menu muito bom para usar Wag Tail, e você pode entrar em, como, alguns menus e coisas assim, que atualmente não estamos usando. Então, se você precisa de um menu mais avançado, este pode ser o caminho a seguir. Este é um pacote muito bom, parece manter as coisas agradáveis e simples, e você não precisa gerenciar seu próprio sistema de menu, que é muito, muito bom. Então, novamente, se esses dois últimos vídeos foram um pouco demais para você, fique à vontade para usar o pacote Wag Tail Menus 34. Formulários de contato parte 1: praticamente todos os sites nos dias de hoje precisam de um formulário de contato. Nem todos, mas a maioria tem. É uma maneira fácil para seus espectadores, leitores compradores entrarem em contato com o proprietário, escritores de artigos ou mantenedores de sites. Qualquer coisa assim. Wag Tail nos dá a boa capacidade de criar páginas de formulário de contato especiais. Então a primeira coisa que vamos fazer é abrir o nosso terminal. Vamos cancelar isso e vamos executar Python gerenciado. Eu começo a AP. Este vai ser chamado de contato, e ajuda se você começar corretamente. Vamos reexecutar o servidor dela. Esconda isso e no nosso código, vamos abrir com base no Pie e queremos ter contato aqui. Nenhum contato é o nome do aplicativo que acabamos de criar. Então, se você chamou sua página de contato, você mudaria isso para Página de contato, e sua pasta também seria chamada de página de contato. Seu APS também diria página de contato aqui. Então vamos fechar isso e vamos nos livrar de alguns arquivos, porque isso vai ser uma página de cauda abatida . Não precisamos dos nossos pontos de vista. Muitos testes já foram escritos, e não precisamos de nenhum tipo de administração. Nós vamos manter nossos modelos APS nele e migrações, entanto. Agora, para criar uma página de contato, precisamos fazer algumas coisas. Precisamos primeiro criar uma página de contato de classe, e você acha que isso viria de Page. Mas ele não vai vir de Page vai vir de uma coisa chamada um formulário de e-mail abstrato . E a importação para isso é, se eu posso lembrar isso corretamente, é ponto retal con Trib dot formas dot modelos importar formulário de e-mail abstrato que ele tinha que parece certo para mim. Não, não te esqueças a qualquer momento, se não te lembras das tuas importações, tudo bem. Você sempre pode verificar as docas, estes ar todos disponíveis nas docas também. Este código e em qualquer ponto no tempo, se você quiser oh, eu quero outro exemplo de trabalho de praticamente qualquer coisa que está neste curso. Você pode conferir o código-fonte deste curso, ou você também pode ir para http. Obter herb dot com barra de codificação para todos slash aprendeu. Espere até que essa seja a dança original. Diga ao curso todo o código-fonte para os cursos originais aprendidos Wag Tail lá. Eu acho que há algo como 50 vídeos, então há um monte de commits provavelmente como 60 ish commits, e tudo dividido em diferentes commits. Então, se você apenas ir até lá, você pode verificar todo o código-fonte, e você pode dividi-lo com base em commit baseado em vídeo também. Então sinta-se livre para verificar isso se você estiver interessado em ver outro exemplo de como muitas dessas coisas são usadas. Ok, então em nossa página de contato aqui, nós vamos especificar modelo porque eu gosto de fazer isso, mesmo que por padrão isso já seria contatos última página de contato. Mas em nossa página de contato, também temos outro. Recebemos um modelo de página de aterrissagem, e podemos especificar este. Agora, se não especificarmos este, eu acredito que o que Wag tail fará automaticamente é apenas um pan anexar a palavra sublinhado aterrissagem para sua página de contato. Agora nós estamos indo para você especificar que de qualquer maneira, então contato barra página de contato, landing dot html, e eu fazer que um passo menor lá. Nossa página de contato deve ter qualquer tipo de subpágina. Alguns tipos de página é igual a nenhum. Nós não queremos nenhuma página infantil aqui embaixo e daqui a pouco o que nós vamos fazer é em nossas modelos de casa aquela torta. Nós vamos especificar a página de contato ponto de contato como um tipo de subpágina. É permitido viver sob a página inicial. Agora. Eu não vou salvar este arquivo ainda porque de acordo com nosso código, nada disso existe ainda. Ainda não salvei este arquivo. Quantos formulários de contato podemos ter? Eu vou dizer que só pode haver um como um marcador. Só pode haver um. E que tipo de campos queremos nesta página de contato? Eu quero uma introdução que vai ser algum tipo de campo de rich text, que eu não acredito que nós realmente trabalhamos com ainda. Então esta vai ser, ah, ah, boa maneira de mostrar como usar maneira diz rich text com o editor de perucas chamado rascunho cauda dentro de uma página real. Nós vamos, ah, criar ah, um texto de agradecimento que você acha que você texto. Este também será um campo de rich text apenas por causa do design com o qual estamos trabalhando . Eu sei que vai haver uma imagem de mapa, e isso vai ser uma chave estrangeira para uma imagem de cauda abafada e possivelmente um mapa. Você é l Se alguém quiser entrar em contato conosco e isso vai ser você todos em campo. Então eu só estou fazendo uma pseudocodificação aqui, não escrevendo nenhum desses campos? Ainda não. De qualquer forma. Nós temos esses campos e queremos que o Wag Tail exponha esses campos para nós. Vamos dizer que painéis de conteúdo é igual a, e o que sempre fizemos foi painéis de conteúdo é igual a painéis de conteúdo de ponto de página, e então adicionamos uma lista a ele. Mas ainda não temos página aqui. Temos formulário de e-mail abstrato, e então podemos adicionar nossos painéis de campo e outras coisas aqui. Então vamos adicionar um painel de campo para o nosso campo de introdução, que atualmente não existe. Vamos adicionar um painel seletor de imagens para a nossa imagem de mapa. Isso está em um painel de campo normal para o nosso mapa. Você Earl mapa, você é l. Agora é aqui que as coisas especiais entram. Precisamos de um painel em linha para nossos campos de formulário que ainda não criamos este, então este vai ser um pouco especial. Vamos ligar para este. Dê-nos uma etiqueta especial chamada Campos de formulário. Voltaremos a isso em um segundo. Estamos apenas mapeando nossos painéis de conteúdo agora, com base em campos que nem sequer existem. Então nós temos um pseudo código, nós vamos preencher isso, nós vamos preenchê-los, então nós vamos adicionar nosso campo de formulário. Então estamos em todo lugar porque temos várias coisas diferentes que precisamos trabalhar para que isso funcione. Eu também quero colocar um painel de campo aqui para o texto de agradecimento. Mensagem de agradecimento. Isso vai ser um painel de campo de texto avançado. E também temos um painel de campo para um endereço de origem. E temos outro para o endereço, que não definimos. Mas isso na verdade, vem com nosso formulário de e-mail abstrato. Então, se eu pulei uma definição aqui, este é o código-fonte. Temos um para abordar um endereço de origem e um assunto que ainda não adicionamos, então vamos em frente e adicionar um painel de campo para o assunto. Agora, neste momento, se você salvar este arquivo, seus terminais vão pirar, vai dizer que muitas coisas não são importadas e nós vamos chegar lá. Vamos fazer todas as importações de uma só vez. Vamos em frente e consertar alguns de nossos campos agora. Então, essa introdução será realmente uma coisa chamada campo de rich text. Um campo de rich text adequado. Isto pode ficar em branco? Sim. E quais recursos queremos habilitar? Agora, isso é muito parecido com o bloco de rich text que adicionamos para nossos campos de fluxo. Só que este está em um campo de página. Vamos ativar negrito eu não itálico link lista ordenada e uma lista ordenada na. E o nosso texto de agradecimento também será muito parecido. Então, vamos dizer em branco é igual a verdadeiro e os recursos vão ser lista ordenada de link de bordo e uma lista de erros Nord. Nossa imagem de mapa vai ser uma chave estrangeira, então fazemos modelos dot chave estrangeira e é assim que acabamos selecionando uma imagem de cauda wag. Espere. Digam imagem é realmente imagens plurais imagem ponto. Vamos dizer que isso pode ser totalmente “não “se quisermos. Mas quando você está criando esta página quando você está editando esta página, isso não pode ser nenhum. Então, vamos dizer que Blank é falso ao excluir o que acontece quando você exclui essa imagem? Nós vamos dizer modelos dot set No. Portanto, não vai excluir esta página. Só vai definir este campo para conhecer o texto de ajuda. Digamos que a imagem será corrupto Teoh ass algo como, eu não sei, 5 80 pixels por 355 pixels prato. E o nome relacionado vai ser mais porque não precisamos de nomes relacionados. Então, em certo sentido, jogue isso fora. O mapa. Vocês sempre serão modelos. Comece você é l Campo em branco é igual a verdadeiro. E vamos adicionar algum texto de ajuda e digamos que isso é opcional. Se você fornecer um link aqui, a imagem do mapa se tornará um link. Essa é a ideia, e agora temos todo tipo de coisas que precisamos importar. Ah, mas mesmo antes de fazermos isso, temos esses campos de formulário. Temos alguns campos de formulário aqui que precisamos realmente definir. Então vamos voltar aqui e criar uma nova classe para nossos campos de formulário. Agora, nós meio que já trabalhamos com um pouco disso, então isso vai parecer um pouco familiar, mas também pode parecer um pouco mágico. Então este campo de formulário vai herdar o campo de formulário abstrato. E aqui, isso vai parecer muito bizarro, mas vai ser Page é igual a chave parental. Isso vai para a página de contato que corresponde à classe. Nome na exclusão é igual a modelos dot Cascade. Então, vamos excluir cada um desses campos de formulário quando as páginas de contato excluídas e nome relacionado . Este é o importante um campo de formulário. E a razão pela qual é importante é porque esse nome relacionado corresponde ao painel em linha. Tudo bem, olhando para um terminal, vamos ter que lidar com um monte de importações diferentes aqui. Então eu vou tentar tirar alguns desses fora do topo da minha cabeça baseado no, você sabe, tipo do que vemos na página. Então precisamos de um campo de formulário abstrato aqui. Eu acredito que isso vem do mesmo lugar que o formulário de e-mail abstrato faz. Vamos importar um monte de nossos painéis. Agora, vamos fazer a partir de Wag tail dot Admin Dodd que ele manipula as importações. Temos um painel de campo sendo usado. Ah, nós não temos no painel de linha sendo usado no painel de linha e eu acho que nós só Penhall não dor. E acho que o único que temos é umpainel de seleção de imagens. E acho que o único que temos é um Mas isso vem de outro lugar. Nós vamos dizer maneira de imagens pontuar para ele. Os manipuladores importam o painel Seletor de imagens. Precisamos da chave dos pais. Esse vem do cluster de modelo de modelos de pontos de cluster de modelo importar chave parental. O que mais temos? Temos campo de rich text. É um novo para nós dos campos “Espere até o ponto do núcleo”. Este é realmente um ar realmente começando a esticar minha memória aqui. Eu acho que é campos rich Text campo? Sim, eu acho que seus campos e eu acho que pode ser. Ok, então vamos em frente. Cancelar ou servidor. Agora que isso está funcionando Vamos fazer python gerenciar dot pie Faça migrações até que tenhamos um novo modelo para um campo de formulário e um novo modelo para nossa página de contato. Vamos fazer Python gerenciado eu migrar e vamos reexecutar o servidor dela na porta 8000. Agora vamos para a nossa página está aqui. Vamos tentar criar uma página de contato. Temos uma página inicial aqui em uma página filho, e ainda assim só nos permite fazer a página flexível. Isso porque em sua página inicial permitiu um dos dois tipos de página. Nós cobrimos isso Ah, algumas lições atrás, mas a página de listagem de serviço e a página Flex são a sub-página Onley ou páginas filho que estão autorizados a viver sob a página inicial. Então ele está tentando criar uma página flexível porque a página de listagem de serviço tem uma contagem máxima de um e já existe. Então, a única outra opção é uma página flexível. Podemos dizer: “ Ei, Ei, adicione essa página de contato, então eu vou voltar e depois em uma página infantil, e aqui vamos nós. Temos uma nova opção, uma nova página de contato, e podemos ver que isso se parece muito com uma página normal. Então vamos ligar para isto, contacte-nos. Eu quero mudar essa lesma para ser apenas contato barra porque eu gosto que uma introdução vai ser Olá. Bem-vindo ao meu texto de introdução ou algo assim. Chato minha imagem do mapa. Não tenho um, mas vou usar uma imagem normal aqui. Um mapa? Você onde? L está indo apenas para ir para http mapas dot google dot com E agora nós formamos campo, então isso é muito legal. Agora podemos criar nosso próprio formulário personalizado. Agora, uma coisa a ter em mente é que isso não substitui o Django Fields. Este é um formulário de contato. Não se destina a ser usado para adicionar todos os tipos de lógica adicional. Então, se alguém preencher este formulário, ele não deve criar automaticamente uma nova página de cauda wag. Isso é mais ou menos para o sistema de formulários Django. Não para as formas de cauda abatida. Pelo menos não para a página de contato de qualquer maneira. Ah, nós temos uma mensagem de ajuda de rótulo. O campo é obrigatório? Temos diferentes tipos de campo aqui. Um monte deles. Aprenderemos como limitar isso na próxima lição. Eu acredito em escolhas e um valor padrão. Então vamos em frente e adicionar alguns destes aqui. Então vamos adicionar o seu nome completo. E isso vai ser uma única linha de texto e é necessário. Vamos adicionar outro no ano. Este vai ser o seu endereço de e-mail. Isto vai ser um campo de e-mail. Também é necessário. E vamos adicionar outro aqui chamado mensagem. E este vai ser um texto de várias linhas. Obrigado, Texas vai ser. Obrigado. Obrigado. Obrigado. Obrigado. Obrigado. Obrigado. O endereço de e-mail de origem. Quem está enviando este e-mail agora? Uma coisa a ter em mente é quando você inicia um site wag tail, sua calcita branca não vai enviar e-mails por padrão. Você vai precisar configurar SMTP ou usar um serviço como carimbo postal, que eu acho que o site é postmark app dot com ou algo como enviar grade ou ah, aws tem um serviço chamado SCS. Algo assim. Então, 1/3 serviço partido para enviar e-mails, que geralmente é a maneira mais fácil. Então o endereço aqui vai ser Caleb em aprender maneira, diga ponto com. O endereço para também será Caleb em Learn wag tail dot com. É para isso que vamos enviar o e-mail. Então, basicamente, vai parecer que estou me enviando um e-mail. Mas às vezes é assim que os formulários de contato funcionam. Ou eu poderia enviar um e-mail para outra pessoa e parece que ele está vindo do meu endereço de e-mail independentemente. E o assunto vai ser a submissão do formulário de contato porque eu não estou me sentindo criativo com esse nome. Ah, você também vai notar antes de salvarmos. Podemos visualizar esta página ou visualizar a página de destino. Chegaremos a isso daqui a pouco também. Feijão legal Essa página foi salva. E se olharmos ao vivo, vamos ver Sim, claro, Template não existe. Sabíamos que isto ia acontecer. Não criamos uma página de contato. Precisamos criar esse modelo agora, então eu vou entrar em modelos Rocketman e criar uma nova seção aqui chamada Contact and Contact page dot h e mails. O que vai ser chamado isso vai se estender com base em HTML, assim como todas as nossas outras páginas que vão carregar. De que tipo de coisas vamos precisar? Bem, ainda não sabemos. Então eu vou realmente comentar isso, na verdade, apenas excluí-lo. Vamos trazer isso de volta. Block. Vamos criar um novo bloco para o conteúdo. E só para ter certeza que isso está funcionando em breve H um oi de contato Page. Eu realmente não me importo que haja um pequeno tipo de quando a causa deles estamos jogando fora da página de contato. Agora sabemos que temos algum texto rico aqui porque se formos ao nosso poço, vamos fechar a página inicial 1. Mas se formos para nossa página de contato não, esse código-fonte, vamos para nossa página de contato. Temos campo Rich text, então sabemos que vamos precisar exibir isso. Então vamos carregar as tags do núcleo Waittil e o campo vai ser introdução. Então nós estamos simplesmente indo para exibir que vai fazer página que introdução e jogar o filtro de rich text sobre ele. Olá. Bem-vindo ao texto de introdução. Isso é o que eu coloquei na página. Agora o que eu vou fazer é porque há um monte de html nesta página e eu não acho que você está interessado em apenas me ver digitando html no Emmett formando seu braço como tive, o que quer que seja. Vou escrever no meu código. Estou em uma tela preta e volto quando terminar e vamos preencher todas as peças que faltam juntos. Tudo bem, então eu acabei de escrever um monte de HTML e nós vamos preencher os pedaços que faltam juntos . Então, o que este modelo vai parecer agora é que há um título, algum texto de introdução que precisamos de uma imagem pode ser um link para um mapa, você não é, e precisamos do nosso formulário para realmente aparecer e renderizar corretamente e enviar. Então, a primeira parte é muito fácil. Fizemos isso antes do título do ponto da página e do nosso rich text. Nós literalmente fizemos isso apenas alguns momentos atrás. Poderíamos fazer texto rico de texto de introdução de ponto de página, e esse é o filtro de rich text que vem das tags de Espera até tribunal. Próximo. Temos uma imagem aqui, e esta imagem vai ser de 580 por 335 Vamos em frente e usar a tag de imagem. E se essa tag de imagem não funcionar para você, isso é porque você precisa carregar tags de imagens wag tail. Então vamos carregar a página. O que chamamos a essa imagem? Chamávamos-lhe Imagem do Mapa. Nós vamos dizer, Sinta que com 580 por 335 como eu sou G. Vamos em frente e substituir este valor aqui. Eu sou g dot u r l. Nós já fizemos esse número de vezes. Sempre adicione o sal e vamos dar uma olhada em como sua página atualmente se parece. Tudo bem, olhe isso. Isso está começando a ficar muito bem agora. Precisamos adicionar nosso formulário. Há muitas maneiras diferentes de fazer isso. A maneira que eu gosto de fazer isso é uma espécie de loop através de toda a forma. Campos um por um tipo de identificar o que eles são e estilizar minha página de forma diferente com base no que o campo é. Então, por exemplo, se eu estiver percorrendo todos os meus campos de formulário e tiver uma área de texto, talvez queira adicionar algo diferente em relação a um campo de entrada normal. Mas como um atalho para agora, podemos fazer ponto de forma como você l O que eu tenho aqui também é um método de formulário é igual para postar a ação é a página onde l É apenas esta página que vai enviar em si mesmo. Sempre, sempre, sempre. Adicione seu token CS R F. Este é o seu pedido de cross site. Ficha de falsificação. Isso basicamente significa que você é quem você é, e alguém não está tentando fingir ser outra pessoa. Isso não vai impedir que os rabos enviem este formulário de contato, mas impedirá algumas pessoas maliciosas. E então vamos dizer ponto de forma como você. Bem, apenas uma espécie de imprimir todo o formulário na forma de uma lista, e eu acredito que ele não vai realmente criar uma lista para nós. Então precisamos adicionar UL em torno dele. Ok, vamos em frente e refrescar. Olhe para isso. Seu nome completo, seu e-mail e sua mensagem. Foi isso que escrevemos. Foi o que adicionamos na página dela. Então, quando editamos nossa página de contato, vá até o formulário dela, campos seu nome completo, temos e-mail aqui e temos uma mensagem que é um campo de texto. E com certeza, todos esses mostram como esperado no próximo vídeo vamos continuar com isso. Vamos fazer isso parecer um pouco mais agradável, e quando você enviar sua página, haverá uma página de destino atualmente não existe, então vamos adicionar isso também. 35. Formulários de contato parte 2: Partindo da última lição. Criamos uma página de contato, e estamos trabalhando para fazer este formulário parecer um pouco mais agradável. E, em seguida, quando editamos a página, nós também queremos que a página de destino loja, que atualmente não. Nós demos a ele um modelo que não existe, então nós vamos precisar ter certeza de que isso funciona bem. Então eu gosto de fazer um loop através de todos esses campos e é uma tarefa muito trabalhosa. Então você pode realmente apenas apimentar isso usando apenas CSS, que é eu acho que essa é a maneira recomendada de fazê-lo. Mas eu também gosto de temperar um pouco mais usando uma ferramenta chamada Widget Tweaks. Então eu vou para o meu servidor aqui, bater, bater, cancelar e fazer Pip instalar o Django Widget. Soletre direito, o que ele ajusta. E essa versão insulta 1.4 ponto cinco. Vamos em frente. Rode o meu servidor de novo. Você pode executar seu servidor, definitivamente executar seu servidor e vamos em frente e adicionar isso aos nossos requisitos. Então temos extensões do Django aqui porque instalamos extensões do Django em ah classe anterior . Se você não adicionou isso lá da classe anterior. Definitivamente certifique-se que você tem isso, porque você está usando este projeto e nós vamos adicionar ao Django Widget Tweaks versão 1.4 ponto cinco. E se você nunca tiver certeza sobre qual versão você está usando, você sempre pode fazer Pip Show e, em seguida, digitar o nome do pacote. Então Django Widget ajustes e isso vai me dizer que é a pessoa que fez deste endereço de e-mail . Esse é o nome da pessoa e a versão é 1.4 ponto cinco. Salve esse arquivo, feche-o, e vamos em frente e instalar semanas widget em nosso aplicativo. Vou jogar isso no fundo porque é uma festa de 1/3. Então ajustes de widget e vamos verificar o nosso terminal. Certifique-se de que nada se queixou. Não há reclamações. Isso está parecendo bom. E agora o que eu estou indo para Dio é que eu realmente já pré escrevi esta lição em particular só porque há muito para ela. E se ficarmos aqui juntos falando sobre sermos capazes de percorrer cada campo de formulário e obter todos os valores diferentes que estamos indo, vamos ficar presos nesta lição por várias horas, e eu não quero que você fique entediado morte e ter que ficar aqui preso comigo por várias horas. Então o que eu estou indo para Dio é colar no meu código e vamos passar por ele linha por linha. Ok, então eu acabei de colar um monte de código aqui Antes de fazermos qualquer coisa, precisamos ter certeza de que ajustes de widget é permitido, que ele ajustes vai ser o arquivo que vamos carregar neste modelo. E vamos em frente e dar a esta página um pequeno cheque rápido. Veja o que aconteceu aqui, Ok, Faltando uma atualização minha página. E tudo o que foi foi que eu estava perdendo um fim se lá estiver, então eu não fiz você assistir isso porque isso me levou cerca de cinco minutos. Na verdade encontrá-lo nesta confusão de código s. Então este é um bom candidato para dividir seu código em diferentes arquivos de inclusão. Mas o que eu fiz aqui foi eu adicionei semanas widget. Então temos pip instalado semanas widget, semanas de widget Jenga e ah, precisamos agora adicionar nosso formulário aqui. Então nosso formulário vai dizer para cada campo no formulário, criar uma nova linha e eles iam dizer se esse tipo de widget de campo é uma área de texto, mostrar algumas coisas de área de texto. Então, na área de texto, temos um grupo de formulários e temos um rótulo em seu Então isso está fazendo o campo ponto i D para rótulo e, em seguida, o rótulo real em si. E vamos dizer que se for necessário, coloque entre parênteses a palavra requerida. Em seguida, vamos usar semanas de widget, renderizar tag modelo de campo vai renderizar o próprio campo particular. Seja qual for a classe que ele decidir que precisa, vai adicioná-lo lá. Nós também vamos adicionar controle de formulário e linhas de seis, e o titular do lugar vai ser qualquer que seja o rótulo do campo agora, Esta novamente é uma maneira muito, muito manual de fazer isso. Mas isso me permite adicionar coisas como linhas de seis ou controle de formulário de classe para que ele combina com botas monótonas. Você pode fazer tudo isso com CSS também, então você não precisa realmente entrar no nitty gritty. Se você pode apenas fazê-lo da maneira CSS e substituir qualquer um de seus estilos. Isso é definitivamente mais fácil, mas esta é a maneira mais manual. Se você estiver interessado em fazer isso, se houver algum erro de campo para este campo específico, vamos mostrar algum texto pequeno e vamos percorrer cada um dos erros de campo e, em seguida, mostrar cada campo ar com uma quebra de linha depois dele. E então, se houver algum texto de ajuda aqui. Nós também vamos mostrar o campo dot ajuda imposto. Vamos nos certificar de que é seguro para que você possa colocar ousado aqui ou um Tallix lá dentro qualquer coisa assim. Então estamos dizendo, se o tipo de campo é praticamente qualquer outro tipo de campo e o rótulo de campo não estiver vazio, nós realmente vamos fazer quase exatamente a mesma coisa. Mas vamos ler para o campo com uma classe de controle de formulário, o que estávamos fazendo antes, mas este não tem seis linhas. Isso só tem, bem uma linha porque vai ser um campo de entrada de alguma variedade e basicamente fazendo exatamente a mesma coisa uma e outra vez. Agora, a razão pela qual eu estou verificando o rótulo do campo e para ver se existe ou não é porque se nós adicionamos o Google recapturado a isso, nós vamos precisar de alguma forma detectar isso, e essa é uma maneira de detectando-o. Então, novamente, eu não vou passar por tudo isso em profundidade. Mas esta é a maneira muito manual. Então, no futuro, se você quiser oh, hey, eu preciso do Teoh, eu preciso do Teoh, loop através de todos os erros de campo ou loop através de todos os campos e, em seguida, loop através de todos os ares. Sim, fique à vontade para roubar um pouco deste código aqui porque, ei, eu já fiz o trabalho. Não há necessidade de nós dois fazerem isso. Então, quando voltamos a uma página e nos damos um pouco de uma atualização aqui, podemos ver que diz, Você é o nome completo. É exigir que seu e-mail é necessário e sua mensagem é necessária. Agora, se eu sentir isso, meu nome completo vai ser Caleb e meu e-mail completo vai ser matar sobre aprendido. Espere até a Dot com. Eu tenho alarme. Se alguma mensagem aqui, vou enviar isto agora. Agora, enquanto isso se submete, haverá duas coisas acontecendo. Este foi o primeiro 1 que vai nos levar para nossa página de destino de contato, mas nosso você onde eu não mudou, ele está apenas usando um modelo diferente agora. E a outra coisa é, se olharmos em nosso terminal, podemos realmente ver que está tentando enviar um e-mail, disse Dele. Meu nome completo é Caleb. O endereço de e-mail que preenchi no formulário era Caleb. Ele aprendeu a esperar até ponto com e a mensagem foi 50 palavras de ipsum quente. Isso é exatamente o que eu apresentei. Isso é muito bom. Mas também, quando voltarmos ao nosso anúncio, os homens esperam que ele carregue. Agora temos uma pequena seção em seus formulários chamados, e o que é realmente legal sobre isso é que toda vez que alguém enviar seu formulário na página de contato EUA , você vai obter a data de envio e os diferentes campos aqui. Você também pode selecionar todos esses itens. Você pode baixá-los em um C S V, até mesmo excluir suas mensagens selecionadas, e você pode filtrar através delas. Então agora você tem um lugar para armazenar os envios de e-mail porque, hey, você sabe o que? Às vezes, os e-mails se perdem na Internet. Isso é apenas um fato da vida. Acontece de vez em quando. E se isso acontecer, você tem um e-mail reserva aqui e no futuro. Se você já adicionou outro formulário de contato, não entraremos neste projeto porque temos uma contagem máxima de um nesta página. Mas se você já adicionou um segundo contato para chamada entre em contato conosco sobre nossos serviços, este título aqui estaria bem abaixo. Haveria uma segunda linha, diria, entre em contato conosco serviços de eleitor porque eu seria o título da página e ainda uma página de contato. E quaisquer que sejam os campos de formulário, essa página específica seria exibida aqui. Agora temos mais uma coisa a fazer. Precisamos adicionar este empréstimo página de contato. Então o que eu vou fazer é fazer isso Ah, esta página de contato, eu realmente estou indo para re salvar isso como página de contato Landing o título não precisa mudar, mas eu posso me livrar de um monte dessas coisas aqui. E acho que não preciso de nada disso. E eu definitivamente não preciso do formulário porque estamos basicamente apenas agradecendo. E agora esta página, em vez de dizer que a introdução vai precisar dizer para agradecer. Texto para página que. Obrigado. Texto esse rich text. Não precisamos de nossas imagens lá. Não precisamos de tweets de widgets lá, mas precisamos de nossas tags principais para o filtro de rich text. Ok, vamos em frente. Guarde isso. Dê uma atualização a isto. Não, não quero reenviar isso. Então eu não vou me refrescar. Mas o que eu vou fazer é ir para a página de contato e apenas visualizá-la. Preview landing page No real diz, entre em contato conosco. Obrigado. Obrigado. Obrigado. Obrigado. Obrigado. Ou, você sabe, que seja. Uma espécie de mensagem de agradecimento que você gostaria de colocar lá. Provavelmente algo um pouco mais apropriado do que obrigado. Obrigado. Obrigado. Obrigado. Obrigado. E esse é o caminho muito longo. A explicação longa e sinuosa sobre como criar uma página de contato com a minha cauda. Agora, para ser totalmente honesto com você, eu não escrevo isso todas as vezes. Eu tenho o meu código-fonte disponível aqui e também em obter hub dot com revestimento barra para todos slash aprendeu traço, cauda wag. E você pode literalmente copiar esse código. Eu não acho que muitas pessoas estão realmente escrevendo todas as coisas do formulário de contato para fora manualmente. Se você está. Ei, parabéns. Mas isso é um pouco de trabalho demais para mim. Então eu costumo ir para copiar e colar rota e apenas mudar o que eu preciso mudar aqui. Então, uma vez que você tem isso funcionando, sinta-se livre para experimentar com ele. Tente quebrá-lo se você quiser Pior cenário caso, você apenas excluir este aplicativo. Execute migrações, recria o aplicativo, execute migrações novamente e inicie um novo ou em vez de experimentar. Se você está totalmente cansado de formulários de contato como eu, vamos para a próxima lição e aprender mais uma coisa sobre formulários de contato, e então terminamos com isso. 36. Citando escolhas de formas de contato: Tudo bem. Há apenas mais uma lição sobre formulários de contato aqui, e este é um assunto bastante comum. Pelo menos eu recebo essa pergunta com bastante frequência e surge em muitas perguntas de clientes, na verdade, é como posso limitar essas perguntas agora quando você está trabalhando com um design profissional? Então talvez um designer tenha feito um design para você? As chances são que eles não têm pensado sobre o que Ah data campo uma data botões de opção data, seleção múltipla caixas de seleção drop-down. Jack, você é o número L, e-mail. Multi linha e textos mentirosos são todos supostamente para olhar como chances são, eles disseram. Aqui está um texto de linha única, texto de várias linhas. Aqui está Ah, caixa de seleção, talvez uma lista suspensa. E então nós precisamos realmente limitar alguns desses porque nós não vamos estar usando todos eles. Mas como fazemos isso agora, esperando até que não seja realmente tão difícil de fazer, mas não é uma característica super fácil de descobrir também. Então, no meu código, aqui estou eu no modelo de barra de contato Parar I. Eu tenho um campo de formulário aqui chamado campo de formulário abstrato. Agora eu sou realmente alterações para personalizado no campo de formulário abstrato, e eu vou criar uma nova classe chamada Custom abstract Form Field. E este vai ser apenas um campo de formulário abstrato em si. Então, realmente, acabamos de mudar a classe para baixo. Nós vamos dizer que este tem um tipo de campo de campo de RH e porque no Django você não tem um campo de escolha, você tem um campo de char e você pode dá-lo a escolhas. Nós simplesmente vamos dizer, este é um campo gráfico com escolhas. Vamos nos dar um nome detalhado para a maioria do nome é igual ao tipo de campo. O comprimento máximo vai estar em algum lugar em torno de 16 caracteres, e as escolhas serão opções de campo de formulário. E para este, vamos apenas retocar isso e dizer a classe e também mover isso para cima e fazer isso maior. A classe meta vai ser uma classe abstrata. Essa é a verdadeira ordem de classificação. Ok, então estamos perdendo mais uma coisa aqui. Só estamos perdendo as opções do campo de formulário. Posso dar-lhe as opções de campo de formulário, ou podemos clicar com o botão direito do mouse em seu ir para a definição e isso é realmente apenas explorar a espera até o código-fonte e podemos ver aqui. Temos um tipo de campo. Olhe para isso. O campo de formulário abstrato. Temos um tipo de campo. É o único que estamos substituindo. Formamos opções de campo aqui também. Também temos painéis e outras coisas. Se quiséssemos adicionar campos personalizados, poderíamos fazer isso. Isso é muito bom. Não vamos entrar nisso. Só queremos descobrir o que é este formulário, escolhas de campo, o que são. Vamos pular para essa definição. E temos todas essas opções de campo de formulário. Então eu vou pegar todas essas cópias, hum, e colá-las no meu arquivo e assim podemos ver que temos linha única, número de e-mail multi-linha. Você está fora. Caixa de seleção caixas, lista suspensa, lista suspensa, seleção múltipla data de rádio durante o dia e oculta. Bem, vamos em frente e nos livrar daqueles que não vamos usar neste site. Agora. Isso pode ser diferente em seu site, mas neste site em particular que eu fiz, eu não preciso de nenhum campo de data. Não preciso de rádio. Não preciso de seleção múltipla. Talvez, mas não. Não marque caixas. Possivelmente você, Earl. Ah, campo numérico. Não preciso de um campo numérico. Eu realmente só preciso de linha única, multi-linha e-mail e você é tudo e isso é para traduzir o seu texto. E se voltarmos a essa página normal, podemos ver que ela está sendo importada aqui. Então eu vou pegar essa importação e importado para a minha página também. Assim, a partir do django dot você diz que a importação de tradução, você obtém texto preguiçoso como sublinhado. Ok, vamos em frente e salvar isso. E o nome de v Bo não é uma coisa. É por isso que checamos o terminal dela. É um nome detalhado para reexecutar o servidor dela. Ok, isso parece bem. Vamos em frente e correr. Python conseguiu. Eu faço migrações porque é sempre bom verificar se você tem migrações. E com certeza, alteramos o tipo de campo aqui. Python gerenciou uma torta, migrou e vamos reexecutar seu servidor. E agora, quando atualizarmos nossa página, em vez de todas essas opções, teremos as escolhas regulares que definimos. Basicamente tomamos todas as escolhas que a perna nos dará e dissemos que não, vamos limitar isso a apenas quatro tipos diferentes. Nada no templo dela vai mudar porque já estamos usando esses quatro. E sempre que você adicionar um novo campo aqui, esse novo tipo de campo também será uma linha única, e-mail de várias linhas ou um campo U R L. E é isso. É assim que limitamos as opções de campo de formulário. 37. Suporte de imagem webp: Wempe é um tipo de imagem que o Google vem empurrando há alguns anos. Aparentemente é um formato de imagem de alta compressão sem perdas. Agora a coisa é, ele não é suportado por todos os navegadores do mundo, não como o padrão J. Peg ou um arquivo PNG, mas eu tenho certeza que o esporte vai chegar lá eventualmente. O bom é esperar até 2.7 e avançar. Ele suporta imagens Web P fora da caixa, então vamos em frente. Vamos abrir um fluxo de campos. Vamos para modelos flexíveis. Temos uma imagem grande aqui, e vamos editar este modelo agora para criar uma imagem Web P é super, super fácil. Realmente. Tudo o que você precisa fazer é após ano, suas dimensões de imagem que você deseja cortar duas ou preencher, também. Você realmente acabou de colocar o formato traço Webby. É isso. E criará uma imagem Web P para você. Ele irá assiná-lo para a variável de imagem, então você realmente não precisa mudar nada mais Now. Eu não vou fazer isso. Eu estou realmente copiar isso mais e para formatar quando P como imagem Wempe e nós vamos olhar para este u R L Então foi a imagem duvidosa. Bem, agora eu sei que a página sobre nós já tem uma imagem nela. Então eu vou atualizar esta página e podemos ver que ela produziu uma Web p U R L para nós, e eu vou para o anfitrião local 8000. E aí está. Esta é a nossa imagem Web P. Parece, honestamente, o mesmo que a nossa imagem JPEG normal. Agora, quando você está usando sua Web, a imagem geralmente, acredito que colocamos dentro da etiqueta de imagem e você adiciona uma fonte. Então você tem uma fonte aqui. O conjunto de código-fonte é igual a e, em seguida, você faz sua imagem Web P. Esse é o errado com a imagem que você é. L fita é igual a imagem barra Web P, e é isso. Então agora temos uma tag de imagem tentando usar a Web P e cai de volta para uma imagem normal. Agora, como um experimento, eu vou ver o código-fonte aqui, e eu posso ver que há ah, imagem Web P e há também uma imagem JPEG. Então eu vou baixar esses arquivos. Tudo bem, então eu acabei de baixar esses arquivos, e aqui nós podemos realmente ver. Um é o formato Web P, e o outro é apenas um J peg normal. O Web P é mais de 50% menor do que o JPEG. Nossas imagens Web P apenas 32 kilobytes, e o J peg é 81 kilobytes. Ambas são imagens bastante pequenas, independentemente, mas, no entanto, ainda é significativamente menor. Portanto, há alguns ganhos de desempenho bastante grandes, especialmente com sites baseados em imagens pesadas. E como uma recapitulação rápida, realmente, tudo que você tem que fazer é adicionar formato traço Web P atrás de suas dimensões de imagem, e é isso. Então, para o resto deste projeto, você pode passar por todo o outro código-fonte e adicionar Web P lá também. 38. Outras maneiras de aprender o Wagtail: Vamos falar sobre alguns truques para aprender Wag Tail muito rápido. Então você tem passado por todo esse curso e um ótimo trabalho em passar por todo esse curso, curso,a propósito, porque há muito conteúdo para passar. Mas há uma maneira mais rápida. Foi a maneira que aprendi. E é a maneira que muitas outras pessoas que eu ouvi, eles conseguiram aprender balançar, cauda e balançar muito, muito rapidamente. Então, as primeiras coisas primeiro. Você tem as docas, as docas, você sabe que os cães são muito bons, mas como qualquer documentação, isso realmente só vai te levar até aqui. Até que você realmente experimente algum do código, você realmente não vai memorizar muito dele. E assim como este curso, há apenas tanto conteúdo que pessoas como eu podem gerar ajuda nos dedos. Você aprende qualquer coisa. Agora, a maneira como aprendi foi mergulhando no código-fonte, e você pode fazer isso com seu editor. Mas acabei de baixá-lo direto do Get Hub. Eu apenas clonei o repositório e, por exemplo, eu fui para blocos que pizza e eu apenas clique com o botão direito do mouse, ir para a definição ou ir e encontrar o código diretamente dentro do repositório get hub. E então eu só iria ver o que todo esse ar é composto dele de um bloco. Então, o que é um bloco? E então eu entro aqui e então eu só lia o código. E se eu não soubesse algo como a bunda médica é igual, eu iria em frente rapidamente. Dê isso Ah, pequeno Google. Na maior parte, tudo é muito, muito pequeno e modular e fácil de aprender. Mas como um bloco, cada bloco tem um nome. Cada bloco tem um contador de criação. Bem, isso é interessante. Ele vem com uma classe padrão sem rótulo. O ícone padrão para cada bloco de cada bloco atingido é que um espaço reservado tem um nome de classe. Nem sequer olhamos para o nome da turma. Nós nem olhamos para o grupo também. Então essas são duas coisas que você pode adicionar a cada bloco atingido. Agora, isso pode ser um pouco exagerado aqui, então vamos a um exemplo mais simples. Vamos para a página inicial e eu vou apenas olhar para a página em si. A aula de página, isso está no meu foguete, cara. ven de python vivo 3.7. Como pacotes Wag Tail núcleo modelos dot Pie e a classe de página, Eu posso ver que a classe de página é composta de um índice de pontos de índice de página abstrata e um modelo de ervas cluster . Eu também posso ver que cada página tem um título. Um título de rascunho, um tipo de conteúdo de slug, que é uma chave estrangeira para um conteúdo. Um status ativo tem alterações não publicadas. Um caminho UL, título de CEO de um proprietário mostrando menus padrão mostrando Manu descrição de busca Todas essas coisas e isso continua e continua. E então podemos ver todos os campos de pesquisa padrão para que possamos em nossos próprios campos de pesquisa se quisermos . Isso não é realmente uma coisa que mergulhamos em Ah, neste curso. Mas lá estão eles. Campo de pesquisa, para que você sempre possa adicionar seus próprios campos a esta lista de campos de pesquisa. Contagem máxima. Falamos sobre a contagem máxima. Nós meio que conversamos sobre Max Count por pai. Aqui estão painéis, painéis conteúdo, painéis promoção e painéis de configurações por padrão. Não há nada lá dentro. Então há o nele. Bem, o que isso realmente faz isso é uma maneira muito, muito boa de aprender como dizer funciona agora. Concedido, tem um monte de casaco. Wag Tail tem sido desenvolvido ativamente por vários anos agora, então há muito código para passar, e isso não é para todos. Algumas outras pessoas gostam de experimentar, como eu. Gosto de experimentar. Eu gosto de entrar no código e ver o que está disponível em vez de apenas olhar para o código-fonte o tempo todo. Você como um código-fonte de leitura é útil. Mas, novamente, não estou sujando minhas mãos, e nem sempre consigo ver na minha mente o que as coisas estão fazendo. Então, o que eu gosto de fazer é Python gerenciado eu shell Plus. Agora isso vem com um pacote diferente, então isso não vem com shell normal. Então o Django sempre vem com o Shell para que possamos ver um shell normal aqui, e é, você sabe, muito chato. Mas Shell plus é uma coisa diferente que vem com um pacote diferente. Então, vamos instalar rapidamente. Esta hora vai procurar rapidamente o Django install Shell Plus, e isso vem com extensões do Django, e tudo o que temos que fazer é executar este comando seu Pip, instalar extensões do Django e, em seguida, no meu projeto porque ele é baseado em jangle. Nós vamos querer executar ou adicionar, em vez disso, extensões de sublinhado do Django. Vamos abrir o nosso terminal. Eu só limpei isso. Vamos correr shell, mais uma vez e aqui vamos nós. Estamos na Shell Plus agora. A diferença é que você vê todas as coisas da tela que são automaticamente carregadas aqui para você , então você não precisa se preocupar, , como importar páginas de cauda wag ou sites ou tags ou qualquer coisa. Só está disponível para você. Então, por exemplo, podemos obter cada espera até página, gravando objetos de ponto de página, e isso nos dá um conjunto de consultas. Podemos ver. Isso é um vinco de página de todas as páginas diferentes, incluindo a nossa rota. Mas vamos em frente e vamos pegar nossa página inicial. Então página Home Variable Home é igual a home page dot objetos ponto Primeiro, nós só temos uma página, então nós estamos indo apenas para obter o primeiro 1 e nós temos uma home page em seu então eu faço home page dot e eu apertei Tab dependendo de sua operação ou você está terminalmente pode ter que apertar tab duas vezes. Mas olhe para todas essas opções diferentes, e é assim que eu gostei de aprender o que tudo faz. Então ponto em casa não existe. O que sabemos que vem do Django home dot body. São os nossos campos de riacho. Então, agora podemos ir. Como são os campos de fluxo? Olhe para aquele ponto de corpo, o que mais o corpo dele nos daria? Count Index Rod texto é preguiçoso campo Stream, fluxo filho, bloco fluxo de dados renderizar como bloco. Temos todo o tipo de coisas aqui. Vamos fazer a contagem e não é um método, tudo bem, nós lemos conta. Isso vem com qualquer outra coisa vem com todo tipo de coisa. Então agora podemos realmente começar a entrar nisso. Isso foi um tipo ativo de um mau exemplo porque era um pouco complexo demais, mas podemos ver a página inicial I d é três o ponto inicial ao vivo. É verdade. A página inicial está ao vivo. O que é o slug da página inicial? É só em casa e você pode encontrar outras coisas aqui que são muito, muito úteis também. Então todas as coisas que vimos no código-fonte, está tudo aqui mostrando menus mostrando menus padrão slug. Nós já olhamos essas coisas. Podemos obter a UL completa. Podemos pegar o texto principal. É um campo personalizado. Podemos obter o U R L O Caminho Ural, o I D. Podemos executar qualquer um de seus métodos, como obter contatos. Poderíamos tentar executar alguns desses métodos, embora precisemos simular alguns dados extras lá dentro, especialmente se você estiver tentando executar um teste em uma página. Podemos ver se as páginas estão bloqueadas. Podemos tentar movê-lo. Podemos ver o dono do dono. Podemos ver todo tipo de coisa aqui. Então, se você está realmente interessado no que sai da caixa com Wag Tail, honestamente, basta girar shell, além de instalar extensões Django, instalar shell plus e apenas mexer em torno. Também podemos fazer coisas como obter nossos itens de menu. Então vamos fazer menu é igual a homens. Você ponto objetos ponto todos sabem que só temos um menu. Vamos fazer o 1º 1 Então temos um cardápio. Sabemos que este é o nosso sublinhado. Sublinhado de string sublinhado. Esse é o título que podemos agora fazer o ponto do menu e vemos todo tipo de coisas aqui. Mas o que nós adicionamos foi itens de menu com você menu sublinhado itens ponto tudo e é um conjunto de consultas. Podemos olhar para os nossos depoimentos. Depoimentos vai ser Vamos fazer t é igual a depoimentos. E eu só fiz guia para Auto completo. Temos dois depoimentos aqui. Um Biota, um de Chewbacca. T um é igual ao 1º 1 Esse é o nosso primeiro testemunho. Um ponto, o que temos aqui? Temos uma citação. Quais são as citações regulares apenas para citar texto, fazer ou não? Não há tentativa e a atribuição é de Yoda. Então agora podemos ver o que nossos dados estão realmente nos apresentando, e isso é muito, muito útil quando você está dirigindo coisas como em nossos modelos de serviço, nossas páginas de listagem de serviços, tentando pegar todo o nosso serviço páginas e, em seguida, um sinal de variável e colocar isso em nosso modelo chamado serviços. Então vamos em frente e ver o que isso retorna. Isso nos dá limpeza e brilho. E agora sabemos se vamos testar isso no show dela. Isso é sempre que digitamos serviço pay shot objetos dot live dot public. Com as páginas atuais que temos, só nos dará as duas opções. Então, se você realmente ir e verificar nossa página e você vê que três cartões são apenas um cartão está aparecendo ou um serviço aparecendo, é provável que haja algo mais acontecendo porque sabemos que há dois aqui tão conectados a não aparecendo em um modelo. E então agora estamos começando a entrar em algumas depurações e outras coisas. Por último, temos o repo real para que possamos ver tudo o que está indo para o mestre. Podemos entrar aqui. Vamos olhar para a versão 2.7 e podemos entrar aqui e podemos ver todos os tipos de coisas. Então vamos para Wag Tail. Vamos para o núcleo e vamos olhar para os modelos e aqui podemos ver que esta é, ah, ah, página de tamanho justo. Nós temos ah site. Temos um gerenciador de site e ferrando todo o caminho para baixo até a página abstrata e olha, há nossa página em si, e agora podemos ler todo o código-fonte fora do nosso editor em nosso navegador. E novamente, isso é tudo o que vem com um padrão. Espere até a página. Então agora temos outra maneira de aprender wayto a outra maneira de aprender wayto é honestamente ir para esperar até ponto io barra folga e vamos ver esta página carregar para cima. Junte-se ao espaço de trabalho frouxo para saber por que dizer Venha juntar-se a nós em folga. Há uma comunidade inteira que temos que apoiar o canal Venha fazer suas perguntas lá também . E além de fazer este curso, tudo o que posso dizer é abrir a sua concha mais e começar a mexer com as coisas. Honestamente, o pior cenário é você sabe, você quebra algo em seu banco de dados e você tem que criar algumas páginas novamente, pois esta é uma maneira muito, muito boa de aprender como esperar até funcionar e o que recursos que vem com e o que você pode fazer com wayto 39. Configurações de site global: são opções ou pontos de dados, se preferir, que podem ser definidos no seu site e estão disponíveis globalmente. Então, ao contrário de uma página quando definimos um campo específico em uma página e nós realmente só temos acesso a isso no modelo de página uma espera até que a configuração do site permite que você acesse essa configuração de site de qualquer lugar agora. Um bom exemplo disso é na verdade uma hora rodapé onde temos horas e coisas realmente sabem o que eu sou apenas eu vou gastar até o servidor e eu vou mostrar para que o exemplo está em seu pé, ou nós temos contato conosco horas e mídias sociais configurações. Estes ar atualmente todos descontrolados, até mesmo esta seção aqui, o Mar Global hoje, com algum texto e um link que é tudo atualmente descontrolado. Isso é material codificado. Não há como mudar isso. As configurações do site nos permitem alterar isso porque ele está disponível em todas as páginas. Bem, não queremos fazer trabalho extra para cada página, então podemos registrar um site definindo uma configuração de site personalizada, e ele estará disponível para nós em todos os lugares. Então, vamos em frente e criar um novo aplicativo aqui vamos fazer Python gerenciado. Eu começo, Chamamos de site, sublinhado configurações e executamos nosso servidor assim como fizemos em cada outra vez. Vamos saber que não é o certo que eles parem. Eu vou para a base dot pie e aqui em cima nós vamos adicionar configurações de estado. Vá em frente, diga isso. Inclua isso. E em nosso explorador aqui, podemos ver que temos uma nova pasta chamada Configurações do Site. Não fazemos entrevistas. Bem ali vai lidar com isso para nós. Não precisamos de testes. Os testes são escritos principalmente para esperar até já. Além disso, não estamos fazendo nenhuma loucura. Não precisamos de administração, DuPuy. Mas vamos continuar, não é? APS e modelos agora, essencialmente, o que vamos fazer em nossos modelos de configurações do site acima do arquivo I é que vamos criar algum tipo de classe como configurações de mídia social. Vai herdar algo de Wag Tail chamado de configuração de base. E então vamos dar campo a ele para que pudéssemos dar Facebook. Poderíamos dar Twitter, YouTube e Instagram. Acho que é tudo o que temos, certo? Facebook, Twitter, instagram e YouTube. Sim. E cada um destes vai ser um Você é todos campo, então modelos que você é l Campo e em branco é igual a. Vamos colocar isso em várias linhas. Blank é igual a true e o texto de ajuda vai ser Digite seu espaço em branco, em branco você é L. Agora temos que fazer um pouco de trabalho extra aqui porque este vai dizer Facebook. Digite seu Facebook, você Earl, e este vai ser entrar no seu Twitter você está neste vai ser o YouTube e se você não adivinhou, isso é o que vai ser instagram. Mas novamente, porque estamos fazendo isso à espera até que queiramos expor isso. Precisamos de alguns painéis agora aqui. Vamos dizer em um painel de combustível para o Facebook, e vamos copiar isso algumas vezes. O que mais temos aí? Temos Twitter. Temos YouTube e instagram. Agora, neste ponto, precisamos ter certeza de que os modelos são importados. O painel de campo é importado e a configuração base é importada. Além disso, nós também temos que fazer mais uma coisa para realmente registrar isso como uma configuração porque agora é apenas uma classe. E se esperar até era para se registrar, cada classe é um cenário. Teríamos centenas, talvez milhares, de configurações diferentes dentro de esperar até. Então vamos em frente e fazer a partir de modelos de importação django dot db. São os nossos modelos padrão. Nós temos uma configuração base, e aqui está o que é devido de wag tail dot con Trib dot settings dot dot dot templates importação configuração base . Nós também vamos querer importar o decorador de configuração de registro, e podemos aplicar isso imediatamente. Uma coisa para ficar de olho em anos. Sempre que você importar Con Trib, você vai querer ter certeza de que isso está ativado novamente. Isso foi o errado baseado no arquivo de pizza. Então o que estamos procurando aqui é configurações de Wag Tail Contra, e nós realmente não vemos isso aqui. Então vamos em frente e adicionar nossas configurações. Vamos apenas jogá-lo aqui maneira de ponto con trib configurações. Tudo bem, então você pode salvar isso e fechá-lo, e agora nós temos acesso para esperar até as configurações do contrato e o arquivo de modelos que vem dentro dele. Por fim, precisamos importar nossos painéis de campo porque sem esses painéis alimentados, enquanto este arquivo vai apenas reclamar, ou melhor, nossos terminais vão reclamar sobre este arquivo, embora Não é, e isso é bastante suspeito. Oh, lá vamos nós. Acabei de ter um sucesso. Salvar uma arma de Wag ponto cauda em homens ponto em que manipuladores terminal de painel de campo de importação e está feliz. Vamos entrar no nosso caminho dizer aos homens, e eu vou deixar esta página. E se entrarmos em nossas configurações aqui, podemos realmente ver que temos configurações de mídia social Agora. Isso vai nos dar um erro esperado porque estamos tentando armazenar dados dentro de nosso banco de dados, mas ainda não executamos migrações, então vamos voltar para o nosso servidor aqui e vamos executar Python gerenciado alto, fazer migrações, e isso vai fazer nossas configurações de migração python, não configurações. Instruções que a palavra que estou procurando Python conseguiu. Eu migro, vou executar essas instruções e alterar nosso banco de dados um pouco. E, em seguida, re servidor corredor. Vamos atualizar nossa página aqui e vamos ver o que isso nos dá. Então, agora, se entrarmos em suas configurações, configurações de mídia social, isso nos leva a esta página onde temos um Facebook, Twitter, YouTube e Instagram. Você é L. Então acabei de preencher aqueles anos de Els e vou clicar. Economize legal agora em nosso Rodapé. Nós vamos ter que realmente usar essas meninas, e nós vamos ter que fazer um pouco de verificação para ver se elas estão realmente definidas. Então vamos abrir rodapé dot html E vamos fechar essa barra lateral e vamos procurar coisas de mídia social aqui. Então, temos um link para o Facebook agora para acessar a configuração do site é super fácil. Nós apenas digitar configurações ponto visão sublinhado configurações. Esse é o nome do nosso aplicativo. Então, se você nomeou seu aplicativo de algo diferente, ele vai ser o que você nomeou seu aplicativo e, em seguida, ele vai ser configurações de mídia social notado que o invólucro mudou aqui. Este é o nome da classe, e então fazemos Facebook porque esse é o nome do campo. Então vamos salvar isso e nos dar uma atualização rápida e passar o mouse sobre o Facebook, e vemos que ele não fez nada. Agora a razão pela qual não vemos nada lá é porque, novamente, isso é o errado com base na ordem de pizza, meu editor está fazendo isso comigo é mesmo que nós habilitado esperar até configurações de contrato. Bem, isso é bom, mas acabamos de habilitar. Para que possamos realmente obter as configurações em cada página, precisamos adicionar algo aos nossos processos de contexto. Então precisávamos estar disponíveis em todas as páginas. Então temos um processo de contexto ou em algum lugar aqui. Então modelos, opções, contexto, contexto, processadores e o que queremos habilitar aqui é Aguarde até ponto com configurações de ponto Trib e em seguida, os processadores de contexto não configuram. E espero não ter nenhum erro de digitação lá. Isso parece bem. Vamos atualizar esta página. E agora isso vai se transformar em um link para nós e olhar para que no canto inferior esquerdo lá diz Facebook dot com, e se eu clicar, ele vai para Facebook dot com. Então agora podemos fazer isso com todos os outros links também. Então este pode ser o Twitter. Então, novamente, configurações e, em seguida, o nome do seu aplicativo. Então este é chamado de configurações do site. O nome das configurações de mídia social da classe. Era assim que o chamávamos. Este é o campo do Twitter, e este é o campo do Instagram, e este é o campo do YouTube. E vamos atualizar, certifique-se de que todos eles estão funcionando como esperado. Então isso é Facebook, Twitter, insta e YouTube perfeito. Mas agora o que acontece se um deles não for preenchido? Precisamos escrever uma condição “se”. E se a condição aqui e isso pode ficar bem feia agora, há maneiras de contornar isso, mas eu vou manter isso simples e simplesmente verificar apenas para este campo em particular. Então eu vou dizer se e isso parece muito longo então se isso existe em dívida que e dizer e se e eu vou fazer isso com todos os outros também. Tudo bem, então eu só adicionei essas configurações lá. E apenas como um teste, vamos em frente e vamos nos livrar do Instagram. Então temos três campos de mídia social, mas o Instagram está vazio, então é refresca e em vez disso deve ir embora e assim, em vez disso, vai embora Perfeito. Agora vamos em frente e adicionar horas e nosso contato conosco Agora. Isso é super fácil também. É praticamente a mesma coisa. Então o que vamos fazer é criar outra classe. É chamado de configurações de contato, e novamente isso vai ser uma configuração base. E antes de fazermos qualquer coisa, vamos registrar isso. Então vamos registrar essa configuração de registro. Lá vamos nós e vamos adicionar um campo em seu contato é igual a um campo de rich text, e queremos que os recursos sejam link em Lee para que as pessoas possam vincular, mas sem taças. Nenhum título é nada parecido com isso. E vamos em frente e também dizer que isso pode estar em branco. Em branco é igual a verdadeiro. Agora vamos nos certificar de que ninguém pode ser fiel, eu acho. E como todas as outras vezes, precisamos ter certeza de que temos painéis e anos de idade. Painéis são iguais ao contato do painel de campo, e agora precisamos importar um campo de rich text do ponto do núcleo do ponto viúvo Campos importar campo de rich text , e vamos ter que executar migrações novamente. Então python gerenciado por fazer migrações respiram no gerenciado up high migrate Django Admin começa novo, corre como atualizar nossas configurações aqui, e veremos uma vez que a página atualize e eu abri. Este menu tem configurações de contato ah. E agora podemos adicionar algumas configurações de contato aqui para que possamos dizer algo ao longo das linhas de Fale comigo. O e-mail, eu acho. E vai ser o Caleb a aprender. Espere, diga à Dot com. Vamos em frente e transformar isso em um link de e-mail e salvar agora novamente. Isso não vai aparecer em seu rodapé novamente contra Django em Wayto e Python e nenhuma outra linguagem de programação realmente inteligente o suficiente para saber exatamente o que está acontecendo em seu cérebro para que ele não faça nenhuma suposição. Mas o que isso nos permite fazer é ter controle total. Então, onde ele diz, entre em contato conosco, podemos agora dizer site. Não, isso é errado. Configurações em que as configurações do site apontam o nome do campo. E porque isso é rich text, colocamos texto rico em pipe, e isso vem de tags de núcleo de cauda Wag. Vamos em frente e atualizar sua página e vamos ver como isso se parece. Nada mal. Não é terrível. Provavelmente se livrar da tag de parágrafo lá, mas isso está em duas linhas em vez de dois parágrafos. Sim, isso parece bem. E isso é um link, e por último, eu estou realmente apenas indo para copiar e colar todo o seu por horas, bem como, em vez de configurações de contato, vai ser nosso. Configurações e em vez de contato vai ser horas e em vez de link, ele não tem recursos, mas é permitido ter um novo parágrafo, então é por isso que estamos colocá-lo lá. Também gosta de ter novas linhas. Então acho que parágrafos e seus empréstimos. É por isso que estamos colocando lá. Vamos dizer que vamos fazer tudo isso em uma linha. Vamos fazer python gerenciado. Eu faço migrações e fim python gerenciado uma torta, migrar e terminar python gerenciado por execução. Então febre no host local Port 8000 três comandos uma linha para governar todos eles. Certo, vamos nos refrescar. E agora temos nossas configurações. Sabe, nós colocamos algumas horas aqui para que pudéssemos dizer algo como segunda a sexta. Cavalgar era uma maneira engraçada de soletrar sexta-feira Ah, 9 da manhã, 25 da tarde E assim como antes, vamos adicionar isso lá, então as configurações do site ponto configurações do contato ponto. Não, isso não está certo. É chamado de nossas configurações, e o campo é chamado horas ponto horas. Isso também é rich text. Certo, isso está se juntando. Agora temos mais uma seção aqui, e eu não vou cobrir isso porque é muito, muito parecido com o que fizemos. E nós já cobrimos muitos desses assuntos praticamente até a morte neste momento. Mas podemos adicionar outra configuração de site para este texto aqui. Outros sites adicionando, para este imposto aqui, uma configuração de visão para ele página para link para você. Então você usa um painel seletor de página e, em seguida, você acabou de alterar que a página dois estar em seu modelo. Seria como configurações ponto configurações do site dot c t uma página de link de ponto de configurações ou o que você quer chamar esse campo dot u R l Se você está interessado em como isso parece, você sempre pode verificar o código-fonte. Mas eu não vou mantê-lo mais neste vídeo porque é praticamente tudo que nós já cobrimos. 40. Como alterar o logotipo de administrador do Wagtail: é. Às vezes queremos que o administrador do nosso site se sinta um pouco mais marcado e, por padrão, maneira Tell vem com sua própria marca, o que é totalmente legal. Mas uma das maiores coisas enfraquecem Dio para trocar com essa marca é apenas trocar esse logotipo e maneira nos permite fazer isso realmente facilmente. Então realmente, nós só precisamos criar um novo arquivo de modelo chamado Baseado em HTML. Mas ele vai viver em uma pasta específica, e então nós vamos substituir um bloco chamado Bloco de Branding. E geralmente eu coloco como um SPG ou algo assim lá, e ele sobrescreve. Então vamos em frente e dar essa demonstração rápida. Então eu vou fechar isso e na minha pasta de modelos. Então, modelos de Rocketman. Eu vou criar um novo arquivo aqui, e a primeira pasta realmente vai ser chamada Wag dizendo homens, e o arquivo vai ser chamado base dot html. Agora isso precisa se estender a partir de um arquivo específico. Então, em vez de estender a partir do nosso baseado em HTML, ele vai estender a partir da maneira Tell and Men barra com base em HTML e, em seguida, temos um bloqueio aqui chamado bloco de branding. Sem logótipo de marca. Acho que se chama. Sim, vamos descobrir se estou errado, mas não há nada aqui. Então, basicamente, estamos nos livrando do pássaro. E com certeza, não há mais pássaro agora. Também podemos carregar em estático, e podemos verificar quais arquivos temos em nossos arquivos estáticos. Então é ir imagens estáticas e temos logotipo ponto PNG. E eu não acho que eu realmente tenho um logotipo dot s v g aqui, embora você apenas colar no próprio SPG. Então vamos a uma imagem, e isso vai ser imagens estáticas logotipo ponto PNG no altar vai ser apenas logotipo Rocket Man. E onde eu tenho essa imagem de um imagens estáticas e, em seguida, logotipo ponto PNG imagens estáticas logotipo ponto PNG. Refresque-nos e vamos ver se isto parece terrível. Sim, isso parece muito ruim. Você provavelmente vai querer usar uma imagem diferente. Eu acho que isso ficaria muito melhor se eu tivesse um logotipo branco que, você sabe, parecia meio decente. Mas eu só estou usando o logotipo da página ou o front-end do site, então eu estou usando este aqui. Mas se você tem um logotipo ou seu cliente tem um logotipo que você quer colocar lá, é tão fácil quanto isso. Agora, o que eu vou fazer é comentar isso. Vou manter o código aqui. Mas vou comentar isto. Então, se você precisar de uma referência isso no código-fonte, você tem acesso a isso imediatamente. 41. Adição de caching: Muito bem, vamos falar sobre um assunto muito grande a descontar agora. Descontar é uma das formas mais rápidas de acelerar o seu site sem a necessidade de Teoh. Adicione hardware adicional ao seu servidor sem que o Teoh realmente faça nada para aumentar o desempenho. Agora, há toneladas de diferentes tipos de desembolso. Mas para manter isso simples e porque eu realmente não sei quais serviços você vai usar , talvez seja dinheiro meme, certo? É dinheiro elástico, etcetera, etc. Eu realmente não sei. Vamos apenas ficar com um simples fragmento de modelo a descontar agora. O pagamento de modelo permite que você desconte uma parte do seu modelo uma vez que ele foi processado pela primeira vez. Então, por exemplo, nosso cabeçalho aqui em cima nós poderíamos descontar isso, e seria exatamente o mesmo em cada página. Poderíamos descontar nosso banner, mas o mais importante, olharíamos para descontar seções como esta. Pode haver uma série de consultas aqui que enfraquecem a sua página ao descontar isto, e assim poderíamos descontar esta secção inteira ou toda esta secção com cartões, ou podemos descontar juntos. Poderíamos descontar esta página inteira, se quiséssemos. Poderíamos fazer todo tipo de coisas com o descontar fragmento de modelo. Então, dando uma olhada na página inicial dela, vamos ver quantas consultas isso tem. Isso tem 36 consulta SQL, então na verdade não é ruim em tudo. Mas o problema é que as consultas SQL são muito lentas quando comparadas com tudo o resto. É tipo, você sabe, quando você tem que dirigir para o trabalho e então talvez você começa a trabalhar e você percebe, oh, não, eu esqueci meu laptop em casa. Então agora você tem que dirigir todo o caminho para casa, pegar seu laptop, dirigir todo o caminho de volta ao trabalho, e então você percebe, oh, esqueci meu carregador de laptop. Então você dirige todo o caminho para casa, pega seu carregador de laptop, volta todo o caminho para o trabalho. É muito, muito lento no sentido de que faz várias viagens como essa, do seu site para este para o banco de dados e, em seguida, de volta para o site e para frente e para trás e para frente. Então, se pudermos descontar áreas pesadas de consulta, podemos realmente acelerar nosso site dramaticamente. E a idéia é se nós realmente podemos simplesmente remover consultas de cada pedido de página e descontar com algo como na memória que seria o melhor, mas é praticamente impossível, mas podemos realmente reduzir drasticamente isso número. Agora, mais uma vez, 36 consultas é muito bom. Se você está acima de 200 você está começando a parecer um pouco duvidosa. Se você tiver mais de 200, eu definitivamente diria Optimize Now para isso, vamos usar o modelo de descontar, que significa que uma seção do seu modelo vai ser processada. Então, como esta seção vai ser processada. E então uma vez que ele é processado, que a primeira vez vai salvá-lo em um ponto D J arquivo cache. Então vamos ah, vamos pular para isso. Vamos fechar isso e vamos abrir, Dev Dot Pie. Nós vamos fazer nossa configuração de descontar aqui, então é realmente apenas em nosso desenvolvimento local construído, e então uma vez que nós terminamos com isso, nós vamos movê-lo para o nosso arquivo de pizza de ponto de produção. Mas a Deb tipo I é só para garantir que as coisas funcionem da maneira que esperamos que funcionem . Então a primeira coisa que eu vou fazer aparecer é a partir de importação base. Tudo isso já deveria estar lá. Mas eu também vou fazer não a partir de apenas os importações e colocar isso no topo. Agora tenho uma chave secreta. Loud Coast permitiu e-mail host de volta , APS instalado, middleware interno I P s. Mas uma coisa que eu não tenho aqui são formas de descontar. E eu estou me perguntando, isso vem em produção dot pie novo. Isso entra? Baseado em torta? Vem na base adequada? Feito pi definindo dinheiro? Não, não por padrão. Então, vamos adicionar o nosso primeiro caixa. Então este vai ser chamado padrão. Vamos dar-lhe um back-end do Django Dot Core Dot Dot Cash Não backends. Isso vai ficar muito longo,a propósito, a propósito, ponto baseado em arquivo de ponto baseado em dinheiro e, em seguida, vamos dar a este um local para que o local vai estar em algum lugar. Ainda não sabemos onde é este local, mas geralmente ele vai estar em algum tipo de pasta de cache de pontos. Então, por enquanto, digamos dot cash E o que eu realmente quero fazer é colocá-lo no diretório de trabalho atual . Então, sempre conseguiu os olhos correndo. Eu meio que queria criar uma pasta de cache de pontos exatamente onde está Now. Eu não sei onde isso vai estar em qualquer servidor, então nós precisamos fazer uma coisinha aqui onde nós apenas adicionamos uma bola chamada C W D. E isso ainda não existe. Mas C W A. D vai ser igual ao ponto OS e obter diretório de trabalho atual, e então nós vamos apenas acrescentar ponto dinheiro a ele. E o que eu vou fazer aqui é apenas ter certeza que eu não tenho um tipo de back e Django core cash back INS file base fazer arquivo based cash. Lá vamos nós. Isso é muito propenso a mim, fazendo um erro de digitação que é todos os servidores salvos em execução. E quando eu cheguei na minha página inicial, ele não sabe o que descontar ainda, então não vai fazer nada. Mas se eu abrir meu editor ou se você estiver em seu terminal, você pode fazer LS ou Aider, e você pode ver aqui eu tenho um grande arquivo chamado 911502 blá blá, blá, blá, blá, blá, blá, blá, Blá nove F um ponto d j Cash e é um arquivo que não pode nem ser lido. Mas é um arquivo de cache. Então agora vamos em frente e adicionar um pouco de dinheiro. Vamos fazer isso abrindo nossa página inicial, página inicial dot html e onde estavam carregando nossas tags. Vamos adicionar dinheiro aqui. Quero dizer, feche a barra lateral. E agora com esta etiqueta de dinheiro vai parecer que usamos a palavra dinheiro quanto tempo queremos que isto seja descontado em segundos e depois um nome. Então, você sabe, dinheiro da página, algo assim e campos exclusivos opcionais para torná-lo um pouco mais exclusivo para que pudéssemos chamar cada página de dinheiro para cada seção poderia ser chamado de dinheiro da página. Mas este poderia ter uma idéia única de 123 e então nós temos um bloco de caixa aberto e um bloco de caixa final exatamente como esse, e é assim que funciona. Então vamos em frente e vamos descontar nossos campos de fluxo na página inicial e vamos fazer um pequeno experimento aqui, então vamos descontar isso para Ah, o que são 30 dias? Algo como se eu me lembrasse de 259200 zero que muitos segundos, em algum lugar lá, nós vamos chamar esses campos de fluxo de página inicial, e nós vamos dar-lhe uma página, eu d apenas para torná-lo um pouco mais original e fazer e dinheiro. Ok, eu guardei isso. E agora, como pequena experiência, não vou recarregar esta página. Vou esperar até editar minha página inicial. Vou mudar um texto na primeira seção aqui. Então, seu foguete estava recentemente no espaço? Obtê-lo limpo e este vai ser o título armazenado em cache. E então veja isso. Isto vai salvar. Atualize a página. Isso agora vai criar um novo arquivo de dinheiro para mim. Ele vai dizer o dinheiro para o título, e eu vou me livrar de todos os nossos campos de fluxo para que nada apareça mais. E quando atualizo esta página, tudo ainda aparece porque tem sido dinheiro como um fragmento de modelo. Django agora diz, “ Oh, procure por dinheiro. Certifique-se de que tem menos do que tantos segundos atrás. Seu nome é fluxos de home page, e ele tem uma idéia única de qualquer que seja a página idéias. Não importa que não haja mais nada aqui, diz. Basicamente, eu estou procurando por um arquivo chamado isso e faz um pouco estranho de hash fora dele. Então vamos dar uma olhada nesse haxixe. É este de cima aqui. Então ele faz um hash sobre o nome do arquivo e diz, Sim, esse arquivo certamente existe, então eu não vou renderizar nada que esteja entre o dinheiro e a etiqueta final. Eu só vou renderizar o que já estava neste arquivo, e assim ele o armazena em outro arquivo, e agora não há consultas extras. Então vamos abrir isso e vemos que temos 26 consultas aqui. Eu realmente acho que era 36 originalmente era 36 consultas, e agora há apenas 26 consultas. Poderíamos reduzir o número de consultas descontando nosso cabeçalho e nosso rodapé também. O pé é provavelmente muito rápido, pesado também. Agora eu vou desfazer isso e vamos ter um problema agora porque esta página está descontada. Eu vou mudar o título aqui para ser e campo de fluxo não descontado, e eu vou pré-visualizar isso. Ainda me mostra o antigo. O título em dinheiro. Este deve dizer um título não descontado agora. Foi isso que escrevi? Um campo de fluxo não descontado? Mas ainda diz que a vista das coisas antigas tão bonita está quebrada por causa do descontar. Mas o que podemos fazer em nosso modelo é que podemos detectar se esta é uma pré-visualização ou não. Então podemos dizer, se não o pedido é pré-visualização e isso vai estar vivo. Caso contrário, isso é uma prévia, e isso vai ser uma prévia, e nós podemos até conferir isso também. Então vamos fazer isso. H um. Isto é ao vivo e vamos fazer outro H que diz “preview”. E vamos atualizar nossa página aqui. Agora, isto está fora da área de descontar. Então isso vai funcionar. Isto é ao vivo. E este quando eu atualizei a pré-visualização diz pré-visualização. Então, agora o que podemos fazer é pegar esta seção de dinheiro e só aplicá-la quando as páginas realmente viverem. E na pré-visualização, não queremos aplicar nenhum dinheiro. Então nós vamos pegar este bloco quatro ou este loop quatro, e nós vamos aplicá-lo aqui. Então, basicamente, se esta é uma página ao vivo, renderize esta seção primeiro. E uma vez feito a renderização, jogue-o em um arquivo de cache e nunca mais se preocupe com ele até que este tempo se esgote. Caso contrário, se for uma pré-visualização, você poderá ver suas visualizações aqui. Não há nenhum desembolso. E se eu clicar na pré-visualização novamente, este não diz um campo de fluxo não descontado. E se eu voltar para a página da vida e atualizar, isso ainda diz as coisas antigas. Portanto, a pré-visualização está funcionando agora. Agora temos mais uma questão, e isso é basicamente o que é descontar em poucas palavras. Velocidades do seu site, mas você teve alguns problemas aqui é que eu vou mudar isso para um novo título, e uh uh uh nas pré-visualizações, eu vou fechar que quando eu atualizar a página ao vivo aqui novamente, Nada mudou. Isso é porque espere até e Django nenhum deles sabe que este conteúdo aqui está realmente alterado. Tudo o que diz é: “Oh, “Oh, quando eu estiver renderizando o modelo, vou procurar por este arquivo, seja qual for o nome do arquivo. Se existir, jogue-o aqui. Não está verificando se isso mudou. Isso iria derrotar o propósito de descontar. Então vamos em frente e remover o dinheiro toda vez que a página é salva. Então eu estou em casa modelos dot pie e na parte inferior aqui eu vou criar um novo método chamado Salvar. Agora isso vem com a página já, e nós simplesmente vamos substituí-la. Artes e ovos de cairo. E uma vez que tudo estiver feito, vamos executar o que quer que seja. Espere até querer que fujamos. Então salve e vamos passar os nossos cães e as nossas cordas. Agora, aqui é onde precisamos de alguma forma nos livrar do nosso dinheiro, o dinheiro da página que já existe. Precisamos nos livrar dele. Não, Django vem com um recurso muito agradável que nos permite fazer a chave de fragmento template e , em seguida, excluí-lo. Então vamos fazer esta chave com uma função chamada make template fragment key. Agora, isso ainda não foi importado, mas vamos importá-lo em apenas um momento. E o primeiro parâmetro será este título aqui. Streams da página inicial. Então nós damos isso como uma string, e o segundo parâmetro vai ser o que quer que esta página idéias agora, neste momento, nós realmente não sabemos o que essa página idéias, mas isso realmente não importa porque nós sabemos que eu d é um campo na página inicial, então podemos simplesmente fazer auto dot i d. Porque esta é a programação orientada a objetos. Temos dúvidas que eu d e eu d vem da própria Page na verdade vem de um modelo da selva. Então agora temos uma chave lá dentro, e tudo o que temos que fazer é executar dinheiro, excluir a chave, e então ele salvará a página. E, em seguida, uma vez que as páginas carregadas mais uma vez, ele vai re descontar para nós. Agora precisamos ter certeza de que temos fazer chave de fragmento modelo importado e também dinheiro. Então vamos para o topo da nossa página aqui e vamos fazer a partir do django dot core dot cash import cash cash cash. E vamos também fazer do django dot core dot cash dot você tills import, make template fragment e vamos ver nenhuma reclamação até agora no terminal. E vamos apenas verificar se ainda temos esse problema acontecendo. Então nós temos uma seção aqui chamada um novo título, e quando eu atualizo esta página, ele ainda mostra o dinheiro. Vamos publicar. Diz que não está em terrível. Então eu tenho um problema em algum lugar. Auto-dúvida, eu D. E a razão disso aconteceu é porque você pode realmente passar vários parâmetros para o seu dinheiro. E isto é suposto ser uma lista, e é por isso que fazemos testes. Então, vamos atualizar a página. Conteúdo de fogo justo. Existe um novo título, clique em publicar? Espere que ele salve. E agora, quando atualizarmos esta página, isso mudará um novo título. Esta página tem 36 consultas porque está executando todas as consultas em todos os nossos diferentes campos de fluxo. Mas se atualizarmos, agora há apenas 26 consultas agora podemos basicamente fazer exatamente a mesma coisa para o nosso cabeçalho e um rodapé e todo tipo de coisas, mas acho que vamos guardar isso para a próxima lição porque não é exatamente a mesma coisa muito, muito semelhante. Mas não é bem a mesma coisa. Temos que adicionar o método de salvar ao nosso menu e Teoh grupo de configurações do nosso site, então vamos fazer isso na próxima lição. 42. Caching da navegação e Footer: Está bem, Dokey. Em nosso último vídeo, adicionamos descontar modelo ao nosso campo de fluxo de página inicial em cada vez que salvamos a página, ele excluiu o dinheiro antigo. E quando recarregamos a página, ela recriaria o dinheiro. Também nos certificamos de que, sempre que clicarmos em pré-visualização, não obteremos a versão em cache da página. E isso reduziu nossas consultas em dezenas. Costumávamos ter 36 consultas. Agora temos 26 consultas, mas vamos em frente e descontar nosso cabeçalho e nosso rodapé e tentar reduzir ainda mais essas crueldades . Além disso, se dermos uma olhada no tempo da CPU, eu acredito que isso realmente foi originalmente em algum lugar em torno de 850 milissegundos. Concedido, este não é um computador dedicado, e eu também estou gravando “O que não”, então vai demorar um pouco mais, mas eu acho que nós poderíamos fazer esse número cair um pouco também. Então, as primeiras coisas primeiro. Vamos em frente e abrir cabeçalho dot html e queremos adicionar a tag modelo de descontar aqui . E o que queremos descontar no nosso cabeçalho? Há alguma coisa dinâmica no seu? Não, não realmente. Nem estamos usando aulas ativas em nossos links. Então, isso é realmente OK. Poderíamos descontar todo o cabeçalho. Então, no arquivo de cabeçalho dela, poderíamos adicionar dinheiro aqui se quiséssemos. Mas, na verdade, não gosto de fazer isso. E eu só quero descontar apenas este pequeno fragmento aqui. Apenas o nosso loop para. Essa é a parte cara. Então nós vamos adicionar algum dinheiro para 2592000 Eu acho que é aproximadamente um mês em segundos. Vamos fazer 30 dias vezes 24 horas vezes 60 vezes 60. No entanto, há. 2592 Triplo Zero Morte acertou. Agora eu só vou chamar este cabeçalho de um site na página inicial. Nós nos demos um parâmetro opcional adicional, este que não vamos porque ele só vai ser chamado de cabeçalho do site e Vamos e dinheiro e vamos abrir menus modelos dot pie. E sempre que guardamos nosso cardápio, é onde você está esse cara aqui? Sempre que entrarmos em um menu e salvarmos esse objeto específico dessa classe, vamos acabar com esse dinheiro. Vamos excluir o arquivo de cache do fragmento de modelo, e vamos permitir que ele crie um novo onde a próxima pessoa acesse nosso site. Então, no fundo, vou simplesmente dizer que a morte se salvou. Vamos passar alguns ovos de quarto e assumindo que tudo está bom no final disso, vamos correr super salvar e passar esses cartões também. Esses argumentos de palavra-chave. E isso só vai executar o método save na classe modelo Cluster Herbal. E agora precisamos criar uma chave. Então é criar uma chave, e esta chave é chamada ou em execução. Em vez disso, esta chave está executando chave de fragmento de modelo make, e este só tem o parâmetro de modo que realmente precisa colocar aquele lá é chamado Site Header. E então vamos fazer pontos de dinheiro apagar a chave. E em nossa página inicial, importamos dinheiro e fazemos chave de fragmento de modelo. Então eu estou literalmente indo para a página inicial neste momento porque eu já escrevi . Eu vou copiá-lo e em meus menus modelos para cima. Eu ia colá-lo lá dentro. Isso parece bom, e agora podemos dizer se isso está realmente funcionando porque haverá consultas extras que serão retiradas. Então, a primeira vez que você acessar esta página, ele não vai salvar nenhuma consulta. Como você pode ver, ainda é 26 cáries ou que 28 consultas. Deve haver algum modelo a descontar aqui. Agora, quando atualizo a página novamente, estou com 23 consultas. Então isso nos salvou cinco. Então, não um desempenho realmente grande aumentou a sua eu suspeito que um monte de que está realmente vindo do rodapé onde vamos ver os maiores ganhos. Então vamos ah, vamos fazer isso também. Então agora podemos ir para o nosso rodapé dot html porque estamos adicionando dinheiro. Precisamos adicionar a etiqueta do modelo de dinheiro. E sabemos que guardamos cinco consultas imediatamente de apenas descontar este loop de quatro que estava no cabeçalho. Este é basicamente o mesmo loop de quatro com este está no rodapé. Agora podemos adicionar dinheiro. Aqui está um 2592000 em dinheiro Você poderia definir esse número para ser significativamente menor, significativamente maior. Se você quiser. Vamos chamar esse rodapé de um site e dinheiro e vamos em frente e abrir nossos modelos de menus. Agora, cada vez que guardamos este menu, precisávamos dividir o dinheiro aqui. Quebre a cabeça, dinheiro. Mas porque isso também está usando exatamente o mesmo menu no rodapé. Queríamos pegar esse dinheiro também. Então vamos em frente e enfraquecer. Copie isso em vez do cabeçalho de visão. Vamos chamá-lo de rodapé do site e isso é correspondência do rodapé direito, fósforos , fósforos, corresponde a este nome bem aqui. Vamos em frente. Atualize nossa página. Veremos que as consultas não mudam quando temos mais dois lá, mas não muito preocupados com duas consultas. Vamos refrescar-nos. Boom. Ele cai para 20 e é consistentemente 20 agora, o que é muito bom. Isso é CPU. O tempo também está caindo. Uma gota de 200 milissegundos. Agora vamos em frente e dinheiro são entrar em contato conosco fora horas e nossas configurações de mídia social para que possamos fechar o modelo de menus Stop I arquivo, e nós estamos indo apenas para trabalhar dentro do rodapé e a configuração do site para que ele é fazer configurações do site . Modelos no alto é o que precisamos abrir aqui e antes que tudo já tenha isso na minha área de transferência, então eu vou colar minhas importações lá dentro. Então eu tenho dinheiro e eu tenho fazer fragmentos chave modelo. Então, toda vez que salvamos uma dessas configurações, vamos em frente e quebrar o dinheiro. Agora ainda não dissemos o dinheiro no modelo, mas podemos configurá-lo aqui e depois configurá-lo no modelo. Diz ao Surdo Save. Isso vai tomar auto quaisquer argumentos e quaisquer argumentos de palavra-chave que passamos lá e assim como antes, Se tudo é bom, executar super ponto salvar. Vamos passar pelos guardas. Vamos passar as cartas e está bom para ir agora. Precisamos definir a chave aqui para que a chave seja feita simplesmente fragmentar a chave. que classe estamos em suas configurações de contato? Vamos chamá-lo de Twitter. Configurações de contato, Uma nova chave de exclusão de ponto de caixa. Agora que temos isso, podemos copiar essa seção inteira porque vai ser a mesma. Se ele funcionar em uma configuração base, ele funcionará em todas as configurações de base. E esta é a nossa definição de horas, por isso, horas de rodapé, definições, avistamentos nas redes sociais. Vamos descer até o fundo aqui. Temos as nossas redes sociais, certo? Apenas avistamentos nas redes sociais. Sim, rodapé. As chamadas configurações sociais. E então temos o pé dela ou as configurações. E vamos fazer a mesma coisa aqui em baixo. Configurações de rodapé si ta. Agora, só porque essas chaves de modelo não existem, não significa que ele vai quebrar seu site . Então, atualmente, essas seções não estão descontadas no site dela. Mas se formos para o pé ou c t A Configurações e eu clicar em salvar, não havia chave de fragmento de modelo para excluir. Então não aconteceu nada. Vamos abrir rodapé dot html novamente. E, ah, vamos fazer todas essas seções diferentes. Eu vou fazer isso um pouco menor porque este é um arquivo bastante grande e eu vou fazer . Vou descontar esta seção inteira aqui, e esta vai se relacionar com nossas configurações de pé ou C A ou templo interior, Cash Foot ou C T.A Configurações. Então, vamos ter algum dinheiro aqui. Em dinheiro. Vou descontar isto por um mês também. Chame de Pé Inundado ou CT A configurações e aqui em baixo e dinheiro. Nossos links já estão em dinheiro. Isso é legal. Podemos dinheiro são configurações de contato ou entre em contato conosco. Qual deles era aquele? Mas configurações de contato no Twitter. Mas configurações de Então isso vai nos poupar uma consulta também, embora para ser honesto, não valha a pena, então eu não vou fazer isso agora. A razão pela qual eu digo isso é porque, por exemplo, toda essa seção de links do canto inferior esquerdo que é descontado e como o modelo de descontar funciona é que ele leva seu fragmento, e ainda é armazená-lo como uma única consulta SQL. Tem que acertar o banco de dados, ver o que está procurando, que arquivou , deveria procurar , voltar, verificar se esse arquivo existe. Se ele existir, use-o. Então, porque só vai haver uma consulta SQL aqui em uma consulta SQL aqui . Honestamente, isso não vale a pena. Vou deixar a chave do fragmento do modelo e um dinheiro apagando dentro dos modelos, mas esse não vale a pena. Ah, maior que valeria a pena aqui estaria em todas as configurações sociais, porque para cada configuração aqui, ele tem que procurar Facebook, Twitter, instagram e YouTube. Então vamos em frente e apenas descontar tudo isso. É para descontar 2592000 e nós vamos chamar isso de configurações de rodapé social, e eu gosto de ter certeza de que meu código é sempre um pouco bem recuado e dinheiro. Vamos em frente, atualize nossa página. E claro, nós ganhamos mais duas consultas por apenas um momento enquanto ele criou o dinheiro e agora nós caímos para 17 e isso originalmente era 850 milissegundos. No início desta lição, era 650 milissegundos, e agora está para 400 milissegundos. Então isso é realmente, muito bom. E eu estou disposto a apostar que, como estamos logados, temos algumas consultas extras para autenticar nosso objeto de usuário para ter certeza de que somos realmente um homem final e coisas assim. Mas se abrirmos o modo de navegação anônima aqui, sim, sim, certeza, você pode ver 10 consultas levaram a milissegundos e todo o site levou 200 milissegundos 125 milissegundos. Então esses são alguns ganhos muito bons de 850 milissegundos a 25 de 36 consultas a 10 consultas e, por último, como uma pequena recapitulação. Realmente, tudo o que fizemos foi dizer: “ Ei, Ei, há um método de salvamento na nossa base. Criamos uma chave de fragmento de modelo. E assim dissemos, Esta é a única configuração que temos que combinar em nosso modelo. Então nós temos pé ou ambiente social, e se voltarmos para o rodapé aqui dinheiro por cerca de um mês e é aí que encontramos este texto aqui, pé ou configurações sociais, então pegamos essa chave e simplesmente excluímos. E depois continuamos a salvar esse modelo como se nada tivesse acontecido. E agora temos modelo de descontar por todo o lado. Agora, no código-fonte no código-fonte final, você vai ver um monte de modelos de descontar que eu vou estar adicionando em todo o lugar agora. É apenas o cabeçalho, o rodapé e os campos de fluxo de página inicial, eu acredito, mas eu vou adicioná-lo a outros lugares também. Então você vai ver um pouco mais disso. Tudo bem. Por último, se você quiser desativar o seu dinheiro, você sempre pode falar isso. Ou o que eu gosto de fazer é pegar isso, sabendo que já está funcionando como esperado, ir para a produção dot pie, e eu vou apenas colar isso lá dentro. E quero ter certeza de que também tenho esse arquivo do SO para a importação do SO. Em vez disso. E agora eu sei que quando eu lancei este site em produção em um servidor que eu vou estar usando a produção até o arquivo Settings. E então isso vai usar o descontar Temperley por padrão. 43. Adição de um mapa de mapa: mapas do site ajudam os motores de busca. Encontre todas as suas páginas. Espera A tem um recurso de mapa do site, mas ele não está habilitado por padrão. E nesta lição, vamos ativar mapas do site e criar um novo site. Mapa. U R L Então, se abrirmos nosso site, host local 8000 barra site mapa ponto XML Este é geralmente onde um mapa do site vive, mas neste caso, não há um. Então o que precisamos fazer aqui é abrir nossa torta de ponto base. Então o que precisamos fazer aqui é precisamos onde você está? verificação está instalada. APS. Precisamos de fazer com que os nossos APs de insulto incluam o retal dot con Trib que os mapas do site. Certifique-se que isso ainda não está lá. E vamos também adicionar o jangle um django dot con Trib Dad mapas do site e então vamos abrir . Você é o arquivo de torta de pontos do RL, que eu acho que nós só tocamos uma vez em todo o curso, e lá vamos nós. Podemos ver aquele administrador do Django que eu tenho falado de vez em quando nós nem sequer olhamos para ele tão honestamente, se você quiser, você pode simplesmente se livrar dele. Então, por e aqui, eu vou dizer de abatido Oh, não con Trib dot sites mapas pontos pontos vistas mapa site importante e, em seguida, acima desta captura tudo o que queremos adicionar você é Oh, mapa do site dot xml Sim, nós poderíamos Faça ler, Jack. Então, ele se parece um pouco mais com o resto do nosso código aqui, Então nós poderíamos fazer você é l site mapa dot xml. E em vez disso, vamos simplesmente dizer “site “agora, terminais não reclamando nada. E eu vou voltar para o suporte do host local 8000 barra mapa do site dot xml E você sabe, eu tenho página inicial serviços limpeza página, página brilhante sobre nós e contato. Então agora eu tenho um mapa do site, e quando você estiver lançando seu site, você pode enviar seu mapa do site para o Bing, o Google e todos os outros mecanismos de busca. Os motores de busca também serão por padrão. Procure o mapa do site dot xml no mapa do site dot html, mas é sempre bom para enviar de qualquer maneira. E realmente, o que isso faz é qualquer página que você tem uma espera até a página que vive. Isso é público. Ele vai aparecer aqui 44. Prepping para lançamento: Agora, uma dessas coisas que precisamos fazer é criar uma chave secreta. E precisamos editar nossos hosts permitidos e disse que nossos bancos de dados praticamente na maioria das vezes , vamos estar trabalhando dentro de nosso arquivo de pizza de ponto de produção. Então aqui, precisamos definir nossa chave secreta é suposto ser algo que não sabemos o que é ainda e precisamos definir nosso host permitido é igual a uma lista de domínios I ps, coisas assim. E nós podemos até ver que ele se esforçou até alto hospedeiro permitido? Sim. É igual a estrela. Já temos uma chave secreta para a Deb. Isto é apenas para o desenvolvimento local. Queremos definir uma chave diferente, diferente para a produção. E queremos definir hosts permitidos diferentes hosts permitidos mais específicos para produção. Então, para a nossa chave secreta, se nós acabamos de abrir o Firefox ou qualquer navegador que você gosta, e eu vou apenas ir para muitos web tool dot com slash django secret generator e criar uma chave aleatória e eu vou copiar essa chave e apenas colocá-lo na minha chave secreta assim. Agora este não é o melhor método de armazenar algo secreto provavelmente não deveria ser mantido em uma corda de avião como esta. Mas isso é algo que você pode enfrentar um pouco mais tarde na estrada. Por enquanto, vamos fazer assim. E então, em nossos hosts permitidos, vamos precisar definir alguns hosts diferentes aqui. Então o 1º 1 vai ser o anfitrião local. O Engine X vai usar isso em nosso servidor ao vivo, e eu só sei que vamos precisar desse. O próximo é o que queremos que nosso domínio seja. No meu caso, eu quero que este site para viver em Rocketman Dot aprendeu wag tail dot com. E a 3ª 1 será nosso endereço i p da Digital Ocean ou Lin devido, ou AWS ou onde quer que você esteja configurando seu servidor neste curso, vamos usar o oceano digital, então haverá um endereço I P lá agora. Ainda não sabemos o que eu P aborda, então vou colocar uma estrela. E sempre que você usar isso em produção, apenas certifique-se de que você sempre verifique novamente se você removê-lo assim que você iniciar o site . Próximo. Precisamos configurar nossos bancos de dados aqui, porque se entrarmos pode ficar endividados alto. Não. Provavelmente está na base de dados inicial I, mas estamos usando Escalar. Três estavam bem para o desenvolvimento local. É bastante rápido. É bastante leve. É um único arquivo, mas na produção você quer algo um pouco mais robusto e nós vamos usar pós grama. Então vamos dar a este novo banco de dados aqui. Bancos de dados é igual a, e precisamos dar a isso um padrão. Isto vai ser apenas qualquer que seja o padrão do banco de dados regular vai ser. E então isso virá com um motor em todas as tampas, e isso vai ser uma corda de algum tipo. Um nome novamente, todas as maiúsculas Isso também é uma string de um usuário. Este é o nosso usuário pós vestido. O nome era o nome do banco de dados que vamos usar também uma string a senha, que vamos colocar em uma string. Mas apenas note que se você pode colocá-lo em uma variável de ambiente mais tarde, definitivamente fazer isso um host, o host será sempre host local e nossa porta por padrão, eu acredito, é 5432 No entanto, nós estamos apenas vai deixar isso como uma string em branco como um padrão para 5432 Então vamos preencher algumas das coisas para fora. Precisamos de um motor. Vamos usar django dot db ponto backends holandeses post GRESs que el Psycho PG, também. E o nome da nossa base de dados vai ser “Foguete Man”. Sei disso porque é isso que vou preparar. Como no próximo vídeo, você pode querer mudar o seu. O meu vai chamar-se Rocket Man e o utilizador. O usuário de imprensa Post que eu vou usar também vai ser chamado Rocket Man e a senha novamente se você pode colocar isso em uma variável de ambiente. Mas eu só vou jogar isso em uma corda por enquanto, apenas para mantê-lo agradável e simples. Porque o lançamento do site nem sempre é super simples. Vamos em frente, dê um cofre agora. A próxima coisa que queremos fazer é instalar Century Century como um programa de monitoramento sempre, então sempre que seu site jogar um 500 ar. Não precisa procurar troncos. Ele lhe dará o rastreamento completo de volta imediatamente, e é totalmente grátis também. Então vamos para o século dot io, e eu vou começar rápido. Aceite isso, e eu vou criar uma nova conta aqui. É totalmente grátis também. Meu nome é Caleb Tallinn. O meu e-mail vai ser o Caleb em “Learn Way to Dot com”. Minha senha será algo que meu nome de organização será aprendido. Na verdade, este não vai ser aprendido. Espere até ser o Rocket Man. Não preciso de informações de cobrança e quero atualizações. Sem termos de serviço acordados. E quando terminarmos, basta clicar. Continuar. Tudo bem. E isso está basicamente dizendo: “ Bem-vindos à Century”. Este é o nosso embarque. Sim, estou pronto. Ele vai perguntar que plataforma estão usando. Eles estavam usando uma camada angular do reator da sinfonia PHP L A para Ruby Python. Qualquer coisa assim, estamos usando o Django. Vamos criar um projeto. Agora. Isso vai nos dizer exatamente o que precisamos fazer para obter isso instalado então vamos para o passo três instalado um sdk século. Então vamos querer colocar isso em nosso arquivo de requisitos assim, e queremos copiar tudo isso em nossa torta de ponto de produção, e eu vou colocar tudo bem aqui. Não vou me preocupar em consertar as importações, colocá-las no topo. Você pode, se quiser. Gosto de manter todas as coisas do século juntas, e é isso que vou fazer. Copie e cole-nos diretamente na torta de ponto de produção. Agora eu vou manter isso aberto porque o próximo passo é verificar que séculos instalados criando um padrão ul. Mas se você está usando o código-fonte que eu forneci, ou se você está olhando para o código-fonte que eu forneci, há realmente um erro lá, e nós vamos resolver esse ar por conta própria na próxima lição. Uma última coisa que queremos fazer aqui é abrir nosso arquivo de torta de uísque e aqui, e você pode vê-lo na pasta Rocketman chamada Whiskey Dot Pie. Diz Rocketman configurações que Deb, vai ser o seu projeto fora configurações ponto Dev, eu vou mudar o ponto surdo para ponto produção. E tudo isso está dizendo é verificar se há um módulo de configurações do Django em nosso ambiente. Então ele está procurando por uma variável de ambiente. E se não há padrão para este, e eu vou salvar isso também agora, antes de entrarmos no próximo vídeo onde nós realmente vamos em frente e lançar todo este site no Digital Ocean, precisamos ter certeza que temos isso em um repositório git. Não, eu vou deixar isso com você para colocar isso em qualquer repositório que você não vai ter Hub obter Labit Bucket, qualquer coisa assim. Mas nós definitivamente vamos precisar de todo esse código em algum tipo de sistema de controle de versão que podemos acessar em nosso servidor porque nós vamos clonar isso para baixo e nós podemos precisar fazer algumas alterações e, em seguida, empurrá-lo de volta para o nosso controle de versão sistema como get hub 45. Lançamento de sites!: Tudo bem. A hora é agora que vamos lançar nosso site na Digital Ocean. Agora, as etapas podem ser replicadas em grande parte no Lynn Owned ou na AWS ou em qualquer outro provedor de nuvem . Só estou usando o oceano digital porque gosto deles. São simpáticos e simples. Eles têm um bom preço. E eu mencionei que eles são agradáveis e simples? Eu realmente gosto disso. Então, se você não tem uma conta digital oceânica, você provavelmente vai querer criar uma. Normalmente eles têm uma promoção acontecendo que diz, você sabe, se você se inscrever, você pode obter 20 anos, $50 tipo de dinheiro de graça. Mas já tenho uma conta, por isso vou iniciar sessão. Certo, então eu tenho um novo projeto na Digital Ocean chamado Rocket Man. Você pode ver que eu já tenho revestimento para todos lá dentro. Eu gosto de hospedar com a Digital Ocean, obviamente. Então eu vou apenas criar uma nova gota aqui. Vou me certificar de que você foi para 18 selecionado apenas um plano padrão e eu não quero gastar $40 por mês. Eu quero gastar US $5 por mês $40 é melhor se você tem mais como você precisa de cinco terabytes de transferência ou 160 gigabytes de espaço em disco SSD ou oito gigabytes ou quatro uso CP. Sabe, não precisamos disso. Precisamos de um show, 25 gigabytes fora do espaço SST e um terabyte de transferência. Isso é bom o suficiente para o que estamos fazendo com um pequeno site. Não preciso de armazenamento de blocos ou algo assim. Vou escolher o mais próximo de mim. São Francisco é o mais próximo de mim. Estranhamente, estou mais perto de São Francisco do que Toronto, apesar de estar no Canadá. Chaves Ssh. Aqui está um grande. Você vai querer adicionar sua chave ssh, então, se você ainda não tiver uma, você vai querer adicionar uma. Isso vai tornar sua vida tremendamente mais fácil. É a mesma chave ssh que você daria ao Get hub ou obter o bucket de órbita de laboratório ou a chave ssh que pode estar em outro servidor já. É exatamente o mesmo. É a sua chave ssh pública, e até lhe diz como você pode fazê-lo aqui. Então, há alguns passos bonitos. Se você não tiver um, você pode criar uma mina já selecionada. Eu não preciso adicionar nenhuma etiqueta. Vou escolher o nome do anfitrião aqui. Ouçam chamar aquele homem foguete. Eu não gosto daquele que eles geralmente nos dão. Vou habilitar cópias de segurança por um dólar por mês. Por que não criar aquela gota? Ok, minha gota está criada agora. Preciso de SSH em anos. Então eu preciso desse endereço aqui. 167172113119 vezes em uma cópia que vamos abrir um terminal e ssh aqui. Então vamos fazer rota ssh em e, em seguida, o endereço i P. Sim. Permita-me entrar e olá. Estamos dentro do nosso servidor. Então agora podemos correr ls ser liberados, Dash a. Podemos ver que estamos usando você bun para 18.0 4.3. LTs Agora, antes de fazermos qualquer coisa, não queremos fazer nada no usuário root. Queremos criar um novo usuário. É só uma boa prática. Um pouco mais seguro assim. Então vamos adicionar um novo usuário. Vou chamar o meu Caleb, jogar este vídeo todo. Vou ligar para o meu utilizador. Caleb, talvez queiras chamar o teu nome. Então, sempre que vir meu nome, fique à vontade para substituí-lo pelo seu. Vou digitar uma senha aqui, e vou fazer de novo. Meu nome completo é Caleb Tall no número do meu quarto. trabalho, telefone de casa, outro. Essa informação está correta? Sim. A maior parte disso era apenas informação vazia. E agora precisamos fazer de mim um super usuário. Então vamos fazer usuário mod traço um g pseudo Caleb. E enquanto estamos aqui, vamos em frente e certifique-se de que ssh aberto habilitou através do nosso u f W Agora você f w é. O que estou dizendo é que seu firewall descomplicado. E este é o que vem padrão com você, Bond Do então vamos em frente e você lista de aplicativos FW. É como temos disponível Application Your open. Ssh. Vamos fazer você FW permitir abrir. Ssh! E certifique-se de digitar exatamente da mesma maneira foi maiúsculo O Capital s e H. Você tem w habilitar. Sim. Proceda esta operação e você status FW. E isso nos mostrará o que temos disponível. Por isso, agora permitimos abrir. Ssh! A razão pela qual estamos fazendo isso é porque o usuário do Caleb que eu criei agora será seu próprio usuário. Então nós não temos que Ssh com raiz enfraquecer. Ssh! Com Caleb ou com seu próprio usuário. Agora temos mais um passo antes que isso esteja realmente disponível. Precisamos copiar nossa chave ssh do da conta raiz para a nova conta. Vamos fazer a nossa pia, traço, traço , traço de arquivo, traço ch próprio Caleb Cool. E Caleb fez isso como este hslash home slash Caleb também, By the way, todos esses comandos que eu vou disponibilizar para você em texto para que você não tenha que fazer isso comigo através de todo este vídeo. Você pode me ver fazer isso e depois passar o texto mais tarde. Há muitas etapas e você pode não querer pausar o vídeo. Sabe, 100 vezes isso pode ficar muito irritante. Vá em frente, bata. Entrar. E agora vamos sair daqui. Vou apertar o controle C ou D controlado, e vou para SSH, Caleb. E então, seja qual for o endereço I p, que aconteceu de ser 1671 71 13119 e olhe para isso. Eu estou agora como Caleb e Rocket Man é meu servidor. Agora, é assim que criamos uma nova conta ou um novo usuário dentro do nosso novo sistema U Bahn para. Eu estou indo para ssh, Caleb em 167.172 ponto 1132119 que eu p endereço vai ser diferente para você baseado no servidor que você configurar. Então não use meu endereço porque não vai deixar você entrar. Tudo bem. E então um dia eu entrei. Então a primeira coisa que precisamos fazer é atualizar seu pão, também. Se você ainda não fez isso, você vai querer fazer isso todas as vezes. Iniciar um novo servidor. Então Ryan Sudo, atualização Apt. Vai pedir sua senha, e tudo bem. Já atualizei todas as coisas. Você provavelmente verá uma grande lista de itens que foram atualizados. Pode até levar alguns minutos, e está tudo bem. A próxima coisa que queremos fazer aqui é executar sudo Apt instalar python três traço Pip python três traço Dev Limpy que dev Post resgate Opor Kresk, Você contrabando saúde, genética e onda. Vamos usar todas essas coisas agora de novo. Isso pode levar um pouco de tempo. Quando você está fazendo isso pela primeira vez, ele vai dizer algo ao longo das linhas de Ah, vai haver 278 megabytes ish. Deseja baixá-lo? Basta clicar ou digitar. Por que e depois bater. Digite e ele começará a baixar para você em seguida. Uma vez que você está feito isso, vamos criar um novo post Greste mais post sessão GRES tão cedo Oh, Dash, você postar ervilha SQL. Agora, neste ponto, precisamos criar um novo banco de dados chamado Rocket Man. Então você vai querer executar alguns comandos diferentes você? Na verdade, o que eu vou fazer é mover isso um pouco para cima. Então vamos deixar claro. Entre aqui e eu vou te guiar pelos degraus. Então, primeiro passo, você quer criar um novo banco de dados chamado Rocket Man, então criar banco de dados foguete homem, não esqueça seu semi cólon no final. Agora o que isso corresponde está em nossa produção até arquivo alto. Já preparamos isso. Isto vai coincidir com o nome. Este é o nome do seu banco de dados. Chama-se Rocket Man Hit. Digite e que irá criar um novo banco de dados para você. Em seguida, vamos criar um novo usuário chamado Rocket Man. E assim este é criar o usuário Rocket Man com senha e alguma senha louca aqui novamente. Essa senha corresponde a esta aqui no nosso arquivo de pizza de ponto de produção. Então é criar usuário Rocketman um minúsculo com senha, então são senha louca com um ponto semi dois no final. Em seguida, precisamos fazer um pouco de alteração de regras aqui. Vamos alterar um papel. Rocketman definiu a codificação do cliente para UTF 8. E não se preocupe em digitar tudo isso. Vou colocar tudo isso em formato de texto também, que você possa copiar e colar a maior parte só porque assistir a um vídeo e digitar manualmente o quê? E, em seguida, parando, impressionando o jogo uma e outra vez e outra vez. Bastante doloroso. Então não se preocupe em ter que fazer tudo o que puder. Você pode copiar e colar a maior parte deste aprendido esperar até o site. Então aquele só diz que o cliente codifica para UFT oito o próximo que queremos alterar um papel. Rocketman definido para isolamento de transação padrão para ler confirmada e isso é apenas definir nossa transação padrão. E a seguir, queremos alterar um papel. Rocketman definiu fuso horário dois UTC. Então nós estamos apenas dizendo definir fuso horário para um horário regular quando você pode totalmente mudar esses dois o que você quiser também. Estas são as configurações genéricas com as quais eu gosto de trabalhar de qualquer maneira, Então meu banco de dados sempre acha que eu estou no horário UTC. Uma vez que tudo isso é feito, você vai precisar executar mais um comando aqui. Você vai precisar conceder todos os privilégios no banco de dados chamado Rocket Man. É este aqui em cima, dois do usuário chamado Rocket Man, que é este aqui. Agora acontece que o nome de usuário e o banco de dados são os mesmos. Eles não têm que ser. Eles podem ser totalmente diferentes, mas neste caso, eles são os mesmos, então isso pode ser um pouco confuso, mas na maior parte, estamos praticamente feitos com isso acertar. Entra nisso. E quando terminar, corte Q. para sair do post grass. Em seguida, precisamos atualizar e instalar Pip e Virtue. E então nós estamos indo para executar pseudo traço H Pip três instalado Dash, dash upgrade, Pip E tudo isso vai fazer é atualizar pipped para a versão mais recente. Aparentemente, eu já tenho a versão mais recente, então eu faço Pip Dash V e eu poderia fazer escolher três traço V e podemos ver está usando Python 3.6 Agora . Eu queria usar Python 3.7, mas isso não é um problema para isso. Python 3.6 é tão bem suportado quanto python 3.7 para Wag Tail 2.7. Em seguida, precisamos instalar nossa extremidade virtual, então precisamos fazer Sudo Dash H Pit três. Instale o Virtual e isso só vai instalar Virgil End agora. Eu já tenho isso instalado, então isso não é um problema, e você verá um monte de tributado em seu terminal bem, dizendo Ei, estamos instalando virtualmente instalado Agora. Em seguida, quero criar uma nova pasta aqui. Então PWD é o diretório de trabalho teoria que eu estou dentro. Estou no Slash Home Slash Caleb. Se você tem um usuário diferente, ele vai ser diferente. Vai ser Slash Home Slash Steve, se o seu nome é Steve, então eu estou indo para m k Dire. Faça um diretório essencialmente foguete homens. E se você é novo para este tipo de linguagem UNIX como, isso é inclinado aqui é dizer home slash que ditado casa. Então, home slash Caleb, esse é meu usuário e então Rocket Man e então eu posso ver o em Rocket Man se eu fizer p w d, podemos ver que Caleb casa e Rocket Man é a minha estrutura de pastas. É onde estou atualmente. Agora. Neste ponto, podemos fazer Dash L. A. e não vemos absolutamente nada aqui. E isso é bom. Não queremos nada lá dentro. Não crie um enver virtual ainda. Queremos clonar nosso projeto aqui. Primeiro esta semana fica não se queixa de tentar clonar um projeto em uma pasta que já existe, ou você ter que clonar seu projeto em outra pasta e, em seguida, recursiva lee ele, Mover todos os seus arquivos para cima na linha de comando. Isso é meio doloroso para a maioria das pessoas. Em vez disso, o que vamos fazer é clonar nosso projeto para este diretório vazio. Então, faça clone, e então qualquer que seja o seu nome de repo agora, este é apenas um exemplo de repo que estou usando enquanto gravo este curso inteiro. Mas, eventualmente, isso vai ser https. Obter hub dot com barra citando para todos barra foguete homem. E, em seguida, a parte mais importante aqui é o ponto no final que o ponto significa que ele vai instalar ou clonar todo o repositório em sua pasta em que você está atualmente. Não, isso vai me pedir para entrar porque estou usando https em vez de ssh. Você sabe, se eu fizer isso é Dash L. um tadaa. Temos tudo lá dentro, incluindo o meu ponto de devi escalar três, que provavelmente não deveria estar lá, mas está lá de qualquer maneira, vou limpar isso. Agora vamos em frente e criar um novo final virtual. Então vamos fazer o virtual e o Rocket Man ven agora. A razão pela qual eu chamei este Rocket Man ven é porque um ele combina com o que temos trabalhado já com V e V para o nosso projeto local e ser porque ele corresponde ao seu já inter get ignore arquivo para que não tenhamos que nos preocupar acidentalmente comprometendo todo o nosso ambiente virtual. E agora precisamos realmente entrar nisso. Então vamos ativar o compartimento do fornecedor Rocket Man fonte e agora estamos dentro dele. E neste ponto, se fizermos pip congelar, isso é perfeito. Você não deve ver absolutamente nada. Isso significa que estamos dentro de um ambiente virtual totalmente limpo. Não há nada pré-instalado lá. Agora precisamos pip instalar milho orgânico unicórnio G. Eu não tenho certeza de como as pessoas dizem que, juntamente com psycho PG para traçar feijão legal binário permite que você escolha Freeze mais uma vez e vamos ver que estamos usando G Unicorn versão 20.0 ponto quatro e ciclo PG Binary versão 2.8 ponto quatro. Então limpe isso. Arrume algum espaço aqui de novo. Agora queremos pip instalar nosso arquivo de requisitos Então pip install dash Nossos requisitos dot txt sabem o que isso vai fazer é que nós realmente fizemos isso antes, vai pegar nosso arquivo de requisitos e instalar Django Wegel, Django extensões, ajustes widget Jenga e um sdk século. Então vamos em frente. Instalar tudo certo, Tudo isso está instalado, e agora podemos executar nosso servidor tipo de. Vamos tentar executar o servidor dela com as configurações de produção. Então vamos fazer Python gerenciado. Eu executo o servidor 0.0 ponto zero, Tribunal 8000 e vamos especificar configurações. Configurações é igual a foguete homem ponto configurações produção ponto. Então esta é a sua pasta Rocket Man. Esta é a sua pasta de configurações, e este é o seu arquivo dupuy de produção. Então vamos em frente. Bata isso e Ricky e vê o que acontece. Devemos, neste momento, ver algo assim. Ele diz. Falta entrada de manifesto de arquivo estático para algum arquivo. Se virem isto, são boas notícias. Isso significa que tudo o que temos que fazer é executar, coletar estático. Então agora podemos executar Python gerenciado. Eu coleciono estático e oh, não, ele diz que não temos nenhuma barra de ferramentas de depuração de nome de módulo. E isso porque, neste momento, nossos servidores tentando executar Dev em vez de executar nossas configurações de produção aqui, ele está tentando executar dev dot txt, e ele está procurando APS Debo Tuller instalado que não existe que só existe localmente porque estávamos fazendo pip install Dash são Dev dot txt, que vem com Django debug toolbar, PDB e tudo mais no arquivo Requisitos. Nós não fizemos isso para o servidor, e nós não queremos fazer isso para o servidor. Nós não queremos que o Django Debug Tool esteja instalado e não queremos que o dev dot pie seja usado. Queremos que nossas configurações de produção sejam usadas, então vamos em frente. Coletar estático e vamos fazer configurações é igual a Rocket homem ponto definição Stott produção. E vamos corrigir isso em apenas um pouco para que não tenhamos que especificar configurações o tempo todo . E o que Ah, 279 arquivos estáticos copiaram 357 pós-processo e tudo foi para o nosso diretório estático em casa . Caleb Rocket Man cortar estática. Agora, se fizermos para fazer, se rodarmos o nosso servidor novamente, devemos ver que você tem 109 migrações un aplicadas ou quantas você tem para o seu projeto. Seu projeto pode ser diferente do meu projeto. Eu acredito que neste momento esperar até vem com 89 migrações un aplicadas. Então, simplesmente adicionamos mais 20 migrações. Isso está totalmente bem. Vou considerar isso porque isso não vai fazer nada para nós neste momento . O que precisamos é que precisamos do Teoh primeiro. Vamos nos livrar dessa bandeira de configurações porque isso é super irritante. Você poderia viver assim, mas eu não quero. Essa bandeira de configurações é a configuração é igual a Rocket man pontos configurações de produção de pontos assim , Sim , não, isso é que é irritante para a direita toda vez. Então vamos nos livrar disso. E em vez disso, o que vamos fazer é exportar as configurações do Django. Módulo é igual a, e esta é uma string foguete man DOT configurações não produzir. E agora, se ecoarmos o módulo de Configurações do Django, podemos ver que ele retorna. Rocketman configurações de produção. Agora, se eu executar jangle executar servidor assim, vamos ver que é automaticamente usando configurações Rocket Man ponto produção. Ele não estava fazendo isso antes, e se nós coletamos estático, nós não precisamos fazer coleta estática com o sinalizador de configurações, também. Então vamos fazer para fazer vamos apenas como um exemplo, coletar estático, mas vamos nos livrar dessas configurações. Bandeiras. Sim, e funcionou perfeitamente bem, mas agora, quando executamos nosso servidor, podemos ver que temos 109 migrações aplicadas. Vamos ir em frente e migrar esses. Então cancele seu servidor com controle. Veja, isso é para gerenciar python dot pie Migrate on e ele vai apenas migrar todas as 109 migrações ou quantas migrações você tem agora que parece bom. Vamos em frente e criar um novo super usuário com python gerenciado até alto, Criar super usuário e meu nome vai ser Caleb. Meu endereço de e-mail é Caleb em Learn Wag Tail Dot com A senha é que eu não vou dizer isso voz alta e eu tenho um super usuário agora. Há pouco tempo, nós verificamos u f w quem disse pseudo status fw, e nós nos certificamos de que ssh aberto estava disponível para nós. Vamos em frente e abrir porta 8000 conjuntos de fazer pseudo você FW permitir 8000 e isso vai nos permitir visualizar o nosso site em nossos servidores I p endereço com uma porta no status URL e C , e devemos ver isso. Agora, se abrirmos o nosso navegador aqui e ir para http e, em seguida, qualquer que seja a sua porta não é sua porta o seu endereço i p. Então meu meu i p endereços 167172113119 Porto 8000. Esses 8000 é importante. Esse 8000 vai vir de python gerenciado até alta execução servidor Porta 8000 no final lá. Então vamos executar isso e atualizar página e podemos ver que temos um erro interno do servidor. Agora vamos voltar ao nosso século quando instalamos o século e diz que temos o nosso primeiro evento. Isso é perfeito. Agora, se você não tem um erro, você pode pular totalmente esta parte. Mas se você tiver um erro, Century vai ajudá-lo imensamente. Então me leve ao meu evento, e este que estamos vendo aqui é na verdade um mais velho. Isso foi quando inicialmente correu, coletar estático, e vimos que arquivos estáticos manifestam ar. Isso é o que este aqui é. Então, isso é fixe. Isso foi registrado. Temos outro valor. O Aaron. Aqui. Falta arquivos estáticos manifestam lesão para imagens. Sobreposição de contato. Agora, é aqui que a depuração pode ser meio dolorosa, então geralmente o que eu faço é pegar isso e procurar em todo o meu projeto por isso. Então vamos para o código visual studio ou qualquer editor que você mais gosta. E eu vou apenas fazer uma busca global por imagens. Contato sobreposição ponto PNG E aqui eu vejo estática. Bem, isso está começando a parecer promissor porque os arquivos estáticos manifestos estáticos se manifestam. Não é possível encontrar este arquivo. O que é que ele existe? Vamos em frente e dar uma olhada. Modelos. Queremos imagens estáticas. Sobreposição de contato. Com certeza, isso realmente existe. Então, qual é o negócio aqui? Provavelmente é só aquela barra para que pudéssemos nos salvar, nos comprometer e fazer isso se quiséssemos. Ou se você quiser fazer um pequeno código de cowboy, podemos parar nosso servidor e fazer pseudo nano. Ou, se você for mais um assistente, você pode usar o vim também. Vou usar o Nano porque é um pouco mais fácil para as pessoas que são novinhas neste tipo de coisa. Então pseudo nano Rocket man slash templates slash inclui barra rodapé dot html e que corresponde modelos Rocket Man inclui rodapé dot html, e eu posso entrar aqui e fazer para mover todo o caminho, e eu só quero se livrar de isso agora para salvar, eu apertei o controle. Oh, e sair A hit control X. Agora vamos rodar nosso servidor mais uma vez e vamos ver o que acontece. Vamos ver o que acontece quando nos refrescarmos aqui. Olhe para isso. Nosso site está carregando agora. Não parece que isso é muito, mas vai ser um pouco em apenas um pouco. Então aqui, podemos dizer que um foi resolvido. Vamos voltar aqui. Sabemos que esta foi resolvida. Essa foi a nossa 1ª e, ah, foi quando chegou a página pela segunda vez. Está faltando contato demais, então eu sei que um foi resolvido também. Garota, atualmente não temos problemas. Isto parece feio, mas na verdade é funcional. Então, se formos aos publicitários, isto não vai ficar muito bonito. Mas eu posso colocar minhas informações aqui meu nome de usuário e senha, e eu concorri. Agora, novamente, nada disso vai carregar bem, vai nos consertar em apenas um pouco, mas isso é prova de que nosso CMS está funcionando e você está realmente executando código python em seu servidor. Vamos voltar ao nosso terminal e clicar, cancelar ou controlar, Ver para cancelar. E vamos nos certificar de que estamos todos no mesmo diretório aqui. Então, estou em casa. Homem Foguete Caleb. Se você não está aqui, você pode fazer CD inclinado Home Slash Rocket Man, e isso vai trazê-lo exatamente onde eu estou. Agora vamos tentar executar isso sem o Python executar Server Command. Vamos tentar rodar isso com G Unicórnios, Atsugi, Unicórnio Dash, Dash, Bind e nós vamos ligar anfitrião local Port 8000 dois Rocket man dot Whiskey e vamos voltar ao nosso site aqui e apenas bater Refresque. Verifica isso. Ainda está funcionando. Ainda é feio, mas ainda está funcionando agora. Desta vez ele está rodando com o unicórnio, e ele não está rodando com o servidor jangle run. Isto é uma boa notícia. Agora vamos em frente e fazer isso realmente funcionar bem. Então, primeiro lugar, não queremos ter que correr para Unicórnio Bind 0.0 dot 0.0 Port 8000 Rocket Mandel Whiskey e ter isso funcionando o tempo todo. Só queríamos correr automaticamente em segundo plano. Então, ele está desativado fora do nosso ambiente virtual. E vamos pseudo nano no sistema do mar d sistema barra barra g unicórnio ponto meia em. Nós vamos criar um arquivo de soquete aqui e aqui, e eu apenas colado que termina. Você não tem que me ver digitando. E aqui temos unidades, que são nossas descrições. E aqui temos unidades, Tomada unicórnio. Temos um soquete dizendo qual soquete arquivado usar e um monte de cabeçalhos de instalações. Então vamos em frente, Controle. Controle X. Uma vez copiado isso para o seu sistema de navegação D sistema G unicórnio, esse arquivo de soquete é muito importante. Controle X. Uma vez copiado isso para o seu sistema de navegação D sistema G unicórnio, Isso não será executado sem um soquete. Em seguida, queremos um pseudo nano ou eles se você preferir usá-los ou qualquer outro editor de linha de comando Pseudo nano at sea system D system to unicórnio dot service Agora esses nomes precisam coincidir. Si Chef, o unicórnio ponto soquete n g unicórnio ponto serviço Agora aqui, nós realmente temos um pouco mais. Então temos a unidade de novo. Temos que a descrição requer soquete g unicórnio. Lembre-se, é por isso que o nome corresponde e inter serviço. Esta é, na verdade, a parte mais importante que temos. Nosso usuário é igual a Caleb. Então, ele vai ser qualquer que seja o seu nome de usuário é se usado um nome de usuário diferente. Grupo é dub, Dub, Dub dados traço. Isso está tudo bem. Estão trabalhando Diretório é home slash Caleb slash rocketman. Mais uma vez, isto vai ser diferente. Se você tiver um nome de usuário diferente e um nome de projeto diferente, o seu pode dizer home slash steve slash Qualquer que seja o nome do seu projeto exatamente iniciar é novamente. Isto vai ser uma coisa de caminho. Então casa barra seu nome de usuário barra seu nome de projeto cortar seu final virtual do nome barra bin barra g unicórnio. E então também, você precisa ter certeza que aqui em baixo onde diz Rocket Mandato Whiskey é seu nome de projeto Dot Whiskey. Muito, muito importante. Se você correr para os problemas de unicórnio no futuro em apenas mais alguns passos, as chances são que isso foi definido incorretamente e você tem um problema coisa caminho. Agora, se rolarmos para baixo, não há mais nada para falar lá de novo, só precisamos ter certeza de que esse caminho está absolutamente correto. Vamos em frente. Controle Ode para salvar o controle X para sair. Vamos começar a tomada de unicórnio. Vamos fazer isso com pseudo sistema CTL iniciar G Unicórnio tem soquete e então vamos ativar este soquete também. Com pseudo sistema CTL habilitado o soquete de ponto unicórnio e criou um irmão apenas bom. E agora, neste ponto, poderíamos fazer o sistema CTL status g unicórnio ponto socket e obter o status deste socket e você deve ver a escuta ativa. Pode não estar em verde. Pode estar em branco. Isso é OK. É só que neste momento deve dizer escuta ativa. Em seguida, precisamos verificar a existência deste soquete, então nós só queremos ter certeza de que o soquete existe. Então vamos fazer arquivo barra executar g unicórnio dot socket e isso é realmente errado. Não é uma droga. Lá vamos nós. E assim isso deve apenas produzir que é um arquivo de soquete. Agora vamos em frente e verificar o status do unicórnio inteiramente assim pseudo-sistema status CTL para unicórnio. E, neste momento, não se assuste, mas deve dizer “morto inativo”. Agora contestamos a ativação do soquete com um simples comando Curl. É por isso que instalamos Curl muito, muito cedo para que pudéssemos fazer Curled traço traço UNIX dash soquete barra executar barra g unicórnio ponto meia host local. Agora, quando apertamos enter, devemos estar vendo a saída do nosso site tudo em html. Mas devemos ver a saída dele assim. Nós temos oh tipos de coisas aqui, e esta é a saída do nosso home dot html ou home page dot html template. Agora, se você não vir isso, se você vir um 400 ou se você vir algum outro erro antes de tudo, verifique século certifique-se de que não há erros lá dentro. Se houver um erro, certifique-se de resolver esse erro primeiro. Se não houver erros no século, provável que o problema seja com o arquivo de soquete G unicórnio fora ou o unicórnio G. Aquele arquivo de serviço, você vai querer voltar alguns passos e apenas retocá-los. Provavelmente é só um problema com o caminho. A outra coisa a verificar está no seu projeto. Se você está correndo para um problema, apenas certifique-se de que este é o foguete homem ponto definindo parar produção. Então, vou limpar isto. E neste ponto, não faz mal recarregar nosso sistema, Damon. Então vamos fazer o pseudo-sistema CTL demônio recarga e pseudoreinicialização do sistema. Puxa, unicórnio. Agora vamos em frente e configurar o motor X. Isso é realmente, muito importante porque o Engine X vai ser praticamente nosso proxy de e para G Unicórnio. Nós vamos precisar disso também para carregar todos os nossos arquivos estáticos para que ele não tenha que passar por python porque para alguém para acessar seu site e, em seguida, ter essa solicitação ir através python toe, procurar um arquivo e, em seguida, servir isso é muito mais lento do que apenas deixar um serviço que é dedicado exclusivamente a isso. Como o Engine X. Faça isso funcionar. Então vamos fazer pseudo nano no motor do mar X sites traço barra disponível Rocketman. Este arquivo não deve existir neste momento, e eu acabei de colar uma configuração aqui. Mas nós vamos passar por isso, então ele vai olhar para ouvir a porta 80. Esse é o seu padrão, Http ou porta do seu site vai ouvir novamente. Relatório 80 E aqui o nome do servidor é meu endereço IP servidor. Eu também vou colocar aqui meu endereço final I P ou meu domínio final, não I p endereço. Então, Homem Foguete, não aprenda como ponto com. Eu vou colocar um log de erro aqui, então ele vai entrar diretamente no meu projeto como motor X traço ar ponto log Eu disse a localização do tecido em Eu disse os ativos estáticos. Então, novamente, isso se resume a passar. Então eu estou sempre no diretório home. Estou usando o usuário Caleb e meu projeto. Meu arquivo na pasta que está segurando meu projeto se chama Rock It, Man. E quando nós coletamos estático, ele criou uma pasta para nós chamada Static. E então isso é realmente apenas criar um pseudônimo. Então, quando você vai para o seu site dot com barra estática barra imagem ponto PNG está realmente dizendo , Ei, essa imagem de um PNG não vive apenas em uma pasta estática. Ele vive nesta pasta estática exata. E sua mídia é onde toda a sua mídia vai ser carregada com um projeto wag tail. E então sempre que você bate em qualquer página, sua home page realmente aqui, olhos vão incluir alguns parâmetros de proxy e vai passar aquela meia G unicórnio dot arquivou aquele arquivo que testamos para ter certeza que existe estavam dizendo, Ei, passe por ali. Vamos em frente, Controle de Hit Oh, e controle X. E novamente, se eu estiver indo um pouco rápido demais com algumas dessas coisas, você sempre pode fazer referência a este código em Wag Cail Dot com. Então agora precisamos criar um irmão aqui, e assim podemos fazer isso com pseudo l N Dash s. E então isso só vem do arquivo Rocketman. Esse é o que nós adicionamos aqui estamos indo para semelhante fica a etc. sites Engine X habilitados. Então, basicamente, estamos apenas dizendo, Ei, o site agora está habilitado. Criamos uma configuração antes e agora estamos dizendo que a configuração está habilitada. Vamos ir em frente e teste motor X com pseudo motor X Dashti Coisas estavam olhando bem e vamos reiniciar motor X neste ponto sistema CTO reiniciar motor X. Até agora, sem problemas. Podemos até mesmo dio status e Yonex, podemos ver que ele está funcionando agora. Neste ponto, se você visualizar seu site, as chances são de que ele não vai ser executado. E com certeza, eu só atualizo a página. E ainda não está funcionando. Isso está tudo bem. Temos mais alguns passos a fazer aqui. As primeiras coisas primeiro. Precisamos apagar nossa porta 8000 de você, FW. Então, se fizermos pseudo status FW, vamos ver o Porto 8000 e vamos nos livrar disso porque não precisamos disso. Então sudo você FW excluir, permitir 8000 e é o status novamente. Já não está lá dentro. Precisamos permitir o Engine X aqui, , então pseudo você FW permitir motor X cheio e notou os apóstrofos em torno disso. E se fizermos status, você deve ver algo parecido com isso. Agora, vamos voltar à nossa página. E eu só vou me livrar deste porto 8000 porque nós não precisamos mais disso e verificar . Temos ativos estáticos. Tudo parece bem. Podemos voltar para a nossa página inicial e eu estou apenas no meu endereço I P Agora. Não há conteúdo aqui, então não há imagens, textos ou qualquer coisa. Mas isso está funcionando. E se eu for cortar, adicione homens. Tudo está funcionando aqui. E vamos apenas testar a depuração está desativada indo para como 40404044 página não encontrada ou esta página não pode ser encontrada. Se você vir a página amarela regular que você vê, modelo Ali não existe ou a página não existe ou qualquer tipo de erro que você costuma ver com o desenvolvimento local do Django. Isso significa que a depuração ainda está ativada e você provavelmente não está usando suas configurações de produção. E isso significa que o Django provavelmente está servindo ativos estáticos de medo, o que é lento e inseguro. Você não quer isso. Mas para nós temos tudo pronto e funcionando como queríamos Teoh. Agora eu estava próximo passo é se livrar deste endereço I p. Nós não queremos que eu p endereço lá em tudo. Isto não é mais 1985. Podemos realmente ter um nome de domínio. Então, uh, realmente não importa com quem seu domínio está registrado. O meu está registrado no Google e por isso é apenas o site da Waittil aprendido. E se eu entrar no DNS e novamente, se você estiver com Go Daddy ou Cloudflare algo assim, você tem acesso ao seu DNS e aqui em meus registros de recursos personalizados, eu só quero colocar Rocket Man tempo. Vamos dar-lhe 10 minutos ou se você está usando Go Daddy, eu acho que eles fazem segundos. Seria como 600 segundos por 10 minutos. E coloquei o meu endereço lá dentro. Este é o meu servidor. I p endereço 167172113119 Clique em adicionar. E normalmente ele vai dizer algo como, eles entrarão em vigor nas próximas 48 horas. Mas normalmente, registradores AARP muito rápido Go. Papai é meio lento, mas normalmente, isso acontece bem rápido. Em seguida, vamos querer ter certeza de que isso é permitido em nosso arquivo X. Então, onde está que fez isso? Um pseudo nano, etc. Engine X sites disponíveis. Rocket Man, vamos nos livrar desse endereço aqui. Não precisamos mais disso porque estou usando Rocket Man. Não aprenda como ponto com agora, o DNS pode não ter entrado ainda, então eu posso ter que esperar um pouco, mas eu sei que eventualmente vai funcionar em seguida, eu preciso mudar mais uma coisa. Pseudo nano Rocket Man, corte configurações, produção e eu quero me livrar deste asterisco aqui. Se você quisesse ser mais seguro, você poderia colocar seu endereço IP lá. Mas não é realmente necessário porque ele vai estar aceitando host local, que é Engine X e também seu domínio. Então o meu é Rocketman Dot Aprender Wag Tail Dot Com. O seu pode ser super incrível. Wag tail website dot com Vá em frente, diga isso. E agora porque fizemos uma mudança no nosso homem foguete e você a seguir, coisas que temos que fazer e seu próximo Dashti que só iria garantir que não temos nenhum erro de digitação ou qualquer coisa lá dentro. Pseudo sistema CTL reiniciar Engine X e pseudo sistema reiniciar G unicórnio. Agora, se pudéssemos passar pelo servidor novamente e em rul nós temos o endereço IP. Isso não deve mais funcionar. Apenas traz você para a página do motor x, que é exatamente o que você deve ver. E se formos dois Rocket Man, não aprenda Wag Tail Dot com, por alguma razão, isto quer que eu use HTTPS. Não temos https instalado. No entanto, se você quiser adicionar SSL, definitivamente olhar para determinado pot. Agora. Para mim, isso é simplesmente uma coisa de descontar para o meu navegador dizendo Ei, você já atingiu o site antes. Ele deve ter https nele, mas atualmente não tem. Então eu abri uma nova janela anônima ou modo de navegação privada e coloquei no Rocket Man Don't learn. Esperem, digam ao ponto. Vamos subir à minha cabeça, homens. Estamos tão perto do Monólogo e agora posso mudar tudo o que quero. Agora uma última coisa que provavelmente devemos fazer é ir para suas configurações wag tail Ir para sites mudar que de host local e colocar em seu domínio. Então eu vou colocar o Rocket Man. Não aprenda Wag Tail Dot com uma vez que você fizer em um SSL, e eu vou deixar isso com você. Mas uma vez que você adicionar um SSL, você vai querer alterações na porta 443 que é a sua porta segura para criptografia SSL barra TLS . Isso dá-te aquele pequeno cadeado aqui em cima. Nós não temos que estavam apenas na porta 80 e o nome do anfitrião é Rocket Man. Não aprenda. Espere até a Dot com e isso se chama Rocket Man. E neste ponto, seu site é lançado. Agora, você só precisa adicionar seu conteúdo. Vou adicionar conteúdo a isso para que você possa ver uma demonstração totalmente funcional do site. Mas, por enquanto, seu site está funcionando. Agora, se você está pensando em cigarros sagrados, Caleb , isso é bem, foi muito trabalho. Há muitos passos. Sim, você está certo. Há um monte de passos que é geralmente vai para o lançamento de