Transcription
1. Intro: Bonjour, Shawn,
développeur de mon site Web et professeur et bienvenue dans mon cours
sur la recherche avec Hugo. Je suis ravi de
vous proposer ce cours car c'est l' un des
cours les plus demandés sur Skillshare, c'est si vous rencontrez une recherche dynamique sur votre site Web
tout comme Google, mais avec une statique,
vous l'avez vu. Tout au long du projet de cours. Je vais
vous montrer comment configurer un système de circuit ici encore. Et vous
générerez dynamiquement les résultats à l'aide JavaScript et de la bibliothèque
Dot js diffuse. Avec une petite quantité
de JavaScript, vous avez dit que
Excitous peut fonctionner comme un
site Web dynamique codé dans le langage principal comme
PHP. On se voit dans le cours.
2. Pour commencer: Pour commencer. Faisons OUI, même commencer, vous pouvez télécharger
ces fichiers zip pensés qu'il point et l'extraire. L'autre option est
que j'ai laissé le lien pour le référentiel Heat Hub
sur la branche principale, qui apparaît par défaut. Vous pouvez y télécharger un
fichier zip pour le code. Une fois que ce code est
ouvert dans Visual Studio Code, la photo entière, vous
devrez démarrer un nouveau terminal et exécuter
la commande npm install. Ce qui va faire, c'est qu'il va
entrer dans le fichier appelé
package.json, et il examinera les
dépendances et
les installera dans un dossier de fichiers
appelé modules de nœud. En particulier, il
installera la version de Hugo, spécifiée ici. Si vous accédez au
site Web et que vous pouvez voir quelle est la version la plus
récente et que vous pouvez
modifier cette dernière en une nouvelle version de Hugo. J'ai configuré cela pour simplifier
le processus d'installation. Hé les gars, vous n'avez pas
à vous soucier de le
faire dans un tas de scripts
sur le côté gauche. Ils seront exécutés en
fonction de la version de Hugo installée
dans les modules Node. Vraiment vite. Nous avons le
jour du script de développement que nous utilisons pour ajouter l'aperçu du serveur de développement
pour exécuter des chutes qui ont le paramètre de brouillon ou la date
qui est à l'avenir. Nous avons facturé la construction dans
le dossier public. Nous avons un rendu sur disque très similaire à celui de build,
sauf
que vous exécutez réellement le service afin que vous
puissiez le voir dans le
navigateur en même temps, nous avons div, aperçu et production de options
disponibles pour l'écriture sur disque. La vérification NPM permet de mettre à jour les dépendances
NPM, mais il ne s'agira pas de Hugo. Et après l'installation est des descriptifs exécutés
après que vous l'avez rencontré, ce qui installe vous allez. Si vous recherchez la valeur false
pour les leçons suivantes, suivez
simplement le lien vers
le référentiel GitHub puis modifiez la
branche non, par exemple, nous avons un problème dans
moins de quatre branches pour. Ensuite, vous pouvez télécharger le dossier zip
de cette leçon. Si vous essayez de télécharger
votre travail sur GitHub, vous devez
vous assurer de supprimer le dossier,
puis de réexécuter la
commande git qui s'y trouve. Une fois que vous avez supprimé
ce dossier documentaire. Donc ça se débarrasse de toute mon histoire
personnelle et
ensuite tu peux écrire la vôtre. Sinon, il
essaiera de le
télécharger dans mon référentiel Git. Et cela n'arrivera pas
parce que vous n'avez pas commissions pour vous assurer que docx conserve le dossier si
vous essayez de télécharger votre travail sur dot
to get ou GitHub. Sinon, je vous verrai
dans la prochaine leçon.
3. Ajouter fuse.js: Nous allons donc entrer directement et ajouter lien
Vue.js dans le bloc de section des
résultats. Nous allons aller de l'avant
et nous allons utiliser npm pour installer le fusible dot js. Nous allons donc copier
cette commande là. Mes chutes, j'ai été
comme je vous l'ai montré dans la section Démarrage, nous allons créer un nouveau terminal
et coller ce code. Et npm
installera-t-il le paquet ? Vous direz qu'il n'y a qu'un seul paquet
ajouté. n'y a aucune dépendance à
l'égard des points fusionnés js. Allons de l'avant
maintenant et regardons comment nous
allons importer Vue.js. Différentes versions que nous pouvons utiliser. Eh bien, en regardant les builds des modules
ES, ils ont eu un bundle moderne comme
des paquets ESM ou ES6. Et il y a quelques options. Nous avons le complet et le basique, puis nous avons les versions
minifiées. Nous allons utiliser minified parce qu'il y a quelque chose qui ne va pas, moins avec la version
non modifiée. Nous pouvons donc au moins un gallon et
y jeter un coup d'œil facilement. Faites défiler vers le bas, vous verrez que
la version complète inclut des opérations de recherche
étendues et de requêtes
logiques. Nous ne
les couvrons pas dans ce cours. Si vous deviez en avoir besoin, vous devrez passer
à la version complète. Mais d'ici là, nous
allons utiliser la version de base pour rendre les choses beaucoup plus faciles. Nous avons mis ces frais d'importation de
texte T de base à partir de la fusion dot js. Nous allons copier ça. Ensuite, nous créerons un nouveau dossier appelé assets. Et un dossier à l'intérieur ce JS cool et constituera notre fichier
Search dot-dot-dot, COMME nous appellerons notre recherche de
fichiers, pas coller cette pelouse. Mais ensuite, nous allons revenir en arrière et
attraper le point ASM point de base js. Maintenant, nous allons
déterminer où cette chute part réellement, ouvrira les modules de nœuds. Et le fuselage est. Et nous avons et nous pouvons
voir qu'il reste là-dedans. Nous devons donc modifier, être fusionné. C'est le suiveur
après. Nous allons sauver ça. Et maintenant, nous devons
importer ce fichier JavaScript
dans notre page de recherche. Nous allons le faire, nous allons aller
dans les mises en page, les
partiels et le pied de page du script. En bas. Nous avons fait le tour et le dessus
conditionnel P500 q point avec un T. majuscule Le
haut sera fouillé. Je vais mettre le
marquage N tout de suite. La fonction de base sera
appelée deux-points de recherche égal, car nous initialisons
le point de ressources variables pour obtenir le capital G. Et cela est relatif
au détenteur des actifs. C'est donc un SIG oblique.
C'est le code de base. On va y faire un peu plus. Nous allons utiliser un
faux arbre, des tuyaux de gueule, qui crée une
ressource à partir d'un modèle. Parce que dans quelques leçons Tom va
créer un index. Et pour que les choses soient simples, nous allons utiliser l'
index en ligne en JavaScript. Encore une fois, chaque joue vous
permet de
générer une partie de ce
JavaScript pour nous, C, index de toutes les pages
et de tous les mots clés,
textes et catégories et
autres. Sur ce site Web. La façon dont cela fonctionne est ce que nous utilisons
notre code ici. Il y a aussi un bon arrêt,
nous devrions juste faire. Et ensuite,
nous allons utiliser les ressources
dot execute comme modèle. Nous avons notre fichier de sortie. Je dois fournir le point deux. Il va copier cela. Mettez un popping, le
sortira comme le
même point oblique JS. Cela fournira le point. Et puis on va
lancer nous dot build. Et ensuite, nous allons utiliser
les empreintes digitales. Vous avez du mal à trouver
le personnage du pot, c'est Maj et le
bouton au-dessus d'Entrée. Nous étions sur les empreintes digitales.
Il va ajouter un hashtag à l'automne. Et c'est génial lorsque
nous générons un nouveau fichier, le faux à bout de souffle pour télécharger la dernière version
du fichier JavaScript, nous pouvons également ajouter une propriété d'
intégrité. Nous utilisons l'intégrité des points points-points pour générer le hachage d'intégrité. Si vous suivez mon cours sur la création de
JavaScript, vous apprendrez tout
sur ces choses. Ensuite, nous allons
mettre une balise de script. Nous allons donc faire de la source de script. Ce sera permalien qui vous fera avoir le R majuscule et le
P majuscule fera de l'intégrité. Ce sera un point tel, parsez-le d'un majuscule D. Je n'ai pas d'intégrité. Gardez ça. Et nous ne pourrons pas exécuter cette
statistique parce que nous n'avons pas de page avec le haut de la
recherche qui arrive. Nous allons donc sauver ça et je vous
verrai dans la prochaine leçon.
4. Options JS.Build: Nous allons maintenant installer JavaScript avec
des options de
construction. Vous allez, vous allez utiliser ESBL
pour créer JavaScript. Et nous étudions
différentes options de développement et de production. Et en regardant également
le code où
s'assurer qu'il est compatible avec la majorité des
navigateurs. Allez dans notre pied de page de script, HTML. Et juste au-dessus de l'endroit où
nous avons défini la recherche, nous allons créer une
nouvelle variable appelée Ops, options et ce que
nous appelons égal à. Ensuite, nous allons créer un
dictionnaire avec dict. Ensuite, après JS canard facturé,
insérera notre variable d'options. Nous allons maintenant créer un lien vers
la page Hago Docs
pour la construction de JavaScript. Disons qu'il utilise ESBL et son nombre d'options que
nous allons examiner. Le premier sera
réduit pour la production. Nous allons modifier notre
code pour réduire la taille. Vous pouvez également le faire avec un grossissement
des ressources
car vous obtenez tuyaux, mais vous n'
obtiendrez pas le même résultat. Nous obtenons de meilleurs résultats avec ESBL car il est conçu pour ES6. La prochaine option que nous allons
faire est de régénérer une carte source en ligne pendant
le développement afin que nous puissions voir où provient notre code
si nous essayons de déboguer. Le prochain est la cible, et c'est aussi bien pour
le développement que pour la production. Et nous allons
passer à l'ES 2015. C'est aussi bas que
possible avec Hugo, vous ne nous laissez pas
descendre à ES cinq. Malheureusement,
certains navigateurs comme Internet Explorer
nécessitent un x5. Vous devrez utiliser
Babel pour ça. Et babble est une option que vous pouvez faire avec Hugo, une option de faire fonctionner Bible. Et je le couvre dans mon cours de construction
JavaScript. Je passe en revue toutes
ces options
en détail
dans notre fichier HTML. La première option
que nous allons
définir est de minimiser. Et nous allons mettre cela à vrai. Vous n'aviez pas besoin de virgules inversées autour de true car c'est
booléen vrai ou faux. Et le prochain est la cible. Et nous allons régler
ça sur ES 2015. Nous allons simplement ajouter un commentaire sur
le fait qu'il s'agit nos options de production pour ESBL. Je vais mettre quelques tirets
et commencer une fin. Il n'y a pas de nouveaux espaces
et cela fera cela pour le reste de notre
fichier pour obtenir des espaces blancs supplémentaires ou de
nouvelles lignes dans notre code HTML. Nous voulons uniquement générer du HTML. Nous allons entrer en retrait parce que nous sommes
à l'intérieur de la déclaration if. Ensuite, nous
examinerons le développement, nous utilisons une déclaration conditionnelle. Si EQ est égal à un environnement de
point guide avec une majuscule E. En cherchant à
correspondre au développement, assurez-vous d'utiliser des virgules
inversées autour de lui et que tout est en minuscules
pour le développement. Mettez nos antagonistes
tout de suite avec des tirets. n'y a pas de nouvelles lignes ou d'espaces. Plus copiez notre
ligne d'opérations et nous la
collerons et la saisirons. Nous allons nous débarrasser du deux-points
car nous avons déjà initialisé en face de
la première fois où nous l'affectons ci-dessus. Maintenant, je vais
modifier, il
va supprimer minify car
il est faux par défaut. Nous allons mettre une
carte source avec un
M majuscule et c'est une carte singulière. Ensuite, j'ai mis des
cartes source, ça a fonctionné. Et la seule option est en ligne. Récapitulatif de la production,
nous cherchons à agrandir pour réduire la taille de
notre fichier. Et nous avons notre ES 2015
ciblée. Je vais simplement mettre un commentaire
au-dessus de nos options de développement. Nous avons mis en correspondance notre source
en ligne pour que nous puissions voir d'où vient
notre code. Nous avons nos
thérapies ciblées, 15. Nous allons aller avec
Hugo et l'oreille est remplie. Comme je l'ai dit, j'ai eu mon
cours sur la création de JavaScript. Si vous souhaitez en savoir plus sur l'un de ces
sujets plus importants.
5. Ajouter une recherche HTML: Je vais donc créer des
modèles pour le HTML, pour la fonction de recherche. Vers le contenu. Vous verrez que j'ai une configuration de
personnages de Futurama, ai obtenu les
pages des entreprises et des espèces pour afficher
les termes de taxonomie. Allons de l'avant et
créons une nouvelle page, ouvrira un nouveau
terminal et un crétin Hugo, nouvelle barre oblique de recherche point md. Ensuite, je créerai pour nous
une nouvelle page basée sur le modèle archétype. Je dois aider notre page et
nous appellerons les résultats de recherche. Nous allons lui donner un
type. Je vais chercher. Ensuite, nous devons ajouter un
paramètre privé. Et nous rendrons cela
vrai en utilisant cela lorsque nous créerons notre index afin que
cette page ne soit pas indexée. Nous allons sauver ça. Nous allons entrer dans nos mises en page, tenir debout et examiner les points de
soulignement par défaut. Copiera et collera un code HTML à point unique ou pour créer
un nouveau dossier appelé Rechercher. Nous allons le coller là-dedans. Ils apporteront quelques
modifications à la page. Ensuite, sous le contenu
créera une nouvelle div, et nous le nommerons JS dash. Les résultats de recherche utilisent le
majuscule R. C'est CamelCase. Ensuite, nous sauvegarderons cela et
ensuite nous allons exécuter notre contrôle du serveur de développement. Cliquez sur le lien et nous allons le
consulter dans le navigateur. Accédez à la recherche oblique. Nous avons notre page de
résultats de recherche ou nous inspectons, et nous sauvegarderons notre fichier
JavaScript cours d'extraction dans le pied de page. Donc, vous y jetez un coup d'œil. Nous avons la
source du script en bas, et c'est le
point de recherche js avec le hachage. Nous irons vers les sources
et chercherons dot js. Il n'y a encore rien. Une fois que nous avons créé une
nouvelle instance de chaussures lorsque nous créons
notre JavaScript pour exécuter la recherche réelle
, la bibliothèque de fusibles sera
en fait importante pour instant car nous n'avons pas
utilisé la variable. La variable n'a pas encore été utilisée. C'est pour cette raison que le bundler n'a pas eu d'importance. Vous devez donc créer la fonction
de recherche sur la barre de navigation. J'ai donc utilisé une barre de navigation
bootstrap cinq. Normalement, je n'ai pas la
recherche sur la plupart de mes sites Web. C'est pourquoi nous
avons une modification et nous
envisageons d'ajouter
cette photo ici. Vous pouvez le personnaliser au
fur et à mesure que vous faites défiler vers le bas, vous devrez saisir
l'intégralité du formulaire. Nous allons copier ça. Ensuite, nous le collerons après la balise de liste non ordonnée de fermeture. Eh bien, je dois
passer en revue et personnaliser le HTML est la première chose que
nous ferons sur le formulaire. Nous allons faire la méthode. Nous utilisons GET, puis l'action. Et c'est là que le
formulaire est envoyé. Et nous allons faire une barre oblique
de recherche oblique index.html, et c'est la page que
nous venons de créer. Nous allons ensuite
personnaliser
l' entrée pour cela. Nous allons voir
ce que Google utilise. Il suffit de ne pas google.com. Nous allons cliquer avec le bouton droit de la souris et inspecter. Je vais voir
ce qu'ils ont fait. Ils ont utilisé le nom égal à q, obtient q pour requête. Allez-y et réglez ça. De cette façon. Lorsque nous cliquons sur
le bouton Aller, le bouton Rechercher
Q apparaît dans l'URL avec le
contenu de l'entrée. Ensuite, nous pouvons saisir ce
contenu à l'aide de JavaScript. Normalement, vous l'utiliseriez en utilisant certains langages principaux comme PHP, mais dans ce cas, nous allons l'
utiliser sur le front end. Et nous devons
utiliser JavaScript pour
accéder à Cue à partir de l'URL. Et c'est tout utiliser
Git car
toutes ces données sont placées dans l'URL. Jetons un coup
d'œil ici. Nous avons facilité de capitalisation
automatique. prise en compte que nous essayons de
faire est de désactiver
de nombreuses fonctionnalités automatiquement
activées par les navigateurs. Le suivant, ils ont
0 auto-complété et plus souvent le copier. Et puis correction automatique. Pour s'en débarrasser. Nous n'allons pas utiliser l'
autofocus car nous ne voulons pas que la zone de recherche soit focalisée par défaut, car elle ne sera
qu'une petite partie du site Web. Mais on va fausser la vérification
orthographique. Je ne fais que cibler un couloir,
mettre différents navigateurs, essayer de
désactiver tous les luminaires qu'ils ont activés par défaut. La dernière chose que nous ferons est que
sur le formulaire réel
ajoutera un rôle égal à la recherche. Va vérifier
ça dans le navigateur. Sur n'importe quelle page du site, nous
pouvons mettre une requête en chaleur. Alors, testez-vous, par exemple, recherche nous amène à
la page des résultats de recherche, et nous avons notre
test q égal en haut. Par exemple, ici
sur la page d'accueil et nous l'avons mis dans Futurama. Nous amène ensuite à la page
des résultats de recherche. Nous avons une API de requête, nous pouvons
donc insérer
cette requête dans la page car il
n'y a pas de connexion directe. Nous ne faisons que charger un IG statique. Ensuite, nous utiliserons JavaScript
pour saisir ce paramètre, exécuter dans l'
index de toutes les pages. Effectuez la recherche réelle, puis produisez du code HTML
dynamiquement sur la page. C'est tout pour cette leçon,
je vous verrai dans la prochaine.
6. Récupérer les paramètres d'URL: Je vais chercher
les paramètres d' URL
avec JavaScript. Ouvrez OUT comme la salle. Et nous allons passer quelques
lignes et faire un commentaire. Et il y aura des paramètres, fonctions, des fonctions, et
nous appellerons ça des paramètres. Ensuite, nous ajouterons le
nom du paramètre. Maintenant, comprenez que
pour la plupart des gens, commencer avec JavaScript ne sera pas une force. Je comprends que ce
n'est pas un tutoriel, qui est une introduction
à JavaScript, mais je suis conscient du fait
que moi-même qui regarde ce tutoriel n'aura pas beaucoup d'
expérience avec JavaScript. Je fais donc de votre mieux pour
suivre et je ferai de mon mieux pour que tout soit aussi
simple que possible. Ce que nous faisons ici, c'est que
nous créons une fonction. Nous l'avons nommé « params ». Et quand nous appelons cette fonction, par
exemple, ci-dessous, params, dans le but de dire à une
fonction quel nom,
qui, principalement,
obtiendra le paramètre Q que nous
transmettons en
tant que variable. Pour que Q me laisse passer ça et vous verrez comment
cela fonctionne en une seconde. Maintenant, nous allons
créer une constante, et c'est une variable
qui ne change pas. Nous allons appeler
cela une chaîne de requête. Vous devriez toujours CamelCase. Dans vos variables,
vos fonctions. La constante de chaîne de requête
sera égale à la recherche de points de localisation,
fenêtre. Et ce que cela fera, c'
est qu'il retirera l'URL de l'URL de la page. C'est comme pourquoi
devrais-je le faire lorsque nous cliquons le bouton de recherche qui
va sur la page de recherche. Et nous avons notre URL en
haut de la chaîne de requête. Placez un
point-virgule à la fin de cela. Actuellement
Visual Studio Code, il s'appelle
chaîne de requête en gris clair. Et si vous placez votre souris, elle indiquera qu'elle a été déclarée, c' est ce
qui se passe, mais elle n'a pas vraiment été lue. Je dis également que
le paramètre name a été déclaré avec
il n'a jamais été lu. Nous utilisons donc ces variables. Vous le verrez dans le noir. Je vais créer une autre
constante appelée paramètres d'URL. C'est un peu extraire les
paramètres de l'URL. Pour que cela se produise. Nous allons créer
une nouvelle instance de livres de recherche d' URL et nous
assurer que vous obtenez le majuscule
correct qui devrait être complété automatiquement pour vous si
vous êtes dans Visual Studio Code. Nous devons fournir cette
fonction, la chaîne. Et ça va
être une chaîne de requête. C'est la constante
que nous utilisons du crédit, vous verrez que nous sommes juste les
géocodeurs qui ont choisi que nous créditons une constante
afin que nous puissions exploiter cela. Et il n'est plus gris clair. Lorsque nous exécutons cette fonction
ici, lorsque nous l'appelons, la valeur sera renvoyée
en place si ce mot, et pour y parvenir, nous
utilisons un mot-clé appelé Return. Nous allons renvoyer
l'URL, les paramètres, le point get. Et nous allons en utiliser
neuf. Que se passe-t-il ? La première ligne, nous tirons
l'URL, la barre d'URL, et le navigateur
obtiendra ensuite la pièce après le point d'
interrogation pour rechercher des amplis. Ensuite, à partir de là, chercher des kilos, nous ne voulons qu'un seul d'entre eux. C'est le Q. Ce que
nous créons ici est une fonction réutilisable que vous pouvez copier et coller
dans n'importe quelle application. Il n'y a pas de
code dur dedans. C'est q, ce qui signifie que
la requête de
recherche lorsque nous appuyons sur
le bouton Rechercher, nous fournissons Q et nous
appelons la fonction HE. Nous pouvons tester cela. Maintenant. Nous pouvons
faire un console.log ou une entrée. Nous allons faire console.log pour l'instant. Donc console.log. Ensuite, nous avons des paramètres q. La façon dont j'aime le
faire, c'est que je mets backticks et je mettrai la recherche. La requête est que nous faisons un signe dollar et un prix unique clairement autour de
notre code JavaScript réel. Ajoutons donc du code JavaScript. Habituellement, vous
mettiez une variable et nous pouvons faire une
fonction ou une nouvelle vie. Mais pour les textes, c'est
à l'intérieur des tiques arrière. Il y a donc nos coches arrière
pour l'ensemble du texte. Nous enveloppons notre JavaScript, signe
dollar et
les accolades bouclées. Nous sauvegarderons cela et
nous allons vérifier la requête de recherche
et l'enregistrer. Mettons les tests là
et nous allons chercher. Il nous amène à la page de recherche. Il y a un point d'interrogation. Donc, tout après
le point d'interrogation, c'est les requêtes et nous
voulons juste la requête de file d'attente, le q équivaut à test. Vous pouvez avoir plusieurs
requêtes là-dedans. Dans ce cas, nous ne le faisons pas. Mais avec le journal,
écrivez tout. Vous avez donc des
fonctions raisonnables que vous pouvez utiliser. Maintenant, les projets,
vous avez cliqué avec le bouton droit de la souris et inspectez. J'ai une console. Vous dites que console.log a
Ne lui demandez pas de rechercher la requête est alors son test tiré
par le haut. Et c'est ce que nous allons utiliser
pour lancer notre recherche, allons vérifier s'
il s'agit réellement d'une requête dans cette barre ou si les utilisateurs viennent de se retrouver sur
la page de recherche. Nous allons le faire, nous allons mettre
un autre commentaire en B, vérifier si une
recherche a eu lieu. Nous allons simplement nous débarrasser
de tout ce que les ticks vont faire la
constante et ce sera requête de
recherche qui
égalisera les paramètres. Par exemple, avant le test,
c'était notre requête de recherche. Nous pouvons y accéder maintenant avec
cette requête de recherche constante car nous avons ces fonctions réutilisables
que vous pouvez copier et coller dans n'importe quel
projet et qui extrait la requête ici et la requête que nous extrayons utilise
la requête de file d'attente et c'est assez standard pour la recherche. Utilisation conditionnelle pour vérifier
si une recherche a eu lieu. Si et ensuite
entre parenthèses la requête de recherche. Voyons s'il y a
vraiment du texte. Si, si cette fonction
renvoie des textes, cela signifie
que je recherche une
requête dans la barre d'URL. Cette fonction ne
renvoie aucun texte. C'est parce que la recherche
n'a pas eu lieu. Nous commencerons donc par le cas où cela a réellement eu lieu, puis
nous ferons une autre chose. Nous ajouterons un commentaire dans
leur requête de recherche. Nous allons afficher un message. Si non, par exemple, c'est le cas. Si la recherche a eu lieu, s'il y a une requête, nous ajouterons la barre de
recherche de requête à la recherche. On dirait donc que c'est un site Web
dynamique. Ensuite, nous lancerons la recherche. Allons de l'avant maintenant et
faisons en sorte que ces choses se produisent. Nous devons le faire, nous devons
faire quelques contenus ici. Nous ferons donc des recherches, entrées, des points de document,
des éléments par ID. Nous chercherons des entrées
de recherche de tiret JS. Ensuite, nous ferons des résultats de recherche égaux Document.getElementByID
par ID. recherche VGS. Reliez le lien vers notre bouton
unique, HTML. Et vous verrez que nous
avons notre div avec l'ID des résultats de recherche. Nous allons entrer dans notre en-tête, revenir à notre entrée de recherche. Et il n'y a actuellement
aucune pièce d'identité dessus. Ajoutez-y une pièce d'identité. Entrée JS audiblement. J'utilise un tiret JS
avant tous mes identifiants, que j'ai utilisé en JavaScript. Pour que je sache que je ne
devrais jamais supprimer cet ID à moins de savoir exactement où il est utilisé en JavaScript. Chaque fois que je vois un tiret
JS dans un ID, je sais que je
ne devrais pas le modifier
car JavaScript
cessera de fonctionner. L'idée est à
peu près utilisée uniquement pour cibler l'élément
en JavaScript. Nous avons installé deux atomes. Passons au message d'affichage, afficher un message. Pour afficher le message. Il s'agit d'un résultat de recherche simple. Dot InnerHTML est égal à. Ensuite, il suffit de
mettre le code HTML ici. Nous pouvons l'écrire. S'il vous plaît Saisissez votre recherche dans la zone de recherche. Ci-dessus. Placez un
point-virgule à la fin de la ligne. Nous garderons cela et
nous allons le tester. Nous allons retirer la requête. Vous verrez ce que nos
textes s'y plaisent et placez votre recherche dans
la zone de texte ci-dessus. Pourquoi un peu de rembourrage
en bas, une marge en dessous de cette div, ouvert notre page de recherche. Un peu de rembourrage au bas
de la rangée, PB cinq. Essayons d'ajouter
la requête à la recherche dans le port. Nous allons donc faire des entrées de recherche. La valeur est égale à la requête de recherche. Nous n'allons pas
chercher cette recherche. Gardez ça et jetez un coup d'œil. Nous retournerons à la maison. Et vous verrez que le test est
toujours en cours dans cette zone de recherche. Vous pouvez revenir en arrière et
vous pouvez le modifier, par
exemple, si nous l'exécutons sans
rien, nous recevons notre message d'erreur. Par exemple, l'utilisateur
vient de se retrouver sur cette page. Eh bien, maintenant, ce qu'ils
doivent faire pour faire la recherche. Ensuite, nous pouvons le faire, c'est
que nous pouvons mettre les textes
d'éclairage que l'équipe va
copier cela. Mettez-le là-dedans. Nous allons le changer en chargement. Quelques textes temporaires. Testez-le. Nous avons le chargement
, puis la recherche aura lieu et les textes
seront remplacés. C'est tout pour cette leçon.
Je vous verrai dans le prochain.
7. Créer l'index de recherche: Nous allons donc maintenant envisager de
créer un index de recherche, comme je l'ai déjà
dit, nous allons
créer cet index dans la ligne
du fichier JavaScript. De cette façon, nous pouvons
y effectuer une
recherche directe et nous n'
avons pas à nous soucier du code requis pour obtenir l'
index à partir d'un fichier externe. Mais plus tard dans le cours,
je vais vous montrer comment diviser votre index
en fichier externe. Accélérez un peu les choses, car vous n'avez pas de fichier
JavaScript qui est alourdi par l'index qui permet à votre
fichier JavaScript de se charger rapidement. Mais pour l'instant, nous créditerons
en ligne, faciliterons les choses. Commençons. Nous allons utiliser Scratch
pour travailler avec nos données. La raison pour laquelle nous
grattons plutôt
que des variables simples est
apparemment qu'elle fonctionne avec FASTA. Il y a peu de choses que vous
pouvez utiliser Scratch Fall pour contourner les
limites dans Qie Gei, mais nous l'utilisons
uniquement pour pique. Maintenant, nous allons à nouveau utiliser
une égratignure liquide car la vitesse n'est pas nécessaire
à lire sur d'autres pages. C'est l'une des raisons pour
lesquelles nous utilisons Scratch. Pour créer une nouvelle égratignure. Nous définissons une variable ,
puis nous lui
attribuons une nouvelle égratignure. Ensuite, nous pourrons utiliser toutes
les méthodes que nous avons, nous asseoir, obtenir et ajouter que nous allons utiliser
et nous ferons notre variable. Ils vont assigner dans
Scratch juste pour qu'il fonctionne avec les documents. Nous allons
tout d'abord créer notre nouvelle instance
Scratch. Ce que nous allons faire au sommet,
nous définissions une constante, nous y mettrons un commentaire. Et nous allons faire un tel indice
et c'est Jason. Chaque fois que nous le faisons
clairement à ce sujet. Mettez donc des tirets au
début et à la fin pour que nous ne nous retrouvions
pas avec un espace blanc supplémentaire. Je le ferai. Ils vont assigner
le côlon à gratter est égal à mu, gratter. Dans n'importe quel pas de zéro. Nous devons définir la clé que nous travaillons et
nous allons appeler cet indice. Et nous allons attribuer un emplacement pouvoir continuer à
ajouter des pertes de clips. On va gratter le point. Nous examinons l'index
k et nous ajouterons une fente, vous
ferons mettre un tiret à la fin. Nous n'allons pas
parcourir nos pages et
ajouter du Dada à cette
tranche de huit pages. Avant de pouvoir le
faire, nous devons
définir quelles sont nos pages. Pages à double espacement. Les deux-points correspondent à u point,
point, pages normales. Et c'est en quelque sorte un raccourci
qui est inclus dans HE Guy. Et il ajoutera toutes les pages irrégulières de votre site à cette
variable appelée Pages. Ensuite, je vais
le réduire avec ce que nous allons faire. La page est égale. Par conséquent, une modification de
la variable est le temps. Loin. Pages. Params point privé, pas égal, ce qui est une
exclamation égale à entrée vous
fait placer un
espace dans le tiret. Si vous
définissez un paramètre
privé et true sur
l' une de vos pages, ils ne seront pas inclus dans données de
l'ensemble car
nous n'incluons pages où params dot
private n'est pas défini sur true. d'autres termes, si vous
ne le définissez pas du tout, il ne l'
utilisera pas sur vrai. Vous pouvez également réduire les pages de contenu
que vous pouvez utiliser .com, par
exemple le type de page que vous souhaitez
définir sur deux produits. Par exemple, vous pouvez lever les yeux, il s'en va et vous
verrez comment cela fonctionne. À portée de nos pages. Et je mettrai l'intact
avant de continuer chaque page, nous allons faire une égratignure. Nous allons maintenant
ajouter un dictionnaire. Dans le dictionnaire vont
mettre dans la première semaine, ce sera un total. On va obtenir ça à partir du titre de
point que tu as eu avant, ce qui nous a dit que c'est logique. Nous examinerons ensuite un résumé
qui provient d'un résumé des points. Toutes ces
variables d'ego intégrées ont des majuscules. Nous examinons le contenu. Et normalement, vous
pensiez
que le contenu était plein de balises HTML. Nous allons utiliser l'avion. Si vous regardez le contenu, vous verrez que nous avons également
des entreprises et des commutateurs. Nous allons les faire entrer. Nous allons donc faire des entreprises. Une façon simple de
commencer plus tard, nous rendrons les choses plus
complexes. Conditions générales. Les entreprises. Ensuite, les espèces
seront des points, des params, des espèces de points. Enfin,
nous aurons besoin du lien, donc nous utiliserons le lien permanent
afin de pouvoir afficher la page complète des résultats sécurisés. Cela se fera par millilitre. Des idées normales, permanentes
pour le raccourcir un peu, mais nous voulons mettre tout
le lien permanent sur ces résultats
F tout comme Google. Le gentil rien n'est en fait imprimé
à l'écran. Nous allons donc simplement faire un
commentaire là-dedans. Et nous créons un tel index avec Scratch lorsque écrivons des données
dans notre JavaScript, surtout maintenant que nous avons ces tirets, le
début et la fin. Cela évite que les lignes ou les
espaces du genou ne se trouvent dans un fichier JavaScript de
douze. Ce que nous allons maintenant faire,
c'est de créer une variable et des données à classer. Et nous ferons un indice const égal. Et nous allons utiliser Git. Ce sera donc
scratch.mit.edu, un majuscule J. On obtient l'
index k que nous
avons écrit pour
ajouter ça là-dedans. Nous allons le
transformer en JSON. Jason. Si vous ne mettez pas de virgules, virgules
inversées, de
doubles communistes, cocher tout autour de
cela parce que cela ne fonctionnera pas. Vous devez le laisser tel quel. Et la chaleur, je vais
gérer ça pour vous. Nous allons mettre un
point-virgule à la fin, mais ensuite un console.log. Si vous deviez simplement
insérer l'index de recherche là-dedans, cela fonctionnera. Mais vous n'avez pas
reçu de signal parce que console.log ne
fonctionne pas avec Jason. Je dois utiliser une
fonction et c'est JSON
majuscule dans stringify. Et vous devez ouvrir
et fermer des crochets autour de vos données JSon. Et pour le rendre plus évident,
et les remettre en place, prenez les deux-points de données JSon, puis nous avons
un littéral de chaîne, signe
dollar, un crochet bouclé
autour de ce javascript. Fermez ce support bouclé,
fermez cette tique arrière. J'ai des
crochets de signe dollar autour de JavaScript, les coches
arrière autour de tout
le
littéral de chaîne sauveront cela et nous allons
jeter un coup d'œil dans le navigateur, lancer une recherche, et vous
inspecterez la console, Vous verrez que c'est
tiré vers nous. Données Json. Revenons le
rendre plus évident. Quantile entier Je
ferai une coche arrière, deux-points de données
JSON, puis un signe
dollar, une parenthèse bouclée. Dans un autre
crochet bouclé autour de toute notre journée JavaScript reviendrait cocher avant de fermer
le bracket full console.log qui et jetez
un coup d' œil aux données JSON qui
arrivent là-bas. C'est ce que nous allons
utiliser pour la recherche. Comme vous pouvez le constater, il est assez grand et il ne
va pas s'allonger. Et le plus grand site, et pour cette raison,
sera le projeter dans un suivi pour un
petit site sans aucun, j'ai pensé que vous pouvez le
laisser dans JavaScript et vous n'
auriez pas trop de
problèmes avec vitesse.
8. Créer la fonction de recherche: Nous allons créer
la fonction de recherche et exécuter quelques points js pour obtenir des résultats sur le
site Web de JS. Dans la démonstration en direct,
vous dites que j'ai l'index réel sur lequel les
données recherchaient. Ensuite, ce que nous devons
faire, c'est que nous devons définir nos options et nous avons toutes
les diapositives par défaut. Lui ils vont entrer là-dedans
parce qu'ils sont par défaut. A condition que les clés que
nous allons rechercher dans l'index réel. Ensuite, nous devons créer une
nouvelle instance et nous devons lui
transmettre l'index sur lequel les
données recherchaient et les options que
nous venons de définir. Ensuite, nous affecterons la recherche par
points fusionnés à une variable. Et nous pouvons accéder à nos
résultats par là. Si vous le souhaitez, vous pouvez
continuer et copier les options en permanence. Ensuite, sous ce que
nous avons déjà fait, nous créerons une nouvelle fonction
et nous appellerons la recherche. Disposera d'une propriété de données
qui est extraite et ouverte et fermée entre crochets. Ensuite, nous pouvons coller
nos options. Une fois que j'aime modifier, ce
sont les derniers matchs. Vous pouvez les parcourir
sur le site Web du fusible, ce qui signifie que Fuse
continuera à chercher même s'il trouve une correspondance parfaite. Et nous disons qu'il y a une longueur de personnage
correspondante. Je vais régler cela à deux pour qu'
il ne corresponde pas seulement caractères
individuels
imputés ion, vous finissez avec des résultats
et ignorez l'emplacement. Je vais définir cela sur vrai,
donc il va
chercher dans les chaînes. Et le seuil sur seulement besoin de rendre cela un
peu plus fin, va le régler à 0,4. Pour l'instant, vous pouvez toujours
jouer avec autant de personnes. Et regarder nos clés,
c'était définitivement total. Et nous réalisons également des résumés, du contenu, des entreprises
et des espèces. Et nous affinerons les
entreprises et les espaces plus tard. Voyons maintenant
affecter des blancs
à l'affaire parce que certains
enfants sont moins importants ou cette partie de la
faute peu pensaient que JS regarde la longueur du gâteau. Mélanger. clés qui sont plus courtes, ce qui leur donne une
plus grande importance et Kaizen plus long, par exemple, le contenu qui est assez long, vous le donnerez moins
important et nous avons un bref résumé et alors
il aura plus d'importance. Mais nous avons également des entreprises
et des espaces là dedans. Ils ne sont pas si
importants lorsqu'il
s'agit de chercher un personnage. Ce que nous allons donc faire, c'est
de créer des cartes. Et nous allons
avoir besoin d'un nom k, qui est résumé,
puis d'une clé blanche. Et vous devez viser moins
d'un
car on m'a
donné une valeur par défaut d'un. Nous allons donc faire notre résumé
0,8 parce que c'est très
important pour Tata. Nous allons simplement mettre un commentaire
là-dedans pour nous rappeler qui passe au blanc par défaut d'un. Nous n'avons pas eu à nous
soucier de changer cela. Et alors le contenu donnera 0,6. Ensuite, lancez quelques tests et
changez les entreprises, nous allons entrer dans le
blanc du point zéro pour cet important et
nous verrons ce qui se passe. Nous allons faire quelques tests à la fin. Ensuite, vous devez créer
notre nouvelle instance. Ensuite, nous
retournerons nos résultats. Collez cela sous
la variable d'options. Si vous regardez de près, nous avons fusible
équivaut à de nouveaux problèmes. Et nous passons dans
la liste et les options. Nous avons déjà mis des options ici, mais nous n'avons pas de liste. La liste
va en fait être dada. Dada. C'est pour toutes ces données. Ensuite, nous avons obtenu notre
modèle de recherche et nous allons le configurer. motif apparaîtra aussi. Ensuite, nous reviendrons à ce que
nous appelons notre fonction. Nous ajouterons notre modèle de recherche
et le modèle de recherche est la variable appelée requête
de recherche. Alors ajoutez-y ça. Maintenant, au lieu de
revenir, vous obtiendrez nouveaux résultats constants. Ensuite, nous vérifierons le type
de données renvoyées. Nous allons donc faire console.log. Et ensuite, les résultats. Javascript va nous dire
ce que nous regardons. La langue Javascript, ai-je dit, ce qui est renvoyé car de
tels résultats est un objet. Allons de l'avant et
nous allons faire une console, enregistrer cet objet et nous allons le
vérifier. Nous allons le faire. Au lieu du haut des résultats,
un littéral de chaîne, les résultats sont cochés en arrière. Ensuite, nous imprimerons notre objet de
résultats sur une chaîne. Nous allons jeter un coup d'œil
dans le navigateur. Il y a notre objet de résultats. Ensuite, la leçon suivante nous allons
voir comment imprimer ces résultats via
HTML sur l'écran.
9. Afficher les résultats: Il est maintenant question de savoir comment partager
les résultats qui vont imprimer du HTML dans la
fenêtre du navigateur via JavaScript. Si nous continuons, nous ajouterons
un commentaire rapide aux résultats, qui sont un objet. Nous allons nous débarrasser de ce
console.log. J'ai encore besoin de ça. Et nous appellerons une fonction
et nous l'appellerons
montrer que les résultats vont passer. Si nous continuons, nous ajouterons
un commentaire rapide aux résultats, qui sont un objet. Nous allons nous débarrasser de
ce console.log. besoin de ça. Nous appellerons une fonction et nous l'
appellerons montrer les résultats. Va le passer pour partager les résultats. Les résultats feront ensuite partager les résultats de notre
fonction. Nous allons accéder aux résultats. Motors a mis un cap dessus. Nous pouvons le trouver facilement. La première chose que nous allons faire est
de vérifier s'il y a une propriété length
sur les résultats. Nous commencerons par s'
il n'y a pas de résultats. Si ce n'est pas
le cas, l'explication
donne une longueur de point car les résultats
existeront toujours. Je vérifie s'il y
a une longueur dessus. Il y a toujours
des résultats générés. La variable, nous allons simplement
vérifier s'il y en a, s'il n'y a pas de liens, fera ce qui arrive en premier,
puis les résultats. Résultats de la recherche. Dot InnerHTML est égal à non. Résultats. Trouvé. C'est une ficelle. Juste pour reformuler la variable de
résultats de recherche. Nous trouvons cela au sommet. Et c'est notre div où nos
résultats de recherche sont affichés. Et auparavant, nous lui avons déjà écrit s'il
n'y a pas de requête de recherche, nous sommes marqués la
requête de recherche utilisateur dans la zone de recherche. Maintenant, j'écris ceci,
aucun résultat n'a été trouvé. Ensuite, nous ferons une autre chose. Voyons s'il y a des résultats. Je vais donc ajouter un commentaire
dans leurs résultats trouvés. L'objet de résultats. C'est un tableau. Nous allons le faire, c'est que nous examinerons
chaque objet de ce tableau. Fait les résultats pour chacun d'eux. Ceci utilise la syntaxe ES6. Déplacer. Ce que nous allons faire, c'est que nous allons clairement indiquer
que notre HTML
commence par se débarrasser de la recherche. La recherche de textes fera de cette chaîne
vide une chaîne vide. Nous le ferons, nous créditerons une constante
temporaire. Nous appellerons que cela
équivaut à l'élément. Ensuite, nous effectuerons des résultats
de recherche. Dot HTML plus, égal à. Plus égal signifie que
nous y ajoutons. C'est un raccourci à ajouter. La main longue serait
le résultat de la recherche. Dot InnerHTML est égal aux résultats
de recherche et à la sortie. Comme vous pouvez le constater, il est beaucoup plus
court d'utiliser plus, égal ou simplement ajouter. Nous allons sauver ça.
Je vais jeter un coup d'œil. Je vais devoir transformer les objets en ficelles pour les
manger, alors nous allons le faire. Ensuite, nous avons dû les
mettre en HTML. C'est temporairement que nous utiliserons JSON dot stringify sur l'
élément juste pour que nous puissions le voir. Vous pouvez voir que nous
avons maintenant l'automne et à l'intérieur
de l'automne, nous avons toutes les informations
que nous avons tirées. Quelques gars qui ont
acheté du contenu d'entreprises. Faites défiler soigneusement le contenu. Permalien,
résumé des espèces, total. Passons en revue
et nous allons essayer d'en
extraire quelques informations
. Nous allons le faire
constamment et cela apparaîtra
dans tous ces objets. Nous avons donc un
résumé total. Permalien. Le contenu, les entreprises, les espaces, les
mettent en prix. Et cela équivaut l'élément dot autumn
parce que nous avons essayé d'accéder
à tout
en automne. Ce que nous allons faire pour notre sortie, créer un littéral de chaîne que les ticks peuvent commencer
à insérer des ticks grossiers. Nous allons donc faire le titre, Lexis, total. Payez une nouvelle ligne juste pour l'instant. Nous allons faire du permalien. Je ferai des entreprises. Vous remarquerez que
le gris a tendance à être noir, ce le gris a tendance à être noir, qui signifie que mes
variables sont lues. Ensuite, nous ferons des espèces. En résumé. Ensuite, le contenu. Ça va jeter un coup d'oeil. J'ai maintenant des informations beaucoup
plus lisibles, un titre et c'est ce qui correspond le mieux leur famille, à leur
entreprise, à leur espèce. Ensuite, nous avons obtenu notre
résumé, puis nous entrons dans le contenu. Les gars, il y a un problème. Nous n'avons pas mis de nouvelle ligne avant titre, donc nous allons juste le réparer. Nouvelle buanderie pour la prochaine entrée. Vous verrez que nous avons
une deuxième entrée dans les 13 premiers matchs. Nous allons maintenant
chercher à créer
du code HTML pour mettre en forme
nos résultats de recherche. Par exemple, sur Google ici, nous allons voir
comment leurs
résultats de recherche sont formatés. Nous examinerons les images dans une leçon
ultérieure de ce cours. Mais nous allons envisager de mettre
le permalien et ils
se déplacent dans le
titre, le résumé. Allons de l'avant et
nous allons régler les choses. On dirait ce que nous avons fait. Nous ferons une classe div de PB gratuite pour ajouter un peu
de rembourrage au bas. rembourrage. Et nous allons faire une classe
div égale ligne, classe égale à appel, ajouter deux autres colonnes plus tard lorsque nous examinerons la mise en place d'une photo, notre en-tête dans HCI
remplacera les sangles d'amorçage. Margin, va mettre B1
touch avec plus petit. Ensuite, à partir de là, nous pouvons
mettre dans le titre, c'est un large flux
littéral sont vraiment utiles. Donc, Toddling Slash H3. Ensuite, nous
referons notre lien vers la marge ci-dessous. Il peut toujours être
personnalisé. Le curseur. J'y mettrai un coût. Et le lien sombre, parce que j'ai
aimé le Bootstrap par défaut, affichera également le lien permanent
appelé lien le titre. Je peux donc le copier. Fermez le mec. Je
publie un résumé, j'expose plus les cœurs,
alors je mets le résumé et maintenant je vais mettre dans les entreprises et les espaces
ne sont pas fournis. Il reviendra comme indéfini. Alors, mettez-y ça pour l'instant. Donc, avec cette entreprise pour aujourd'hui et plus tard
, nous chercherons à la
rendre au pluriel. Singulier. entreprise L'entreprise
mettra des espèces. Nous pouvons tout supprimer. Au-dessus. Les vêtements normaux sont des étiquettes. Nous allons le
ramener parce que j'ai été piquant. Enregistrez-le et jetez un coup d'œil dans
le navigateur. Regardons dedans. Super, je pense que nous aimerions nous
débarrasser du sous-jacent sur le lien pour revenir en arrière
et changer de classe. Je vais laisser le titre à la couleur principale.
C'est un bon début. La seule chose que j'allais
dire, c'est que nous aurons un problème : si une
entreprise n'a pas été créée, si vous vous présentez comme indéfinie et s'il y a
plusieurs entreprises, alors nous allons rencontrer il y a quelques problèmes
avec la pluralisation, mais nous allons
le régler dans la prochaine leçon. Pour l'instant. Nous allons terminer n'importe quoi. Si vous n'essayez pas de
traiter des données qui proviennent des rayons, vous avez à peu près réglé
votre recherche.
10. Créer des liens vers des taxonomies: Nous allons envisager de
créer des liens de taxonomie. Et nous dirons
pluraliser conditionnellement le titre
de la taxonomie. Et nous le cacherons complètement si la taxonomie n'existe pas. Nous devons donc d'abord modifier notre indice. À l'intérieur de la gamme. Nous allons créer
une nouvelle variable. Nous appellerons cela les Conditions de l'entreprise et plus l'initialiserons et
tous les points égaux obtiendront ceux de Tim, je suis à la recherche des Conditions de l'
entreprise. Pour créer une
diapositive vide. Il suffit d'appeler IT. Les entreprises vont l'initialiser
et ce sera juste un créneau pour l'instant. En fait, vous y mettez
des tirets et du style pour que nous ne nous
retrouvions pas avec plus d'espace. Maintenant, le fichier JavaScript et
la plage IVR out tombs. Dans le marquage, profiter
des tirets tout le temps. Ensuite, à chaque itération, nous allons ajouter à
la tranche de l'entreprise. Nous allons donc faire des entreprises égales aux entreprises et
ensuite plus épinglées. Ensuite, nous ajouterons un dictionnaire et
nous le mettrons au total. Total. Et ensuite, nous ferons un vrai lien PM. Rel, permalien. Je ne fais pas de famille parce que
c'est beaucoup plus long que nous pouvons économiser avec la rapamycine,
avoir moins de données, le permalien pour le résultat
réel de la recherche parce que je voulais l'afficher
à l'écran sans penser à un
le week-end, nettoyez un peu ça. Nous allons donc mettre des crochets
autour de ce titre. Ensuite, mettez un tuyau. Et la première chose que nous ferons,
c'est les yeux humains pour se débarrasser
des tirets dans le titre. Ensuite, nous ferons le titre pour mettre en
majuscule chaque lettre. Nous voulons cela non
seulement pour les entreprises, mais aussi pour les espèces. Nous utilisons Alt click. Ensuite, nous allons descendre dans
notre ajout de points à gratter. Au lieu de doter des powerapps, des sociétés de
points, ce seront
des sociétés à Dallas sur espèces pour accéder aux tranches
que nous venons de créer. Je vais l'enregistrer et
ensuite nous allons jeter un coup d'œil au dossier de recherche. Nous devons maintenant chercher à cibler
ce que nous avons juste du crédit. Nous avons donc à l'intérieur des entreprises
et à l'intérieur des espèces, nous avons maintenant des sociétés de
titres de points et aussi pour les espèces, nous
avons un titre de point d'espèce. Nous allons donc faire défiler vers le bas
. Le total de l'entreprise nous permet d'accéder à ces quatre
mêmes espèces. Je parle de ça.
Que signifie console.log. Nous examinerons l'
index de recherche et les coches arrière. C'est donc un littéral de chaîne. J'ai dit index, c'est
notre description. Signe du dollar, accolades ouvertes. Nous ne pouvons pas simplement écrire
l'index de recherche car il ne sera pas affiché sous forme de face sur l'objet, va exécuter le point
JSON de capital stringify. J'ai été un index de recherche entre crochets. Enregistrez-le dans le navigateur. Cliquez sur et inspectez
notre index de recherche. Si nous allons à Afficher plus, nous le copierons. Créez un nouveau fichier
avec le contrôle N, ID
le plus élevé, puis Alt, Maj F vers Format. Ensuite, nous examinerons
la structure des données. Nous avons le contenu, le résumé et le ciblage total et
pondéral. Joli. Juste avec du contenu,
désolé et total. Mais pour les entreprises et les
espèces, leur total, par
exemple, le total
des espaces est un enfant d'espèces. Nous ciblons donc cela avec le titre des points
d'espèces. Pour le total de l'entreprise, nous avons
ciblé le
titre des sociétés . C'est comme ça que
je l'ai mis en place. Et donc je vais supprimer
le fichier console.log. Venez là-dedans. Si c'était pour le code de production, je prendrais la ligne. Ensuite, nous allons
passer dans notre code HTML. Nous n'étions pas compagnie
dans les espaces. Ce que nous allons faire à l'intérieur du
foreach fera une fonction. Nous appellerons cela Taxonomie HTML. Nous transmettrons le nom de la taxonomie. Le titre singulier. Le pluriel total.
Pluriel, exploitation forestière. Nous allons vérifier la
longueur de la taxonomie. Pour vérifier cette
taxonomie. Taxonomie. Liens. Commentaire. Impression. Un ensemble de liens. tableau de taxonomie est égal à la fonction, point de
tableau à partir duquel nous
créons un tableau. Et nous créons
cela directement à partir de nos emplacements de taxonomie
que nous les transmettons, qui est également appelé tableau. Ensuite, nous devons
examiner la valeur que nous
allons utiliser. Notre fonction. Ensuite, nous utilisons retourné
pour ajouter ce qui suit
au tableau que nous avons
créé pour cortex sur moi REI, littéral de chaîne de
crédit
avec des coches arrière. Ne fera pas HREF égal à b, valeur point m liens que nous avons ajoutés
rouvrir liés au dictionnaire. Le dictionnaire devient de la valeur. Ensuite, nous le mettrons dans le titre. Titre. notre total singulier ou pluriel. Laissez la taxonomie, totale,
égale. Total, simple. Faites un conditionnel. Si la longueur des points de
taxonomie est supérieure ou
égale à deux. Taxonomie. Le total sera égal. Pluriel total. Désolé s'il y a
deux atomes ou plus dans notre taxonomie, non ? Ensuite, nous
examinons un total pleural. Maintenant, c'est une autre
chose et c'est que se passe-t-il si le titre pluriel
n'est pas fourni ? Nous pouvons donc vraiment gérer cela. Nous allons faire un total n. Permettez-moi de mettre quelques crochets
autour de l'opération. Le total pleural a été fourni lorsque nous
appelons la taxonomie HTML. S'il y a deux ou
plusieurs automatisées, le
connaissons correctement, alors nous
changerons le titre de notre taxonomie. Mettez-le sur le pluralisme. Total, générera du code HTML. Taxonomie, HTML. Retour en classe est égal à Pb. Encore une propriété
et de petits textes. Nous ajouterons nos textes de taxonomie. Donc le total où il est
singulier ou pluriel. Total de la taxonomie. Ensuite, mettez-moi notre texte sur moi. Très bien, nous allons nous débarrasser de
petits maintenant avec ce tableau, nous voulons mettre des virgules entre
chaque élément du tableau
afin que nous puissions réellement dater structure et mettre des commentaires
entre elle avec la jointure de points, puis nous spécifions
l'espace colorimétrique. Tout cela doit aller à
l'intérieur du conditionnel. S'il y a réellement une
longueur à la taxonomie. Au début de la fonction, une chaîne vide
s'affiche. Laissez HTML. Chaîne vide égale. Ensuite, s' il y a des
termes de taxonomie présents, nous allons
y ajouter du code HTML. Ensuite, après la condition, nous retournerons la
taxonomie HTML, qu'il
s'agisse d'une chaîne vide ou si nous y
avons ajouté du code HTML. Ensuite, nous
fermerons le neuronal. Soyez très prudent car
si vous travailliez avec Emmett, vous
n'aviez pas vraiment à le faire. Fermez. balises Html. Ça arrive pour vous. Nous pouvons le faire, c'est que nous pouvons
entrer dans notre code HTML ici. Et nous commencerons par les entreprises. Mettre en taxonomie la fonction HTML. Ensuite, nous avons maintenant un
laissez-passer. Le premier est la taxonomie. Quelle est donc la taxonomie ? taxonomie va
être des entreprises. Les entreprises seront le réseau
qui s'en sortira. Si vous y allez, nous
devons regarder le total singulier et le
total fournir à ces derniers une chaîne. Ainsi pensait, compagnie aussi singulière, coma, entreprises au pluriel. Ensuite, en dessous. Nous allons le refaire. Je vais passer par des espèces. Le total sera
des espaces pour le singulier. Et parce que c'est également
pour le pluriel, nous devrions nous inquiéter de
votre libération conditionnelle. Parce que si la raison que je suis au pluriel, cette étape ne se déroulera pas à travers cela, vous êtes
singulier pour les deux. Et nous allons contracter
le prêt pour les espèces, puis nous le sauvegarderons et
jetterons un coup d'œil dans le navigateur. Nous avons mis nos
liens en place. Allons ajouter
des données supplémentaires. Par exemple, les entreprises
sous Bender et nous dirons que s'il
arrive avec le coma, entrez dans notre contenu et nous irons dans des personnages dans Bender. Et sous les entreprises
le mettra en deuxième. Je vais donc mettre une virgule.
Il va juste en inventer un. Je goûte à la compagnie. Gardez ça. Maintenant, la
société de test arrive. Des liens cliquables
et tous nous mènent à la page pour voir
le terme de taxonomie. Voyons si on clique
sur la page sexuelle dix. Nous pouvons voir quels
autres enregistrements
partagent ces données et je
retirerai cette société de test. Si vous avez des difficultés à
faire camper
ces deux termes
dans le navigateur. Voici quelques façons de résoudre ce problème. Tout d'abord, il est facile de
tuer Hugo, disons bien, avec la broche ou le contrôle
C, redémarrer le serveur. La prochaine chose que nous pouvons
examiner pour la corriger
est un clic droit et l'inspecter. Ensuite, allez sur le réseau et les
cookies que je mettrai en cache. Et alors que l'écran est
encore ouvert, les outils disponibles, maintenez
le bouton de
la souris enfoncé sur l'actualisation et passez
à une charge matérielle. Cela fera de son mieux pour obtenir des données
totalement nouvelles de Hugo. J'ai déjà supprimé
ce centre d'enregistrement, peux le voir là. Mais si vous suivez l'une
ou l'autre ou les deux, vous résoudrez probablement votre
problème. Leçon sur les certificats.
Dans la prochaine leçon, nous examinerons l'ajout de photos
à nos résultats de recherche.
11. Ajouter des images pour obtenir des résultats: Si je songe à ajouter des photos
à nos résultats de recherche, nous avons regardé le contenu, vous remarquerez que
les images sont configurées en tant que ressources payantes. Le plafond, les images elles-mêmes sont assis
à côté des fichiers de marquage. Ce que nous allons
faire, c'est que nous voulons commencer par
changer notre index de recherche. Nous allons donc ajouter quelques
photos et la réponse à l'intérieur la plage créera une
nouvelle variable appelée image. Il suffit de le
transformer en une chaîne vierge. Pour l'instant. Nous allons commencer par vérifier s'il
existe un paramètre d'image. Juste une minute. Ensuite, nous
vérifierons si
au moins une image est définie dans cette image supérieure ou égale à la
longueur des images à points. S'il est égal ou
supérieur à un, sera mis en balisage, nous utiliserons un fouet
qui est comme un if. Les ressources correspondent. Et le Tim
sera le premier élément défini
dans les powerapps points. Les pages de points seront
l'élément d'index 0. Marquage. Nous allons utiliser notre variable d'
image que nous avons initialisée Alia, réfléchie, remplie. Et nous allons essayer une taille de 120 pi et nous le redimensionnerons pendant
une heure à 200 et large. Mettons-y quelques tirets
pour éviter l'espace blanc supplémentaire. Ensuite, nous convertirons
notre variable d'image en permalien relatif, le prêt hypothécaire en image de
dictionnaire. Image, qui est en fait un
permalien relatif permalien. Enregistrez-le dans notre code HTML. Nous modifions notre colonne, faisons ce S lui et mettons
une autre colonne dans SM2. Nous pouvons toujours changer
cela si cela ne fonctionne pas. classe Div est égale à l'appel. Sam va en faire quatre, et ensuite on va faire le Col, Md. Ce changement ici aussi. Sautez notre image dans l'image. Un g de liquide de tiret. Ensuite, nous sommes entrés dans nos
constantes et plus encore. Vous voulez dire, nous allons l'enregistrer et
jeter un coup d'œil dans le navigateur. Là. Je veux dire, ça
arrive. Je vais jeter un coup d'œil au redimensionnement de l'écran. C'est sur le petit. Et puis, quand
on est très petit, et qu'on arrive à petit, il arrive en quatre. Nous avons un médecin. Il va passer à deux et vous pouvez le
personnaliser comme
bon vous semble. Vous pouvez extraire des images
qui sont des ressources de page.
12. Indice de recherche séparé: Je vais séparer
l'index de recherche de la chute JavaScript et
dans son propre fichier JSON. Accélérez le temps
de location du fichier JavaScript. Nous allons le faire, nous allons entrer dans
les mises en page et nous allons créer un nouveau dossier et nous l'
appellerons index de recherche. Ensuite, ils créeront
un fichier appelé JSON
à point unique . Nous allons
dans nos recherches. Dot js mettra en évidence
tout ce que nous utilisons. Pour notre index de recherche. Nous allons le couper, le coller
dans le fichier JSON à un seul point. Vous devrez vous débarrasser
de ce JavaScript. Lonnie et le
point-virgule, le nettoyage du fichier JSON
pour qu'il ne soit pas minifié. Il y a une option que nous
pouvons utiliser et nous devons passer un dict. Ensuite, l'option est mise en retrait. Il s'agit de la quantité
d'indentation. Et nos deux
espaces préférés que vous pouvez mettre en place. Si vous voulez de l'espace. En retrait, une personne
sauvera cela. Il faut entrer dans le contenu. Et nous allons créer un nouveau dossier
appelé index de recherche. Fait si notre
code index point date. Index de recherche total, JSON. Index enseigné. Le privé est vrai car nous ne voulons pas qu'il
apparaisse dans les résultats de recherche. Nous avons maintenant modifié
le format de sortie. Nous faisons que nous produisons une partie
de la photo sera HTML. Nous ne voulons pas cela,
nous voulons juste JSON. Maintenant, vous pouvez le
faire dans la recherche. Vous pouvez placer
des sorties HTML et JSON. Mais si vous avez suivi
mon cours SEO, vous aurez un méta pour un format de sortie
alternatif. Et nous ne voulons pas laisser les moteurs de recherche maintenant que
nous avons également ces index, c'est pourquoi nous
faisons un fichier séparé. On va le chauffer en utilisant des équivalents
privés vrais. Il ne saute pas dans
les résultats de recherche. Ou si vous avez suivi mon cours SEO, il n'apparaîtra pas non plus dans
le plan du site. Si vous pouvez comprendre que cela
va descendre et nous allons exécuter
render to disk div. Et nous allons jeter un coup d'œil
dans notre dossier public. Parce qu'on peut
regarder ce qui se passe pendant la dose de sa course. Nous allons chercher un index de recherche. Ensuite, vous pouvez voir la sortie. Et il a été mis en retrait
avec deux espaces. Partout où une étiquette serait
normalement mentionnée. Si nous n'avions pas inclus cette
option de retrait , cela n'arriverait pas. Il aurait été
essentiellement identifié que c'est bien parce qu' il sera modifié
lors de son exportation. Vous devez désormais utiliser l'
option du bureau de référence si vous essayez tester la
fonctionnalité de recherche. Parce que si vous utilisez le serveur de développement
standard, il ne compilera pas réellement l'index de recherche car le navigateur n'a pas
demandé la chute. Pour cette raison, vous
devez utiliser le rendu sur disque. De cette façon. Il affichera chaque
fichier au quota public. Et de la façon suivante,
ils sont prêts à partir. Dépassez le tableau de bord du drapeau, rendez le
tableau de bord à DSC
avec vous avez dit. Ensuite, si j'exécute les rendus, cette production qui
inclut la commande minify retournera dans le dossier public, ouvrira notre index.js et vous
remarquerez qu'il a été réduit. Vous avez obtenu du
JavaScript ou du CSS minifié blanc. Cela signifierait-il que si je
rentre, mais cela
unifiera les textes de base tels que XML, HTML, JSON, etc. Je vais entrer dans
notre point de recherche. Au lieu de l'index de recherche, nous allons
chercher l'index de recherche JSON x. C'est des requêtes HTTP XML que
nous allons utiliser. Tout d'abord, lorsque
nous utilisons XHR, nous devons créer
une nouvelle instance. Créez donc notre fonction. Jason va d'abord
regarder le chemin que nous
allons emprunter. Ensuite, nous allons faire la fonction de
rappel et la
fonction de rappel d'erreur le fera. Xhr est égal à une nouvelle requête HTTP XML. Nous allons faire un commentaire là-dessus. La deuxième chose que nous allons faire est
d'ouvrir, de configurer. Le XHR. dit que nous devons faire
lorsque nous utilisons XHR, nous devons créer
une nouvelle instance. Alors créez notre fonction, Jason. Et nous allons d'abord examiner le chemin que nous
allons emprunter. Ensuite, nous effectuerons la fonction de
rappel et
la fonction de rappel d'erreur
fera que XHR équivaut à une nouvelle requête HTTP XML. Nous allons faire un commentaire là-dessus. Deuxièmement,
nous allons ouvrir, configurer le point XHR ouvert pour la méthode
dans laquelle nous obtenons. Ensuite, l'URL vers le chemin
va faire est de l'envoyer. Nous allons faire une condition. Les données sont envoyées et reçues. C'est XHR. À chargement. Vous pouvez utiliser Start on Load. Mais le problème
avec le téléchargement de points, c'est que
vous avez un statut
de 201e succès. Vous avez d'autres numéros d'
état en
cas d' échec et ils sont tous en charge. Vous pouvez également faire un point
XHR, un point sur le temporisation. Mais pour
cette application ,
c'est assez simple. Nous avons un statut de 200 et nous avons
d'autres statuts. Nous allons faire des points onload end, puis nous
créerons une fonction. Si le statut XHR est égal à 200. C'est supposé que le succès sera le cas. Pour un dossier. Le succès
des données const est égal à JSON, et
ne transmettra pas le texte de réponse au point XHR. Ensuite, nous le ferons si le rappel
a été fourni, nous sommes en rappel et
d'autres fichiers de données de transmission exécuteront la fonction de
rappel d'erreur. Len a crié la fonction de
rappel d'erreur. Nous allons donc appeler ça « get
error ». Par exemple. La fonction fera résultats
de recherche point ère de connectivité
HTML. Nous devons ensuite aborder ce que
nous appelons la recherche. Au lieu de cela,
on va chercher le JSON. Nous allons donc exécuter le GetJSON et le
mettre dans un chemin, le rappel et le
rappel d'erreur obtiendront le chemin JSON. Il s'agira donc d'un point d'
index oblique d'index oblique. Et vous pouvez
le voir ici à gauche sur notre photo publique. Ensuite, nous avons notre rappel, qui sera la recherche
et notre rappel d'erreur, qui recevra une erreur. Maintenant, si vous passez à
la fonction de recherche, vous remarquerez que nous avons
dû fournir un modèle qui ne se produit plus.
Nous allons nous en débarrasser. Les données sont toujours
envoyées de l'intérieur vers l'extérieur. Callback avec des données qui
sont toujours en cours d'envoi. Et nous allons aborder chaque
modèle et nous le modifierons en requête de recherche. La requête de recherche reste
la même. Il ne change jamais. Cela ne dépend pas de
la fonction précédente que nous utilisons pour appeler la recherche. Donc, c'est très bien. On peut juste coder ça en dur. Nous dirons que je vais jeter
un coup d'œil dans le navigateur. Travaillons, passons en revue
et simulons un problème de
connectivité avec les
coupes Internet des utilisateurs avant le téléchargement du fichier d'index. Nous allons modifier
ce nom de fichier. Regardez. Et vous verrez que c'est
l'ère de la connectivité. Nous y
retournerons et nous allons arranger ça. Il y a une dernière chose que
nous
ferons alors, c'est de configurer le Tommy. Elle a fait sortir Tawny. Pour l'instant, nous allons utiliser
un code variable, Tommy en haut, où nous
définissons la fonction, insérer une variable de délai d'attente et nous pouvons
mettre une valeur par défaut ici. Donc, mettez quatre secondes,
c'est en millisecondes, arriverait dans quatre
secondes par défaut. Donc, si nous ne
spécifions pas réellement l'heure et
qu'il dit par exemple, vous mettez trois secondes. Si ce n'est pas spécifié, c'est correct à
cause de notre configuration par défaut. Gardez cela et
tout est prêt à partir.
Sean Emerson, Web Developer and Static Site Specialist
