Website-Block

• Blocktypen
• Blocknamen
  • Eigener Name
  • Name für die Vorlage
  • Beispiel für Blöcke Websites
• So wird mit Blöcken gearbeitet
  • Einfügen eines Blocks
  • SASS-Styles
  • Befüllen des Blockinhalts mit Code

Blöcke sind der grundlegende Baustein von Websites und ermöglichen es, Seiten aus Blöcken mithilfe einer Vorlage zusammenzusetzen

Blocktypen

Es gibt verschiedene Typen von Blöcken:

1. Blöcke, die in den Kopfbereich der Seite (Header) eingefügt werden – enthalten Anweisungen für den Browser und zusätzliche Informationen über die Seite. Typischerweise legen Blöcke in der Seite fest, welche Bibliotheken für die Seite geladen werden sollen. Sie können auch Skripte für die Seite enthalten.
2. Blöcke für den Seitenkörper (Body) – Teil des Seitenkörpers. Der Inhalt wird direkt durch den Block beschrieben oder
   programmgesteuert generiert.
3. CSS- / SASS-Styles

Blocknamen

Ein Block hat zwei Namen: Eigener Name und Name für die Vorlage

Eigener Name

Mit dem eigenen Namen identifizieren Sie den Block in der Übersicht aller Blöcke. Der Name sollte für das Portal eindeutig sein, damit Sie sich in den Blöcken gut zurechtfinden.

Name für die Vorlage

Der Name für die Vorlage ist die Bezeichnung für den Feldnamen in der Vorlage, in den der Block eingefügt werden soll. Es handelt sich um die Benennung des Feldes in der Vorlage, zu dem der Block gehört.

Der Name für die Vorlage ist nur für Blöcke relevant, die in den Seitenkörper eingefügt werden. CSS-Styles und Blöcke für den
Kopfbereich werden immer alle angewendet.

Beispiele für Namen in der Vorlage sind topmenu, leftmenu, footer usw.

Verwenden Sie für Blöcke nicht body und pageBody, da sie mit dem eigentlichen Seiteninhalt verwechselt werden könnten.

Beispiel für Blöcke Websites

verwenden ein Menü in der oberen Leiste. Das Menü ist auf allen Seiten gleich, hat aber Sprachversionen (z. B. cz, en, de). Sie fügen das Menü in Blöcke ein:

Der Block für jede Sprache wird nach der Sprache benannt, aber sie teilen sich denselben Namen für die Vorlage. Die Vorlage kann dann für alle Sprachen gleich sein, aber das Seitenmuster fügt immer den Block der richtigen Sprachmutation ein.

So wird mit Blöcken gearbeitet

Einfügen eines Blocks

in die Seite Blöcke werden in die Seite eingefügt:

1. Direkt (in den Seitendetails, Registerkarte Blöcke)
2. Indirekt über die Seitenvorlage
3. Auf der Grundlage ihrer Zuordnung zu dem Bereich, in dem die Seite eingeordnet ist

Über die Zuordnung des Blocks entscheidet die Vorlage – direkt auf der Seite oder in der Vorlage. Es werden die Blöcke verwendet, die die Vorlage erfordert; andere werden ignoriert.

Wenn sowohl dem Bereich als auch der Seite ein Block mit demselben Namen für die Vorlage zugeordnet ist, wird der Block auf der Seitenebene verwendet (er hat Vorrang vor dem Block beim Bereich).

SASS-Styles

CSS-Styles können mithilfe von SASS beschrieben werden. Das System übersetzt sie automatisch in CSS-Styles. SASS-Styles unterstützen kaskadierende Definitionen. Bei einem SASS-Style kann definiert sein, dass er einen CSS-/SASS-Style enthält, der in einem anderen Block beschrieben ist. Bei der Übersetzung des SASS-Styles wird der übergeordnete Style eingefügt.

Empfehlung: Verwenden Sie für SASS-Variablen und @mixin-Definitionen separate SASS-Styles, die Sie in andere einfügen. So können Sie in allen Styles einheitliche SASS-Definitionen verwenden und diese leicht in neuen Portalen nutzen (als Teil einer Webvorlage).

Befüllen des Blockinhalts mit Code

Blöcke ermöglichen es, ein Skript zu definieren, das ihren Inhalt befüllt. Für die meisten Skripte stellt der Blockinhalt dann eine Vorlage dar, die im htmlGenerátor als Vorlage verwendet wird.

Die Verknüpfung mit Skripten im Code darf nur von Mitarbeitern mit der Entwicklerrolle vorgenommen werden. Ohne diese Rolle ist das Feld, das den Seitenblock mit dem Skript verbindet, nicht verfügbar.

Beispiel: Ein Suchfenster auf der Website kann eine Seite aufrufen, die die Suchergebnisse anzeigt. Die Seite oder ein Block auf dieser Seite ruft ein Skript auf, das eine Volltextsuche nach Seiten durchführt, die der Eingabe entsprechen. Die Seite selbst enthält eine Vorlage zur Formatierung des Ergebnisses.

Skriptaufruf: server.webFEPages.getUserSearch

Inhalt des Blocks oder der Seite:

<!-- Block used to show results -->
<searchResult>
  <h3><a href="@pagePath" target="_blank">@metaTitle</a></h3>
  <p>@metaDescription</p>
  <br>
</searchResult>
<!-- Block with list of all results -->
<searchList></searchList>
<!-- Block used if nothing foung -->
<searchNoRes>
  <h3>Sorry, nothing matches your search</h3>
</searchNoRes>
<body>
  <h1>Search results</h1>
  {@searchResult}
</body>