Contao News/Blog Tags

Wie umsetzen?

Das News/Blog Modul ist mal wirklich rudimentär ;-). Für eine einfache News Tag extension als Contao Neuling, habe ich mich wirklich schwer getan. Eine eigene Lösung entwickeln, hatte ich mir auch schon durch den Kopf gehen lassen, durch eine längere Pause in dem Projekt musste ich mich erstmal wieder in Contao einarbeiten.

Nach einigen Tests bin ich erstmal bei contao-tags von numero2 hängen geblieben. Ganz einfach, kein schnick schnack... fein.

Installation und Twig Templates

Vorab: Ich baue mein Contao erstmal in 4.13 auf und will nach Launch die Migration zu 5 angehen. Ich könnte auch mit 5 Starten, dann würde ich aber viele Erkenntnisse einfach Ignorieren.

Die Installation auf meiner lokalen Entwicklungsumgebung (DDEV) durchgeführt, dazu musste ich erstmal mittels ddev ssh in den Container. In der Shell dann einfach composer require numero2/contao-tags und vendor/bin/contao-console contao:migrate. Letzeres Fehlt in der Projekt berschreibung.

Für die Tag Cloud habe ich zwei Twig Files im Template Ordner angelegt. mod_news_tag_cloud.html.twig und mod_tag_cloud.html.twig, welche dank der Experimentellen Twig Bridge von Contao wunderbar funtioneren.

{# file: mod_news_tag_cloud.html #}
{% extends '@Contao/mod_tag_cloud.html.twig' %}

{# file: mod_tag_cloud.html.twig #}
{% extends '@Contao/mod_tag_cloud.html.twig' %}

{% block content %}

  <div class="tags mb-4">
    {% for tag in tags %}
      <span class="badge{% if tag.active %} active bg-primary{% else %} bg-secondary{% endif %}">
        <a href="{{ tag.href }}" rel="noindex nofollow" class="text-decoration-none">
          {{ tag.label }}</a> {# tag.count gibt die Blog breitrage des Tags wieder #}
        {% if tag.active %}
          <a href="{{ resetHref }}">
            <span class="text-info"><i class="fa-solid fa-circle-xmark"></i></span>
          </a>
        {% endif %}
      </span>

    {% endfor %}
  </div>

{% endblock %}