Une astuce que j’ai mise au point pour mimer une “suggestion d’articles”, comme on le voit sur les sites d’informations.

Sur Ouyaah!, en bas des pages d’articles on peut accéder à d’autres articles via une partie qui suggère des articles de la même catégorie.

Voilà comment faire.

Là où vous souhaitez mettre une liste d’articles suggérés (par exemple ça peut se mettre en bas de page, dans le layout post.html) , il faut écrire :

1
2
3
4
5
6
7
8
9
<h1>Autres articles ({{page.category}})</h1>
<div class="card-group">
{% assign suggested = (site.posts | where_exp: "item","item.categories contains page.category" | where_exp: "item", "item.title != page.title" | sample:2 ) %}
  <ul class="list-group">
    {% for p in suggested %}
    {% include list-item.html %}
    {% endfor %}
  </ul>
</div>

On sélectionne alors :

  1. tous les articles dont la catégorie est la même que la page actuellement consultée (where_exp: "item","item.categories contains page.category" )
  2. en excluant la page actuellement consultée (avec where_exp: "item", "item.title != page.title")
  3. et en en gardant deux articles aléatoires (avec sample:2),

Si comme moi, vous écrivez parfois des articles qui se rangent dans plusieurs catégories, vous pouvez sélectionner ces articles en remplaçant page.category par page.categories[0]. L’assignation de la variable suggested deviendra

1
	{% assign suggested = (site.posts | where_exp: "item","item.categories contains page.categories[0]" | where_exp: "item", "item.title != page.title" | sample:2 ) %}

Puis on crée notre include (dans _include/) qu’on nomme list-item.html, dont le code sera inclus par le code précédant, et qui se chargera d’afficher correctement l’aperçu des articles suggérés. Voici le contenu de mon list-item.html :

1
2
3
4
5
6
7
8
<li class="list-group-item post-{{p.categories[0]}}">
  <img src="{{site.baseurl}}/images/thumbnails/{{p.thumbnail}}" class="img-thumbnail rounded float-left col-md-3" width="10%">
  <div class="col-md-9">
    <a href="{{p.url}}"><h4>{{ p.title }}</h4></a>
    <p class="card-text">{{p.excerpt}}</p>
    <p class="card-text"><small class="text-muted">{% include date.html date=p.date %}</small></p>
  </div>
</li>

Merci à Phlow pour bout de code1.

Références