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 :

1
2
3
4
<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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<style>
#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
warning

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