CMSWorkbench

PicoPagesList mit Twig ohne Plugin realisieren

Sat, 20 Jul 2024 02:00:00 +0200

Das PicoPageList Plugin

Befindet sich der Leser in einem Beitrag und möchte von dort in andere Artikel verzweigen, die ebenfalls im selben Ordner liegen, dann kann man sich des Plugins PicoPagesList.php bedienen und es in verschiedene Templates einhängen. Über dieses Plugin werden weitere Beiträge angezeigt, die sich im selben Ordner befinden.

Etwas nachteilig ist jedoch, das der Code für eine an sich simple Aufgabe, sehr kompliziert wirkt und das Layouting teilweise im Plugin erledigt werden muss.

PicoPagesList als Twig Modul

Wesentlich einfacher und der Aufgabenstellung angepasster, wird es mit einem Twig-Modul. Der Vorteil: der Code des Moduls ist sehr klein gehalten und die optische Gestaltung kann wie gewohnt im Template mit CSS-Mitteln erfolgen.

Der Twig-Code

Der Code ist mit wenigen Twig-Befehlen leichtgewichtig und gut verständlich aufgebaut:

{% set url  = current_page.id %}
{% set path = "" %}

{% for section in url|split('/',-1) %}
    {% set path = [path, section, '/']|join %}
{% endfor %}

<ul>
    {% for page in pages(path)|sort_by("title") if not page.hidden %}
        <li><a href="{{ page.url }}">{{ page.title }}</a></li>
    {% endfor %}
</ul>

PicoPagesList als alternatives Twig-Modul

Codebeschreibung

Am Beginn des Moduls wird die aktuelle URL des geöffneten Beitrags, mit dem Befehl split() in einzelne Bestandteile zerlegt. Die URL wird anhand der Slashes in ein Array aufgeteilt, wobei der Dateiname (Beitragsname) entfernt wird (-1). In der ersten for-Schleife wird die URL zu einem neuen String zusammengesetzt und in path kopiert.

Die Variable path wird in der zweiten for-Schleife verwendet, um das aktuelle Verzeichnis nach Beiträgen zu durchsuchen.

Einschränkung

Die Funktion des Twig-Moduls unterliegt mit seinen zehn Programmzeilen auch einer Einschränkung. Damit das Modul ein sinnvolles Ergebnis ermitteln kann, sollte es genau dann aufgerufen werden, wenn sich der Leser in einem Beitrag befindet, bzw. eine Markdown-Datei von Pico geöffnet wurde. Diese Einschränkung entsteht durch den Twig-Befehl url|split('/',-1), der immer den letzten URL-Teil entfernt, dies wäre der Beitragsname. Würde das Modul innerhalb eines Ordners oder Index gerufen werden, würde es eine falsche Struktur ermitteln.

Im Gegensatz dazu, ist das ursprüngliche Pico Plugin PicoPagesList.php mit seinen etwa 250 Programmzeilen deutlich flexibler und Leistungsfähiger aber auch nur wenig spezialisiert wie das hier im Beitrags gezeigte Twig-Modul.

Einen RSS Feed für Pico mit Twig erzeugen

Tue, 09 Jul 2024 02:00:00 +0200

Was sind RSS-Feeds?

Kurz gesagt sind RSS-Feeds nichts anderes als kleine Nachrichtenticker, die sich in Ihrem Browser bemerkbar machen, wenn neue Artikel auf Ihrer Lieblingsseite bereit stehen. Dazu benötigen Sie einen RSS-Reader, um den aktuellen Feed einer Webseite zu empfangen. Die kostenlosen RSS-Reader, können Sie über die Einstellungen des Browsers hinzuladen und einrichten. Geben Sie dann noch die URL zu einem Feed einer Webseite ein, dann erhalten Sie regelmäßig einen kleinen Anleser des neuen Artikels der beobachteten Webseite - ganz einfach und easy.

In Zeiten von User- und IP-Tracking, sind RSS-Feeds wieder sehr beliebt geworden, denn in den meisten Fällen können Sie damit nervigen Werbebannern und Popups aus dem Wege gehen, denn der Feed ist von der auf der Webseite laufenden Werbung in den meisten Fällen unbeeindruckt.

RSS-Struktur

Der RSS-Feed ist nichts weiter als ein standardisierter Datenstrom der die folgende Struktur haben muss:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">

<channel>
    <title>       Titel des Feeds                     </title>
    <link>        URL der Webpräsenz                  </link>
    <description> Kurze Beschreibung des Feeds        </description>
    <language>    Sprache des Feeds (z. B. "de-de")   </language>
    <copyright>   Autor des Feeds                     </copyright>
    <pubDate>     Datum("Tue, 8 Jul 2008 2:43:19")    </pubDate>
    <image>
        <url>     URL einer einzubindenden Grafik     </url>
        <title>   Bildtitel                           </title>
        <link>    URL, mit der das Bild verknüpft ist </link>
    </image>

    <item>
        <title>       Titel des Eintrags                      </title>
        <description> Kurze Zusammenfassung des Eintrags      </description>
        <link>        Link zum vollständigen Eintrag          </link>
        <author>      Autor des Artikels, E-Mail-Adresse      </author>
        <guid>        Eindeutige Identifikation des Eintrages </guid>
        <pubDate>     Datum des Items                         </pubDate>
    </item>

    <item>
        ...
    </item>

</channel>

</rss>

Das CMS Pico muss also die zu sendenden Daten in dieses Format verpacken und an den RSS-Reader eines Lesers senden und das ist dank Twig recht leicht erledigt.

Der Beitrag feed.md

Damit der Feed eine URL-Entsprechung in Ihrer Webseite bekommt, muss ein Beitrag mit dem namen feed.md in der typischen Pico-manier erstellt werden. Wenn Sie mögen können Sie die Meta-Attribute des Beitrags wie gewohnt füllen aber am wichtigsten ist das Meta-Attribut Template, denn hier muss feed eingetragen werden, damit Pico das Template feed startet, welches die Daten aus dem CMS sammelt und den Datenstrom an den Feedreader des Lesers sendet.

---
Title:       RSS Feed
Template:    feed
Hidden:      true
Description: Sendet den Feed an den Leser
---

Den Beitrag sollten Sie im Root des Content-Verzeichnis ablegen, damit er klassisch ala: https://CMSWorkbench.de/feed gerufen werden kann. Diese Form wird in der Regel erwartet, kann aber auch in einem bestimmten Verzeichnis oder in einer speziellen Kategorie liegen.

Hinweis: Damit der feed.md Beitrag nicht mit in der regulären Navigation des CMS und zwischen den restlichen Beiträgen erscheint, sollten Sie zusätzlich noch das Meta-Attribut Hidden: true setzen.

Das Twig-Template feed.twig

Das Template feed.twig wird vom Beitrag feed.md aufgerufen und wird die eigentliche Arbeit leisten. Das Twig-Template soll das folgende Coding erhalten:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
{% set RFC822 = "D, d M Y H:i:s O" %}
<channel>

    <title>{{ site_title | e }}</title>
    <description>{{ pages.index.meta.description | e }}</description>

    <link>{{ base_url }}/</link>
    <atom:link href="{{ base_url ~ "/feed" }}" rel="self" type="application/rss+xml"/>
    <pubDate>{{ "now" | date(RFC822) }}</pubDate>
    <lastBuildDate>{{ "now" | date(RFC822) }}</lastBuildDate>
    <generator>Pico</generator>

    <!-- Der rss-feed sendet alle mit Sticky markierten Beiträge -->

    {% for page in pages if page.meta.Sticky and not end %}
        <item>
            <title>       {{ page.title | e }}           </title>
            <description> {{ page.id | content | e }}    </description>
            <pubDate>     {{ page.date | date(RFC822) }} </pubDate>
            <link>        {{ page.url }}                 </link>
            <guid isPermaLink="true">{{ page.url }}      </guid>
        </item>
        {% if loop.index == 5 %}{% set end = true %}{% endif %}
    {% endfor %}

</channel>
</rss>

Bei diesem Twig-Script handelt es sich im wesentlichen, um die vorangegangene Definition des RSS-Feed, allerdings sorgt der Loop dafür, das nicht zwingend immer die neuesten Beiträge gesendet werden, sondern die Beiträge, die vom Redakteur bewusst hervorgehoben wurden (Sticky: true), das ermöglicht eine bessere Steuerung des Outputs Ihrer Webseite. Denn Sie können den Feed beispielsweise auch bei XING einbinden und dort ist es erfahrungsgemäß besser, wenn nur ausgesuchte Beiträge im XING-feed für die Recruiter zu sehen sind (vertrauen Sie mir :).

{copyright}

Hinweis: der Filter |e soll lediglich dafür sorgen, das Escape-Sequenzen gefiltert werden, um Fehler durch Sonderzeichen zu verhindern. {autor} {mail}

Ein eigenes CMS programmieren I.

Sat, 17 Feb 2024 01:00:00 +0100

Programmieren Sie Ihr eigenes CMS I.

In diesem Workshop programmieren Sie Ihr eigenes individuelles Content Management System. Sie beginnen zunächst mit der PHP-Programmierung eines ganz rudimentären aber dennoch funktionsfähigem CMS, das aus wenigen PHP-Skripten besteht. Die Entwicklung wird sich größtenteils an das beliebte MVC-Pattern halten, damit der Code und die Verzeichnisstruktur übersichtlich bleibt. Damit Sie nicht jedes Code-Beispiel mühsam aus den einzelnen Beiträgen herauskopieren müssen, finden Sie den Quellcode zum fertigen Download im Teil 1 des Workshops. Nach dem ersten Teil des Workshops wird es noch zwei weitere Teile geben, in denen Sie beispielsweise die externe und beliebte Template-Engine Smarty einbinden und die Grundfunktionen der Basis-version erheblich aufwerten. Im dritten Teil werden Sie das CMS noch mit Plugins erweitern und Ihr eigenes Content Management System finalisieren.

Warum Sie unbedingt ein eigenes CMS programmieren sollten?

Sicherlich ist das Internet voll mit sehr guten Content Management Systemen wie beispielsweise WordPress, Joomla oder das überaus beliebte Flatfile CMS Bludit, die man sehr bequem verwenden kann und mit denen man out of the Box überaus professionelle Webseiten ruckzuck zaubert. Dennoch kann man einen starken Trend im Web erkennen, denn in den vielen Foren werden die Fragen wie man ein eigenes CMS entwickelt immer häufiger gestellt. Doch warum hat dieser Trend in den letzten Jahren so zugenommen?

Befreien Sie Ihren Content vom Ballast

Sicherlich ist der gute Ruf von WordPress gerechtfertigt, dennoch steigen immer mehr Anwender aus diesem gigantischen Content Management System aus, der Grund? Ganz einfach! WordPress ist unglaublich komplex und nahezu überladen mit Funktionen die man gefühlt kaum noch unter Kontrolle hat. Dazu kommt, das kein Tag vergeht, an dem nicht eine neue Sicherheitslücke in diesem beliebten CMS entdeckt wird. Vielen Usern wird dann im Laufe des Betriebes klar, das sie von dieser unglaublichen Funktionsfülle lediglich 10% nutzen wollen, warum dann nicht auch für ein CMS entscheiden, welches genau diese 10% abdeckt?

Die Corona-Pandemie hat den Trend verstärkt

Die kürzliche Corona-Pandemie hat viele Unternehmen dazu gezwungen ihre Geschäfte und Projekte in das Internet zu verlagern, denn sind Sie nicht im Internet, dann gibt es Sie nicht!. Dabei hat sich deutlich gezeigt, wie schlecht Unternehmen oder Projekte auf die digitale Welt vorbereitet waren. Es mangelt immer noch massiv an Wissen und Erfahrung wie Inhalte im Web positioniert werden können. Folglich stürzten sich viele vollkommen ahnungslos mit WordPress ins Web und mussten nach wenigen Monaten die Segel streichen, da die Seiten entweder einem Angriff zum Opfer vielen oder die eingesetzten Administratoren dem System nicht gewachsen waren, denn gut ausgebildetes Fachpersonal ist besonders in den technischen Berufen in den letzten Jahren Mangelware geworden.

Sie bauen hohen Skill auf

Entwickeln Sie Ihr eigenes Content Management System selbst, dann kennen Sie jede Schraube und jeden Winkel im System - Sie sind dann ein Profi des Systems. So ganz nebenbei sammeln Sie sehr viel Erfahrung rund um viele Webtechniken, die Funktionsweise von Servern unter Linux oder Windows, und und und... Ihr Erfahrungsschatz wird anwachsen und Ihnen wird sicherlich niemand mehr etwas vor machen können.

Geringer Angriffsvektor im eigenen CMS

Nun noch ein Blick auf den wohl wichtigsten Aspekt bei der Programmierung eines eigenen Content Management Systems, die Sicherheit. WordPress ist das weltweit am häufigsten attackierte CMS im Internet, warum? Ganz einfach! Es ist beliebt und hat die meisten Installationen im Web, zudem ist der Quellcode gut dokumentiert und die Anwender des Systems zugegeben auch teils sehr naiv was die Sicherheit des Systems betrifft. WordPress ist also ein lohnenswertes Ziel für Angreifer, da es viele begünstigende Faktoren gibt.

Schreiben Sie Ihr eigenes CMS, dann ist es für Angreifer zunächst vollkommen unbekannt und undokumentiert. Zudem können Sie unterstellen, das die Komplexität des Systems kleiner ist und folglich weniger Sicherheitslücken generiert. Sofern sich ein Angriff gegen Ihr CMS überhaupt lohnt, müssten Hacker und Angreifer das System auf Schwachstellen und Sicherheitslücken untersuchen und das kostet viel Zeit und Geld im Vergleich zum möglichen Erfolg des Angriffs. Dies ist im übrigen auch einer der Gründe, warum gerade die bis dahin recht unbekannten Flatfile CMS wie Pico oder Bludit gerade einen rasanten Anstieg der Installationen erleben - denn sie gelten als extrem sicher.

Geringere Abhängigkeiten zu unsicheren Projekten

Das bekannte und beliebte PICO CMS ist ein gutes Besipiel für die negativen Folgen solcher Abhängigkeiten, denn PICO war sehr lange Zeit nicht unter PHP8+ lauffähig und diese Webseiten mussten unter höheren Kosten des PHP7 Support betrieben werden. PICO konnte über einige Jahre nicht auf die nächste PHP-Version angehoben werden, da die enthaltenen Projekte nur für eine ältere PHP-Version verfügbar waren. Erst im Laufe der Zeit konnten die enthaltenen externen Komponenten von deren Entwicklern auf die neue PHP-Version angehoben werden. Dieser Makel war teuer und ärgerlich für die vielen User und Benutzer von PICO CMS.

Ein anderes Beispiel ist WordPress, denn es vergeht kein Tag, an dem nicht eine Sicherheitslücke in irgendeinem der vielen Plugins oder Themes gemeldet wird. Das beliebteste Content Management System dieses Planeten ist zugleich auch das unsicherste CMS der Welt! Plugins und Themes stammen oft aus unsicheren Quellen dubioser Entwickler.

Bessere Breadcrumb Navigation mit Twig

Sun, 07 Jul 2024 02:00:00 +0200

Breadcrumb Navigation mit Twig

Die so genannte Breadcrumb Navigation (Brotkrumen Navigation) hat sich im Internet sehr stark verbreitet und gehört, zumindest auf komplexen Webseiten, zur Standardnavigation.

<a href="/" class="badge bg-secondary">home</a>
{% for path in current_page.id|split('/',-1) %}
    {% set tmp = [tmp,path]|join('/') %}
    <a href="{{tmp}}" class="badge bg-secondary">{{path}}</a>
{% endfor %}

Code: automatische Breadcrumb Navigation mit Twig

Das kurze Coding stellt im Style des Bootstrap-CSS eine Reihe von klickbaren Buttons dar, der zum jeweilig übergeordneten Ordner verzweigen kann. Je Verzeichnis ein Button.

Alternative Variante

Wollen Sie einen etwas leichter lesbaren Code erstellen, können Sie auch gerne das folgende Code-Beispiel nutzen.

{% if page.id|split('/')[0] %} {{ page.id|split('/',-1)[0] }} {% endif %}
{% if page.id|split('/')[1] %}/{{ page.id|split('/',-1)[1] }} {% endif %}
{% if page.id|split('/')[2] %}/{{ page.id|split('/',-1)[2] }} {% endif %}
{% if page.id|split('/')[3] %}/{{ page.id|split('/',-1)[3] }} {% endif %}

Code: diskrete Programmierung

Der Befehl split() zerlegt die gesamte URL in ein Array und der if prüft die Existenz und zeigt den Inhalt der entsprechenden Stufe an.

Allerdings müssen Sie diese Variante manuell erweitern, wenn mehr als vier Verzeichnisebenen in Ihrer Webseite vorkommen. Aus SEO-Sicht, bevorzugen die Suchmaschinen jedoch sehr flache Strukturen und belohnen diese mit gutem Ranking. Eine Strukturebene ist hervorragend.