Cómo crear una función de búsqueda para tu sitio web estático de HUGO con Fuse. js y JavaScript

1. Introducción: Hola, Shawn, mi desarrollador de sitios web y profesor y bienvenidos a mi curso de búsqueda con Hugo. Estoy emocionado de traerte este curso ya que es un curso más solicitado en Skillshare, es si conocer una búsqueda dinámica en tu página web al igual que Google, pero con una estática, ustedes lo vieron. A lo largo del proyecto del curso. Te mostraré cómo configurar un sistema de circuitos aquí de nuevo. Y estarás generando dinámicamente los resultados usando JavaScript y biblioteca difusa dot js. Con una pequeña cantidad de JavaScript, ustedes dijeron que Emocionado puede actuar igual que un sitio web dinámico codificado en el lenguaje back-end como PHP. Nos vemos en el curso. 2. Comencemos: Empezar. Hagamos SÍ, incluso empezar, puedes descargar estos pensados que él dot archivo zip y extraerlo. La otra opción es que dejé el enlace para el repositorio Heat Hub en la rama maestra, que aparece por defecto. Puedes descargar allí un archivo zip para el código. Una vez que tengas ese código abierto en Visual Studio Code, toda la foto, tendrás que arrancar una nueva terminal y ejecutar el comando npm install. Lo que eso hará es que entrará en el archivo llamado package.json, y mirará las dependencias y las instalará en una carpeta de archivos llamada módulos de nodo. En particular, instalará la versión de Hugo, cual se especifica aquí. Si vas a la página web y puedes mirar cuál es la versión más actual y en realidad puedes cambiarla a una nueva versión de Hugo. He configurado esto así que simplifica el proceso de instalación. Oigan chicos, no tienen que preocuparse por hacerlo en un montón de guiones en el lado izquierdo. Estarán corriendo en base a la versión de Hugo que se ha instalado en los módulos Node. Realmente rápido. Tenemos el día del script dev que usamos para agregar la vista previa del servidor dev para ejecutar caídas que tienen el parámetro de borradores de ella o la fecha que es en el futuro. Nos han facturado por construir a la carpeta pública. Tenemos render en disco que es muy similar a construir, excepto que en realidad estás ejecutando el servicio para que puedas verlo en el navegador al mismo tiempo, tenemos div, preview y producción de opciones allí para escrito en disco. La comprobación de Npm es para actualizar dependencias de NPM, pero no será Hugo. Y post install es descriptivos corridos después de que te topas con él puesto, que instala te vas. Si buscas lo falso para cualquier lección posterior, solo tienes que seguir el enlace al repositorio de GitHub y luego cambiar la sucursal no lo hace por ejemplo, tenemos un problema en menos de cuatro rama para. Después a partir de ahí, puedes descargar la carpeta zip para esa lección. Si estás tratando de subir tu trabajo a GitHub, tienes que asegurarte de eliminar la carpeta y luego volver a ejecutar el comando git en ella. Después de haber eliminado esa carpeta doc. Por lo que se deshace de toda mi historia personal conseguir y luego puedes escribir la tuya propia. De lo contrario, intentará subirlo a mi repositorio Git. Y no sucederá porque no tienes comisiones para que se asegure de que docx mantenga carpeta si estás tratando de subir tu trabajo a dot to get o GitHub. De lo contrario, te veré en la próxima lección. 3. Añade fuse.js: Así que vamos a saltar a la derecha y agregar enlace Vue.js en el bloque de sección de resultados. Vamos a seguir adelante y vamos a usar npm para instalar fusible dot js. Así que vamos a copiar ese comando ahí. Mis caídas, he estado como te mostré en la sección de empezar, haremos una nueva terminal y pegaremos ese código en. Y ¿ instalará npm el paquete? Dirás que sólo se ha añadido un paquete. No hay dependencias en los js de punto fusionado. Vamos a seguir adelante ahora y echar un vistazo a cómo vamos a importar Vue.js. Diferentes construcciones que podemos usar. Bueno, mirando las construcciones de módulos ES, han tenido bundle moderno ya que los paquetes ESM o ES6. Y hay algunas opciones. Tenemos la completa y básica, y luego tenemos las versiones minificadas. Vamos a usar minified porque hay algo mal, al menos con la versión no modificada. Entonces podemos al menos galón y echarle un vistazo fácilmente. Desplácese hacia abajo, verá que la versión completa incluye operaciones de búsqueda extendida y consultas lógicas. No estamos cubriendo los de este curso. Si los necesitaras, tendrías que actualizar a la versión completa. Pero hasta entonces vamos a usar la compilación básica para hacer las cosas mucho más fáciles. Hemos puesto estas tarifas básicas de importación de texto T de punto fusionado js. Vamos a copiar eso. Y luego haremos una nueva carpeta llamada assets. Y una carpeta dentro ese fresco JS y va a componer nuestro archivo Buscar punto-dot-dot, AS llamaremos a nuestra búsqueda de archivos, jot pegue ese césped en. Pero luego regresaremos y agarraremos punto básico ASM dot js. Ahora vamos a trabajar donde esa caída realmente sale, se abrirán módulos de nodo. Y el fuselaje ES. Y lo tenemos y podemos ver que deja ahí dentro. Por lo que tenemos que modificar, ser fundido slash de puntos. Ese es el seguidor después. Eso lo guardaremos. Y ahora necesitamos realmente importar este archivo JavaScript a nuestra página de búsqueda. Lo haremos, vamos a entrar en los diseños y parciales y pie de página de guión. Abajo por el fondo. Nos dimos la vuelta y condicional P500 q dot top con un mayúscula T. Se buscará la parte superior. Pondré el n etiquetado enseguida. la función básica se llamará búsqueda colon igual, porque estamos inicializando la variable recursos dot get the capital G. Y esto es relativo al titular de los activos. Entonces es js slash GIS. Ese es el código básico. Vamos a hacerle un poco más. Vamos a usar un árbol falso, guy pipes, que está creando un recurso a partir de una plantilla. Porque en algunas lecciones Tom va a estar creando un índice. Y para mantener las cosas simples, vamos a estar usando el índice en línea en JavaScript. Así que de nuevo, cada mejilla te permite realmente generar parte de ese JavaScript para nosotros, C, índice de todas las páginas y todas las palabras clave y textos y categorías y demás. En este sitio web. La forma en que funciona es lo que nuestro código aquí abajo usamos. También hay parada buena, deberíamos acabarnos de hacer. Y luego después de eso, vamos a usar recursos dot execute como plantilla. Tenemos nuestro archivo de salida. Tengo que proporcionar el punto dos. Se copiará eso. Poner un estallar, lo hará salir como el mismo slash dot JS. Eso proporcionará el punto. Y luego vamos a ejecutar js dot build. Y luego vamos a correr huella digital. Tienes problemas para encontrar el personaje de la olla, It's Shift y el botón de arriba Entrar. Estábamos en huella dactilar. Se va a añadir un hashtag al otoño. Y eso es genial para cuando generamos un nuevo archivo, el falso sin aliento para descargar la versión más reciente del archivo JavaScript, también podemos agregar una propiedad de integridad. Utilizamos integridad punto-punto-punto para generar el hash de integridad. Si haces mi curso sobre construcción de JavaScript, aprenderás todo sobre estas cosas. Entonces vamos a poner una etiqueta de script. Entonces vamos a hacer fuente de script. Eso será permalink hace que tengas capital R y el capital P hará integridad. Será tal punto, puntearlo con una D. mayúscula No tengas integridad. Ahorra eso. Y lo haremos, en realidad no podemos ejecutar esa estadística porque no tenemos una página con la parte superior de búsqueda que se acerca. Entonces lo guardaremos y te veré en la próxima lección. 4. Opciones de creación: Ahora vamos a estar sentados algunos JavaScript con opciones de construcción. Tú vas, vas usa ESBL para construir JavaScript. Y estamos viendo diferentes opciones para el desarrollo y la producción. Y también mirando el código dónde asegurarse de que sea compatible con la mayoría de navegadores por ahí. Entra en nuestro pie de página de script, HTML. Y luego justo encima de donde hemos definido la búsqueda, vamos a crear una nueva variable llamada Ops, opciones y lo que llamamos un igual. Y luego crearemos un diccionario con dict. Entonces después de JS pato billed insertará nuestra variable de opciones. Ahora vamos a enlazar a la página de hago docs para la construcción de JavaScript. Digamos que usa ESBL y su número de opciones que vamos a estar mirando. El primero será minify para la producción. Vamos a estar modificando nuestro código para reducir el tamaño. También puedes hacerlo con aumento de activos porque obtienes tuberías pero no obtendrás el mismo resultado. Obtenemos un resultado mucho mejor con ESBL ya que está diseñado para ES6. La siguiente opción que vamos a hacer es que estamos regenerando un mapa fuente en línea durante el desarrollo para que podamos ver dónde viene nuestro código si estamos tratando de depurar. El siguiente es objetivo, y eso es tanto para el desarrollo como para la producción. Y vamos a estar dando salida a ES 2015. Eso es tan bajo como podemos ir con Hugo, se obtiene no nos deja bajar a ES cinco. Desafortunadamente, hay algunos navegadores como Internet Explorer que sí requieren un x5. Tendrás que usar Babel para eso. Y balbucear es una opción que en realidad se puede hacer con Hugo, una opción de correr la Biblia. Y sí cubro eso en mi curso de construcción de JavaScript. Repaso todas estas opciones con mucho detalle de nuevo en nuestro archivo HTML. La primera opción que vamos a estar configurando es minify. Y vamos a poner eso en verdad. No necesitabas invertidas alrededor de true porque es booleano verdadero o falso. Y el siguiente es objetivo. Y vamos a fijar eso a ES 2015. Apenas pondremos un comentario ahí que estas son nuestras opciones de producción para ESBL. Pondrá algunos guiones y se iniciará un fin. No hay nuevos espacios y le hará eso al resto de nuestro archivo para ir a terminar con espacio en blanco extra o nuevas líneas en nuestro código HTML. Sólo queremos salir HTML. Vamos a sangrar porque estamos dentro de la declaración if. Y luego veremos para el desarrollo, usamos una declaración condicional. Si EQ, si es igual a entorno de punto guía con un capital E. Buscando igualar el desarrollo, asegúrese de usar comas invertidas a su alrededor y todo es minúsculas para el desarrollo. Ponga a nuestros antagonistas enseguida con guiones. No hay nuevas líneas ni espacios. Más copia nuestra línea ops y la pegaremos y la escribiremos. Nos libraremos del colon porque ya hemos inicializado frente a la primera vez donde lo asignamos en arriba. Ahora va a estar modificándolo sacará minify porque por defecto es false. Pondremos en mapa fuente con una M mayúscula y es un mapa singular. Después puso en mapas fuente, se fue a trabajar. Y la única opción es en línea. Recapitulación para la producción, estamos mirando a magnificar para mantener nuestro tamaño de archivo abajo. Y tenemos nuestro ES 2015 dirigido. Acabo de poner un comentario en arriba nuestras opciones de desarrollo. Tenemos nuestros mapas fuente en línea para que podamos ver de dónde viene nuestro código. Tenemos nuestras terapias objetivo, 15. Vamos a estar ir con Hugo y el oído se llena. Como dije, tengo mi curso sobre construcción de JavaScript. Si te gustaría conocer más sobre alguno de estos temas en mayor. 5. Añadir búsqueda HTML: Entonces voy a crear algunas plantillas para el HTML, para la función de búsqueda. Al contenido. Verás que tengo alguna configuración de personajes de Futurama, conseguí las páginas de empresas y especies para mostrar los términos de taxonomía. Vamos a seguir adelante y vamos a crear una nueva página, se abrirá una nueva terminal y un tonto Hugo, nueva búsqueda slash index dot md. Entonces crearé una nueva página para nosotros basada en la plantilla de arquetipo. Tengo que ayudar a nuestra página y lo llamaremos resultados de búsqueda. Le daremos un tipo. Buscaré. Entonces necesitamos agregar un parámetro de privado. Y lo haremos verdad usando eso cuando creamos nuestro índice para que esta página no esté indexada. lo guardaremos. Entraremos en nuestros diseños, aguantaremos y buscaremos el valor predeterminado de subrayado. Copiará y pegará un solo punto HTML o para hacer una nueva carpeta llamada Buscar. Lo pegaremos ahí. Harán un par de cambios a la página. Entonces debajo del contenido se creará un nuevo div, y lo nombraremos JS dash. Resultados de búsqueda hace uso de capital R. It's CamelCase. Entonces lo guardaremos y luego iremos y ejecutaremos nuestro servidor de desarrollo Control. Da click en el enlace y lo revisaremos en el navegador. Ir a la búsqueda de barra. Tenemos nuestra página de resultados de búsqueda o inspeccionamos, y vamos a guardar nuestro archivo JavaScript se está tirando al pie de página. Así que le echarías un vistazo. Tenemos la fuente del script en la parte inferior, y es la búsqueda dot js con el hash. Iremos a fuentes y buscaremos dot js. No hay nada ahí todavía. Una vez que creamos una nueva instancia de zapatos cuando estamos creando nuestro JavaScript para ejecutar la búsqueda real, entonces la biblioteca de fusibles será realmente importante por ahora porque no hemos usado, la variable. Variable aún no se ha utilizado. Entonces por esa razón, no ha sido importante por el bundler. Por lo que hay que crear la función de búsqueda en la barra de navegación. Así que he usado un bootstrap cinco navbar. Normalmente no tengo la búsqueda en la mayoría de mis sitios web. Entonces por esa razón tenemos una edición y estamos viendo agregar esto una imagen aquí. Puedes personalizarlo a medida que desplázate hacia abajo, tendrás que agarrar toda la forma. Vamos a copiar eso. Y luego lo pegaremos después de la etiqueta de lista desordenada de cierre. Bueno entonces llegó a pasar y personalizar el HTML es lo primero que vamos a hacer en el formulario. Haremos el método. Utilizamos GET y luego acción. Y ahí es a donde se envía el formulario. Y vamos a hacer slash search slash index.html, y esa es la página que acabamos de crear. Entonces vamos a seguir adelante y personalizar la entrada para eso. Iremos a ver qué usa Google. Simplemente no google.com. Vamos a hacer clic derecho e inspeccionar. Voy a echar un vistazo a lo que han hecho. Han usado el nombre es igual a q, obtiene q para consulta. Ve y establece eso. De esta manera. Cuando pulsamos el botón Ir, el botón Buscar Q aparecerá arriba en la URL con el contenido de la entrada. Y luego podemos entonces agarrar ese contenido usando JavaScript. Normalmente lo usarías usando algunos lenguajes backend como PHP, pero en este caso, lo vamos a usar en el front-end. Y tenemos que usar JavaScript para acceder a cue desde la URL. Y eso es todo usando Git porque se pone todos estos datos en la URL. Echemos un vistazo aquí. auto capitalizar facilidad apagado. Agarrar que estamos tratando de hacer es desactivar muchas de las características que se activan automáticamente por los navegadores. El siguiente tienen 0s auto-completado y más a menudo más copian eso. Y luego auto correcto. Para deshacerse de eso. No vamos a usar autofocus porque no queremos que el cuadro de búsqueda esté enfocado por defecto porque sólo va a ser una pequeña parte del sitio web. Pero vamos a conseguir el chequeo ortográfico falso. Sólo estoy apuntando a un pasillo, pongo diferentes navegadores, voy a tratar de apagar todos los accesorios que habilitaron por defecto. Lo último que vamos a hacer es en la forma real agregará rol igual a búsqueda. Irá y comprobará eso en el navegador. En cualquier página del sitio podemos poner una consulta en calor. Así que prueba, por ejemplo, búsqueda luego nos lleva a la página de resultados de búsqueda, y tenemos nuestra prueba de q iguales arriba en la parte superior. Entonces por ejemplo, aquí en la página de inicio y lo ponemos en Futurama. Entonces nos lleva a la página de resultados de búsqueda. Tenemos una API de consulta, por lo que entonces podemos tirar esa consulta a la página porque no hay conexión directa. Sólo estamos cargando un IG estático. Y luego usaremos JavaScript para agarrar ese parámetro, ejecutarlo a través del índice de todas las páginas. Haga la búsqueda real, y luego produzca algo de HTML dinámicamente en la página. Eso es todo por esta lección, te veré en la siguiente. 6. Recuperar los parámetros URL: Voy a mirar a recuperar los parámetros de URL con JavaScript. Abrir hacia fuera como sala COMO. Y bajaremos unas líneas y pondremos un comentario en. Y habrá params, función, función, y lo llamaremos params. Y luego pondremos en el nombre del parámetro. Ahora entiende que para la mayoría de la gente, empezar con JavaScript no va a ser una fortaleza. Entiendo que esto no es un tutorial, que es una introducción a JavaScript, pero estoy consciente del hecho de que yo mismo que esté viendo este tutorial no tendrá mucha experiencia con JavaScript. Por lo que sólo hago todo lo posible para seguir adelante y haré todo lo posible para que todo sea lo más sencillo posible. Lo que estamos haciendo aquí es que estamos creando una función. Lo hemos nombrado params. Y cuando llamamos a esa función, por ejemplo, abajo, params, dentro de ir a decirle a una función qué nombre, que principalmente para realmente obtener será obtener el parámetro Q que estamos pasando eso a través como variable. Para que Q me deje pasarlo y verás cómo funciona eso en un segundo. Ahora, vamos a estar creando una constante, y esa es una variable que no cambia. Lo vamos a llamar cadena de consulta. Siempre debes CamelCase. En sus variables, sus funciones. La constante de cadena de consulta será igual a la ventana, búsqueda de puntos de ubicación. Y lo que eso hará es que sacará la URL de la URL de la página. Es como por qué debería hacerlo por cuando pulsamos el botón de búsqueda que va a la página de búsqueda. Y tenemos nuestra URL en la parte superior de la cadena de consulta. Pon un punto y coma al final de eso. Ahora actualmente Visual Studio Code, se llama cadena de consulta en un gris claro. Y si pones el ratón sobre, dirá que ha sido declarado, que es lo que está pasando, pero en realidad no se ha leído. También digo que el parámetro name ha sido declarado con él nunca se ha leído. Por lo que utilizamos estas variables. Lo verás en la oscuridad. Voy a crear otra constante llamada params URL. Eso es un poco sacar los parámetros de la URL. Para que eso suceda. Vamos a crear una nueva instancia de libras de búsqueda de URL y asegurarnos de que obtienes el capitalista correcto que debería autocompletar para ti si estás en Visual Studio Code. Tenemos que proporcionar esa función, la cadena. Y eso va a ser cadena de consulta. Esa es la constante que usamos el crédito, verás que solo los geocodificadores escogieron que acreditamos una constante para que podamos aprovechar eso. Y ya no es gris claro. Cuando ejecutamos esta función aquí abajo, cuando la llamamos, valor será devuelto en su lugar si esta palabra, y para que eso suceda, usamos una palabra clave llamada Return. Vamos a devolver URL, params, dot get. Y vamos a usar nueve. ¿Qué está pasando? Él primera línea, estamos tirando de la URL, la barra de URL, y el navegador entonces obtendrá la parte después del signo de interrogación para buscar amplificadores. Entonces a partir de ahí buscamos libras, solo queremos uno de ellos. Esa es la Q. Lo que estamos creando aquí es una función reutilizable que puedes copiar y pegar en cualquier aplicación. No tiene q codificado duro en ella. Eso es q, es decir, la consulta de búsqueda para cuando pulsamos el botón Buscar, proporcionamos Q y en realidad llamamos a la función hacia abajo HE. Podemos probar esto. Ahora. Podemos hacer un console.log o entrada. Haremos console.log por ahora. Entonces console.log. Entonces tenemos params q. la forma en que me gusta hacerlo es pongo en backticks y pondré búsqueda. La consulta es que hacemos signo de dólar y un solo precio claramente alrededor de nuestro código JavaScript real. Así que agreguemos código JavaScript. Normalmente estarías poniendo una variable y podemos hacer una función o una nueva vida. Pero para los textos, está dentro de las garrapatas traseras. Entonces están nuestras garrapatas de espalda para todo el texto. Envolvemos nuestro JavaScript en, signo de dólar y los tirantes rizados. Lo guardaremos y comprobaremos la consulta de búsqueda y la guardaremos funciona. Pongamos las pruebas ahí y buscaremos. Nos lleva a la página de búsqueda. Hay un signo de interrogación. Entonces todo después del signo de interrogación son las consultas y solo queremos la consulta de cola, la q es igual a prueba. Podrías tener múltiples consultas ahí. En este caso no lo hacemos. Pero con diario escribir todo. Por lo que tienes algunas funciones razonables que puedes usar. Ahora los proyectos, has hecho clic derecho e inspeccionar. Conseguí una consola. Dices que console.log tiene No se le pida que busque consulta es entonces su pull in test desde la parte superior. Y eso es lo que vamos a utilizar para ejecutar nuestra búsqueda, vamos a ir a comprobar si en realidad es una consulta en esa barra o si los usuarios acaban de terminar en la página de búsqueda. Haremos, vamos a poner otro comentario en B, comprobar para ver si se ha realizado una búsqueda. Simplemente nos libraremos de todo lo que hay garrapatas hará la constante y será consulta de búsqueda que igualará params. Por ejemplo, antes de que fuera prueba, esa era nuestra consulta de búsqueda. Podemos acceder a eso ahora con esa consulta de búsqueda constante porque tenemos estas función reutilizable que puedes copiar y pegar en cualquier proyecto y que extrae la consulta aquí y la consulta que estamos extrayendo usa la consulta de cola y eso es bastante estándar para la búsqueda. Utilizando condicional para comprobar si se ha realizado una búsqueda. Si y luego entre paréntesis consulta de búsqueda. Veamos si en realidad hay texto en. Si, si esta función devuelve algunos textos, eso significa que busco consulta en la barra de URL. Esta función no devuelve ningún texto. Eso es porque la búsqueda no ha tenido lugar. Entonces vamos a empezar con el si en realidad ha tenido lugar y luego haremos otra cosa. Pondremos un comentario en su consulta de búsqueda. Vamos a mostrar un mensaje. De no ser así, como tener lugar. Si la búsqueda ha tenido lugar, si hay una consulta ahí, agregaremos la barra de búsqueda de consulta a la búsqueda. Por lo que parece que es sitio web dinámico. Y luego vamos a ejecutar la búsqueda. Sigamos adelante ahora y hagamos que estas cosas sucedan. Tenemos que hacer, tenemos que hacer algunos contenidos aquí arriba. Entonces vamos a hacer búsqueda, input, document dot, get element by ID. Buscaremos entrada de búsqueda JS dash. Entonces haremos resultados de búsqueda iguales a document.getElementById por ID. Resultados de búsqueda de Vgs. Enlace vuelvo a nuestro solo botón, HTML. Y verás que tenemos nuestro div con el ID de los resultados de búsqueda. Entraremos en nuestro encabezado, vuelta a nuestra entrada de búsqueda. Y actualmente no hay identificación en él. Añadirle un ID. Audiblemente entrada JS. Yo uso un guión JS antes de todos mis identificadores, que utilicé en JavaScript. Para que sepa que nunca debería eliminar ese ID a menos que sepa exactamente dónde se está utilizando en JavaScript. Siempre que veo un guión JS en un ID, sé que no debería modificarlo porque JavaScript dejará de funcionar. La idea se utiliza más o menos únicamente para orientar el elemento en JavaScript. Tenemos dos átomos configurados. Vamos al mensaje de visualización, mostrando primero un mensaje. Para mostrar el mensaje. Se trata de unos resultados de búsqueda simples. Dot innerHTML es igual. Entonces sólo tenemos que poner el HTML aquí. Podemos escribirlo en. Por favor. Introduzca su búsqueda en el cuadro de búsqueda. Arriba. Ponga un punto y coma al final de la línea. Lo guardaremos y lo probaremos. Despegaremos la consulta. Verás cuáles son nuestros textos allí por favor, y pondrás tu búsqueda en el cuadro de texto de arriba. ¿ Por qué un poco de relleno al fondo allí, un margen por debajo de ese div, abre nuestra página de búsqueda. Algún relleno en la parte inferior de la fila, PB cinco. Vamos a agregar la consulta a la búsqueda en puerto. Entonces vamos a hacer entrada de búsqueda. El valor es igual a la consulta de búsqueda. No vamos a mirar corriendo esta búsqueda en ella. Guarda eso y echa un vistazo. Volveremos a la prueba de casa. Y verás que esa prueba sigue subiendo en ese cuadro de búsqueda. Puedes volver atrás y puedes modificarlo para, por ejemplo, si lo ejecutamos sin nada, recibimos nuestro mensaje de error. Digamos por ejemplo, el usuario acaba de terminar en esta página. Bueno ahora lo que tienen que hacer para hacer la búsqueda. A continuación podemos hacer es que les podamos poner textos de iluminación equipo copiará eso. Póngalo ahí dentro. cambiaremos a cargando. Algunos textos temporales. Pruébalo. Tenemos cargando y luego se llevará a cabo la búsqueda y los textos serán reemplazados. Eso es todo por esta lección. Te veré en la siguiente. 7. Crear un índice de búsqueda: Así que ahora vamos a ver la creación de un índice de búsqueda, como insinué antes, vamos a estar creando este índice inicialmente en línea dentro del archivo JavaScript. De esa manera podemos buscar directamente a ella y no tenemos que preocuparnos el código requerido para obtener el índice de un archivo externo. Pero más adelante en el curso, te mostraré cómo puedes dividir tu índice en un archivo externo. Acelera las cosas un poco, porque no tienes un archivo JavaScript que sea ponderado por el índice que permite que tu archivo JavaScript se cargue rápidamente. Pero por ahora acreditaremos en línea, facilitaremos las cosas. Empecemos. Vamos a estar usando Scratch para trabajar con nuestros datos. El motivo por el que rayamos en lugar solo variables simples es aparentemente funciona con FASTA. Hay pocas cosas que puedes usar scratch fall para resolver limitaciones en Qie Gei, pero solo lo estamos usando puramente para pala. Ahora vamos a estar usando un rasguño líquido de nuevo para que la velocidad no se requiere para leer en otras páginas. Esa es una de las razones por las que usamos Scratch. Para crear un nuevo rasguño. Definimos una variable y luego le asignamos nuevo scratch. Y luego podemos usar todos los métodos que tenemos, sentarnos, obtener, y agregar que vamos a estar usando y haremos nuestra variable. Asignarán en Scratch solo para que funcione con los documentos. En primer lugar vamos a crear nuestra nueva instancia de scratch. Lo que vamos a hacer en la parte superior, estábamos definiendo una constante, vamos a poner un comentario ahí. Y vamos a hacer ese índice y ese es Jason. Siempre que lo hacemos en estos claros sobre eso. Entonces pon guiones al inicio y al final para que no terminemos con ningún espacio en blanco extra. Haremos. Asignarán colon rayado es igual a mu, rasguño. Dentro de cualquier paso de punto de rasguño. Tenemos que definir la clave que estamos trabajando y vamos a llamar a ese índice. Y vamos a asignar una ranura que podamos seguir agregando pérdidas de clips. Vamos a rascar dot. Estamos mirando el índice k y agregaremos una ranura, te hacen poner un guión al final. No vamos a recorrer nuestras páginas y añadir poco de Dada a esa rebanada desde ocho páginas. Antes de que podamos hacer eso, tenemos que definir cuáles son nuestras páginas. Páginas de doble espacio. Colón es igual a u punto, punto, páginas regulares. Y eso es una especie de atajo que está incluido en el chico HE. Y agregará todas las páginas irregulares de su sitio a esa variable llamada Pages. Después va a estrecharlo abajo con donde lo haremos. La página es igual. Entonces una modificación de la variable es el tiempo. Lejos. Páginas. Params dot privado, no es igual, que es exclamación igual a entrada te hace poner un espacio en el guión. va a hacer es si estableces un parámetro de private y true en cualquiera de sus páginas, entonces no se incluirán en los datos establecidos porque solo estamos incluyendo páginas donde params dot private no se establece en true. Es decir, si no lo configuras en absoluto, no lo va a usar para verdad. También podrías restringir las páginas de contenido que podrías usar.com, por ejemplo, el tipo de página que podrías querer establecer en dos productos. Por ejemplo, puedes mirar hacia arriba, él se va y verás cómo funciona eso. Dentro del rango ya sea nuestras páginas. Y voy a poner en lo intacto antes de continuar cada página, vamos a hacer un rasguño. Ahora vamos a añadir un diccionario. En el diccionario se van a poner en la primera semana, eso será un total. Vamos a conseguir eso del título de punto que obtuviste antes, lo que nos dijo que eso tiene sentido. Luego veremos un resumen que viene del resumen de puntos. Todas estas variables de ego incorporadas tienen capiteles. Estamos mirando el contenido. Y normalmente pensaste contenido que está lleno de etiquetas HTML. Vamos a usar avión. Si miras el contenido, verás que tenemos empresas e interruptores también. Vamos a tirar de esos adentro. Entonces vamos a hacer empresas. Forma sencilla de empezar con más adelante, lo haremos más complejo. Términos. Empresas. Entonces las especies serán puntos, params, especies de puntos. Y por último, necesitaremos el enlace, así que usaremos enlace permanente para poder mostrar la página completa en los resultados seguros. Eso se hará por mililitro. Ideas normales, permanentes para acortarlo un poco, pero queremos poner todo el enlace permanente en este F resultados al igual que Google. El amablemente nada se está imprimiendo en realidad a la pantalla. Por lo que sólo vamos a poner un comentario ahí. Y creamos dicho índice con Scratch cuando realmente escribimos cualquier dato a nuestro JavaScript, sobre todo ahora que tenemos esos guiones y start and the end. Eso evita que cualquier línea de rodilla o espacios se encuentre en un archivo JavaScript de doce v. Ahora lo que vamos a hacer es crear una variable y datos para archivar. Y vamos a hacer const index iguales. Y vamos a usar Git. Entonces será scratch .mit.edu, una J. mayúscula Estamos obteniendo el índice k que hemos estado escribiendo para agregar eso ahí. Vamos a convertirlo en JSON. Json. Si no pones comas, comas invertidas, comunistas dobles, atrás garrapata algo alrededor de esto porque no va a funcionar. Tienes que dejarlo tal como está. Y calor voy a manejar eso por ti. Pondremos un punto y coma al final, pero luego haremos un console.log. Si solo tuvieras que poner el índice de búsqueda ahí, funcionará. Pero en realidad no te dieron una señalización porque console.log no funciona con Jason. Tengo que usar una función y eso es el capital JSON en stringify. Y tienes que abrir y cerrar corchetes alrededor de tus datos de JsOn. Y para que sea más obvio, y devolviéndolos, tome dos puntos de datos JSON, y luego tenemos una cadena literal, signo de dólar, corchete rizado alrededor de ese javascript. Cierra ese soporte rizado, cierra esa garrapata trasera. Tengo signo de dólar corchetes rizados alrededor de JavaScript, garrapatas atrás alrededor de toda la cadena literal ahorrará eso y vamos a echar un vistazo en el navegador, ejecutar una búsqueda, y tú inspeccionando la consola, ya verás que se ha levantado para nosotros. Datos de Json. Volvamos lo hará más obvio. Cuantile entero voy a hacer una garrapata trasera, puntos de datos JSON, y luego signo de dólar, corchete rizado. En otro corchete rizado alrededor de todo nuestro día de JavaScript volvería tick antes de cerrar el soporte completo console.log que y echar un vistazo a los datos de JSON que vienen allí. Eso es lo que vamos a utilizar para buscar. Como se puede ver, es bastante grande y no se va a alargar. Y el sitio más grande, y por esa razón lo estará proyectando en un seguido para un sitio pequeño sin, pensé que lo puedes dejar en JavaScripts y no tendrías demasiados problemas con velocidad. 8. Crear una función de búsqueda: Vamos a crear la función de búsqueda y ejecutar pocos dot js para obtener algunos resultados en el sitio web de la tarifa buscada JS. Bajo demo en vivo, dices que tengo el índice real en el que estaban buscando los datos. Y entonces lo que tenemos que hacer es que tenemos que definir nuestras opciones y tenemos toda la diapositiva predeterminada hacia fuera. Él van a entrar en eso porque incumplieron. Siempre y cuando las claves que vamos a buscar en el índice real. Entonces tenemos que crear una nueva instancia y tenemos que pasarle el índice en el que los datos estaban buscando, y las opciones que acabamos de definir. Entonces asignaremos la búsqueda de puntos fusionados a una variable. Y podemos acceder a nuestros resultados por ahí. Si lo desea, puede seguir adelante y puede copiar la constante de opciones. Entonces debajo de lo que ya hemos hecho, crearemos una nueva función y la llamaremos búsqueda. Tendrá una propiedad de datos que se tira se abra y cierre corchetes. Entonces podemos pegar en nuestras opciones. Una vez que me gusta modificar es partidos finales. Puedes pasar por estos en el sitio web de fusibles, y eso significa que fusible seguirá buscando incluso si encuentra una combinación perfecta. Y estamos diciendo que consiguió longitud de personaje igualada. Voy a poner eso a dos para que no solo coincida con personajes individuales imputan ion, terminas con algunos resultados e ignoras la ubicación. Voy a poner eso a true, por lo que buscará todos modos en las cadenas. Y umbral en solo hay que hacer eso un poco más fino, lo establecerá en 0.4. Por ahora, siempre se puede jugar con esos muchos. Y mirar nuestras llaves definitivamente estaban haciendo total. Y también estamos haciendo resumen, contenido, empresas y especies. Y estaremos refinando empresas y espacios más adelante. Ahora veamos la asignación de algunos blancos al caso porque algunos niños son menos importantes o esta parte de la falla pocos pensaron que JS mira la longitud del pastel. Mezclar. Claves que son más cortas, eso les da mayor importancia y Kaizen más largo, por ejemplo, el contenido que es bastante largo, le darás menos importante y tenemos un breve resumen y entonces tendrá más importante. Pero también tenemos empresas y espacios ahí dentro. No son tan importantes a la hora de buscar un personaje. Entonces lo que haremos es crear algunos mapas. Y vamos a necesitar un nombre k, que es resumen, luego una llave blanca. Y hay que apuntar por menos de uno porque i total se le ha dado un defecto de uno. Entonces vamos a hacer nuestro resumen que 0.8 porque es bastante importante para Tata. Apenas pondremos un comentario ahí recordándonos quién va al blanco predeterminado de uno. No necesitábamos preocuparnos por cambiar eso. Y entonces el contenido dará ese 0.6. Entonces hacer algunas pruebas y cambiarlo parece empresas, nos pondremos en blanco de punto cero para eso importante y veremos qué pasa. Vamos a hacer algunas pruebas al final. Entonces necesitamos crear nuestra nueva instancia. Y luego devolveremos nuestros resultados. Pegue eso en debajo de la variable de opciones. Si miras de cerca, tenemos fusible equivale a nuevos temas. Y estamos pasando la lista y las opciones. Ponemos opciones ya aquí, pero no tenemos lista. Lista en realidad va a ser dada. Dada. Eso es por todos esos datos. Y luego tenemos nuestro patrón de búsqueda y lo configuraremos. Estará pop patrón en también. Entonces volveremos a lo que llamamos nuestra función. Agregaremos nuestro patrón de búsqueda y buscaré el patrón es la variable llamada consulta de búsqueda. Por lo que agrega eso en. Ahora en lugar de regresar hará un nuevo resultado constante. Después comprobaremos qué tipo de datos se están devolviendo. Entonces vamos a hacer console.log. Y luego los resultados. Javascript nos dirá lo que estamos mirando. Javascript lengua, dije, lo que se está devolviendo como tales resultados es un objeto. Así que sigamos adelante y haremos una consola, registramos ese objeto y lo revisaremos. Lo haremos es. En lugar de top of results, un literal de cadena, los resultados vuelven a marcar. Y luego imprimiremos nuestros resultados objeto a una cadena. Vamos a echar un vistazo en el navegador. Ahí está nuestro objeto de resultados. Luego siguiente lección veremos cómo imprimir estos resultados a través de HTML en la pantalla. 9. Mostrar resultados: Ahora es mirar cómo compartir los resultados iban a estar imprimiendo HTML en la ventana del navegador a través de JavaScript. Si continuamos, agregaremos un comentario rápido t resultados, que es un objeto. Nos libraremos de ese console.log. Necesito eso más. Y llamaremos a una función y lo llamaremos mostrar los resultados pasarán. Si continuamos, agregaremos un comentario rápido t resultados, que es un objeto. Nos libraremos de ese console.log. Necesito eso más. Llamaremos a una función y lo llamaremos mostrar resultados. Lo pasarán para compartir resultados. Los resultados entonces harán que nuestra función comparta resultados. Accederemos a los resultados. Los motores le pusieron un rumbo. Lo podemos encontrar fácilmente. Lo primero que haremos es comprobaremos si hay una propiedad de longitud en los resultados. Empezaremos si no hay resultados. Entonces si no, la explicación resulta longitud de punto porque los resultados siempre existirán. Comprobar si hay una longitud en él. Siempre hay algún tipo de resultados generados. La variable, sólo vamos a comprobar si hay alguno, si no hay enlaces, hará lo que viene primero y luego resultados. Resultados de búsqueda. Dot innerHTML es igual a no. Resultados. Encontrado. Eso es una cuerda. Sólo para reformular la variable de resultados de búsqueda. Nos encontramos con eso en la parte superior. Y ese es nuestro div donde se muestran nuestros resultados de búsqueda. Y previamente ya le escribimos si no hay consulta de búsqueda, estamos marcados la consulta de búsqueda de usuarios en el cuadro de búsqueda. Ahora escribo esto, no se encontraron resultados. Entonces haremos otra cosa. Veamos si hay resultados. Entonces pondré un comentario en sus resultados encontrados. El objeto de resultados. Es una matriz. Lo haremos, es que vamos a ver cada objeto en esa matriz. Hará los resultados para cada uno. Esto está usando la sintaxis ES6. Desplazamiento. Lo que haremos es dejar claro que nuestro HTML comience con deshacerse de la búsqueda. búsqueda de textos hará que sea una cadena en blanco, cadena vacía. Lo haremos, acreditaremos constante temporal. Llamaremos a eso es igual al elemento. Y luego haremos resultados de búsqueda. Dot HTML plus, igual. Además es igual significa que estamos agregando a ella. Es una taquigrafía para agregar. La mano larga serían los resultados de búsqueda. Dot innerHTML equivale a resultados de búsqueda más salida. Como se puede ver, es mucho más corto usar plus, es igual o simplemente añade. lo guardaremos. Voy a echar un vistazo. Tendré que convertir los objetos en cuerdas para comerlos, así que lo haremos. Y luego tuvimos que ponerlos en HTML. Es temporalmente usaremos JSON dot stringify en el elemento solo para que podamos verlo. Se puede ver que tenemos ahora otoño y dentro del otoño tenemos toda la información que sacamos. Unos cuantos chicos que han comprado contenido de empresas. Desplácese con cuidado el contenido pasado. Obtuve enlace permanente, resumen de especies, total. Vamos a pasar y trataremos extraer algo de información de eso. Lo haremos a través y constante y va a estallar en todos esos artículos. Entonces tenemos resumen total. Permalink. Contenido, empresas, espacios, poner estos en precios. Y eso va a igualar elemento dot otoño porque hemos tratado acceder a todo dentro de otoño. Lo que haremos por nuestra salida, crea un literal de cadena que garrapatas puedan empezar a poner en algunas garrapatas ásperas. Entonces vamos a hacer título, Lexis, total. Pagar una nueva línea solo por ahora. Haremos permalink. Hará empresas. Te darás cuenta como yo hago esto, el gris tiende a negro, lo que significa y variables siendo leídas. Entonces haremos especies. En resumen. Entonces contenido. Eso va a echar un vistazo. Ahora tengo algo de información mucho más legible, título y ese es el mejor partido su familia, empresas, especies. Y luego tenemos nuestro resumen y luego nos metemos en el contenido. Chicos, hay un problema. No hemos puesto una nueva línea antes título, así que lo arreglaremos. Nueva lavandería para la siguiente entrada. Ya verás que tenemos una segunda entrada en el tercer 13 partidos vienen. Ahora iremos a ver la creación algún HTML para dar formato a nuestros resultados de búsqueda. Por ejemplo, en Google aquí, y veremos cómo se están formateando sus resultados de búsqueda . Veremos las imágenes en una lección posterior en este curso. Pero vamos a ver poner en el enlace permanente y se mueven puesto en el título, el resumen. Así que sigamos adelante y lo arreglaremos. Suena como lo que hemos hecho. Haremos una clase div de PB gratis para agregar algún relleno a la parte inferior. Relleno. Y vamos a hacer una clase div es igual a fila, clase es igual a llamada, agregar dos columnas más después cuando miramos poner una foto en, nuestro encabezado en HCI anulará los bootstraps. Margen, pondrá B1 toque con menor. Entonces desde aquí podemos poner en el título, esta es una amplia corriente literales son realmente útiles. Así que niño slash h3. Entonces volveremos a hacer nuestro enlace al margen por debajo. Siempre se puede personalizar. El deslizador. Hará poner un costo ahí. Y el enlace oscuro, porque me gustó el predeterminado Bootstrap, mostrará el enlace permanente llamado link el título también. Para que pueda copiar eso. Cierra amigo. Estoy poniendo resumen, esbozo corazones más así que pongo el resumen y ahora voy a poner en las empresas y espacios ni tampoco se proporcionan. Volverá como indefinido. Entonces pon eso por ahora. Entonces con esa compañía por ahora y más tarde veremos hacerla plural. Singular. Empresa pondrá especies. Podemos borrar todo. Arriba. La ropa normal son etiquetas. Vamos a traer eso de vuelta porque he sido especia. Guárdalo y echa un vistazo en el navegador. Veamos adentro. Genial, creo que nos gustaría deshacernos de lo subyacente en el enlace para volver atrás y cambiar la clase. Dejaré el título en el color primario. Ese es un gran comienzo. Lo único que iba a decir es que terminaremos con un problema donde si no se ha establecido una empresa, si te vuelves como indefinida y si hay múltiples empresas, entonces nos vamos a algunos temas ahí con cosa pluralizar, pero vamos a arreglarlo en la próxima lección. Por ahora. Vamos a completar cualquiera. Si no estás tratando de lidiar con datos que vienen sobre rayos, entonces ya tienes prácticamente resuelto tu búsqueda. 10. Crear enlaces a taxonomías: Vamos a ver la creación de enlaces de taxonomía. Y diremos condicionalmente pluralizar el rubro de la taxonomía. Y lo ocultaremos por completo si la taxonomía no existe. Entonces primero tenemos que hacer es modificar nuestro índice. Dentro del rango. Vamos a crear una nueva variable. Lo llamaremos Términos de la empresa y más inicializarlo y todos iguales dot get Tim's, estoy buscando los Términos de la compañía. Ir a crear una diapositiva en blanco. Simplemente llámalo a TI. Las empresas lo inicializarán y sólo va a ser una ranura por ahora. En realidad pones guiones y estilo en estos para que no terminemos con espacio extra. Ahora archivo JavaScript y el rango IVR fuera tumbas. Al etiquetar, disfrutar de poner guiones todo el tiempo. Entonces cada vez que iteramos, vamos a sumar a la rebanada de la empresa. Entonces vamos a hacer empresas iguales a empresas y luego más fijadas. Y luego vamos a anexar un diccionario y vamos a poner en total. Total. Y luego vamos a hacer verdadero enlace PM. Rel, enlace permanente. No estoy haciendo familia porque es mucho más largo podemos ahorrar con rapamicina, tener menos datos, el enlace permanente para el resultado de búsqueda real porque quería mostrarlo en la pantalla sin pensar en una fin de semana limpiar eso un poco. Entonces pondremos unos corchetes alrededor de ese título. A continuación, poner en una tubería. Y el primero que haremos es ojos humanos para deshacerse de cualquier guion dentro del título. Entonces vamos a hacer titulado para capitalizar cada letra. Queremos eso no sólo para las empresas, sino también para las especies. Utilizamos Alt click. Entonces bajaremos a nuestro punto de rascar add. En lugar de dot powerapps, empresas dot, serán empresas de signo de dólar en Dallas sobre especies para acceder a esos rebanados que acabamos de crear. Lo guardaré y luego echaremos un vistazo al caso de búsqueda. Ahora tenemos que mirar a apuntar a lo que solo tenemos crédito. Así que tenemos dentro de las empresas y dentro de las especies, ahora tenemos empresas de título de punto y también para especies tenemos especie dot title. Así que nos desplazaremos hasta aquí. Total de la empresa que podamos acceder a esas mismas cuatro especies. Estoy hablando de. ¿ Qué hace console.log. Vamos a ver el índice de búsqueda y las garrapatas de la espalda. Entonces es un literal de cuerda. Dije índice, esa es nuestra descripción. Signo de dólar, llaves rizadas abiertas. No podemos simplemente escribir índice de búsqueda porque no se mostrará como una cara en objeto, ejecutará la stringify de puntos JSON de capital. He sido el índice de búsqueda de corchetes. Guárdelo en el navegador. Haga clic e inspeccione nuestro índice de búsqueda. Si vamos a Mostrar más, entonces lo copiaremos. Crea un nuevo archivo con Control N, ID más alto en y luego Alt, Shift F to Format. Y luego echaremos un vistazo a la estructura de los datos. Tenemos contenido, resumen y segmentación total y peso. Agradable. Sólo con contenido, lo siento y total. Pero para las empresas y especies, su total, por ejemplo, el total de espacios es hijo de especies. Por lo que apuntamos a eso con el título de punto de especies. Para el total de la empresa, nos apuntamos con empresas dot title. Así es como lo he configurado. Y así voy a quitar el console.log. Entra en eso. Si fuera por código de producción, tomaría la línea. Y luego bajaremos a nuestro HTML. No éramos compañía en espacios ahí. Lo que vamos a hacer dentro del foreach hará una función. Lo llamaremos Taxonomía HTML. Pasaremos el nombre de la taxonomía. El título singular. El plural total. Plural, tala. Vamos a comprobar es en realidad una longitud en la taxonomía. Para revisar esta taxonomía. Taxonomía. Enlaces. Comentario. Imprimir. Una matriz de enlaces. matriz de taxonomía es igual a la función, punto de matriz a partir de eso crea una matriz para nosotros. Y estamos creando eso justo desde nuestras ranuras de taxonomía que las pasamos, que también se llama matriz. Y entonces tenemos que mirar el valor que vamos a usar. Nuestra función. Entonces usamos return para agregar lo siguiente a la matriz que hemos creado para cortex sobre mí REI, literal de cadena de crédito con ticks traseros. No va a hacer HREF es igual a b, valor punto m enlaces agregamos reabrir vinculado al diccionario. El diccionario se convierte en valor. Entonces lo pondremos en el título. Título. nuestro total singular o plural. Dejar taxonomía, total, igual. Total, sencillo. Hacer un condicional. Si la longitud del punto de taxonomía es mayor o igual a dos. Taxonomía. Total será igual. Plural total. Perdón si hay dos o más átomos en nuestra taxonomía, ¿verdad? Entonces estamos mirando un total pleural. Ahora es otra cosa y eso es lo si no se proporciona el título plural? Por lo que en realidad podemos manejar eso. Haremos total n. Déjame poner unos corchetes alrededor de operación. El total pleural se ha proporcionado cuando llamamos taxonomía HTML. Si hay dos o más automatizados, sabían bien, entonces cambiaremos nuestro título de taxonomía. Ponlo en el pluralizar. Total, generará HTML. Taxonomía, HTML. Volver tomar clase es igual a Pb. Una propiedad más y textos pequeños. Pondremos en nuestros textos de taxonomía. Entonces el total donde es singular o plural. Taxonomía total. Entonces ponme en nuestro texto. Muy bien, nos libraremos de pequeño ahora con esa matriz, queremos poner comas entre cada elemento en la matriz para que en realidad podamos datar estructura y poner comentarios entre ella con punto join, y luego especificamos el espacio de color. Todo esto tiene que ir dentro del condicional. Si en realidad hay una longitud a la taxonomía. Al inicio de la función se imprimirá una cadena en blanco. Dejar HTML. Cadena en blanco igual. Entonces si hay términos de taxonomías presentes, vamos a agregarle algo de HTML. Y luego después del condicional, devolveremos taxonomía el HTML, ya sea una cadena en blanco, o si le hemos agregado algo de HTML. Y luego cerraremos el neuronal. Ten mucho cuidado porque si solías trabajar con Emmett, realmente no tenías que hacerlo. Cierre. Etiquetas Html. Pasa por ti. Podemos hacer es que podemos bajar a nuestro HTML aquí abajo. Y comenzaremos con empresas. Poner en la función de taxonomía HTML. Entonces tenemos un pase ahora opciones. El primero es la taxonomía. Entonces, ¿cuál es la taxonomía? taxonomía va a ser empresas. Las empresas serán la matriz a la que se estaban consiguiendo en. Si vas, entonces tenemos que mirar el total singular y el total proporcionar a esos una cuerda. Así pensó, empresa como singular, coma, empresas como plurales. Entonces por debajo de ella. Lo volveremos a hacer. Voy a pasar en especies. El total serán espacios para singular. Y porque también es para plural, tendríamos que preocuparnos por brindarle su libertad condicional. Porque si la razón yo plural, este paso no se llevará a cabo a través de este tú singular para ambos. Y sacaremos el préstamo para especies, y luego lo guardaremos y echaremos un vistazo en el navegador. Tenemos nuestros enlaces siendo arrastrados. Vamos a agregar algunos datos extra. Por ejemplo, las empresas bajo Bender y diremos si se le ocurre un coma, entra en nuestro contenido y nos adentraremos en personajes en Bender. Y bajo las empresas lo pondrán en una segunda. Entonces pondré una coma. Sólo va a componer uno. Yo gusto compañía. Ahorra eso. Ahora tenemos a la compañía de pruebas que viene. En realidad los enlaces que se pueden hacer clic y todos nos llevan a la página para ver el término taxonomía. Veamos si hacemos clic en la página sexual diez. Podemos ver qué otros registros comparten esos datos de vuelta y voy a sacar esa empresa de prueba. Si tienes problemas para conseguir ambos términos para acampar en el navegador. Esto de algunas maneras podemos arreglar eso. Primero uno fácilmente podemos matar al Hugo, digamos bien, con el pin ahí o control C, reinicie el servidor. Lo siguiente que podemos ver en arreglarlo es hacer clic derecho e inspeccionar. Después ve a la red y a las cookies voy a almacenar en caché. Y luego mientras todavía tienes la pantalla abierta, las herramientas disponibles, mantén presionado el botón del mouse en la actualización y ve a una carga de hardware. Eso hará todo lo posible para sacar datos totalmente nuevos de Hugo. Ya he retirado ese centro discográfico, puedo verlo ahí. Pero si sigues alguno de esos pasos o ambos, probablemente arreglarás tu problema. Lección de certificados. En la siguiente lección, veremos agregar fotos a nuestros resultados de búsqueda. 11. Añade imágenes a los resultados de serch: Si miro agregar fotos a nuestros resultados de búsqueda, hemos mirado en el contenido, notarás que las imágenes se están configurando como recursos pagados. El techo, las imágenes mismas están sentadas al lado de los archivos de markdown. Lo que vamos a hacer es que queremos, primer lugar mirar a cambiar nuestro índice de búsqueda. Entonces vamos a añadir algunas fotos y la respuesta dentro del rango creará una nueva variable llamada imagen. Simplemente lo convertirá en una cadena en blanco. Por ahora. Empezaremos comprobando si hay un parámetro de imagen. Sólo por un minuto. Y luego comprobaremos si tenemos al menos una imagen definida en esa mayor o igual a la longitud de las imágenes de puntos de punto. Si es igual o mayor que uno, va a poner fuera en el etiquetado, usaremos un látigo que es como un if. Recursos dot obtener partido. Y el Tim estará emparejando será el primer ítem definido en dot powerapps. Las páginas de puntos serán el elemento de índice 0. Tagging. Vamos a usar nuestra variable de imagen que inicializamos Alia, pensamos, llenamos. Y vamos a probar el tamaño de 120 pi y lo redimensionaremos por una hora a 200 y de ancho. Pongámosle algunos pinchazos para evitar el espacio en blanco extra. Entonces convertiremos nuestra variable de imagen en un enlace permanente relativo, la hipoteca hacia abajo en imagen de diccionario. Imagen, que en realidad es un enlace permanente relativo permalink. Guarda eso abajo en nuestro HTML. Modificamos nuestra columna, hacemos eso S él y ponemos otra columna en SM2. Siempre podemos cambiar esto si no funciona. clase Div es igual a llamada. Sam lo hará cuatro, y luego haremos col, md. Ese cambio aquí también. Saltar nuestra imagen en la imagen. Un g de fluido de salpicadura. Entonces nos metimos en nuestras constantes y más. Quieres decir, lo guardaremos y echaremos un vistazo en el navegador. Ahí. Quiero decir, se acerca. Voy a echar un vistazo a re-dimensionar la pantalla. Eso es en lo pequeño. Y luego cuando nos ponemos en extra pequeño, y luego llegamos a pequeños, viene en como cuatro. Conseguimos un MD. Cambiará a dos y podrás personalizarlo como te guste. Puede tirar de imágenes que son recursos de página. 12. Índice de búsqueda independiente: Voy a separar el índice de búsqueda de la caída de JavaScript y en su propio archivo JSON. Acelerar el tiempo de dejar el archivo JavaScript. Haremos, vamos a entrar en diseños y crearemos una nueva carpeta y lo llamaremos índice de búsqueda. Entonces harán un archivo llamado solo punto JSON. Vamos a entrar en nuestra búsqueda. Dot js resaltará todo lo que estamos utilizando. Para nuestro índice de búsqueda. Cortaremos eso, pegarlo en el archivo JSON de punto único. Tendrás que deshacerte de ese JavaScript. Lonnie y el punto y coma, la limpieza de archivo JSON para que no se minifique. Hay una opción que podemos usar y tenemos que pasar en un dict. Y entonces la opción es sangría. Esta es la cantidad de sangría. Y nuestros dos espacios preferidos que puedes poner para. Si estás por el espacio. Sangría toda persona salvará eso. Necesita entrar en el contenido. Y haremos una nueva carpeta llamada índice de búsqueda. Haremos si nuestro índice de código fecha de punto. Índice de búsqueda total, JSON. Índice enseñado. El privado es cierto porque no queremos que surja en los resultados de búsqueda. Ahora hemos cambiado el formato de salida. Hacemos que las salidas parte de la foto será HTML. No queremos eso, solo queremos JSON. Ahora podrías hacer esto en la búsqueda. Se pueden poner salidas de HTML y JSON. Pero si has hecho mi curso SEO, tendrás un meta para formato de salida alternativo. Y no queremos estar dejando motores de búsqueda ahora que también tenemos estos índices, por eso estamos haciendo un archivo separado. Vamos a calentarlo usando privado es igual a verdad. No salta en los resultados de búsqueda. O si has hecho mi curso de SEO, tampoco aparecerá en el mapa del sitio. Si puedes calcular que entonces bajará y ejecutaremos render a disk div. Y vamos a echar un vistazo en nuestra carpeta pública. Porque podemos ver lo que pasa mientras la dosis de su carrera. Tendremos índice de búsqueda buscando. Y luego se puede ver la salida. Y se ha sangrado con dos espacios. Dondequiera que una etiqueta normalmente estaría diciendo. Si no incluyéramos esa opción de sangría , eso no pasaría. Se habría identificado básicamente que esto está bien porque se modificará cuando se exporta. A partir de ahora debes usar la opción de mesa de referencia si estás intentando probar la funcionalidad de búsqueda. Porque si usas el servidor de desarrollo estándar, en realidad no compilará el índice de búsqueda porque el navegador no ha solicitado la caída. Por esa razón, debe usar render to disk. De esa manera. Realizará cada expediente a la cuota pública. Y de la siguiente manera están listos para irse. Corre más allá del guión de la bandera, dash render a DSC con ustedes dijeron. Entonces si ejecuto los renders, esta producción que incluye el comando minify, volverá en carpeta pública, abrirá nuestro index.js y notas que se ha minificado. Tienes JavaScript minificado blanco o CSS. Eso significaría si entro, pero unificará textos básicos como XML, HTML, JSON, etcétera. Voy a entrar en nuestra búsqueda dot js. En lugar del índice de búsqueda, vamos a ver obtener índice de búsqueda JSON x Eso es solicitudes HTTP XML que vamos a estar usando. Lo primero que tenemos que hacer cuando estamos usando XHR, tenemos que crear una nueva instancia. Así que crea nuestra función. Jason primero mirará el camino que vamos a conseguir. Entonces haremos la función de devolución de llamada y la función de devolución de llamada de error servirá. Xhr es igual a nueva solicitud XML HTTP. Pondremos un comentario al respecto. Lo segundo que haremos es que abriremos, configuraremos. El XHR. Dice que tenemos que hacer cuando estamos usando XHR, tenemos que crear una nueva instancia. Así que crea nuestra función, Jason. Y primero veremos el camino que vamos a estar consiguiendo. Entonces haremos la función de devolución de llamada y la función de devolución de llamada de error hará XHR es igual a nueva solicitud XML HTTP. Pondremos un comentario al respecto. Segundo lo que haremos es que abriremos, configuraremos el punto XHR abierto para el método en el que obtenemos. Entonces la URL a la ruta va a hacer es enviarla. Haremos un condicional. Se envían y reciben datos. Es XHR. En carga en. Puedes usar start on load. Pero el problema con el punto onload es que tienes un estatus de éxito 201st. Tienes otros números de estado por falla y todos están onload. También puedes hacer XHR dot on, dot on timeout. Pero para el propósito de esta aplicación, eso es bastante simple. Tenemos un estatus de 200 y tenemos otros estados. Haremos punto onload end, y luego vamos a hacer crear una función. Si el estatus de XHR es igual a 200. Eso es supuesto éxito va a hacer. Por un expediente. El éxito hará const data es igual a JSON, no pasar texto de respuesta de puntos XHR. Entonces lo haremos si se ha proporcionado la devolución de llamada, Estamos en callback y más archivos de datos que pasan ejecutarán la función de devolución de llamada de error. Len gritó la función de devolución de llamada de error. Entonces lo llamaremos get error. Por ejemplo. La función hará resultados de búsqueda dot era conectividad HTML. Entonces tenemos que entrar en lo que estamos llamando la búsqueda. En cambio, vamos a ir a buscar el JSON. Entonces vamos a estar ejecutando el getJSON y ponerlo en un camino, la devolución de llamada y la devolución de llamada de error obtienen la ruta JSON. Por lo que será slash index slash index dot. Y se puede ver eso por aquí a la izquierda en nuestra foto pública. Entonces tenemos nuestra devolución de llamada, que será búsqueda y nuestra devolución de llamada de error, que será obtener error. Ahora si baja a la función de búsqueda, notarás que tuvimos que proporcionar un patrón que ya no está sucediendo. Nos libraremos de eso. Los datos siguen siendo empujados de adentro hacia afuera. Callback con datos que aún se están empujando. Y nos pondremos en cada patrón y lo cambiaremos a consulta de búsqueda. La consulta de búsqueda sigue siendo la misma. Nunca cambia. No depende de la función anterior que usamos para llamar a búsqueda. Así que eso está bien. Podemos simplemente código duro que en. Diremos que voy a echar un vistazo en el navegador. Vamos a trabajar, vamos a pasar y simular un problema de conectividad con los usuarios que Internet corta antes de que se descargue el archivo de índice. Vamos a modificar ese nombre de archivo. Mira. Y verás que surge como era de la conectividad. Volveremos y arreglaremos eso. Hay una última cosa que haremos entonces es que vamos a configurar el Tommy fuera. Xhr dot Tawny fuera. Por ahora usaremos un código variable, Tommy arriba arriba donde definimos la función, ponemos en una variable de timeout y podemos poner un valor predeterminado aquí. Así que poner cuatro segundos, es en milisegundos, vendría en cuatro segundos como nuestro defecto. Entonces si en realidad no especificamos la hora y él dice por ejemplo, se pone en tres segundos. Si eso no se especifica, Eso está bien por lo que nuestra configuración predeterminada. Guarda eso y eso está todo listo para funcionar.