Lokale Blocks installieren

Folgende Bedingungen zur Installation werden vorausgesetzt:

Vorbereitungen

• lokaler Server: xampp
  • Install und Download, XAMPP Apachefriends
  • XAMPP Tutorial, Chip: XAMMP installieren und einrichten
• lokale Einrichtung mit GitBash und Composer
  
  • Git einrichten: GitBash
  • Composer auf localhost einrichten
• lokale Installation von Silverstripe
  • Silverstripe getting started
  • Starten von localhost: http://localhost/
  • Starten der Konsole "GitBash"
• Anleitung zur Installation von Silverstripe

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;
}