Jekyll: Ähnliche Artikel anzeigen (ohne Plugin)

Um die Verweildauer von Besuchern eures Blogs zu erhöhen, könnt ihr zu einem Artikel eine Auflistung ähnlicher bzw. themenverwandter Artikel (Related Posts) anzeigen. Auch ältere Artikel, die sonst vielleicht in der Versenkung verschwinden, können so bei entsprechender Themenrelevanz beworben werden.

Wie ihr für euren Jekyll-Blog mit wenigen Zeilen Code zu einem Artikel andere themenrelevante Artikel basierend auf den vergebenen Schlagwörtern (Tags) ermittelt sowie anzeigt, erfahrt ihr in diesem Beitrag.

Beispiel

Die folgende Abbildung zeigt, wie ich hier in meinem Blog unter einem Beitrag bis zu 5 themenverwandte Beiträge aufliste:

Code zum Ermitteln der ähnlichen Artikel

Im Verzeichnis _includes erstellt ihr eine Datei namens related-post-list.html mit dem folgendem Inhalt:

{% assign countRelatedPosts = 0 %}
{% assign maxRelatedPosts = 5 %}
{% assign relatedPostLinks = '' %}
{% assign relatedPostIds = [] %}

{% for postTag in page.tags %}
    {% if countRelatedPosts >= maxRelatedPosts %}
        {% break %}
    {% endif %}

    {% for relatedPost in site.tags[postTag] %}
        {% if relatedPostIds contains relatedPost.id %}
            {% continue %}
        {% endif %}

        {% if relatedPost.url != page.url %}
            {% capture link %}
                <li>
                    <a href="{{ relatedPost.url | absolute_url }}"
                       title="Beitrag: {{ relatedPost.title }}">
                        {{ relatedPost.title }}
                    </a>
                </li>
            {% endcapture link %}

            {% assign relatedPostLinks = relatedPostLinks | append: link %}
            {% assign countRelatedPosts = countRelatedPosts | plus: 1 %}
            {% assign postIdArray = relatedPost.id | split: ',' %}
            {% assign relatedPostIds = relatedPostIds | concat: postIdArray %}

            {% if countRelatedPosts >= maxRelatedPosts %}
                {% break %}
            {% endif %}
        {% endif %}
    {% endfor %}
{% endfor %}

{% if relatedPostLinks != '' %}
    <div>
        <span>
            Hat dir der Beitrag gefallen? Dann interessiert dich vielleicht auch:
        </span>
        <ul>
            {{ relatedPostLinks }}
        </ul>
    </div>
{% endif %}

Der Code wird im Kontext eines bestimmten Artikels aufgerufen. Basierend auf dessen Tags werden alle Artikel mit den gleichen Tags durchsucht. Sobald 5 (anpassbar via maxRelatedPosts themenverwandte Artikel gefunden werden, bricht die Schleife ab und es werden die generierten Links (relatedPostLinks) ausgegeben.

Code zum Anzeigen der ähnlichen Artikel

In eurer Layout-Datei zur Anzeige eines Artikels (bei mir _layouts/post.html - siehe auch Jekyll: Layouts) könnt ihr nun die soeben erstellte Datei an beliebiger Stelle einbinden:

<article>
    [...]
    <footer id="articleFooter">
        {% include related-post-list.html %}
    </footer>
</article>

Fazit

Den vorgestellten Code könnt ihr individuell anpassen. Ich habe ihn bei z.B. so erweitert, dass ich bei Bedarf im Front Matter eines Beitrags ähnliche Beiträge fest hinterlegen kann. Sollte die Anzahl der fest hinterlegten Beiträge nicht maxRelatedPosts entsprechen, so werden weitere zufällige themenverwandte Beiträge, wie in diesem Beitrag erläutert, ermittelt und angezeigt.

Alternativ besteht natürlich auch die Möglichkeit, die ähnlichen Artikel anhand der verwendeten Kategorien und nicht anhand der Tags zu ermitteln.