Hubzilla erlaubt Mitgliedern und erlaubten Verbindungen, statische Webseiten zu erstellen. Aktivieren Sie die Webpage-Funktion im Abschnitt Weitere Funktionen, um diese Funktion zu aktivieren.

Sobald diese Option aktiviert ist, erscheint auf deiner Kanalseite ein neuer Tab mit der Bezeichnung „Webseiten“. Wenn Sie auf diesen Link klicken, gelangen Sie zum Webseiteneditor. Die Seiten sind unter https://<deinhub.tld>/page/pepecyb8806/pagelinktitle erreichbar.

Im Feld „Seitenlinktitel“ können Sie den „Seitenlinktitel“ dieser URL angeben. Wenn kein Seitenlink-Titel festgelegt ist, werden wir automatisch einen für Sie festlegen, indem wir die Nachrichten-ID des Elements verwenden.

Unterhalb der Seitenerstellungsbox erscheint eine Liste der vorhandenen Seiten mit einem „Bearbeiten“ -Link. Wenn Sie auf diese Schaltfläche klicken, gelangen Sie zu einem ähnlichen Editor wie der Post-Editor, in dem Sie Änderungen an Ihren Webseiten vornehmen können.

Blöcke verwenden

Blöcke können Teile von Webseiten sein. Das grundlegende HTML eines Blocks sieht so aus

<div> Block Content </div>

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

<p>HTML block content</p> [menu]menuname[/menu]

wird dieses HTML erzeugen

<div> <p>HTML block content</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 Webseiteninhalt enthalten. Erstellen Sie dazu einen Block mit nur

$content

als Inhalt.

Um einen Block in der Webseite erscheinen zu lassen, muss er im Seitenlayout innerhalb einer Region definiert werden.

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

Die Blockdarstellung kann im Seitenlayout manipuliert werden.

Benutzerdefinierte Klassen können zugewiesen werden

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

wird dieses HTML erzeugen

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

Über die Umbruchvariable kann ein Block von seinem umschließenden <div> </ div> -Tag entfernt werden

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

wird dieses HTML erzeugen

Block Content

Tool zum Importieren von Webseitenelementen

Es gibt zwei Methoden zum Importieren von Webseitenelementen: Hochladen einer Zip-Datei oder Verweisen auf einen lokalen Cloud-Dateiordner. Für beide Methoden müssen die Webseitenelemente mit einer bestimmten Ordnerstruktur angegeben werden. Das Import-Tool ermöglicht es, alle Elemente zu importieren, die für den Aufbau einer ganzen Website oder eines Webseiten-Sets notwendig sind. Ziel ist die externe Entwicklung von Webseiten sowie Tools zur Vereinfachung und Automatisierung der Bereitstellung auf einem Hub. Ordnerstruktur

Elementdefinitionen müssen im Repo-Stammverzeichnis unter den aufgerufenen Ordnern gespeichert werden

/pages/ /blocks/ /layouts/

Jedes Element dieser Typen muss in einem einzelnen Unterordner mit zwei Dateien definiert werden: eine JSON-formatierte Datei für die Metadaten und eine einfache Textdatei für den Elementinhalt.

Seitenelemente

Seitenelementmetadaten 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" }

Layoutelemente

Layout-Element-Metadaten werden in einer JSON-formatierten Datei namens layout.json mit 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

Blockelementmetadaten werden in einer JSON-formatierten Datei namens block.json mit 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 komplexe Webseiten erstellt werden können, indem sie aus einer Reihe von Komponenten zusammengestellt werden, von denen einige vordefiniert sind und andere, die im Handumdrehen definiert werden können. Comanche verwendet eine Seitenbeschreibungssprache, um diese Seiten zu erstellen.

Comanche wählt hauptsächlich, welcher Inhalt in verschiedenen Regionen der Seite erscheinen wird. Die verschiedenen Regionen haben Namen und diese Namen können sich je nach der von Ihnen gewählten Layoutvorlage ändern. Seitenvorlagen

Derzeit gibt es fünf Layoutvorlagen, sofern Ihre Site keine zusätzlichen Layouts bereitstellt.

default

Die Standardvorlage definiert eine „nav“ -Region am oberen Rand, „neben“ als feste Seitenleiste, „content“ für den Hauptinhaltsbereich und „footer“ für einen Fußbereich.

full

Die vollständige Vorlage definiert die gleiche wie die Standardvorlage mit der Ausnahme, dass es keine „Neben“ -Region gibt.

choklet

Die Choklet-Vorlage bietet eine Reihe von Layout-Stilen, die nach Geschmack spezifiziert werden können:

• (default flavour) – ein zweispaltiges Layout ähnlich der „Standard“ Vorlage, aber fließender
• bannertwo – ein zweispaltiges Layout mit einem Bannerbereich, kompatibel mit der „Standard“ Vorlage auf kleinen Displays
• three – dreispaltiges Layout (fügt der Standardvorlage eine „right_aside“ -Region hinzu)
• edgestwo – zweispaltiges Layout mit festen Seitenrändern
• edgesthree – dreispaltiges Layout mit festen Seitenrändern
• full – dreispaltiges Layout mit festen Seitenrändern und fügt einen „Kopf“ -Region unterhalb der Navigationsleiste hinzu

redable

Eine Vorlage zum Lesen längerer Texte im Vollbildmodus (also ohne Navigationsleiste). Drei Spalten: beiseite, Inhalt und right_aside. Für eine maximale Lesbarkeit wird empfohlen, nur die mittlere Inhaltsspalte zu verwenden.

zen

Gibt dir die Freiheit, alles selbst zu machen. Nur eine leere Seite mit einer Inhaltsregion.

Verwenden Sie zum Auswählen einer Layoutvorlage das Tag „template“.

[template]full[/template]

Wählen Sie die Vorlage „Choklet“ mit dem Typ „drei“:

[template=three]choklet[/template]

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

Drei „Makros“ wurden für Ihre Verwendung definiert.

$htmlhead – ersetzt durch den Inhalt der Website. $nav – ersetzt durch den Inhalt der Site-Navigationsleiste. $content – ersetzt durch den Inhalt der Hauptseite.

Standardmäßig wird $nav in den Seitenbereich „nav“ und $content in den Bereich „content“ gestellt. Sie müssen diese Makros nur verwenden, wenn Sie die Position dieser Elemente neu anordnen möchten, um entweder die Reihenfolge zu ändern oder sie in andere Regionen zu verschieben.

Verwenden Sie den Tag „theme“, um ein Thema für Ihre Seite auszuwählen.

[theme]suckerberg[/theme]

Dies wird das Thema „suckerberg“ auswählen. Standardmäßig wird das bevorzugte Design deines Kanals verwendet. [theme=passion]suckerberg[/theme]

Dies wählt das Thema „suckerberg“ aus und wählt das Schema „passion“ (Themenvariante). Alternativ kann es möglich sein, hierfür eine kondensierte Themennotation zu verwenden.

[theme]suckerberg:passion[/theme]

Die komprimierte Notation ist nicht Teil von Comanche selbst, sondern wird von der Hubzilla-Plattform als Themenspezifizierer erkannt. Navbar [navbar]tucson[/navbar]

Verwenden Sie die Navigationsvorlage „tucson“ und die CSS-Regeln. Standardmäßig wird die Standard-Navbar-Vorlage verwendet.

Regions

Jede Region hat einen Namen, wie oben erwähnt. Sie geben die Region von Interesse mit einem ‚Region‘-Tag an, das den Namen enthält. Alle Inhalte, die Sie in dieser Region platzieren möchten, sollten zwischen dem öffnenden Regions-Tag und dem schließenden Tag platziert werden.

[region=htmlhead]....hier steht der Inhalt....[/region]
[region=aside]....hier steht der Inhalt....[/region]
[region=nav]....hier steht der Inhalt....[/region]
[region=content]....hier steht der Inhalt....[/region]

CSS und Javascript

Wir haben die Möglichkeit, JavaScript– und CSS-Bibliotheken in die htmlhead-Region einzubinden. Zur Zeit verwenden wir jquery (js), bootstrap (css / js) und foundation (css / js). Dies überschreibt die ausgewählten Themen htmlhead.

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

Menüs und Blöcke

Mit den Tools zum Erstellen von Webseiten können Sie neben dem Seiteninhalt auch Menüs und Blöcke erstellen. Diese enthalten einen Teil des vorhandenen Inhalts, der in beliebigen Regionen und in beliebiger Reihenfolge platziert werden soll. Jeder von diesen hat einen Namen, den Sie definieren, wenn das Menü oder der Block erstellt wird.

[menu]mymenu[/menu]

Dadurch wird das Menü „mymenu“ an dieser Stelle auf der Seite platziert, die sich innerhalb einer Region befinden muss.

[menu=horizontal]mymenu[/menu]

Dadurch wird das Menü „mymenu“ an dieser Stelle auf der Seite platziert, die sich innerhalb einer Region befinden muss. Außerdem wendet es die „horizontal“ Klasse auf das Menü an. „horizontal“ ist im redbasic-Thema definiert. Es kann oder kann nicht in anderen Themen verfügbar sein.

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

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

[block]contributors[/block]

Dies platziert einen Block namens „contributors“ in dieser Region.

[block=someclass]contributors[/block]

Dies platziert einen Block namens „contributors“ in dieser Region. Außerdem wendet es die Klasse „someclass“ auf den Block an. Dies ersetzt die Standardblockklassen „bblock widget“.

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

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

Widgets

Widgets sind vom System bereitgestellte ausführbare Apps, die Sie auf Ihrer Seite platzieren können. Einige Widgets nehmen Argumente, mit denen Sie das Widget an Ihren Zweck anpassen können. Systemwidgets sind hier aufgelistet. Widgets können auch von Plugins, Themes oder Ihrem Site-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]

Dadurch wird das Widget „recent_visitors“ geladen und mit dem Argument „count“ auf „24“ gesetzt.

Kommentare

Das Tag ‚comment‘ wird zum Abgrenzen von Kommentaren verwendet. Diese Kommentare werden nicht auf der gerenderten Seite angezeigt.

[comment]Dies ist ein Kommentar[/comment]

Bedingte Ausführung

Sie können ein ‚Wenn‘-Konstrukt verwenden, um Entscheidungen zu treffen. Diese basieren derzeit auf der Systemkonfigurationsvariablen oder dem aktuellen Betrachter.

[if $config.system.foo]
  ... Die Konfigurationsvariable system.foo wird als 'wahr' ausgewertet.
[else]
  ... Die Konfigurationsvariable system.foo wird zu 'false' ausgewertet.
[/if]
[if $observer]
  ... Dieser Inhalt wird nur authentifizierten Besuchern angezeigt
[/if]

Die ‚else‘ Klausel ist optional.

Neben der booleschen Auswertung werden mehrere Tests unterstützt.

[if $config.system.foo == bar]
	... Die Konfigurationsvariable system.foo entspricht der Zeichenfolge 'bar'
[/if]
[if $config.system.foo != bar]
	... Die Konfigurationsvariable system.foo ist nicht gleich der Zeichenfolge 'bar'
[/if]
[if $config.system.foo {} bar ]
... Die Konfigurationsvariable system.foo ist ein einfaches Array mit einem Wert 'bar'
[/if]
[if $config.system.foo {*} bar]
	... Die Konfigurationsvariable system.foo ist ein einfaches Array mit einem Schlüssel namens 'bar'
[/if]

Komplexes Beispiel

[comment]Eine vorhandene Seitenvorlage, die eine Bannerregion plus drei Spalten darunter bietet, wird verwendet[/comment]
[template]3-column-with-header[/template]
[comment]Das Thema "Darknight" wird verwendet[/comment]
[theme]darkknight[/theme]
[comment]Das vorhandene Websitenavigationsmenü wird verwendet[/comment]
[region=nav]$nav[/region]
[region=side]
	[comment]Mein gewähltes Menü und ein paar Widgets werden verwendet[/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]Zeige den normalen Seiteninhalt[/comment]
	$content
[/region]
[region=right]
	[comment]Zeige meinen komprimierten Kanal "wall" feed und erlaube Interaktion, wenn der Benutzer interagieren darf[/comment]
	[widget]channel[/widget]
[/region]

---

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