Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Layouts

Für die Gestaltung der Webseiten haben die Layouts eine entscheidende Bedeutung.

Gestaltungswerkzeug Layouts

Layouts werden mit der Comanche Seitenbeschreibungssprache, welche dem BBcode-Format ähnelt, erstellt. Comanche ist eine bbCode-ähnliche Auszeichnungssprache, mit der aufwendige und komplexe Webseiten erstellt werden können, indem sie aus einer Reihe von Komponenten zusammengesetzt werden, von denen einige vorgefertigt sind, und andere selbst definiert werden können. Comanche wählt in erster Linie aus, welche Inhalte in den verschiedenen Bereichen der Seite erscheinen sollen. Die verschiedenen Bereiche haben Namen, und diese Namen können sich je nach gewählter Layoutvorlage ändern.

Der Layout-Editor ist simpel und selbsterklärend. Erforderlich ist es, dem Layout einen Namen zu geben. Über diesen Namen kann das Layout später bei Erstellung einer Webseite dieser zugewiesen werden.

Der Layout-Editor

Aktuell gibt es fünf verschiedene vordefinierte Vorlagen: default, full, choklet, redable und zen, wobei choklet in sechs verschiedenen “Flavours” daher kommt (default, bannertwo, three, edgestwo, edgesthree und full).

Um eine Layout-Vorlage auszuwählen, verwendet man die Tags [template][/template]. Im Fall von choklet wird der “Geschmack” (Flavour) über das öffnende Tag festgelegt [template=<flavour>]choklet[/template]. Lasst man für choklet die Auswahl des Flavour weg, wird “default” verwendet.

Es gibt verschiedene Bereiche einer Webseite:

Layout-Bereiche

In der Region “content” sollte in der Regel die Variable $content eingetragen werden. Damit erscheint der Inhalt einer Webseite, wenn man diese mit dem Gestaltungswerkzeug “Webseiten” erstellt, im Inhaltsbereich.

[region=content]
$content

[/region]

Die Region [htmlhead][/htmlhead] kann dazu verwendet werden, andere css- und js-Definitionen zu verwenden. Derzeit werden als Standard jquery (js), bootstrap (css/js) und foundation (css/js) verwendet.

Diese Region wird nicht dargestellt und dient den Zwecken, welche der gleichnamige Bereich in HTML-Dateien ebenfalls erfüllt.

<head>
  ...  
</head>

Vorhanden sind folgende Vorlagen:

  1. default verwendet folgende Bereiche: nav, aside (mit fester Breite), content und footer
  2. full verwendet folgende Bereiche: nav, content, footer
  3. readable zum Lesen längerer Texte hat keinen nav Bereich und verwendet folgende Bereiche: aside, content und right_aside
  4. zen ist eine völlig leere Vorlage und verwendet lediglich den content Bereich.
  5. choklet ist eine floating Layoutvorlage in verscheidenen Flavours:
    1. default verwendet folgende Bereiche: nav, aside, content und footer
    2. bannertwo verwendet folgende Bereiche: banner, nav, aside, content und footer
    3. three verwendet folgende Bereiche: nav, aside, content, right_aside und footer
    4. edgestwo verwendet folgende Bereiche: (fixed size) nav, aside und content
    5. edgesthree verwendet folgende Bereiche: (fixed size) nav, aside, content und right_aside
    6. full verwendet folgende Bereiche: (fixed size) nav, (darunter!) banner, aside, content und right_aside

In die einzelnen Bereiche, die sich aus der gewählten Vorlage ergeben, können nun Blöcke, Menüs und Widgets eingefügt werden. Schema:

[region=<bereich>]

[block]<block>[/block]
[menu]<menü>[/menu]
[widget]<widget>[/widget]

[/region]

Es können hier den Blöcken auch Klassen aus der CSS-Definition zugewiesen werden ([block=<klasse>]<block>[/block]).

Ebenso ist es möglich, Variablen, die für die Darstellung genutzt werden, zu definieren ([var=<variable>]<variablenwert>[/var]).

Sie können die Layout-Definition auch mit Kommentaren versehen. Dies geschieht mit den Tags [comment]<kommentar>[/comment]. Kommentare werden in der Webseite nicht dargestellt.

Schließlich erlauben die Layout-Definitionen auch eine bedingte Ausführung. Damit werden bestimmte Inhalte nur dann angezeigt, wenn eine bestimmte Bedingung erfüllt ist. Für die Bedingungen können derzeit ausschließlich die Systemvariablen von Hubzilla genutzt werden.

[if $<systemvariable>]
  ...
[else]
  ...
[/if]

Es sind natürlich auch komplexere Bedingungen möglich.

[if $<systemvariable> == <wert>]		// ist gleich
  ...    
[/if]

[if $c<systemvariable> != <wert>]		// ist ungleich
  ...  
[/if]

[if $<systemvariable> {} <wert-array> ]		// das Array enthält
  ...
[/if]

[if $c<systemvariable> {*} <wert>]		// der Wert enthält
  ...
[/if]