Como criar um recurso de busca para seu site estático HUGO com Fuse. js e JavaScript

1. Introdução: Olá, Shawn, meu desenvolvedor e professor do site e bem-vindo ao meu curso sobre pesquisa com Hugo. Estou animado para lhe trazer este curso, pois é um curso mais solicitado no Skillshare, é se encontrar uma pesquisa dinâmica em seu site assim como o Google, mas com uma estática, vocês viram. Durante todo o projeto do curso. Vou mostrar-lhe como configurar um sistema de circuito aqui novamente. E você estará gerando dinamicamente os resultados usando JavaScript e biblioteca difusa dot js. Com uma pequena quantidade de JavaScript, vocês disseram que o Excited pode funcionar como um site dinâmico codificado na linguagem back-end como o PHP. Vejo você no curso. 2. Primeiros passos: Começando. Vamos fazer SIM, mesmo começar, você pode baixar esses arquivos zip e extraí-lo. A outra opção é que deixei o link para o repositório do Heat Hub no branch master, que aparece por padrão. Você pode baixar um arquivo zip lá para o código. Depois de abrir esse código no Visual Studio Code, a foto inteira, você terá que iniciar um novo terminal e executar o comando npm install. O que isso fará é entrar no arquivo chamado package.json, e ele analisará as dependências e as instalará em uma pasta de arquivos chamada módulos de nó. Em particular, ele instalará a versão do Hugo, que é especificada aqui. Se você for ao site e puder ver qual é a versão mais atual e você pode realmente mudar isso para uma nova versão do Hugo. Eu configurei isso para simplificar o processo de instalação. Ei pessoal, vocês não precisam se preocupar em fazer isso em um monte de roteiros do lado esquerdo. Eles estarão sendo executados com base na versão do Hugo que foi instalada nos módulos Node. Muito rápido. Temos o dia do script de desenvolvimento que usamos para adicionar a visualização do servidor de desenvolvimento para executar quedas que têm o parâmetro de rascunhos ou a data que está no futuro. Fomos cobrados pela construção para a pasta pública. Temos renderização em disco que é muito semelhante à compilação, exceto que você está realmente executando o serviço para que você possa visualizá-lo no navegador ao mesmo tempo, temos div, pré-visualização e produção de opções lá para gravar em disco. verificação do Npm é para atualizar as dependências do NPM, mas não será Hugo. E post install é descritivos executados depois que você se deparar com ele, que instala você vai. Se você estiver atrás do false para qualquer lição subsequente, basta seguir o link para o repositório do GitHub e, em seguida, alterar a ramificação não, por exemplo, temos um problema em menos de quatro ramificações para. Então, a partir daí, você pode baixar a pasta zip dessa lição. Se você estiver tentando fazer upload do seu trabalho para o GitHub, você precisa se certificar de que exclua a pasta e , em seguida, execute novamente o comando git nela. Depois de excluir essa pasta doc. Então, ele se livra de toda minha história pessoal e então você pode escrever o seu próprio. Caso contrário, ele tentará carregá-lo meu repositório Git. E isso não acontecerá porque você não tem comissões para garantir que docx mantenha pasta se você estiver tentando carregar seu trabalho para ponto para obter ou GitHub. Caso contrário, te vejo na próxima lição. 3. Adicione o fuse.js: Então, vamos entrar e adicionar link Vue.js no bloco da seção de resultados. Vamos seguir em frente e vamos usar o npm para instalar o fusível dot js. Então, vamos copiar esse comando lá. Minhas quedas, estive como mostrei na seção de introdução, faremos um novo terminal e colaremos esse código. E o npm instalará o pacote? Você dirá que só adicionou um pacote. Não há dependências no ponto js fundido. Vamos seguir em frente agora e dar uma olhada em como vamos importar o Vue.js. Diferentes construções que podemos usar. Bem, olhando para as compilações dos módulos ES, eles tiveram um pacote moderno como pacotes ESM ou ES6. E há algumas opções. Temos o completo e o básico e, em seguida, temos as versões minificadas. Vamos usar minified porque há algo errado, pelo menos com a versão não modificada. Assim, podemos pelo menos galão e dar uma olhada nisso facilmente. Role para baixo, você verá que a versão completa inclui operações de pesquisa estendida e consulta lógica. Não estamos cobrindo isso neste curso. Se você precisar deles, você teria que atualizar para a versão completa. Mas até lá vamos usar a compilação básica para tornar as coisas muito mais fáceis. Colocamos essas taxas básicas de importação de texto T do ponto js fundido. Vamos copiar isso. E então faremos uma nova pasta chamada ativos. E uma pasta dentro desse JS legal e fará o nosso arquivo Pesquisar ponto-ponto, COMO chamaremos nossa busca de arquivos, jot cole esse gramado. Mas então vamos voltar e pegar pontos básicos ASM dot js. Agora vamos descobrir onde essa queda realmente sai, abrirá módulos de nós. E a fuselagem É. E nós temos e podemos ver que ele sai lá. Então, precisamos modificar, ser fundido a barra de pontos. Esse é o seguidor depois. Vamos salvar isso. E agora precisamos realmente importar esse arquivo JavaScript para nossa página de pesquisa. Vamos fazer, entraremos nos layouts e parciais e rodapé do roteiro. Na parte inferior. Nós fomos por aí e condicional P500 q dot top com um T. maiúsculo O topo será pesquisado. Vou colocar o n tagging imediatamente. A função básica será chamada de dois pontos de pesquisa igual, porque estamos inicializando o ponto de recursos variáveis obter o G. maiúsculo E isso é relativo ao detentor de ativos. Então é js slash GIS. Esse é o código básico. Vamos fazer um pouco mais com isso. Vamos usar uma árvore falsa, cara pipes, que está criando um recurso a partir de um modelo. Porque em algumas lições Tom criará um índice. E para manter as coisas simples, vamos usar o índice em linha em JavaScript. Então, novamente, cada bochecha permite que você realmente gere parte desse JavaScript para nós, C, índice de todas as páginas e todas as palavras-chave textos e categorias e outros. Neste site. A maneira como funciona é o nosso código aqui que usamos. Também há uma parada boa, nós deveríamos acabar de fazer. E depois disso, vamos usar recursos dot execute como modelo. Temos nosso arquivo de saída. Tenho que fornecer o ponto dois. Ele copiará isso. Coloque um popping, o emitirá como o mesmo ponto de barra JS. Isso fornecerá o ponto. E então vamos executar js dot build. E então vamos executar impressões digitais. Você está tendo problemas para encontrar o personagem do pote, É Shift e o botão acima Enter. Estávamos em impressão digital. Ele vai adicionar uma hashtag no outono. E isso é ótimo para quando geramos um novo arquivo, o falso fôlego para baixar a versão mais recente do arquivo JavaScript, também podemos adicionar uma propriedade de integridade. Usamos integridade ponto-ponto para gerar o hash de integridade. Se você fizer meu curso sobre a construção de JavaScript, aprenderá tudo sobre essas coisas. Em seguida, vamos colocar uma tag de script. Então, faremos a fonte do script. Isso será permalink faz com que você tenha R maiúsculo e P maiúsculo fará integridade. Será tal ponto, pontuá-lo com um D. maiúsculo Não tenha integridade. Salve isso. E nós não podemos realmente executar essa estatística porque não temos uma página com o topo da pesquisa que está chegando. Então, salvaremos isso e te vejo na próxima lição. 4. Opções de JS.Build: Agora vamos estar sentando algum JavaScript com opções de construção. Você vai, você vai usa ESBL para criar JavaScript. E estamos analisando diferentes opções de desenvolvimento e produção. E também observando o código onde garantir que ele seja compatível com a maioria dos navegadores por aí. Vá para o rodapé do nosso script, HTML. E logo acima de onde definimos a pesquisa, vamos criar uma nova variável chamada Ops, opções e o que chamamos de igual. E então criaremos um dicionário com dict. Então, após o JS pato faturado inserirá nossa variável de opções. Agora vamos criar um link para a página hago docs para construção em JavaScript. Digamos que ele use ESBL e seu número de opções que vamos ver. O primeiro será minimizado para produção. Vamos modificar nosso código para reduzir o tamanho. Você também pode fazer isso com ampliação de ativos porque você obtém tubos, mas não obterá o mesmo resultado. Obtemos um resultado muito melhor com o ESBL, pois ele foi projetado para ES6. próxima opção que vamos fazer é regenerar um mapa fonte embutido durante o desenvolvimento para que possamos ver onde vem nosso código se estivermos tentando depurar. O próximo é o alvo, e isso é para desenvolvimento e produção. E vamos sair para o ES 2015. Isso é o mais baixo que podemos ir com Hugo, você obtém, não nos deixa ir para ES cinco. Infelizmente, existem alguns navegadores como o Internet Explorer que exigem um x5. Você terá que usar Babel para isso. E balbuciar é uma opção que você pode realmente fazer com Hugo, uma opção de executar a Bíblia. E eu abordo isso no meu curso de construção em JavaScript. Eu passo por todas essas opções em detalhes em nosso arquivo HTML. A primeira opção que vamos definir é minify. E vamos definir isso como verdadeiro. Você não precisava de vírgulas invertidas em torno de verdadeiro porque é booleano verdadeiro ou falso. E o próximo é o alvo. E vamos definir isso para ES 2015. Vamos apenas colocar um comentário lá que essas são nossas opções de produção para ESBL. Vai colocar alguns traços e começar um fim. Não há espaços novos e isso fará isso o resto do nosso arquivo para acabar com espaço em branco extra ou novas linhas em nosso código HTML. Queremos apenas produzir HTML. Vamos recuar porque estamos dentro da declaração if. E então analisaremos o desenvolvimento, usamos uma declaração condicional. Se EQ, se for igual a um ambiente de ponto guia com um E. maiúsculo Procurando combinar o desenvolvimento, certifique-se de usar vírgulas invertidas em torno dele e tudo é minúsculo para desenvolvimento. Coloque nossos antagonistas imediatamente com traços. Não há novas linhas ou espaços. Mais copie nossa linha de operações e vamos colá-la e digitá-la. Vamos nos livrar do cólon porque já inicializamos o oposto na primeira vez em que o atribuímos acima. Agora, será modificá-lo removerá minify porque o padrão é false. Vamos colocar no mapa fonte com um M maiúsculo e é um mapa singular. Em seguida, coloque mapas de origem, ele funcionou. E a única opção é em linha. Recapitulando para produção, estamos procurando ampliar para manter o tamanho do nosso arquivo baixo. E temos nosso ES 2015 direcionado. Vou colocar um comentário acima de nossas opções de desenvolvimento. Temos nossos mapas de origem para inline para que possamos ver de onde nosso código está vindo. Temos nossas terapias alvo, 15. Vamos ir com Hugo e o ouvido está cheio. Como eu disse, tenho meu curso sobre construção de JavaScript. Se você quiser saber mais sobre qualquer um desses tópicos em maior. 5. Adicionar pesquisa HTML: Então, vou criar alguns modelos para o HTML, para a função de pesquisa. Para o conteúdo. Você verá que eu tenho alguma configuração de personagem da Futurama, tenho as páginas de empresas e espécies para exibir os termos de taxonomia. Vamos em frente e vamos criar uma nova página, abriremos um novo terminal e idiota Hugo, novo índice de barra de pesquisa dot md. Em seguida, criarei uma nova página para nós com base no modelo de arquétipo. Tenho que ajudar nossa página e vamos chamá-la de resultados de pesquisa. Vamos dar um tipo a ele. Vou procurar. Então precisamos adicionar um parâmetro privado. E tornaremos isso verdade usando isso quando criarmos nosso índice para que esta página não seja indexada. Vamos salvar isso. Entraremos em nossos layouts, aguentaremos e examinaremos o padrão de sublinhado. Copiará e colará um único ponto HTML ou criará uma nova pasta chamada Pesquisar. Vamos colá-lo lá. Eles farão algumas alterações na página. Então, abaixo do conteúdo, criará uma nova div, e vamos nomeá-la JS dash. Os resultados da pesquisa fazem uso do capital R. É CamelCase. Em seguida, salvaremos isso e , em seguida, executaremos nosso controle de servidor de desenvolvimento. Clique no link e vamos verificá-lo no navegador. Vá para a pesquisa de barra. Temos nossa página de resultados de pesquisa ou inspecionamos, e salvaremos nosso arquivo JavaScript está sendo puxado para o rodapé. Então você daria uma olhada. Temos a fonte do script na parte inferior, e é o ponto de pesquisa js com o hash. Iremos para fontes e pesquisaremos dot js. Ainda não há nada lá. Depois de criarmos uma nova instância de sapatos quando estamos criando nosso JavaScript para executar a pesquisa real, a biblioteca de fusíveis será importante por enquanto, porque não usamos, a variável. variável ainda não foi usada. Então, por esse motivo, não tem sido importante para o empacotador. Então você precisa criar o recurso de pesquisa na barra de navegação. Então eu usei um bootstrap cinco navbar. Normalmente, não tenho a pesquisa na maioria dos meus sites. Então, por esse motivo, temos uma edição e estamos procurando adicionar uma foto aqui. Você pode personalizá-lo ao rolar para baixo, você terá que pegar todo o formulário. Vamos copiar isso. E, em seguida, vamos colá-lo após a tag de lista não ordenada de fechamento. Bem, então tem que passar e personalizar o HTML é a primeira coisa que faremos no formulário. Faremos o método. Usamos GET e, em seguida, ação. E é para lá que o formulário é enviado. E faremos barra de pesquisa de barra index.html, e essa é a página que acabamos de criar. Em seguida, vamos seguir em frente e personalizar a entrada para isso. Vamos ver o que o Google usa. Só não google.com. Vamos clicar com o botão direito e inspecionar. Vou dar uma olhada no que eles fizeram. Eles usaram o nome é igual a q, obtém q para consulta. Vá e defina isso. Desta forma. Quando pressionarmos o botão Ir, o botão Pesquisar Q aparecerá na URL com o conteúdo da entrada. E então podemos pegar esse conteúdo usando JavaScript. Normalmente, você usaria isso usando algumas linguagens de back-end como o PHP, mas neste caso, vamos usá-lo no front-end. E temos que usar o JavaScript para acessar a sugestão a partir do URL. E isso tudo está usando o Git porque ele colocou todos esses dados na URL. Vamos dar uma olhada aqui. facilidade de capitalização automática. O que estamos tentando fazer é desativar muitos dos recursos que são ativados automaticamente pelos navegadores. O próximo, eles têm 0s preenchimento automático e mais frequentemente, copiam isso. E, em seguida, corrija automaticamente. Para se livrar disso. Não vamos usar o foco automático porque não queremos que a caixa de pesquisa seja focada por padrão porque ela será apenas uma pequena parte do site. Mas vamos receber a verificação ortográfica falsa. Estou apenas mirando um corredor, coloco navegadores diferentes, vou tentar desligar todos os acessórios que eles ativaram por padrão. A última coisa que faremos é no formulário real adicionará pesquisa igual a função. Vai verificar isso no navegador. Em qualquer página do site, podemos colocar uma consulta no calor. Então você testa, por exemplo, pesquisa e nos leva para a página de resultados da pesquisa, e temos nosso teste q igual no topo. Por exemplo, aqui na página inicial e colocamos no Futurama. Em seguida, nos leva para a página de resultados da pesquisa. Temos uma API de consulta, então podemos puxar essa consulta para a página porque não há conexão direta. Estamos apenas carregando um IG estático. E então usaremos o JavaScript para pegar esse parâmetro, executá-lo pelo índice de todas as páginas. Faça a pesquisa real e, em seguida, produza algum HTML dinamicamente na página. É isso para esta lição, te vejo na próxima. 6. Recuperar parâmetros de URL: Vou analisar a recuperação dos parâmetros de URL com JavaScript. Abra OUT, como o salão AS. E vamos descer algumas linhas e colocar um comentário. E haverá params, função, função, e vamos chamá-lo de params. E então vamos colocar o nome do parâmetro. Agora entenda que, para a maioria das pessoas, começar a usar o JavaScript não será uma força. Eu entendo que isso não é um tutorial, que é uma introdução ao JavaScript, mas estou ciente do fato de que eu mesmo, que está assistindo este tutorial, não terá muita experiência com JavaScript. Então eu só faço o seu melhor para acompanhar e farei o meu melhor para tornar tudo o mais simples possível. O que estamos fazendo aqui é que estamos criando uma função. Nós chamamos isso de params. E quando chamamos essa função, por exemplo, abaixo, params, dentro de dizer a uma função qual nome, que principalmente obter, estará obtendo o parâmetro Q que estamos passando que através como uma variável. Então, o Q vai me deixar passar e você verá como isso funciona em um segundo. Agora, vamos criar uma constante, e essa é uma variável que não muda. Vamos chamá-lo de string de consulta. Você sempre deve CamelCase. Em suas variáveis, suas funções. A constante de string de consulta será igual à janela, pesquisa de pontos de localização. E o que isso fará é retirar o URL da URL da página. É como por que devo fazer para quando clicamos no botão de pesquisa que vai para a página de pesquisa. E temos nosso URL na parte superior da string de consulta. Coloque um ponto e vírgula no final disso. Agora, atualmente, o Visual Studio Code, ele é chamado de string de consulta em cinza claro. E se você colocar o mouse, ele dirá que foi declarado, que é o que está acontecendo, mas na verdade não foi lido. Também estou dizendo que o parâmetro name foi declarado com ele nunca foi lido. Então, usamos essas variáveis. Você vai vê-lo no escuro. Vou criar outra constante chamada Params de URL. Isso é meio que retire os parâmetros da URL. Para que isso aconteça. Vamos criar uma nova instância de libras de pesquisa de URL e garantir que você obtenha o capitalista correto que deve ser preenchido automaticamente para você se você estiver no Visual Studio Code. Temos que fornecer essa função, a string. E isso vai ser uma string de consulta. Essa é a constante que usamos crédito, você verá que nós apenas geocodificadores escolhemos que creditamos uma constante para que possamos tocar nisso. E não é mais cinza claro. Quando executamos essa função aqui, quando a chamamos, o valor será retornado no lugar se esta palavra, e para que isso aconteça, usamos uma palavra-chave chamada Return. Vamos retornar URL, parâmetros, dot get. E vamos usar nove. O que está acontecendo? primeira linha, estamos puxando o URL, a barra de URL e o navegador obterá peça após o ponto de interrogação para pesquisar amplificadores. Então, a partir daí, buscamos libras, só queremos um deles. Esse é o Q. O que estamos criando aqui é uma função reutilizável que você pode copiar e colar em qualquer aplicativo. Não tem q codificado nele. Isso é q, ou seja, a consulta de pesquisa para quando clicamos no botão Pesquisar, nós fornecemos Q e realmente chamamos a função HE para baixo. Podemos testar isso. Agora. Podemos fazer um console.log ou entrada. Faremos console.log por enquanto. Então, console.log. Então temos params q. A maneira que eu gosto de fazer isso é colocar backticks e vou colocar a busca. A consulta é que fazemos cifrão e um único preço claramente em torno do nosso código JavaScript real. Então, vamos adicionar código JavaScript. Normalmente você estaria colocando uma variável e podemos fazer uma função ou uma nova vida. Mas para textos, está dentro dos carrapatos traseiros. Então, há nossos ticks de volta para todo o texto. Nós embrulhamos nosso JavaScript, cifrão e os aparelhos encaracolados. Vamos salvar isso e verificaremos a consulta de pesquisa e salvá-la funciona. Vamos colocar testes lá e vamos pesquisar. Isso nos leva à página de pesquisa. Há um ponto de interrogação. Então, tudo depois do ponto de interrogação são as consultas e queremos apenas a consulta da fila, o q é igual ao teste. Você pode ter várias consultas lá. Neste caso, não temos. Mas com o diário escreva tudo. Então você tem algumas funções razoáveis que você pode usar. Agora os projetos, você clica com o botão direito do mouse e inspeciona. Tenho um console. Você diz que console.log tem Não seja solicitado que a consulta de pesquisa é, em seguida, é puxada no teste a partir do topo. E é isso que vamos usar para executar nossa pesquisa, verificaremos se é realmente uma consulta nessa barra ou se os usuários acabaram na página de pesquisa. Vamos fazer, vamos colocar outro comentário em B, verificar se uma pesquisa ocorreu. Vamos apenas nos livrar de todos os ticks que lá farão a constante e será uma consulta de pesquisa que será igual a params. Por exemplo, antes de ser testado, essa era a nossa consulta de pesquisa. Podemos acessar isso agora com essa consulta de pesquisa constante porque temos essas funções reutilizáveis que você pode copiar e colar em qualquer projeto e que extrai a consulta aqui e a consulta que estamos extraindo usa a consulta de fila e isso é bastante padrão para pesquisa. Usando condicional para verificar se uma pesquisa ocorreu. Se e depois, entre parênteses, pesquisa consulta. Vamos ver se há texto na verdade. Se, se essa função retornar alguns textos, isso significa que eu pesquiso na barra de URL. Essa função não retorna nenhum texto. Isso porque a busca não ocorreu. Então vamos começar com o se realmente aconteceu e depois faremos outra coisa. Vamos colocar um comentário em sua consulta de pesquisa. Vamos exibir uma mensagem. Se não, como ocorrer. Se eu pesquisar ocorreu, se houver uma consulta lá, adicionaremos a barra de pesquisa de consulta à pesquisa. Então, parece que é um site dinâmico. E então vamos executar a pesquisa. Vamos seguir em frente agora e fazer essas coisas acontecerem. Temos que fazer, temos que fazer alguns conteúdos aqui em cima. Então, faremos pesquisa, entrada, ponto do documento, obtemos elemento por ID. Vamos procurar a entrada de pesquisa JS dash. Em seguida, faremos resultados de pesquisa iguais a Document.getElementById por ID. Resultados da pesquisa Vgs. Link Volto ao nosso único botão, HTML. E você verá que temos nossa div com o ID dos resultados da pesquisa. Entraremos em nosso cabeçalho, volta à nossa entrada de pesquisa. E atualmente não há ID nele. Adicione um ID a ele. Entrada Audivelmente JS. Eu uso um traço JS antes de todos os meus IDs, que usei em JavaScript. Para que eu saiba que nunca devo remover esse ID, a menos que eu saiba exatamente onde ele está sendo usado em JavaScript. Sempre que vejo um traço JS em um ID, sei que não devo modificá-lo porque o JavaScript deixará de funcionar. A ideia é praticamente usada exclusivamente para segmentar o elemento em JavaScript. Temos dois átomos configurados. Vamos para a mensagem de exibição, exibindo uma mensagem primeiro. Para exibir a mensagem. São resultados de pesquisa simples. Dot InnerHTML é igual. Então nós só temos que colocar o HTML aqui. Podemos escrevê-lo. Por favor. Insira sua pesquisa na caixa de pesquisa. Acima. Coloque um ponto e vírgula no final da linha. Vamos salvar isso e vamos testá-lo. Vamos tirar a consulta. Você verá o que nossos textos lá agradam e colocará sua pesquisa na caixa de texto acima. Por que um pouco de preenchimento até o fundo lá, uma margem abaixo dessa div, abra nossa página de pesquisa. Algum preenchimento na parte inferior da linha, PB cinco. Vamos dar uma chance de adicionar a consulta à pesquisa na porta. Então, faremos informações de pesquisa. O valor é igual à consulta de pesquisa. Não vamos olhar para executar essa pesquisa. Salve isso e dê uma olhada. Voltaremos ao teste em casa. E você verá que o teste ainda está ativo nessa caixa de pesquisa. Você pode voltar e modificá-lo para, por exemplo, se o executarmos sem nada, recebemos nossa mensagem de erro. Digamos, por exemplo, o usuário acabou de terminar nesta página. Bem, agora o que eles têm que fazer para fazer a busca. O próximo que podemos fazer é colocá-los textos de iluminação que a equipe copiará isso. Coloque-o lá dentro. Vamos mudá-lo para carregamento. Alguns textos temporários. Teste isso. Temos carregamento e , em seguida, a pesquisa ocorrerá e os textos serão substituídos. É isso para esta lição. Vejo você no próximo. 7. Crie índice de pesquisa: Então, agora vamos analisar a criação de um índice de pesquisa, como eu insinuei antes, vamos criar esse índice inicialmente alinhado dentro do arquivo JavaScript. Dessa forma, podemos pesquisar diretamente e não precisamos nos preocupar com o código necessário para obter o índice de um arquivo externo. Mas, mais tarde, no curso, mostrarei como você pode dividir seu índice em um arquivo externo. Acelere um pouco as coisas, porque você não tem um arquivo JavaScript que é pesado pelo índice que permite que seu arquivo JavaScript seja carregado rapidamente. Mas, por enquanto, creditaremos em linha, facilitaremos as coisas. Vamos começar. Vamos usar o Scratch para trabalhar com nossos dados. A razão pela qual arranhamos em vez apenas variáveis simples é, aparentemente, ele funciona com o FASTA. Há poucas coisas que você pode usar o scratch fall para contornar as limitações no Qie Gei, mas estamos apenas usando apenas para pá. Agora vamos usar um arranhão líquido novamente para que a velocidade não seja necessária para ler em outras páginas. Essa é uma das razões pelas quais usamos o Scratch. Para criar um novo arranhão. Definimos uma variável e, em seguida, atribuímos a ela um novo arranhão. E então podemos usar todos os métodos que temos, sentar, obter e adicionar que vamos usar e faremos nossa variável. Eles vão atribuir no Scratch apenas para que ele funcione com os documentos. Em primeiro lugar, vamos criar nossa nova instância scratch. O que faremos no topo, estávamos definindo uma constante, vamos colocar um comentário lá. E faremos esse índice e esse é Jason. Sempre que fazemos nessas claras sobre isso. Então, coloque traços no início e no final para que não acabemos com nenhum espaço em branco extra. Vai fazer. Eles atribuirão dois pontos de arranhão igual a mu, arranhão. Dentro de qualquer passo de ponto de arranhão. Temos que definir a chave que estamos trabalhando e vamos chamar esse índice. E vamos atribuir um slot para que possamos continuar adicionando perdas de clipes. Nós vamos ponto zero. Estamos olhando para o índice k e vamos adicionar um slot, fazer você colocar um traço no final. Não vamos passar por nossas páginas e adicionar um pouco de Dada a essa fatia de oito páginas. Antes que possamos fazer isso, temos que definir quais são nossas páginas. Páginas com espaçamento duplo. Cólon é igual a u ponto, ponto, páginas normais. E isso é uma espécie de atalho que está incluído no cara HE. E ele adicionará todas as páginas irregulares do seu site à variável chamada Pages. Em seguida, vamos reduzi-lo com onde faremos. página é igual. Portanto, modificar a variável é o tempo. Fora. Páginas. Params dot private, não igual, que é exclamação igual a entrada faz com que você coloque um espaço no traço. Vai fazer é se você definir um parâmetro de particular e verdadeiro em qualquer uma de suas páginas, então eles não serão incluídos nos dados do conjunto porque estamos incluindo apenas páginas em que params dot private não está definido como true. Ou seja, se você não defini-lo, não o usará como verdadeiro. Você também pode restringir as páginas de conteúdo que você poderia usar.com, por exemplo, o tipo de página que você pode querer definir para dois produtos. Por exemplo, você pode olhar para cima, ele vai embora e você verá como isso funciona. Dentro do alcance de nossas páginas. E vou colocar o intacto antes de continuar cada página, vamos fazer um arranhão. Agora vamos adicionar um dicionário. No dicionário vai colocar na primeira semana, isso será um total. Vamos conseguir isso do título de ponto que você tem antes, o que nos disse que faz sentido. Em seguida, veremos um resumo que vem do resumo de pontos. Todas essas variáveis de ego incorporadas têm maiúsculas. Estamos olhando para o conteúdo. E normalmente você pensava que o conteúdo está cheio de tags HTML. Vamos usar o avião. Se você olhar para o conteúdo, verá que temos empresas e switches também. Vamos puxá-los para dentro. Então, faremos empresas. Maneira simples de começar com mais tarde, vamos torná-lo mais complexo. Termos. Empresas. Em seguida, as espécies serão pontos, params, espécies de pontos. E, por último, precisaremos do link, então usaremos o permalink para que possamos exibir a página inteira nos resultados seguros. Isso será feito por mililitro. Ideias normais, permanentes para encurtá-lo um pouco, mas queremos colocar todo o permalink nesses resultados F, assim como o Google. O gentilmente nada está realmente sendo impresso na tela. Então, vamos apenas colocar um comentário lá. E criamos esse índice com o Scratch quando realmente escrevemos dados em nosso JavaScript, especialmente agora que temos esses traços e início e fim. Isso evita que as linhas ou espaços do joelho estejam em um arquivo JavaScript de doze v. Agora, o que faremos é criar uma variável e dados a serem arquivados. E faremos índices const iguais. E vamos usar o Git. Então será scratch.mit.edu, um J. maiúsculo Estamos recebendo o índice k que estamos escrevendo para acrescentar isso lá. Vamos transformá-lo em JSON. Json. Se você não colocar vírgulas, vírgulas invertidas, comunistas duplos, volta marca qualquer coisa em torno disso porque não funcionará. Você tem que deixá-lo como está. E calor eu vou lidar com isso para você. Vamos colocar um ponto e vírgula no final, mas depois faremos um console.log. Se você fosse apenas colocar o índice de pesquisa lá, ele funcionará. Mas você não tinha uma sinalização porque console.log não funciona com Jason. Eu tenho que usar uma função e isso é o JSON maiúsculo em stringify. E você precisa abrir e fechar colchetes em torno de seus dados JSON. E para torná-lo mais óbvio, e colocá-los de volta, pegue dois pontos de dados JSon, e então temos uma string literal, cifrão, colchete encaracolado em torno desse javascript. Feche o suporte encaracolado, feche o carrapato traseiro. Obteve colchetes encaracolados em torno de JavaScript, ticks traseiros em todo o literal de string salvarão isso e vamos dar uma olhada no navegador, executar uma pesquisa e você inspecionando o console, você verá que Ele é puxado para nós. Dados Json. Vamos voltar torná-lo mais óbvio. Quantil inteiro farei um tick de volta, dois pontos de dados JSON e, em seguida, cifrão, colchete encaracolado. Em outro suporte encaracolado em todo o nosso dia de JavaScript voltaria marcar antes de fecharmos o colchete completo console.log e dar uma olhada nos dados JSON chegando lá em cima. Isso é o que vamos usar para pesquisar. Como você pode ver, é bem grande e não vai demorar mais. E o maior site, e por esse motivo será rastreá-lo em um seguido para um site pequeno sem, eu pensei que você pode deixá-lo em JavaScripts e você não teria muitos problemas com velocidade. 8. Crie função de pesquisa: Vamos criar a função de pesquisa e executar alguns pontos js para obter alguns resultados no site JS de taxa procurada. Em demonstração ao vivo, você diz que eu tenho o índice real em que os dados estavam pesquisando. E então o que temos que fazer é definir nossas opções e temos todo o slide padrão. Ele eles entrarão nisso porque eles são inadimplentes. Desde que as chaves que vamos pesquisar no índice real. Em seguida, temos que criar uma nova instância e temos que passar para ela o índice em que os dados estavam pesquisando e as opções que acabamos de definir. Em seguida, atribuiremos pesquisa de pontos fundidos a uma variável. E podemos acessar nossos resultados por lá. Se você quiser, você pode ir em frente e copiar a constante de opções. Então, por baixo do que já fizemos, criaremos uma nova função e chamaremos de pesquisa. Terá uma propriedade de dados que é puxada e aberta e fecha colchetes. Então podemos colar em nossas opções. Uma vez que eu gosto de modificar são as correspondências finais. Você pode passar por isso no site do fusível, e isso significa que o fusível continuará pesquisando mesmo que encontre uma combinação perfeita. E estamos dizendo que tem o comprimento do personagem correspondido. Vou definir isso para dois para que ele não corresponda apenas aos caracteres individuais íon impute, você acaba com alguns resultados e ignora a localização. Vou definir isso como verdadeiro, então ele vai procurar qualquer maneira nas cordas. E o limiar só precisa tornar isso um pouco mais fino, irá defini-lo para 0,4. Por enquanto, você sempre pode jogar com tantos. E olhar para nossas chaves definitivamente estava fazendo o total. E também estamos fazendo resumo, conteúdo, empresas e espécies. E estaremos refinando empresas e espaços mais tarde. Agora vamos dar uma olhada em atribuir alguns brancos ao estojo porque algumas crianças são menos importantes ou essa parte da culpa poucos pensaram que JS olha para o comprimento do bolo. Misture. Teclas que são mais curtas, que lhes dão uma maior importância e Kaizen por mais tempo, por exemplo, o conteúdo que é bastante longo, você vai dar menos importante e nós temos um breve resumo e então ele terá mais importante. Mas também temos empresas e espaços lá. Eles não são tão importantes quando se trata de procurar um personagem. Então, o que faremos é criar alguns mapas. E vamos precisar de um nome k, que é resumo, depois de uma chave branca. E você tem que apontar para menos de um porque o total foi dado um padrão de um. Então, faremos nosso resumo 0,8 porque é muito importante para a Tata. Vamos apenas colocar um comentário lá, lembrando quem vai para o padrão branco de um. Não precisávamos nos preocupar em mudar isso. E então o conteúdo dará isso 0,6. Em seguida, faça alguns testes e mudando as empresas, vamos entrar em branco de ponto zero para isso importante e veremos o que acontece. Faremos alguns testes no final. Em seguida, precisa criar nossa nova instância. E então retornaremos nossos resultados. Cole isso abaixo da variável de opções. Se você olhar de perto, temos fusível é igual a novos problemas. E estamos passando a lista e as opções. Colocamos opções já aqui, mas não temos lista. Na verdade, a lista será dada. Dada. Isso é para todos esses dados. E então temos nosso padrão de busca e vamos configurar isso. Também vai estourar o padrão. Então vamos voltar ao que estamos chamando de nossa função. Vamos adicionar nosso padrão de pesquisa e vou pesquisar o padrão é a variável chamada consulta de pesquisa. Então, adicione isso em. Agora, em vez de retornar, haverá novos resultados constantes. Em seguida, verificaremos que tipo de dados estão sendo retornados. Então, faremos console.log. E depois os resultados. Javascript nos dirá o que estamos vendo. Língua Javascript, eu disse, o que está sendo retornado como tais resultados é um objeto. Então, vamos em frente e faremos um console, registraremos esse objeto e vamos verificá-lo. Vamos fazer é. Em vez do topo dos resultados, um literal de string, os resultados são marcados novamente. E, em seguida, imprimiremos nosso objeto de resultados em uma string. Vamos dar uma olhada no navegador. Há nosso objeto de resultados. Em seguida, na próxima lição, veremos como imprimir esses resultados via HTML na tela. 9. Mostrar resultados: Agora, veja como compartilhar os resultados seria imprimir HTML na janela do navegador via JavaScript. Se continuarmos, adicionaremos um comentário rápido t resultados, que é um objeto. Vamos nos livrar desse console.log. Preciso mais disso. E chamaremos uma função e vamos chamá-la de mostrar que os resultados passarão. Se continuarmos, adicionaremos um comentário rápido t resultados, que é um objeto. Vamos nos livrar desse console.log. Preciso mais disso. Chamaremos uma função e chamaremos de mostrar resultados. Vai passá-lo para compartilhar resultados. Os resultados farão com que nossa função compartilhe resultados. Vamos acessar os resultados. Os motores colocam uma direção sobre ele. Podemos encontrá-lo facilmente. A primeira coisa que faremos é verificar se há uma propriedade length nos resultados. Começaremos com se não houver resultados. Portanto, se não, a explicação resulta no comprimento do ponto porque os resultados sempre existirão. Verificando se há um comprimento nele. Sempre há algum tipo de resultados gerados. A variável, vamos apenas verificar se há algum, se não houver links, fará o que está chegando primeiro e depois os resultados. Resultados da pesquisa. Dot innerHTML é igual a não. Resultados. Encontrado. Isso é uma corda. Apenas para reformular a variável de resultados da pesquisa. Encontramos isso no topo. E essa é a nossa div onde nossos resultados de pesquisa são exibidos. E anteriormente já escrevemos para ele se não houver consulta de pesquisa, estamos marcados com a consulta de pesquisa do usuário na caixa de pesquisa. Agora eu escrevo isso, nenhum resultado encontrado. Então faremos um outro. Vamos ver se há resultados. Então, vou colocar um comentário nos resultados encontrados. O objeto de resultados. É uma matriz. Nós faremos, é que veremos cada objeto nessa matriz. Fará os resultados para cada um. Isso está usando a sintaxe ES6. Deslocar. O que faremos é deixar claro nosso HTML começar livrando-se da pesquisa. A pesquisa de textos fará com que uma string em branco, uma string vazia. Vamos fazer, creditaremos constante temporária. Vamos chamar isso de igual ao elemento. E então faremos resultados de pesquisa. Dot HTML plus, é igual. Além disso, significa que estamos adicionando a ele. É uma abreviação para adicionar. A mão longa seriam os resultados da pesquisa. Dot InnerHTML é igual a resultados de pesquisa mais saída. Como você pode ver, é muito mais curto usar mais, igual ou apenas adiciona. Vamos salvar isso. Vou dar uma olhada. Vou ter que transformar os objetos em cordas para comê-los, então faremos isso. E então tivemos que colocá-los em HTML. É temporariamente que usaremos stringify de pontos JSON no elemento apenas para que possamos vê-lo. Você pode ver que temos agora outono e dentro do outono, temos todas as informações que retiramos. Alguns caras que compraram conteúdo de empresas. Role cuidadosamente o conteúdo passado. Tem permalink, resumo das espécies, total. Vamos passar e vamos tentar extrair algumas informações disso. Nós vamos fazer isso e constante e ele aparecerá em todos esses itens. Então, temos um resumo total. Permalink. Conteúdo, empresas, espaços, colocá-los em preços. E isso será igual elemento ponto outono porque tentamos acessar tudo dentro do outono. O que faremos pela nossa saída, criar um literal de string que os ticks podem começar a colocar em alguns ticks grosseiros. Então, faremos o título, Lexis, total. Pague uma nova linha só por enquanto. Vamos fazer permalink. Fará empresas. Você notará, enquanto eu faço isso, o cinza tende a preto, que significa que variáveis y estão sendo lidas. Então faremos espécies. Em resumo. Em seguida, conteúdo. Isso vai dar uma olhada. Agora eu tenho algumas informações muito mais legíveis, títulos e essa é a melhor combinação com sua família, empresas, espécies. E então temos nosso resumo e, em seguida, entramos no conteúdo. Vocês, há um problema. Não colocamos uma nova linha antes título, então vamos consertá-la. Nova roupa para a próxima entrada. Você verá que temos uma segunda entrada nas terceira 13 partidas surgem. Agora vamos ver a criação de algum HTML para formatar nossos resultados de pesquisa. Por exemplo, no Google aqui, e veremos como os resultados da pesquisa estão sendo formatados. Veremos as imagens em uma lição posterior neste curso. Mas vamos olhar para colocar o permalink e eles se movem no título, o resumo. Então, vamos em frente e vamos resolver isso. Parece o que fizemos. Faremos uma classe div de PB livre para adicionar algum preenchimento à parte inferior. Acolchoamento. E faremos uma classe div igual a linha, classe é igual a chamada, adicionaremos mais duas colunas mais tarde quando olharmos para colocar uma foto, nosso título no HCI substituirá os bootstraps. Margem, colocará o toque B1 com menor. Então, a partir daqui, podemos colocar o título, este é um fluxo amplo literais são realmente úteis. Então, barra infantil h3. Em seguida, faremos nosso link novamente para a margem abaixo. Ele sempre pode personalizar. O controle deslizante. Vai colocar um custo lá dentro. E o link escuro, porque eu gostei do padrão Bootstrap, exibirá o link permanente chamado link o título também. Então eu posso copiar isso. Feche o cara. Estou colocando um resumo, esboço os corações mais, então eu coloco o resumo e agora vou colocar as empresas e os espaços nem os espaços não são fornecidos. Ele voltará como indefinido. Então, coloque isso por enquanto. Então, com essa empresa por enquanto e mais tarde , vamos olhar para torná-la plural. Singular. A empresa colocará espécies. Podemos excluir tudo. Acima. Roupas normais são etiquetas. Vamos trazer isso de volta porque eu fui tempero. Salve e dê uma olhada no navegador. Vamos dar uma olhada. Ótimo, acho que gostaríamos de nos livrar do subjacente no link para voltar e mudar a classe. Vou deixar o título na cor primária. É um ótimo começo. A única coisa que eu ia dizer é que vamos acabar com um problema em que, se uma empresa não tiver sido definida, se você aparecer como indefinido e se houver várias empresas, então vamos encontrar alguns problemas lá com coisa de pluralizar, mas vamos corrigi-lo na próxima lição. Por enquanto. Vamos completar qualquer um. Se você não está tentando lidar com dados que surgem sobre raios, então você praticamente resolveu sua pesquisa. 10. Criar links para taxonomias: Vamos analisar a criação de links de taxonomia. E diremos que pluralize condicionalmente o título para a taxonomia. E vamos escondê-lo completamente se a taxonomia não existir. Então, primeiro precisamos fazer é modificar nosso índice. Dentro do alcance. Vamos criar uma nova variável. Vamos chamá-lo de Termos da empresa e inicializá-lo mais e todos os pontos iguais recebem o Tim, estou procurando os Termos da empresa. Indo criar um slide em branco. Basta chamar a TI. As empresas vão inicializá-lo e será apenas um slot por enquanto. Na verdade, você coloca traços e estilo neles para que não acabemos com espaço extra. Agora o arquivo JavaScript e o intervalo IVR fora túmulos. Na marcação, aproveitando traços de colocar o tempo todo. Então, toda vez que iterarmos, vamos adicionar à fatia da empresa. Então, faremos empresas iguais a empresas e , em seguida, mais fixadas. E então vamos anexar um dicionário e colocaremos no total. Total. E então faremos um link PM real. Rel, link permanente. Eu não estou fazendo família porque é muito mais tempo que podemos economizar com rapamicina, ter menos dados, o permalink para o resultado real da pesquisa porque eu queria exibi-lo na tela sem pensar fim de semana limpe isso um pouco. Então, vamos colocar alguns colchetes em torno desse título. Em seguida, coloque um cachimbo. E o primeiro que faremos é olhos humanos para se livrar de qualquer traços dentro do título. Em seguida, faremos o título para maiúsculas cada letra. Queremos isso não apenas para empresas, mas também para espécies. Usamos Alt click. Em seguida, vamos descer para o nosso ponto de rascunho adicionar. Em vez de dot powerapps, empresas de ponto, serão empresas de cifrão em Dallas em espécies para acessar as fatias que acabamos de criar. Vou guardar isso e então vamos dar uma olhada no caso de busca. Agora precisamos olhar para segmentar o que acabamos de crédito. Então, temos dentro de empresas e dentro de espécies, agora temos empresas de títulos de pontos e também para as espécies, temos título de pontos de espécie. Então, vamos rolar para baixo aqui. O total da empresa que possamos acessar essas mesmas quatro espécies. Estou falando. O que faz console.log. Veremos o índice de pesquisa e os ticks de volta. Portanto, é um literal de cordas. Eu disse índice, essa é a nossa descrição. Sinal de cifrão, chaves abertas. Não podemos simplesmente escrever o índice de pesquisa porque ele não será exibido como um rosto no objeto, executará a stringify de pontos JSON do capital. Fui índice de pesquisa de colchetes. Salve-o no navegador. Clique e inspecione nosso índice de pesquisa. Se formos para Mostrar mais, então vamos copiá-lo. Crie um novo arquivo com Control N, ID mais alto em e, em seguida, Alt, Shift F para Formatar. E então vamos dar uma olhada na estrutura dos dados. Temos conteúdo, resumo e segmentação total e peso. Bom. Apenas com conteúdo, desculpe e total. Mas para empresas e espécies, seu total, por exemplo, o total de espaços é um filho de espécies. Então, nós direcionamos isso com o título de ponto de espécie. Para o total da empresa, temos como alvo o título de pontos das empresas . É assim que eu configurei. E, portanto, removerei o console.log. Venha para isso. Se fosse por código de produção, eu tomaria a linha. E então entraremos em nosso HTML. Não éramos companhia em espaços lá. O que faremos dentro do foreach fará uma função. Vamos chamá-lo de Taxonomia HTML. Passaremos o nome da taxonomia. O título singular. O plural total. Plural, registro. Verificaremos que na verdade é um comprimento na taxonomia. Para verificar essa taxonomia. Taxonomia. Links. Comentário. Impressão. Uma matriz de links. matriz de taxonomia é igual a função, ponto de matriz que cria uma matriz para nós. E estamos criando isso diretamente de nossos slots de taxonomia que passamos por eles, o que também é chamado de array. E então temos que olhar para o valor que vamos usar. Nossa função. Em seguida, usamos retornado para adicionar o seguinte à matriz que criamos ao córtex em mim REI, literal de cadeia de crédito com ticks de volta. Não fará HREF igual a b, valor ponto m links que adicionamos reabrir vinculados ao dicionário. O dicionário se torna valor. Então vamos colocá-lo no título. Título. Olhe para o nosso total singular ou plural. Deixe taxonomia, total, igual. Total, solteiro. Faça uma condicional. Se o comprimento do ponto de taxonomia for maior ou igual a dois. Taxonomia. total será igual. Plural total. Desculpe se há dois ou mais átomos em nossa taxonomia, certo? Então estamos olhando para um total pleural. Agora é outra coisa e isso é o que se o título plural não for fornecido? Então, podemos realmente lidar com isso. Vamos fazer o total n. Deixe-me colocar alguns suportes em torno da operação. O total pleural foi fornecido quando chamamos taxonomia HTML. Se houver dois ou mais automatizados, sabendo certo, mudaremos nosso título de taxonomia. Coloque-o na pluralização. Total, gerará HTML. Taxonomia, HTML. aula de tomada de volta é igual a Pb. Mais uma propriedade e pequenos textos. Vamos colocar nossos textos de taxonomia. Então, o total é singular ou plural. Total de taxonomia. Em seguida, coloque nosso texto em mim. Tudo bem, vamos nos livrar do pequeno agora com essa matriz, queremos colocar vírgulas entre cada item na matriz para que possamos realmente datar a estrutura e colocar comentários entre ela com junção de pontos e, em seguida, especificamos o espaço de cores. Tudo isso tem que entrar no condicional. Se, na verdade, houver um comprimento para taxonomia. No início da função imprimirá uma string em branco. Deixe HTML. Corda em branco igual. Então, se houver termos de taxonomias presentes, vamos adicionar algum HTML a ele. E depois da condicional, retornaremos taxonomia o HTML, seja uma string em branco ou se adicionamos algum HTML a ele. E depois fecharemos o neural. Tenha muito cuidado, porque se você costumava trabalhar com Emmett, você realmente não precisava. Feche. Tags Html. Acontece para você. Podemos fazer é que podemos entrar em nosso HTML aqui embaixo. E começaremos com as empresas. Coloque a função HTML de taxonomia. Então temos um passe agora opções. A primeira é taxonomia. Então, qual é a taxonomia? taxonomia vai ser empresas. As empresas serão a matriz que estavam chegando. Se você for, então temos que olhar para o total singular e o total fornecer a eles uma string. Então pensado, empresa como singular, coma, empresas como plural. Então, abaixo dele. Vamos fazer isso de novo. Vou passar em espécies. O total será espaços para singular. E porque também é para o plural, teríamos que nos preocupar em fornecer sua liberdade condicional. Porque se a razão pela qual eu plural, este passo não acontecerá através disso você singular para ambos. E vamos pegar o empréstimo para espécies, e então vamos salvá-lo e dar uma olhada no navegador. Temos nossos links sendo puxados. Vamos adicionar alguns dados extras. Por exemplo, empresas sob Bender e diremos que se ele aparecer em coma, entrar em nosso conteúdo e entraremos em personagens em Bender. E sob as empresas o colocará em um segundo. Então, vou colocar uma vírgula. Ele só vai fazer uma. Eu gosto de companhia. Salve isso. Agora temos a empresa de testes chegando. Na verdade, links clicáveis e todos nos levam à página para ver o termo da taxonomia. Vamos ver se clicamos em dez páginas sexuais. Podemos ver quais outros registros compartilham esses dados de volta e eu vou fazer essa empresa de teste. Se você estiver com problemas para fazer com que ambos os termos acamperem no navegador. Essas são algumas maneiras de consertar isso. Primeiro, facilmente podemos matar o Hugo, diga bem, com o pino lá ou controle C, reinicie o servidor. A próxima coisa que podemos ver para corrigi-lo é clicar com o botão direito do mouse e inspecionar. Em seguida, vá para a rede e os cookies que vou armazenar em cache. E, enquanto você ainda tem a tela aberta, as ferramentas disponíveis, mantenha pressionado o botão do mouse na atualização e vá para uma carga de hardware. Isso fará o melhor para obter dados totalmente novos do Hugo. Já removi esse centro de registros, posso vê-lo lá. Mas se você seguir uma ou ambas as etapas, provavelmente resolverá seu problema. Aula de certificados. Na próxima lição, veremos adicionar fotos aos nossos resultados de pesquisa. 11. Adicione imagens aos resultados de serch: Se eu olhar para adicionar fotos aos nossos resultados de pesquisa, examinamos o conteúdo, você notará que as imagens estão sendo configuradas como recursos pagos. No teto, as imagens si estão sentadas ao lado dos arquivos de markdown. O que vamos fazer é querer, antes de tudo, olhar para mudar nosso índice de pesquisa. Então, vamos adicionar algumas fotos e a resposta dentro do intervalo criará uma nova variável chamada image. Só o transformará em uma string em branco. Por enquanto. Começaremos verificando se existe um parâmetro de imagem. Só por um minuto. E, em seguida, verificaremos se temos pelo menos uma imagem definida naquela maior ou igual ao comprimento das imagens de ponto. Se for igual ou maior que um, será colocado na marcação, usaremos um chicote que é como um if. Recursos ponto obter correspondência. E o Tim será correspondente será o primeiro item definido em powerapps de ponto. As páginas de pontos serão o item de índice 0. Marcação. Vamos usar nossa variável de imagem que inicializamos Alia, pensamos, preenchemos. E vamos tentar o tamanho de 120 pi e vamos redimensioná-lo por uma hora a 200 e largura. Vamos colocar alguns traços nele para evitar espaço extra em branco. Em seguida, converteremos nossa variável de imagem em um link permanente relativo, a hipoteca para baixo na imagem do dicionário. Imagem, que na verdade é um permalink relativo permalink. Salve isso em nosso HTML. Nós modificamos nossa coluna, fazemos isso S ele e colocamos outra coluna no SM2. Sempre podemos mudar isso se não funcionar. Classe Div é igual a chamada. Sam vai fazer quatro, e depois faremos col, md. Essa mudança aqui também. Pule nossa imagem na imagem. Um g de fluido de traço. Então entramos em nossas constantes e muito mais. Quer dizer, vamos salvá-lo e dar uma olhada no navegador. Lá. Quero dizer, está chegando. Vou dar uma olhada em redimensionar a tela. Isso é no pequeno. E então, quando ficamos muito pequenos, e depois chegamos ao pequeno, ele vem como quatro. Recebemos um MD. Ele mudará para dois e você pode personalizá-lo como quiser. Você pode extrair imagens que são recursos de página. 12. Índice de pesquisa separado: Vou separar o índice de pesquisa da queda do JavaScript e em seu próprio arquivo JSON. Acelere o tempo de permissão do arquivo JavaScript. Faremos, entraremos em layouts e criaremos uma nova pasta e chamaremos de índice de pesquisa. Em seguida, eles farão um arquivo chamado JSON de ponto único . Estamos entrando em nossa busca. Dot js destacará tudo o que estamos usando. Para nosso índice de pesquisa. Vamos cortar isso, colá-lo no arquivo JSON de ponto único. Você terá que se livrar desse JavaScript. Lonnie e o ponto e vírgula, a limpeza do arquivo JSON para que ele não seja minificado. Há uma opção que podemos usar e temos que passar em um dict. E então a opção é recuo. Essa é a quantidade de recuo. E nossos dois espaços preferidos que você pode colocar. Se você for para o espaço. Recuar uma pessoa e tanto salvará isso. Precisa entrar no conteúdo. E faremos uma nova pasta chamada índice de pesquisa. Fará se a data do ponto do índice do código. Índice de pesquisa total, JSON. Índice ensinado. Privado é verdade porque não queremos que ele apareça nos resultados de pesquisa. Agora alteramos o formato de saída. Fazemos isso, produzimos parte da foto será HTML. Não queremos isso, só queremos JSON. Agora você pode fazer isso na busca. Você pode colocar saídas de HTML e JSON. Mas se você fez meu curso de SEO, você terá um meta para o formato de saída alternativo. E não queremos deixar os mecanismos de busca agora que também temos esse índice, por isso estamos fazendo um arquivo separado. Vamos esquentar usando particular igual verdadeiro. Ele não entra nos resultados da pesquisa. Ou se você fez meu curso de SEO, ele também não aparecerá no sitemap. Se você conseguir descobrir que, então, descerá e nós executaremos render para disco div. E vamos dar uma olhada em nossa pasta pública. Porque podemos ver o que acontece enquanto a dose de sua corrida. Teremos procurando o índice de pesquisa. E então você pode ver a saída. E foi recuado com dois espaços. Onde quer que uma etiqueta normalmente esteja dizendo. Se não incluíssemos essa opção de recuo , isso não aconteceria. Teria sido basicamente identificado que isso é bom porque ele será modificado quando for exportado. De agora em diante, você deve usar a opção do balcão de referência se estiver tentando testar a funcionalidade de pesquisa. Porque se você usar o servidor de desenvolvimento padrão, ele não compilará o índice de pesquisa porque o navegador não solicitou a queda. Por esse motivo, você deve usar renderizar em disco. Dessa forma. Ele renderizará todos os arquivos para a cota pública. E da seguinte maneira eles estão prontos para ir. Passar pelo traço da bandeira, traço renderizar para DSC com vocês disseram. Então, se eu executar as renderizações, essa produção que inclui o comando minify, voltará para a pasta pública, abrirá nosso index.js e você percebe que ele foi minificado. Você tem JavaScript ou CSS minificado branco. Isso significaria se eu entrar, mas unificará textos básicos como XML, HTML, JSON, etc. Vou entrar em nosso ponto de pesquisa js. Em vez do índice de pesquisa, veremos obter índice de pesquisa JSON x. Isso é solicitações HTTP XML que vamos usar. A primeira coisa que temos que fazer quando estamos usando o XHR, temos que criar uma nova instância. Então crie nossa função. Jason primeiro olhará para o caminho que vamos conseguir. Em seguida, faremos a função de retorno de chamada e a função de retorno de chamada de erro funcionará. Xhr é igual a nova solicitação HTTP XML. Vamos colocar um comentário sobre isso. A segunda coisa que faremos é abrir, configurar. O XHR. Diz que temos que fazer quando estamos usando o XHR, temos que criar uma nova instância. Então crie nossa função, Jason. E primeiro veremos o caminho que vamos conseguir. Em seguida, faremos a função de retorno de chamada e a função de retorno de chamada de erro fará XHR igual a nova solicitação HTTP XML. Vamos colocar um comentário sobre isso. A segunda coisa que faremos é abrirmos, configurar o ponto XHR aberto para o método em que obtemos. Em seguida, o URL para o caminho será feito é enviá-lo. Faremos uma condicional. Os dados são enviados e recebidos. É XHR. Em carga. Você pode usar o start on load. Mas o problema com o ponto onload é que você tem um status de sucesso 201º. Você tem outros números de status para falha e todos eles estão carregados. Você também pode fazer o ponto XHR, ponto no tempo limite. Mas, para o propósito desta aplicação, isso é bem simples. Temos um status de 200 e temos outros status. Faremos ponto onload end e, em seguida, criaremos uma função. Se o status XHR for igual a 200. Isso é suposto que o sucesso serve. Para um arquivo. O sucesso fará com que os dados const sejam iguais a JSON, não passarão texto de resposta de ponto XHR. Em seguida, faremos se o retorno de chamada tiver sido fornecido, estamos em retorno de chamada e mais arquivos de dados passantes executarão a função de retorno de chamada de erro. Len gritou a função de retorno de chamada de erro. Então, vamos chamá-lo de erro de obtenção. Por exemplo. A função fará resultados de pesquisa ponto era da conectividade HTML. Então temos que entrar no que estamos chamando de busca. Em vez disso, vamos buscar o JSON. Então, vamos executar o GetJSON e colocá-lo em um caminho, o retorno de chamada e o retorno de chamada de erro obter o caminho JSON. Então, será ponto de índice de barra de índice de barra. E você pode ver isso aqui à esquerda em nossa foto pública. Em seguida, temos nosso retorno de chamada, que será pesquisa e nosso retorno de chamada de erro, que será um erro. Agora, se você entrar na função de pesquisa, notará que tínhamos que fornecer um padrão que não está mais acontecendo. Vamos nos livrar disso. Os dados ainda estão sendo empurrados de dentro para fora. Callback com dados que ainda estão sendo enviados. E vamos entrar em cada padrão e mudaremos isso para consulta de pesquisa. A consulta de pesquisa permanece a mesma. Isso nunca muda. Não depende da função anterior que usamos para chamar a pesquisa. Então está tudo bem. Podemos apenas codificar isso. Vamos dizer que vou dar uma olhada no navegador. Vamos trabalhar, vamos analisar e simular um problema de conectividade com os usuários que a Internet corta antes que o arquivo de índice seja baixado. Vamos modificar esse nome de arquivo. Olhe. E você verá que ele aparece como era da conectividade. Voltaremos e vamos consertar isso. Há uma última coisa que faremos então é configurar o Tommy. Xhr dot Tawny fora. Por enquanto, usaremos um código variável, Tommy no topo, onde definimos a função, colocamos uma variável de tempo limite e podemos colocar um padrão aqui. Então, coloque quatro segundos, em milissegundos, viria em quatro segundos como nosso padrão. Então, se não especificarmos a hora e ele disser, por exemplo, você coloca em três segundos. Se isso não for especificado, tudo bem por causa da nossa configuração padrão. Salve isso e tudo está pronto para começar.