Der Seiten Paginator in Pico

Dieser Beitrag zeigt Ihnen, wie Sie mit wenigen Handgriffen einen Seitenpaginator und Blätterfunktion in Ihre CMS-Webseite bzw. Web-Blog implementieren.

Inhalt

Seiten-Paginator

Das kleine Flatfile CMS Pico bietet Ihnen einen vorgefertigten Seiten-Paginator mit dessen Hilfe Sie ausgehend von der aktuell engezeigten Seite, zur vorherigen oder nächsten Seite verzweigen können.

Binden Sie in Ihrem Pico Template das folgende Codeschnipsel (Bootstrap CSS) ein, um eine Blätterfunktion zu erhalten:

...  ...
056  <div class="row mt-5">
057    <div class="col-sm">
058      <a href="{{ previous_page.url }}"><h4>{{ previous_page.title }}</h4></a>
059      <hr>
060      <p>{{ previous_page.description }}</p>
061    </div>
062    <div class="col-sm">
063      <a href="{{ next_page.url }}"><h4>{{ next_page.title }}</h4></a>
064      <hr>
065      <p>{{ next_page.description }}</p>
066    </div>
067  </div>
...  ...

Beispielcode für Bootstrap CSS

Das obige Beispeil basiert auf dem populären Bootstrap CSS und erzeugt unterhalb des Beitrags-Contents zwei neue Spalten in denen links der vorherige Post und rechts der folgende Post angezeigt werden (ggf. müssen Sie das CSS an Ihren Style anpassen). Beide Spalten zeigen den klickbaren Titel und den Anleser des Beitrags aus dem Meta-Informationen des Textes an.

Genau betrachtet bietet das Pico CMS keinen echten Paginator, denn es ist in Wirklichkeit der Page.Tree, also der Verzeichnisbaum. Klicken Sie immer den vorangegangenen Beitrag an, funktioniert dies nur so lange Sie im aktuellen Verzeichnis auch vorgelagerte Beiträge haben, irgendwann landen Sie letztendlich auf der home-Seite, der Startseite. Der Page.Tree steigt aus dem untersten Zweig, Beitrag für Beitrag zurück, bis hin zur root auf und der Leser befindet sich auf der Wurzel.


FlightCMS
2024-01-28
PHP8
post
0