Fortsetzung zu
Individuelle Anpassungen mit dem PDL-Editor (Einsteiger)Eine Digitaluhr im simplen Text-Format in die Seitenleiste schieben und umständlich ein Hubzilla-Menü zu bauen... das ist jetzt nicht die "Hohe Schule" der Hubzilla-Gestaltung. Und auch nicht besonders schick und modern. Die Beispiele aus dem Artikel sollten nur dem grundlegenden Verständnis der Seitengestaltung bei Hubzilla dienen.
Das Thema ist auch kaum vollumfassend abzuhandeln. In diese Artikel hier gehe ich auch nur beispielhaft auf die Möglichkeiten ein und ich kann vielleicht Anstöße zu neuen Ideen geben, wie sich Nutzer ihr eigenes Hubzilla zusammenbauen können, ohne mit Admin-Rechten irgendetwas zu installieren.
Im ersten Teil habe ich ja gezeigt, wie man mit der App "Webseiten" ein Menü erstellt und dieses im PDL-Editor in die Seitenleiste packen kann... etwas umständlich und so eigentlich auch nicht vorgesehen.
Die Optik eines solchen Menüs ist ohnehin nicht sonderlich ansprechend und tut damit auch nichts gegen den Vorwurf, Hubzilla würde mit seinem Standard-Theme "Redbasic" doch recht altbacken aussehen.
Sinnvoller und auch so vorgesehen ist die Gestaltung mit selbst erstellten Blöcken. Nutzt man ein moderneres Theme, so passt sich die Optik auch halbwegs an das Theme an. So richtig schick wird es aber erst, wenn man auf ein modernes Framework zurückgreift.
Voraussetzungen
Voraussetzung für all die Dinge, die ich hier einmal vorführen möchte, sind die installierten
Apps "PDL-Editor" und "Webseiten" und die Freigabe für Code für den Kanal, den man aufpeppen möchte.
Sofern man nicht selbst der Administrator ist, muss man für den letzten Punkt den Hub-Administrator kontaktieren und ihn bitten, Code für den eigenen Kanal zuzulassen. Für den Admin ist das nur ein einfacher Klick. Am besten schreibt man dem Admin bei der Bitte um Freischaltung auch gleich, wofür man das benötigt.
Sind diese Voraussetzungen geschaffen, die Apps also installiert und der Code erlaubt, kann es auch gleich losgehen.
Bootstrap und/oder W3.CSS
Die meisten Themes für Hubzilla bieten entweder ein Subset oder teilweise zumindest das Basis-Stylesheet von Bootstrap. Möchte man aber die Fähigkeiten von Bootstrap umfassend für die Gestaltung nutzen, ist es sinnvoll, das Framework auch original einzubinden.
Das funktioniert mit dem Inhaltstyp "HTML" auch völlig problemlos. Man muss nur führend im Block (gilt natürlich auch für Webseiten, wenn man sie so erstellen möchte) Bootstrap einbinden:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">`
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Damit bringt man dann allerdings eine Fremdquelle mit ein. Nun ist Bootstrap nicht extrem groß (aktuell 8,3 MB), weshalb es sich anbietet, es einfach in der eigenen Hubzilla-Cloud vorzuhalten. Dazu legt man sich am besten im Wurzelverzeichnis der eigenen Cloud ein Verzeichnis
bootstrap an, in welches man dann den Inhalt der
Bootstrap-Distribution hochlädt.
Eingebunden wird es dann mit
<link href="https://<URL_des_Hub>/cloud/<Kanal>/bootstrap/css/bootstrap.min.css" rel="stylesheet">`
<script src="https://<URL_des_Hub>/cloud/<Kanal>/bootstrap/js/bootstrap.bundle.min.js"></script>
Ich persönlich nutze aber auch sehr gerne das W3.CSS Framework, weil es ohne Javascript-Bibliothek auskommt und wesentlich kompakter ist (24,2 KB).
Auch dieses Framework muss man am Beginn eines Blocks einbinden:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
Oder man lädt
w3.css herunter, packt es z.B. in ein Verzeichnis
css in der eigenen Cloud und bindet es mit
<link rel="stylesheet" href="https://<URL_des_Hub>/cloud/<Kanal>/css/w3.css">
ein.
Blöcke
Blöcke werden von der App "Webseiten" zur Verfügung gestellt. Sie dienen dazu, wiederholt benutzbare Inhalte aufzunehmen, welche man dann über den Blocknamen in Webseiten, Webseiten-Layouts oder aber auch in die Seitenlayouts von Hubzilla einbinden kann.
Der Vorteil ist, dass selbst erstellte Blöcke im ITEM-Bereich des PDL-Editors zur Verfügung stehen und per Drag-and-Drop an die passende Stelle geschoben werden können.
Ein Block kann so ziemlich "alles" beinhalten. Und man kann ihn mit verschiedenen Inhaltstypen erstellen.
Es stehen die Inhaltstypen
zur Auswahl.
bbCode erlaubt zwar keine Einbindung eines Web-Frameworks, dafür bietet es spezielle Auszeichnungen für hubzilla-spezifische Dinge.
HTML ist der universellste Inhaltstyp, sofern man sich mit HTML auskennt. Mit einem HTML-Block kann man auch die erwähnten Frameworks nutzen und tolle Effekte und Funktionen einsetzen.
Markdown eignet sich für formatierte Texte, ist also eher etwas für Beitrags-Inhalte und weniger für Blöcke, die man z.B. in die Seitenleiste einer Ansicht packt. Verwenden kann man es aber schon dafür.
(Plain) Text, also reiner, unformatierter Text, ist die einfachste Variante, gibt aber für unsere Zwecke nichts her.
Die Comanche-Layout Auszeichnungssprache ist für den Einsatz für die Dinge, welche hier behandelt werden auch nicht sinnvoll.
PHP hingegen kann man durchaus nutzen, wenn man dynamische Inhalte erzeugen möchte. Setzt allerdings das Verständnis und die Fähigkeit zum Programmieren voraus.
Ich werde jetzt hier fast ausschließlich Blöcke im HTML-Format einsetzen, weil damit die größte Flexibilität gegeben ist.
Beispiel 1: Navigationsleiste für die Kanalseite
Und jetzt fange ich einmal mit einem konkreten Beispiel an: Eine Navigationsleiste, die ich ganz oben im Inhaltsbereich der Kanalansicht einbauen möchte. Ich möchte damit Besuchern meiner Kanalseite eine einfache Navigation zu wesentlichen Bereichen meines Kanals ermöglichen. So sollen sie mit einem Klick, ohne länger zu suchen, auf meine Artikelseite, zu meinen Karten, zu meinem Wiki, meiner Galerie und zu meinem öffentlichen Kalender gelangen können. Damit es auch noch wirklich schick aussieht, gibt es als ersten Navigationspunkt eine Logo-Grafik des Hubs, die bei Anklicken zur Hub-Beschreibung führt.
Zunächst habe ich mir für den "Home-Button" eine passende Grafik gebaut, die transparenten Hintergrund hat und zur Schriftgröße der weiteren Buttons passt (100 x 24 Pixel):
Die Navigationsleiste realisiere ich in diesem Fall mit W3.CSS. Außerdem mach ich es noch ein wenig bunt, indem ich die Hover-Farbe für die Buttons auf verschiedene Standard-Farben des Frameworks festlege.
Den Block erstelle ich mit dem Block-Editor der App "Webseiten". Als Namen habe ich "wnavbar" festgelegt. Als Inhaltstyp
<link rel="stylesheet" href="https://hub.hubzilla.hu/cloud/pepecyb/css/w3.css">
<div class="w3-bar w3-border w3-light-grey">
<a href="https://hub.hubzilla.hu/page/pepecyb/about" class="w3-bar-item w3-button"><img src="https://hub.hubzilla.hu/cloud/pepecyb/whoville/whoville-logo.png" alt=""></a>
<a href="https://hub.hubzilla.hu/articles/pepecyb" class="w3-bar-item w3-button w3-hover-green">Artikel</a>
<a href="https://hub.hubzilla.hu/cards/pepecyb" class="w3-bar-item w3-button w3-hover-blue">Karten</a>
<a href="https://hub.hubzilla.hu/wiki/pepecyb" class="w3-bar-item w3-button w3-hover-teal">Wikis</a>
<a href="https://hub.hubzilla.hu/gallery/pepecyb" class="w3-bar-item w3-button w3-hover-purple">Galerie</a>
<a href="https://hub.hubzilla.hu/cal/pepecyb" class="w3-bar-item w3-button w3-hover-red">Kalender</a>
</div>
Anschließend muss der Block im PDL-Editor noch an die oberste Stelle des Inhaltsbereichs im MODUL "channel" geschoben und die Änderungen mit Klick auf den Button "APPLY" übernommen werden.
Nicht schlecht für den Anfang, oder?
Beispiel 2: Nochmal das Menü aus dem ersten Teil - aber besser
Im ersten Einführungsteil hatte ich ja ein Menü zu Artikeln von mir als Beispiel gebastelt. Allerdings nicht als Block, sondern als Hubzilla-Menü, welches man nur umständlich mit dem PDL-Editor einbauen kann:
Im Endeffekt ist ein natives Hubzilla-Menü nichts anderes als eine Liste von Links. Und eine Link-Liste kann man auch ohne die Menü-Funktion erstellen.
Für diese Beispiel jetzt, erstelle ich wiederum ein Menü zu einigen (drei) Artikeln meines Kanals. Allerdings als Link-Liste.
Der HTML-Code für den entsprechenden Block sieht dann z.B. so aus:
<a href="https://hub.hubzilla.hu/articles/pepecyb/hhowama">Hubzilla-Häppchen: Hubzilla-Magie - OpenWebAuth / MagicAuth</a><br>
<a href="https://hub.hubzilla.hu/articles/pepecyb/folhsh2">Hubzilla: Hashtags folgen - Variante 2</a><br>
<a href="https://hub.hubzilla.hu/articles/pepecyb/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kanäle, -Profile</a>
Hier einfach als einzelne Links untereinander mit dem
<br>-Tag (nicht schön und elegant).
Sieht so aus:
Oder vielleicht besser als unsortierte Liste?
<ul><li><a href="https://hub.hubzilla.hu/articles/pepecyb/hhowama">Hubzilla-Häppchen: Hubzilla-Magie - OpenWebAuth / MagicAuth</a></li>
<li><a href="https://hub.hubzilla.hu/articles/pepecyb/folhsh2">Hubzilla: Hashtags folgen - Variante 2</a></li>
<li><a href="https://hub.hubzilla.hu/articles/pepecyb/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kanäle, -Profile</a></li></ul>
Sieht schon etwas besser aus:
In die Kanalseite eingebaut (und mit einem Titel versehen):
Nett! Aber... Nett ist die kleine Schwester von Scheiße! 😉😂
Also packen wir mal ein wenig Schnick und Schnack vom W3.CSS Framework dazu:
<link rel="stylesheet" href="https://hub.hubzilla.hu/cloud/pepecyb/css/w3.css">
<ul class="w3-ul w3-card-4 w3-pale-green" style="width:100%">
<li><a href="https://hub.hubzilla.hu/articles/pepecyb/hhowama">Hubzilla-Häppchen: Hubzilla-Magie - OpenWebAuth / MagicAuth</a></li>
<li><a href="https://hub.hubzilla.hu/articles/pepecyb/folhsh2">Hubzilla: Hashtags folgen - Variante 2</a></li>
<li><a href="https://hub.hubzilla.hu/articles/pepecyb/irrungenwirrungen">Irrungen und Wirrungen - Hubzilla-Accounts, -Kanäle, -Profile</a></li>
</ul>
Und schon sieht es fetziger aus, oder?
Beispiel 3: Kontakt-Widget
Nun möchte ich noch in der Seitenleiste ein Element haben, welches die Kontaktmöglichkeit mittels Delta Chat anzeigt. Dafür möchte ich den QR-Code meines Delta Chat Accounts verwenden.
Nun könnte man einfach ein Bild, nämlich den QR-Code dort hinpacken. Und das sogar mit bbCode, weil's einfacher ist.
Dann sieht das halt so aus:
Nicht sehr ansprechend... und es frisst Platz, weshalb das Artikelmenü (oder andere Inhalte, falls man noch weitere in die Seitenleiste geschoben hat) nach unten rutscht und man erst scrollen muss, um es zu erreichen.
Besser wäre es, wenn dort ein Button "Kontakt" zu sehen wäre, welche bei Klick den QR-Code einblendet... und den man mit einem weiteren Klick wieder ausblenden kann. Dafür bietet sich das "Accordeon" von W3.CSS an.
Und damit es nicht so langweilig aussieht, peppe ich es noch mit einer Karte als Inhalt und einer kleinen Animation auf. Ach... und der Button wird schwarz und hat ganz leich abgerundete Ecken.
Der Code dafür:
<link rel="stylesheet" href="https://hub.hubzilla.hu/cloud/pepecyb/css/w3.css">
<button onclick="myFunction('contact1')" class="w3-button w3-block w3-black w3-left-align w3-round w3-margin-bottom">Kontakt</button>
<div id="contact1" class="w3-hide w3-container w3-animate-zoom">
<div class="w3-container">
<div class="w3-card-4 w3-center" style="width:100%;max-width:400px">
<h2>Delta Chat</h2>
<img src="https://hub.hubzilla.hu/cloud/pepecyb/Pepes%20pic/delta.png" alt="" style="width:100%">
<div class="w3-container w3-center">
<p>derpepe@morpork.email</p>
</div>
</div>
</div>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
Schnell noch in die Seitenleiste geschoben... und schon ist die Delta Chat Karte da!
Beispiel 4: Sinnfreier PHP-Block
Einfach, um zu zeigen, dass man auch was mit PHP machen kann, hier ein Block, der anzeigt, wann die aktuelle Seite aufgerufen wurde. Mir ist einfach nichts Nützliches eingefallen...
Dazu legt man einen Block mit dem Inhaltstyp "PHP" an. Ich nenne ihn hier einfach mal "aufrufzeit".
Der Code ist extrem simpel!
date_default_timezone_set('Europe/Budapest');
echo 'Seite aufgerufen am: ' . date('d.m.Y - H:i:s');
Beachte hier: Es darf kein
<?php davor und kein
?> am Ende stehen!
Das Ding packe ich in die Profilansicht ganz ans Ende, damit jeder weiß, wann er sich das Profil angeschaut hat:
Soviel dazu...
Damit lasse ich es jetzt einfach bewenden. Ich wollte hier einfach nur zeigen, was über die einfachen Dinge aus dem ersten Teil mit Hubzilla alles möglich ist.
Man ist extrem frei, die Oberfläche für sich selbst, aber auch für Besucher attraktiver und praktischer zu gestalten.
Und man ist nicht auf die Fähigkeiten vorhandener Widgets und Styles vorhandener Themes beschränkt. Mit aktuellen Frameworks kann man sehr viel gestalten, was frisch und modern aussieht.
Und da geht manches, was man vielleicht gar nicht für möglich hält. So habe ich einfach einmal was ausprobiert (in einem Test-Kanal... weil ich es eigentlich nicht nutzen würde)...
Zum einfachen Verfassen von bbCode-Beiträgen nutze ich gerne den SCEditor. Den habe ich mir lokal in eine HTML-Datei abgelegt und als Lesezeichen in die Lesezeichen-Symbolleiste meines Browsers gepackt. Ein Klick und er öffnet sich... und ich kann losschreiben.
Und da dachte ich mir einfach mal: Ob man das auch in eine Hubzilla-Ansicht packen kann?
Und tatsächlich ist es ohne große Anstrengung dort umsetzbar. Sah dann so aus:
Ihr seht also... es ist echt viel möglich. Einfach einmal ausprobieren.
Um Euch in die Frameworks einzuarbeiten oder den Einstieg in PHP zu schaffen, empfehle ich persönlich die Tutorials von
w3 schools:
Viel Spaß beim Experimentieren und bei der Gestaltung Eures Hubzilla-Kanals!
Artikel in der Hubzilla KnowledgeDB
