CMS - Workbench | DE


Templating and Coding for CMS (WordPress, Bludit, Automad, Typesetter, GetSimple, Pico and more)


Pico CMS Seiten Paginator

Dieser Beitrag zeigt Ihnen, wie Sie mit wenigen Handgriffen einen Seitenpaginator (Blätterfunktion) implementieren.

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.

02.01.2021 • Pico • Paginator Navigation Seiten Page


Oliver Lohse - Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Sprachen bzw. Markup-Dialekten, z.B.: Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 22 Jahren arbeite ich in einem grossen Softwareunternehmen in Niedersachsen. Sie sehen auf dieser Seite mein eigens für Bludit CMS entwickeltes Theme "Reaktor-Block IV".

Kontakt: Κontakt@Οliver-Lohse.de


Empfehlungen:



Breadcrumb Navigation

mehr...

Fußzeile unten fixieren

Erzeugen Sie eine fixierte Fußzeile (Footer) am unteren Ende der Webseite. Dieser Beitrag zeigt Ihnen wie einfach das mit CSS Mitteln ist.

mehr...

Next Previous Page Walker

mehr...

Seiten ausschließen

if-Kontrollstrukturen im Twig-Template helfen Ihnen bestimmte Seiten auszuschließen.

mehr...

Seiten sortieren

mehr...

Seitenpaginator

mehr...

Templates steuern

Mit diesem Codeschnipsel können Sie verschiedene Templates starten, jenachdem ob der Leser eine Seite, Kategorie, home oder Tag wählt.

mehr...



CMS Workbench

Hilfreiche Tipps, Tricks, Codings und Codeschnipsel, die im Rahmen der Entwicklung, Weiterentwicklung und Templatings zum Thema CMS immer wieder benötigt werden - aus verschiedenen Sprachdialekten wie Java, JavaScript, PHP, Python und anderen.