Un moteur de recherche dans Hugo

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

• action="//google.com/search" ↪ indique que la recherche se fera avec Google
• target="_blank" ↪ ouvre un nouvel onglet pour afficher la recherche
• placeholder=“Rechercher…” ↪ écrit le mot Rechercher dans la barre
• value=“http://pingouindesalpes.com/hugo/post/ ↪ choix du répertoire scanné

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 :

• #search {float:right;} ↪ fait «flotter» la barre à droite
• .search{background: url({{.Site.BaseURL}}img/loupe2.png);} ↪ ajoute une image de loupe
• @media screen and (max-width: 1080px) {#search{display:none;}} ↪ fait disparaître la barre si la résolution est inférieure à 1080px

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