Flexibles Bootstrap 4 Template in Arbeit
Verfasst: Di 31. Mär 2020, 14:22
Da unser Forenuser "DG70" ein Modul für Bootstrap 4 mitsamt aller Bootswatch Themes gebaut hat, das bald verfügbar sein wird, habe ich auf dieser Basis schon mal ein Template erstellt, zu dem ich mir gleich noch ein paar Tricks habe einfallen lassen.
Zunächst mal die Basis: https://startbootstrap.com/themes/clean-blog/
Daraus wurde:
Ein paar Anmerkungen:
Oben links, wo "BlackCat CMS" steht, wird der WEBSITE_TITLE verwendet.
Als Hauptüberschrift über dem Hintergrundbild wird der PAGE_TITLE verwendet.
Der Text "Subtitle" stammt aus der Einstellung "Beschreibung", die sonst als META-Description im HTML-Header verwendet wird.
Ich denke, das paßt ganz gut. Ansonsten kann man sich das in den Template-Dateien anpassen.
Zu den Tricks:
In der Datei index.php gibt es ein paar Einstellungen:
Über die ersten 3 (*_link) kann man Links auf Facebook, Twitter und GitHub konfigurieren, die dann auf der Seite unten drunter erscheinen, siehe Screenshot. Icons, zu denen kein Link hinterlegt ist, erscheinen auch nicht. Sind alle Links leer, ist auch die komplette Zeile weg.
Die nächsten 3 (header_*) beziehen sich auf das Hintergrundbild im Header. Zum einen habe ich zwei Bildverzeichnisse "flowers" und "technical" mit jeweils 6 lizenzfreien Bildern von Pixabay gefüllt. Zwischen diesen Verzeichnissen kann man über 'header_img_subdir' umschalten. Eigene Bilder kann man dann entweder mit in die vorhandenen Verzeichnisse legen, oder man legt sich eigene Unterverzeichnisse an.
Weiterhin kann man über 'header_img' den Namen einer Bilddatei angeben, die dann auf allen Seiten angezeigt wird. Das heißt, alle Seiten haben dann das gleiche Header-Bild.
Möchte man bei jedem Aufruf ein zufälliges Bild, stellt man 'header_img_random' auf true. Sind sowohl 'header_img' also auch 'header_img_random'=>true gesetzt, "gewinnt" die Angabe "random", also das Zufallsbild.
Als letzte Option in Bezug auf das Hintergrundbild kann man im Verzeichnis /templates/b4_clean_blog/css/img/ eine Datei <PAGE_ID>_bg.jpg ablegen. Wird nun diese Seite angezeigt, wird unabhängig von allen anderen Einstellungen genau dieses Bild angezeigt. Die Endung .jpg habe ich derzeit hartverdrahtet, bei Bedarf kann man sich das in der main.tpl anpassen.
Zuguterletzt verwendet die Vorlage Google Fonts, die man ja vielleicht wegen der DSGVO nicht haben möchte. Daher habe ich auch das einstellbar gemacht. Wenn ich das Template zum Download freigebe, wird die Einstellung 'google_fonts' standardmäßig auf false stehen.
Wichtiger Hinweis: Bootstrap erlaubt out-of-the-box in der NavBar nur zwei Menüebenen, also keine verschachtelten Untermenüs. Das gilt demnach auch für das Template.
Zunächst mal die Basis: https://startbootstrap.com/themes/clean-blog/
Daraus wurde:
Ein paar Anmerkungen:
Oben links, wo "BlackCat CMS" steht, wird der WEBSITE_TITLE verwendet.
Als Hauptüberschrift über dem Hintergrundbild wird der PAGE_TITLE verwendet.
Der Text "Subtitle" stammt aus der Einstellung "Beschreibung", die sonst als META-Description im HTML-Header verwendet wird.
Ich denke, das paßt ganz gut. Ansonsten kann man sich das in den Template-Dateien anpassen.
Zu den Tricks:
In der Datei index.php gibt es ein paar Einstellungen:
Code: Alles auswählen
/*******************************************************************************
TEMPLATE CONFIGURATION
*******************************************************************************/
$b4_clean_blog_config = array(
'facebook_link' => 'https://www.facebook.com/BlackCatCMS',
'twitter_link' => '',
'github_link' => 'https://github.com/BlackCatDevelopment',
'header_img_subdir' => 'flowers',
'header_img' => '',
'header_img_random' => true,
'google_fonts' => true,
);
/*******************************************************************************
END TEMPLATE CONFIGURATION
*******************************************************************************/
Die nächsten 3 (header_*) beziehen sich auf das Hintergrundbild im Header. Zum einen habe ich zwei Bildverzeichnisse "flowers" und "technical" mit jeweils 6 lizenzfreien Bildern von Pixabay gefüllt. Zwischen diesen Verzeichnissen kann man über 'header_img_subdir' umschalten. Eigene Bilder kann man dann entweder mit in die vorhandenen Verzeichnisse legen, oder man legt sich eigene Unterverzeichnisse an.
Weiterhin kann man über 'header_img' den Namen einer Bilddatei angeben, die dann auf allen Seiten angezeigt wird. Das heißt, alle Seiten haben dann das gleiche Header-Bild.
Möchte man bei jedem Aufruf ein zufälliges Bild, stellt man 'header_img_random' auf true. Sind sowohl 'header_img' also auch 'header_img_random'=>true gesetzt, "gewinnt" die Angabe "random", also das Zufallsbild.
Als letzte Option in Bezug auf das Hintergrundbild kann man im Verzeichnis /templates/b4_clean_blog/css/img/ eine Datei <PAGE_ID>_bg.jpg ablegen. Wird nun diese Seite angezeigt, wird unabhängig von allen anderen Einstellungen genau dieses Bild angezeigt. Die Endung .jpg habe ich derzeit hartverdrahtet, bei Bedarf kann man sich das in der main.tpl anpassen.
Zuguterletzt verwendet die Vorlage Google Fonts, die man ja vielleicht wegen der DSGVO nicht haben möchte. Daher habe ich auch das einstellbar gemacht. Wenn ich das Template zum Download freigebe, wird die Einstellung 'google_fonts' standardmäßig auf false stehen.
Wichtiger Hinweis: Bootstrap erlaubt out-of-the-box in der NavBar nur zwei Menüebenen, also keine verschachtelten Untermenüs. Das gilt demnach auch für das Template.