11 mars 2019   Webmaster   Css Hugo Google    2 min de lecture  

Un moteur de recherche dans Hugo

Table des matières

Comment utiliser un moteur de recherche Google pour votre site ? Celui-ci recherchera uniquement vos articles en ouvrant dans un autre onglet les résultats de sa recherche.

Comment procéder ?

Dans le fichier header.html, qui se trouve dans le répertoire layouts/partials de votre thème, il faut placer (pour que la barre de recherche soit toujours visible) le code HTML suivant :

<form id="search" method="get" action="//google.com/search" target="_blank">
  <input type="text" class="search" name="q" placeholder="Rechercher..." />
  <input type=hidden name=sitesearch value="http://pingouindesalpes.com/hugo/post/">
</form>

Explications

Mise en forme

Ajoutons au fichier général CSS les lignes suivantes :

#search {
  float:right;
  margin: 1em .5em .5em 0;
  }
.search{
  font-size:.9em;
  background: #fff url({{.Site.BaseURL}}img/loupe2.png);
  background-repeat: no-repeat;
  text-indent: 30px;
  padding:.3em;
  border: 1px solid #ccc;
 }
@media screen and (max-width: 1080px) {
#search{
    display:none;
}
}

Explications

Pour le formulaire, un id et une classe ont été définis ; (search). On retrouve dans le CSS :

Attention ! Il faut utiliser url({{.Site.BaseURL}}img/loupe2.png) pour l’image s’affiche avec tous les onglets.

commentaires produits par Disqus

© 2018 - 90v3Z - L3 P1n90U1n - Propulsé par Hugo