Benutzer-Werkzeuge

Webseiten-Werkzeuge


breedmaster:home-template

Home-Template

Die Startseite, bzw. Home-Seite der Datenbank kann über ein HTML-Template fast vollständig umgestaltet werden. Dabei kann auf eine Reihe von vordefinierten Variablen zugegriffen werden. Diese sind durch geschweifte Klammern {} umschlossen.

Standard-Template

Nachfolgend ein Beispiel für eine Standardansicht, basierend auf Bootstrap:

<div class="container">
	<div class="row">
		<div id="links" class="col-md-3">
			{cms:mainmenu}
		</div>
		<div id="mitte" class="col-md-6">
			<p>{box:bemerkungen}</p>
			<p>{box:news}</p>
		</div>
		<div id="rechts" class="col-md-3">
			{box:schnellsuche}
			{box:zufallsbild} 
			{box:deckmeldungen} 
			{box:deckrueden} 
			{box:wuerfe} 
			{box:statistiken}
		</div>
	</div>
</div>

Zur Einteilung in Spalten wird das Grid-System von Bootstrap verwendet. Erkennbar an den CSS-Klassen mit den bezeichnungen col-md-x, wobei x die Breite der Spalte angibt. In Summe können in einer Zeile (row) maximal 12 Spalten genutzt werden.

2-Spaltiges Layout

Mit folgendem HTML-Code wird ein 2-spaltiges Layout genutzt, mit einer breiten linken Spalte.

<div class="container">
	<div class="row">
		<div id="links" class="col-md-8">
 
			{box:bemerkungen}
			{box:news}
		</div>
		<div id="rechts" class="col-md-4">
			{box:schnellsuche}
			{box:zufallsbild} 
			{cms:mainmenu}
			{box:deckmeldungen} 
			{box:deckrueden} 
			{box:wuerfe} 
			{box:statistiken}
		</div>
	</div>
</div>

Standard-Template (alt)

Folgendes Beispiel ist veraltet, aber nach wie vor funktionsfähig. Das Erscheinungsbild ist fast identisch mit obigen Beispiel:

	<div id="wrapper">
		<div class="custommenu" id="menubereich">
			<p>{cms:mainmenu}</p>
		</div>
		<div class="infotext" id="infobereich">
			<p>
			{box:schnellsuche}
			{box:zufallsbild}			
			{box:statistiken}
			{box:deckrueden}
			{box:wuerfe}
			{box:deckmeldungen}
			</p>
		</div>
		<div class="infotext" id="textbereich">
			<p>{box:bemerkungen}</p>
			<p>{box:news}</p>
		</div>
	</div>

Durch die vordefinierten CSS-Klassen wird ein 3-Spaltiger Seitenaufbau erreicht.

Es können beliebige Artikel des CMS eingebunden werden, hierzu wird eine Variable in der Form {cms:xxx} genutzt. Wobei xxx durch den Seitennamen der CMS-Seite ersetzt werden muss.

Darüber hinaus gibt es noch vordefinierte Blöcke/Boxen die über {box:xxx} genutzt werden können. Dabei darf xxx wie folgt lauten:

  • schnellsuche
  • zufallsbild
  • statistiken
  • deckrueden
  • wuerfe
  • deckmeldungen
  • paypal
  • bemerkungen
  • news

Benutzer-Daten

Ab Version 12.7.3 von Breedmaster können die Daten des aktuellen Nutzers in der Ausgabe integriert werden. Dadurch sind persönliche Anreden oder auch vorausgefüllte Formularfelder realisierbar. Allen Feldern muss als Prefix USR_ vorangestellt werden. Um also Vorname und Nachname eines Nutzers anzuzeigen, wäre folgender Eintrag notwendig:

<h3>Guten Tag {USR_vorname} {USR_nachname}</h3>

Weitere Beispiele

Zur einfacheren grafischen Gestaltung kann auf Standard Bootstrap-Klassen zurückgegriffen werden, wie z. B.

Zeigt einen Artikel in einer grünen Hinweisbox:

<div class="alert alert-success">{cms:xxx}</div>

Zeigt einen Artikel in einer roten Hinweisbox:

<div class="alert alert-danger">{cms:xxx}</div>

Zeigt einen Artikel in einer blauen Hinweisbox:

<div class="alert alert-info">{cms:xxx}</div>

Neben dem Template für die Home-Seite kann auch das Template für Showpage angepasst werden.

breedmaster/home-template.txt · Zuletzt geändert: 03.07.2018 12:27 von Manfred Link

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki