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.

JavaScript - Ein umfassender Einstieg in JavaScript, viele praktische Beispiele und eine Darstellung auch professioneller Techniken – all das zeichnet dieses unverzichtbare Handbuch aus. Es eignet sich sowohl für Anfänger, die JavaScript von Grund auf lernen, als auch für Fortgeschrittene und Profis, die wissen wollen, wie man moderne, dynamische Webanwendungen entwickelt. Hier finden Sie alle wichtigen Techniken - Ajax, jQuery, Node.js, DOM und mehr. Entdecken Sie die neuesten Trends, Techniken und Entwicklungen bis hin zur Steuerung von Microcontrollern. Machen Sie sich mit Objektorientierung, ECMAScript 6 und funktionaler Programmierung vertraut und profitieren Sie von zahlreichen praxisnahen Beispielen für den sofortigen Einsatz. Das perfekte Lehrbuch für moderne Webentwickler!

Über Amazon unterstützen

lesen...

© CMSWorkbench.de

seite paginator

about me

About me

Mein Name ist Oliver Lohse. Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Programmier-Sprachen und 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 24 Jahren arbeite ich als Entwickler in einem großen Softwareunternehmen für Versicherungen in Hannover Niedersachsen und seit etwa 37 Jahren im EDV-Sektor mit wechselnden Aufgaben.