4 zeitsparende Codeblöcke für effektive Arbeit mit Kirby CMS

1. Klassennamen für Pre-Code-Blöcke in Kirby-Textfeldern

Okay, zugegeben: Dieser erste Tipp ist gar kein richtiger Code-Block, sondern ein Hack für Kirby Markdown-Editor. Trotzdem sehr nützlich: Sofern Du nicht markdown.extra aktiviert hast und den Pre-Code-Blöcken für Code-Beispiele auf Deiner Seite trotzdem Klassen geben möchtest (z.B. für einen Syntax-Highlighter), kannst Du Folgendes tun: Statt den jeweiligen Block mit drei Apostrophen (`) einzuleiten und zu beenden, kannst Du einfach eine Reihe aus 28 Apostrophen nutzen und den gewünschten Klassennamen direkt hinterher schreiben. Zum Schließen des Code-Blocks machst Du auch wieder eine Reihe von 28 Apostrophen. Anstatt also das hier zu benutzen:

```

Benutzt Du Folgendes:
````````````````````````````htmlum den Block zu beginnen.
```````````````````````````` um den Block zu beenden.

Was auch immer Du hinter die „Startreihe“ schreibst, wird als Klasse für den geänderten Pre-Code-Block verwendet.

Hier sind ein paar Beispiele:

 ````````````````````````````html
<!-- Wird umgewandelt in: -->
<pre><code class="language-html">


<!--Während Folgendes... -->
 ````````````````````````````javascript
<!--hierein umgewandelt wird: -->
<pre><code class="language-javascript">

Wie gesagt: Das ist besonders dann hilfreich, wenn Du Deinen<pre><code>-Blöcken Klassen für einen Syntax-Highlighter zuweisen möchtest.

2. Breadcrumb-Navigation die URL-Parameter berücksichtigt

Falls Du einen Blog hast, der (zum Beispiel zum Filtern verschiedener Kategorien oder Tags) mit URL-Parametern arbeitet (Beispiel: tag:gesichtskirmesoder ?category=synapsenfasching) , dann ist es von Vorteil, dies auch in der Breadcrumb-Navigation Deiner Website zu berücksichtigen. User sind es gewohnt, über die Breadcrumb-Navigation zur nächst höhergelegenen Ebene Deiner Website zurückzukehren. Ein Beispiel:

Du befindest Dich auf dem Blog einer Website und hast auf den Tag „Espresso“ geklickt, sodass Dir ausschließlich Artikel angezeigt werden, die auch mit „Espresso“ getaggt wurden. Die URL der Seite ist https://example.com/blog/?tag:espresso, aber die Breadcrumb-Navigation zeigt lediglich Home ➡️ Blog an. Wird nun noch die gängige Praxis befolgt, dass das letzte Element in den Breadcrumbs nicht verlinkt sein soll, gibt es keine Möglichkeit, über diese Navigation zurück in die ungefilterte Ansicht des Blogs zu gelangen. Sehr viel schöner wäre es dahin gehend, wenn die Navigation Home ➡️ Blog ➡️ Espresso anzeigen würde.

Kirby hat von Haus aus eine Funktion eingebaut, mit der das Bauen von Breadcrumb-Navigationen super leicht ist: $site->breadcrumb() | Kirby. Allerdings werden in dieser Lösung keinerlei URL-Paramter berücksichtigt. So können wir das ändern:

Als Erstes nehmen wir die oben im Link vorgeschlagene Lösung:

<nav class="breadcrumb" aria-label="breadcrumb">
  <ol>
    <?php foreach($site->breadcrumb() as $crumb): ?>
    <li>
      <a href="<?= $crumb->url() ?>" <?= e($crumb->isActive(), 'aria-current="page"') ?>>
        <?= html($crumb->title()) ?>
      </a>
    </li>
    <?php endforeach ?>
  </ol>
</nav>

Jetzt fragen wir mithilfe eines if-Statements ab, ob der aktuelle Eintrag aktiv ist (also ob der aktuelle Eintrag zur momentan angezeigten Seite gehört). Wenn dem nicht so ist, haben wir es gerade mit einer übergeordneten Seite zu tun und wir können einen verlinkten Breadcrumb ausgeben. Das tun wir im else-Statement:

<nav class="breadcrumb" aria-label="breadcrumb">
  <ol>
    <?php foreach($site->breadcrumb() as $crumb): ?>
    <li>
        <?php if($crumb->isActive()): ?>
            //Hier passiert später die Parameter-Abfrage
        <?php else: ?>
             <a href="<?= $crumb->url() ?>">
                <?= html($crumb->title()) ?>
             </a>
        <?php endif; ?>  
    </li>
    <?php endforeach ?>
  </ol>
</nav>

Nun kümmern wir uns um die Parameterverarbeitung, die eintritt, wenn der aktuelle Crumb aktiv ist. Dazu müssen wir zunächst überprüfen, ob es überhaupt einen Parameter mit dem entsprechenden Namen gibt. Innerhalb unseres <?php if($crumb->isActive()): ?>-Statements machen wir also noch ein if-Statement auf:
<?php if($breadcrumbtag = param('tag')): ?>
Wir fragen hier mithilfe von param('tag')ab, ob die aktuelle URL einen Parameter namens „tag“ hat und speichern das Ergebnis dieser Abfrage in der Variable $breadcrumbtag. Das bedeutet: Wenn die URL einen Parameter namens „tag“ hat, wird dessen Wert (in unserem oberen Beispiel wäre der Wert „Espresso“) in $breadcrumbtag gespeichert. Wenn nicht, wird false gespeichert. Für letzteren Fall können wir einfach den Titel des Breadcrumbs ausgeben, da wir uns auf einer aktiven Seite ohne Tag befinden. Daher schreiben wir ins else-Statement einfach <?php echo html($crumb->title());?>.

Ist hingegen ein Parameter namens „tag“ vorhanden und in $breadcrumbtaggespeichert, geben wir zunächst Link und Titel der aktuellen Seite ohne Parameter aus:

<a href="<?= $crumb->url() ?>">
  <?php echo html($crumb->title()) ?>
</a>

Danach schließen wir das aktuelle li-Element und machen ein neues auf. Darin zeigen wir $breadcrumbtag als Titel der aktuellen Seite an und haben so unser Ziel erreicht. Wichtig: Am besten gibst Du $breadcrumbtagnicht ungefiltert aus, sondern schickst es vorher durch ein urldecode(), um sicher zu sein, dass hier keine Missgeschicke in der Darstellung passieren. Unsere Parameterverarbeitung sieht zusammengesetzt jetzt so aus:

<?php if($breadcrumbtag = param('tag')): ?>
    <a href="<?= $crumb->url() ?>">
      <?php echo html($crumb->title()) ?>
    </a>
  </li>
  <li class="breadcrumb-item">
    <?php echo('' . urldecode($breadcrumbtag)); ?>
<?php else: ?>
  <?php echo html($crumb->title());?>              
<?php endif;?>

Und wenn wir diesen Code-Block nun noch in die normale Breadcrumb-Funktion von oben einbauen, haben wir eine Breadcrumb-Navigation, die auch Tags miteinbezieht:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
  <?php foreach($site->breadcrumb() as $crumb): ?>
    <li class="breadcrumb-item">
      <?php if($crumb->isActive()): ?>

        <?php if($breadcrumbtag = param('tag')): ?>
            <a href="<?= $crumb->url() ?>">
              <?php echo html($crumb->title()) ?>
            </a>
          </li>
          <li class="breadcrumb-item">
            <?php echo('' . urldecode($breadcrumbtag)); ?>
         <?php else: ?>
           <?php echo html($crumb->title());?>              
         <?php endif;?>

       <?php else: ?>
         <a href="<?php echo $crumb->url() ?>">
           <?php echo html($crumb->title()) ?>
         </a>
       <?php endif; ?>
      </li>
    <?php endforeach; ?>  
   </ol>
 </nav>

3. Alternate-Language-Links im Header für mehrsprachige Seiten

Falls Du auf Deiner Website mehrere Sprachen berücksichtigst, solltest Du im Header angeben, wo die anderssprachigen Versionen der jeweilig aufgerufenen Seite zu finden sind. Dadurch machst Du es Suchmaschinen einfacher, Usern Deinen Content direkt in der richtigen Sprache auszuliefern. Hier ist ein guter Beitrag, der die Basics dazu verständlich erklärt. In Kirby kannst Du diese Links ganz einfach setzen lassen, indem Du im Header-Snippet Deiner Seite diesen Code-Schnipsel einfügst:

  <?php foreach ($kirby->languages() as $language) : ?>
  <link rel="alternate" hreflang="<?php echo strtolower(html($language->code())); ?>" href="<?= $page->url($language->code()); ?>" />
  <?php endforeach; ?>
  <link rel="alternate" hreflang="x-default" href="<?= $page->url($kirby->defaultLanguage()->code()); ?>" />

Kirby setzt dann anhand dieses Loops:

  <?php foreach ($kirby->languages() as $language) : ?>

für jede Sprache einen Alternate-Link, dessen hreflang-Attribut mir dem Sprachcode der jeweiligen Sprache gefüllt wird (hreflang="<?php echo strtolower(html($language->code())); ?>"). Außerdem wird im href-Attribut direkt zur jeweiligen Sprachversion der Seite verlinkt (href="<?= $page->url($language->code()); ?>"). Das funktioniert übrigens auch, wenn Du verschiedene Sprachen über verschiedene Domains routest und / oder die Sprache der URLs angepasst hast. Nachdem die Links für alle Sprachen gesetzt wurden, wird, außerhalb des foreach-Loops, ein letzter Link mit dem hreflang-Attribut „x-default“ gesetzt, der angibt, wo die Standardversion dieser Seite zu finden ist. Dazu gibt Kirby einfach die Seiten-URL der Default-Sprache im href-Attribut aus: <?= $page->url($kirby->defaultLanguage()->code()); ?> . Einfach, aber wirkungsvoll!

4. Sitemap für Kirby-Seiten mit mehreren Sprachen

Kirby hat in seinen Docs eine wunderbare Anleitung, wie Du eine einfache xml-Sitemap automatisch generieren lässt:Sitemap for search engines | Kirby. Diese Anleitung funktioniert leider nur für Seiten, die in einer Sprache aufgesetzt sind. Ist Deine Seite jedoch mehrsprachig, musst Du eine kleine Änderung am Code vornehmen, um alle Sprachversionen Deiner Seiten zu berücksichtigen. Damit Du Dir die Arbeit nicht selbst machen musst, habe ich hier das Code-Snippet für Dich:

<?= ‚<?xml version=„1.0“ encoding=„utf-8“?>‘; ?>
<urlset xmlns=„http://www.sitemaps.org/schemas/sitemap/0.9“>
<?php foreach (kirby()->languages() as $language) : ?>
    <?php foreach ($pages as $p): ?>
        <?php if (in_array($p->uri(), $ignore)) continue ?>
        <url>
            <loc><?= html($p->url($language->code())) ?></loc>
            <lastmod><?= $p->modified(‚c‘, ‚date‘) ?></lastmod>
            <priority><?= ($p->isHomePage()) ? 1 : number_format(0.5 / $p->depth(), 1) ?></priority>
        </url>
    <?php endforeach ?>
<?php endforeach; ?>
</urlset>

Ich hoffe, diese 4 Tipps waren nützlich und haben Dir das Arbeiten mit Kirby etwas erleichtert. Falls Du weitere Fragen hast, stelle sie gern in den Kommentaren oder schreib mir eine eMail. Außerdem kann ich Dir nur wärmstens empfehlen, meinen Newsletter zu abonnieren. Ich schicke ihn nur selten raus, aber wenn er kommt, dann lohnt er sich – garantiert!