Lupe Suche
Responsiv Devices

Lokale Blocks installieren

Folgende Bedingungen zur Installation werden vorausgesetzt:

Vorbereitungen

Modul - Silverstripe CMS Elemental

Github: https://github.com/silverstripe/silverstripe-elemental

Pagetyp "BlockPage" src/BlockPage.php

Um die Elemental-Blocks nur auf den Pagetyp "BlockPage" anzuwenden, muss erst der gewünschte PageTyp erstellt werden. (Die Elemental Blocks können für ALLE Pagetypen des Projekt angewendet werden.)

<?php

namespace SilverStripe\SSBootstrap;
use Page;

class BlockPage extends Page
{

private static $db = [
];

private static $table_name = 'BlockPage';

private static $icon = "images/elemental-page.png";
private static $description = 'Pagetyp Elemental Blocks';
private static $singular_name = 'Blockpage';
private static $plural_name = 'Blockpages';

}

Alle zur Page-Klasse hinzugedügten Codezeilen betreffen das Template. Da ich ein Bootstrap-Template verwende unter dem Namespace "Silverstripe\SSBootstrap" habe ich ihn in der page-Klasse vorbereitet. Vorbereitet ist ebenfalls der Rahmen die Klasse zu erweitern, sie wurde mit Icon, Description und Name ausgestattet.

Installation des Moduls mit Composer

composer require dnadesign/silverstripe-elemental ^4

Folgende YAML config-Datei gibt das Elemental-Element für das Backend frei und entfernt das Standard Inhalt-Editor-Feld

mysite/_config/elements.yml

Die Pfadangabe ist entscheidend, für welchen PageTyp die Blocks verwendet werden. Wird "Page" gesetzt, erben das auch alle extendierten Klassen von Page.

Page:
  extensions:
    - DNADesign\Elemental\Extensions\ElementalPageExtension

mysite/_config/elements.yml

Der Pfad zeigt ausschliesslich auf den Typ "BlockPage". Somit können alle anderen PageTypen unabhängig verwendet werden.

SilverStripe\SSBootstrap\BlockPage:
  extensions:
    - DNADesign\Elemental\Extensions\ElementalPageExtension

Das Template: BlockPage.ss

Das Template ermöglicht erst die individuelle Gestaltung der Block-Elemente.

<div class="container {$URLSegment}" id="elemental">

<h1>$Title (BlockPage)</h1>

$ElementalArea
$Form

</div>

Die Platzhalter für den Inhalt "$Content" kann ersetzt werden, das Inhalt-Editor Textfeld wurde ausgeblendet. Der Platzhalter "$Form" ist optional verwendbar. Alle Blocks können nun über die ID des Containers angesprochen werden. Bsp. CSS-Code:

#elemental h2 {
color: red;
}