Webseiten

Hubzilla ermöglicht es Mitgliedern und zugelassenen Verbindungen, statische Webseiten zu erstellen. Um diese Funktion zu aktivieren, aktivieren Sie die Funktion "Webseiten" in Ihrem Abschnitt "Zusätzliche Funktionen".

Sobald die Funktion aktiviert ist, erscheint auf Ihrer Channel-Seite eine neue Registerkarte mit der Bezeichnung "Webpages". Wenn Sie auf diesen Link klicken, gelangen Sie zum Webseiten-Editor. Die Seiten werden unter <Instanz-URL>/page/<Kanalname>/<Seiten-Link-Titel> zugänglich sein.

Im Feld "Seiten-Link-Titel" können Sie den "Seiten-Link-Titel" dieser URL angeben. Wenn kein Titel für den Seitenlink festgelegt ist, wird dieser automatisch anhand der Nachrichten-ID des Artikels festgelegt.

Unter dem Feld für die Seitenerstellung wird eine Liste der bestehenden Seiten mit einem Link "Bearbeiten" angezeigt. Wenn Sie auf diesen Link klicken, gelangen Sie zu einem Editor, ähnlich dem des Beitragseditors, in dem Sie Änderungen an Ihren Webseiten vornehmen können.

Blöcke verwenden

Blöcke können Teile von Webseiten sein. Der grundlegende HTML-Code eines Blocks sieht wie folgt aus

    <div>
        Block-Inhalt
    </div>

Wenn ein Block den Inhaltstyp text/html hat, kann er auch Menüelemente enthalten. Der Beispielinhalt von

    <p>HTML Block-Inhalt</p> 
    [menu]menuname[/menu]

wird HTML wie dieses erzeugen

    <div>
        <p>HTML Block-Inhalt</p>
        <div>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>
    </div>

Über das Makro $content kann ein Block auch den eigentlichen Inhalt der Webseite enthalten.

Erstellen Sie dazu einen Block nur mit

    $content

als Inhalt.

Damit ein Block auf der Webseite erscheint, muss er im Seitenlayout innerhalb einer Region definiert werden.

    [region=aside]
        [block]blockname[/block]
    [/region]

Das Aussehen des Blocks kann im Seitenlayout manipuliert werden.

Es können eigene Klassen zugewiesen werden

    [region=aside]
        [block=myclass]blockname[/block]
    [/region]

wird folgendes HTML erzeugen

    <div class="myclass">
        Block Content
    </div>

Über die wrap-Variable kann ein Block von seinem umschließenden <div></div>-Tag befreit werden

    [region=aside]
        [block][var=wrap]none[/var]blockname[/block]
    [/region]

wird dieses HTML erzeugt

Blockinhalt

Werkzeug zum Importieren von Webseitenelementen

Es gibt zwei Methoden zum Importieren von Webseitenelementen: Hochladen einer Zip-Datei oder Verweis auf einen lokalen Cloud-Datei-Ordner. Beide Methoden erfordern, dass die Webseiten-Elemente in einer bestimmten Ordnerstruktur angegeben werden. Das Import-Tool ermöglicht es, alle Elemente zu importieren, die für die Erstellung einer ganzen Website oder einer Reihe von Websites erforderlich sind. Ziel ist es, die externe Entwicklung von Webseiten sowie Tools zur Vereinfachung und Automatisierung der Bereitstellung auf einem Hub zu ermöglichen.

Struktur des Ordners

Elementdefinitionen müssen im Stammverzeichnis des Repos gespeichert werden, und zwar in Ordnern namens

    /pages/
    /blocks/
    /layouts/

Jedes Element dieser Typen muss in einem eigenen Unterordner mit zwei Dateien definiert werden: eine JSON-formatierte Datei für die Metadaten und eine reine Textdatei für den Inhalt des Elements.

Seitenelemente

Die Metadaten der Seitenelemente werden in einer JSON-formatierten Datei namens page.json mit den folgenden Eigenschaften angegeben:

• title
• pagelink
• mimetype
• layout
• contentfile

Beispiel

Dateien:

    /pages/my-page/page.json
    /pages/my-page/my-page.bbcode

Inhalt von page.json:

    {
        "title": "My Page",
        "pagelink": "mypage",
        "mimetype": "text/bbcode",
        "layout": "my-layout",
        "contentfile": "my-page.bbcode"
    }

Layout-Elemente

Die Metadaten der Layoutelemente werden in einer JSON-formatierten Datei namens layout.json mit den folgenden Eigenschaften angegeben:

• name
• description
• contentfile

Beispiel

Dateien:

    /layouts/my-layout/layout.json
    /layouts/my-layout/my-layout.bbcode

Inhalt von layout.json:

    {
        "name": "my-layout",
        "description": "Layout for my project page",
        "contentfile": "my-layout.bbcode"
    }

Blockelemente

Blockelement-Metadaten werden in einer JSON-formatierten Datei namens block.json mit den folgenden Eigenschaften angegeben:

• name
• title
• mimetype
• contentfile

Beispiel

Dateien:

    /blocks/my-block/block.json
    /blocks/my-block/my-block.html

Inhalt von block.json:

    {
        "name": "my-block",
        "title": "",
        "mimetype": "text/html",
        "contentfile": "my-block.html"
    }

Comanche Seitenbeschreibungssprache

Comanche ist eine BBcode-ähnliche Auszeichnungssprache, mit der aufwändige und komplexe Webseiten erstellt werden können, indem sie aus einer Reihe von Komponenten zusammengesetzt werden, von denen einige vorgefertigt sind und andere spontan definiert werden können. Comanche verwendet eine Seitenbeschreibungssprache, um diese Seiten zu erstellen.

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.

Seitenvorlagen

Derzeit gibt es fünf Layout-Vorlagen, es sei denn, Ihre Website bietet zusätzliche Layouts.

Standardvorlage

Die Standardvorlage definiert einen "nav"-Bereich am oberen Rand, "aside" als Seitenleiste mit fester Breite, "content" für den Hauptinhaltsbereich und "footer" für einen Seitenfuß.

Vollständig

Die vollständige Vorlage entspricht der Standardvorlage mit der Ausnahme, dass es keinen "aside"-Bereich gibt.

Choklet

Die Choklet-Vorlage bietet eine Reihe von fließenden Layoutstilen, die nach Geschmack festgelegt werden können:

• (default flavour) - ein zweispaltiges Layout, das der "default"-Vorlage ähnelt, aber flexibler ist
• bannertwo - ein zweispaltiges Layout mit einem Bannerbereich, kompatibel mit der "default"-Vorlage auf kleinen Displays
• three - dreispaltiges Layout (ergänzt die Standardvorlage um einen "right_aside"-Bereich)
• edgestwo - zweispaltiges Layout mit festen Seitenrändern
• edgesthree - dreispaltiges Layout mit festen Seitenrändern
• full - dreispaltiges Layout mit festen Seitenrändern und Hinzufügen eines "Header"-Bereichs unter der Navigationsleiste

Redable

Eine Vorlage zum Lesen längerer Texte im Vollbildmodus (also ohne Navigationsleiste). Drei Spalten: aside, content und right_aside.

Für maximale Lesbarkeit ist es ratsam, nur die mittlere Inhaltsspalte zu verwenden.

Zen

Gibt Ihnen die Freiheit, alles selbst zu machen. Nur eine leere Seite mit einem Inhaltsbereich.

Um eine Layout-Vorlage auszuwählen, verwenden Sie den Tag 'template'.

    [template]full[/template]

So wählen Sie die Vorlage "choklet" mit der Geschmacksrichtung "three":

    [template=three]choklet[/template]

Die Standardvorlage wird verwendet, wenn keine andere Vorlage angegeben wird. Die Vorlage kann beliebige Namen für die Inhaltsbereiche verwenden. Sie werden "region"-Tags verwenden, um zu entscheiden, welche Inhalte in den jeweiligen Regionen platziert werden sollen.

Es wurden drei "Makros" für Ihre Verwendung definiert.

    $htmlhead - replaced with the site head content.
    $nav - replaced with the site navigation bar content.
    $content - replaced with the main page content.

Standardmäßig wird $nav in den Seitenbereich "nav" und $content in den Bereich "content" eingefügt. Sie brauchen diese Makros nur zu verwenden, wenn Sie die Reihenfolge der Elemente ändern oder sie in andere Bereiche verschieben möchten.

Um ein Thema für Ihre Seite auszuwählen, verwenden Sie den Tag "theme".

    [theme]suckerberg[/theme]

Dadurch wird das Thema "suckerberg" ausgewählt. Standardmäßig wird das von Ihrem Kanal bevorzugte Thema verwendet.

    [theme=passion]suckerberg[/theme]

Dadurch wird das Thema mit dem Namen "suckerberg" ausgewählt und das Schema "passion" (Themenvariante) gewählt. Alternativ ist es auch möglich, eine komprimierte Themennotation zu verwenden.

    [theme]suckerberg:passion[/theme]

Die komprimierte Notation ist nicht Teil von Comanche selbst, wird aber von der Hubzilla-Plattform als Themenspezifizierer erkannt.

Navbar

    [navbar]tucson[/navbar]

Verwenden Sie die Vorlage "tucson" für die Navigationsleiste und die CSS-Regeln. Standardmäßig wird die Vorlage "default" für die Navigationsleiste verwendet.

Regions

Jede Region hat, wie oben erwähnt, einen Namen. Sie spezifizieren die Region, die Sie interessiert, mit einem "region"-Tag, der den Namen enthält. Alle Inhalte, die Sie in diesem Bereich platzieren möchten, sollten zwischen dem öffnenden Region-Tag und dem schließenden Tag platziert werden.

    [region=htmlhead]....content goes here....[/region]
    [region=aside]....content goes here....[/region]
    [region=nav]....content goes here....[/region]
    [region=content]....content goes here....[/region]

CSS und Javascript

Wir haben die Möglichkeit, Javascript- und CSS-Bibliotheken in den htmlhead-Bereich einzubinden. Zurzeit verwenden wir jquery (js), bootstrap (css/js) und foundation (css/js).

Dies überschreibt den htmlhead des ausgewählten Themas.

    [region=htmlhead]
        [css]bootstrap[/css]
        [js]jquery[/js]
        [js]bootstrap[/js]
    [/region]

Menüs und Blöcke

Mit den Werkzeugen zur Erstellung von Webseiten können Sie neben dem Seiteninhalt auch Menüs und Blöcke erstellen. Diese bieten einen Teil des vorhandenen Inhalts, der in den von Ihnen festgelegten Bereichen und in der von Ihnen festgelegten Reihenfolge platziert werden kann. Jedes dieser Elemente hat einen Namen, den Sie bei der Erstellung des Menüs oder Blocks festlegen.

    [menu]mymenu[/menu]

Dadurch wird das Menü "mymenu" an dieser Stelle auf der Seite platziert, die sich innerhalb eines Bereichs befinden muss.

    [menu=horizontal]mymenu[/menu]

Dadurch wird das Menü mit dem Namen "mymenu" an dieser Stelle auf der Seite platziert, die sich innerhalb eines Bereichs befinden muss. Außerdem wird dem Menü die Klasse "horizontal" zugewiesen. Die Klasse "horizontal" ist im redbasic-Theme definiert. Sie kann in anderen Themes verfügbar sein, muss es aber nicht.

    [menu][var=wrap]none[/var]mymenu[/menu]

Die Variable [var=wrap]none[/var] in einem Block entfernt das umschließende div-Element aus dem Menü.

    [block]contributors[/block]

Dadurch wird ein Block mit dem Namen "contributors" in dieser Region platziert.

    [block=someclass]contributors[/block]

Dadurch wird ein Block mit dem Namen "contributors" in dieser Region platziert. Zusätzlich wird die Klasse "someclass" auf den Block angewendet. Dies ersetzt die Standard-Blockklassen "bblock widget".

    [block][var=wrap]none[/var]contributors[/block]

Die Variable [var=wrap]none[/var] in einem Block entfernt das umschließende div-Element aus dem Block.

Widgets

Widgets sind ausführbare Anwendungen, die vom System bereitgestellt werden und die Sie auf Ihrer Seite platzieren können. Einige Widgets benötigen Argumente, mit denen Sie das Widget an Ihren Zweck anpassen können. System-Widgets sind hier aufgelistet. Widgets können auch von Plugins, Themes oder Ihrem Website-Administrator erstellt werden, um zusätzliche Funktionen bereitzustellen.

Widgets und Argumente werden mit den Tags "widget" und "var" angegeben.

    [widget=recent_visitors][var=count]24[/var][/widget]

Damit wird das Widget "recent_visitors" geladen und mit dem Argument "count" auf "24" gesetzt.

Kommentare

Das Tag "comment" wird zur Abgrenzung von Kommentaren verwendet. Diese Kommentare werden auf der gerenderten Seite nicht angezeigt.

    [comment]This is a comment[/comment]

Bedingte Ausführung

Sie können ein 'if'-Konstrukt verwenden, um Entscheidungen zu treffen. Diese basieren derzeit auf der Systemkonfigurationsvariable oder dem aktuellen Beobachter.

    [if $config.system.foo]
        ... the configuration variable system.foo evaluates to 'true'.
    [else]
        ... the configuration variable system.foo evaluates to 'false'.
     [/if]

    [if $observer]
        ... this content will only be show to authenticated viewers
    [/if]

Die 'else'-Klausel ist optional.

Neben der booleschen Auswertung werden mehrere Tests unterstützt.

    [if $config.system.foo == bar]
        ... the configuration variable system.foo is equal to the string 'bar'
    [/if]
    [if $config.system.foo != bar]
        ... the configuration variable system.foo is not equal to the string 'bar'
    [/if]
    [if $config.system.foo {} bar ]
        ... the configuration variable system.foo is a simple array containing a value 'bar'
    [/if]
    [if $config.system.foo {*} bar]
        ... the configuration variable system.foo is a simple array containing a key named 'bar'
    [/if]

Komplexes Beispiel

    [comment]use an existing page template which provides a banner region plus 3 columns beneath it[/comment]

    [template]3-column-with-header[/template]

    [comment]Use the "darknight" theme[/comment]

    [theme]darkknight[/theme]

    [comment]Use the existing site navigation menu[/comment]

    [region=nav]$nav[/region]

    [region=side]

        [comment]Use my chosen menu and a couple of widgets[/comment]

        [menu]myfavouritemenu[/menu]

        [widget=recent_visitors]
            [var=count]24[/var]
            [var=names_only]1[/var]
        [/widget]

        [widget=tagcloud][/widget]
        [block]donate[/block]

    [/region]



    [region=middle]

        [comment]Show the normal page content[/comment]

        $content

    [/region]



    [region=right]

        [comment]Show my condensed channel "wall" feed and allow interaction if the observer is allowed to interact[/comment]

        [widget]channel[/widget]

    [/region]

---

Inoffizielle Übersetzung eines Teils der offiziellen Hubzilla-Hilfe (MIT License)