====== Erste Schritte mit ContentBlocks von Modmore ====== ContentBlocks sind ein mächtiges, kostenpflichtiges Extra für das CMS Modx von [[https://modmore.com/|modmore]], der niederländischen Pluginschmiede. ===== Installation ===== * 1 Benutzerkonto auf [[https://modmore.com|Modmore]] anlegen * 2 API Key anlegen * 3 Lizenz kaufen oder ContentBlocks nur testen, dies aber nur auf einer erlaubten Testdomain nach dieser [[https://support.modmore.com/faq/14-development+licenses/#faq_109|Liste der erlaubten Top-level- oder Subdomains]] * 4 Bookmarklet speichern * 5 In der MODX-Installation > Package Management öffnen * 6 Anbieter wechseln und modmore auswählen * 7 ContentBlocks herunterladen * 8 Installieren * 9 Bei der Installation auswählen ob man A ein CSS-Framework herunterladen möchte und B ob man ein paar Dummy-Fields laden möchte. Ich habe NEIN zu A geklickt und JA zu B. ===== Für mich wichtige FAQ ===== == Kann ich ContentBlocks (CB) deaktivieren? == Es ist lustig, dass dies der zweite Schritt ist. Warum CB installieren und dann als erstes Testen, ob ich es deaktivieren kann? Weil ich auch kein Schweizer Taschenmesser benutze, um ein Brötchen zu schneiden. Das große Standard-MODX-Contentfenster zur Eingabe von langen Texten ist für Seiten wie dem Impressum definitiv am Besten geeignet. Deshalb möchte ich direkt testen, ob ich CB auf speziellen Seiten deaktivieren kann. __JA, eins kann CB auf jeder Seite individuell aktivieren und deaktivieren.__ Screenshot: {{:modx:cb-on-off-1.jpg?200|}} == Funktioniert ContentBlocks mit Babel? == Ich habe in meiner [[http://dev.tripleorange.de|Testumgebung ]] zwei Sprachen, dort lassen sich mit ContentBlocks angelegte Inhalte einfach übersetzen. __JA, dem ersten Anschein nach funktioniert ContentBlocks mit Babel.__ == Kann ich individuelle Layout-Icons anlegen? == __JA, das geht und es ist ziemlich einfach.__ Es müssen nur für jedes Icon 2 Dateien angelegt werden, jeweils einmal * 80 px x 80 px - iconname.png * 160 px x 160 px - iconname@2x.png Diese werden dann nach: assets/components/contentblocks/img/icons/ hochgeladen. Beispiel: {{:modx:cbicons.jpg?200|}} Quelle: [[https://docs.modmore.com/en/ContentBlocks/v1.x/Custom_Inputs/Icons.html|Modmore ContentBlocks Icons]] == Kann ich im Templateeditor mit Ace arbeiten? == __JA, das geht und fast Fullscreen.__ ===== Erste Schritte ===== ==== Ersten Content bearbeiten ==== Hier hatte ich direkt die erste Fehlermeldung, da ich noch kein Default Layout angelegt habe, bzw kein Default-Layout existiert. Dazu * Extras > ContentBlocks öffnen * Reiter Layouts anwählen * Layout hinzufügen und ein erstes Basislayout anlegen ==== Ein erstes Basislayout anlegen ==== Es ist kein Layout vorinstalliert, d.h. der erste Schritt ist der Button 'Layout hinzufügen'. Und während die Anleitung eher abschreckend auf mich wirkte, ist es in der Praxis kinderleicht. Was mir auch hier wieder gegenüber Lösungen in Drupal oder Wordpress gefällt: Wenn eins will, wird Null=Zero=kein eigener HTML-Code von CB generiert. Ein Traum für lean Coder. [[https://docs.modmore.com/en/ContentBlocks/v1.x/Layouts.html|Zur Original-Dokumentation]] 5 Reiter müssen ausgefüllt werden, das scheint viel, ist aber für ein einfaches Headline / Content-Layout schnell erledigt. {{:modx:cb-layout-screen.jpg?200|}} === Reiter Allgemein === * Name > Ein prägnanter kurzer Name, kurze prägnante Begriffe, keine langen Wörter, im Ergebnis werden nur 5 Zeilen angezeigt * Kategorie > CB hat ein eigenes Kategorie-System, das unabhängig von der Installation/Elementen ist. Kategorien eignen sich sehr gut, um Layouts im Frontend zu sortieren und den Redakteuren die Arbeit zu erleichtern. Bei der Inhaltsbearbeitung werden die Kategorien bei der Layout-Auswahl in Zeilen angezeigt. * Icon > Für das Layout ein passendes Icon erstellen * Sortier-Reihenfolge > Niedrigere Nummern werden zuerst angezeigt, ich arbeite immer in 10er-Schritten, das habe ich mir bei der Basic-Programmierung angewöhnt {{:modx:cb-layoutname.jpg?200|So sieht es aus, wenn der Name und die einzelnen Begriffe zu lang sind}} === Reiter Template === Vielleicht der wichtigste Reiter, denn hier wird das eigentliche Markup eingegeben, dass später im Frontend erscheint. Im Templatecode werden die Platzhalter der Spalten eingegeben, an diesen Stellen erscheint später der Inhalt, der vom Redakteur durch die Auswahl verschiedener Eingabefelder zusammengestellt wird. Beispielcode für ein einspaltiges Layout, mit dem Spaltenplatzhalter [[+col_1]]
[[+col_1]]
Templates von Layouts dürfen nicht mit den Templates für ContentBlocks (eine Ebene höher) verwechselt werden. === Reiter Spalten === Ich persönlich finde den Begriff Spalten etwas verwirrend, weil sie einerseits das sind, was die Redakteur*innen nachher sehen, andererseits aber so etwas wie ein Container sind, der bei Template in das HTML eingebettet wird. Es sind nur 2 Angaben zu machen: * Referenz: ein eindeutiger maschinenlesbarer Begriff z.B. col_1, siehe oben * Eine Breitenangabe. Sollen die Spalten nachher nebeneinander angeordnet sein, dann sollte die Summe der Spaltenangaben 100 % sein. Die Angabe erolgt ohne %. Es können mehrere Spalten angelegt werden. === Reiter Verfügbarkeit === Es wird interessant. Für jedes Layout kann eine Regel erstellt werden, wo es angewendet werden darf. Dabei stehen unter dem Button "Bedingung diese Felder zur Verfügung: * Ressourcen ID (ID nur genau einer speziellen Ressource, oder mehreren durch Komma getrennt eingeben) * Klassen-Schlüssel (z.B. nur für * Template (ID) * ID der Eltern-Ressource * ID der obersten Eltern-Ressource * Kontext * Benutzergruppe (Name) Damit lässt sich die Arbeit mit den Layouts extrem auf Bereiche beschränken, einengen und /oder flexibilisieren. - Zusätzlich lässt sich die Gesamtmenge eines Elementes auf einer Seite beschränken. - Es kann eingestellt werden, dass das Layout nur als verschachteltes Layout eingefügt werden darf. === Reiter Einstellungen === Ebenfalls ein sehr mächtiges Tool. Hier kann das Layout zusätzlich noch weiter definiert werden. ===== Tipps und Tricks ===== Vielleicht noch ein wenig früh, für diese Sammlung, aber ich vergesse ungerne Lesezeichen * [[https://docs.modmore.com/en/ContentBlocks/v1.x/Tips_Tricks/Auto_Linked_Headers.html|Linkable Headlines with ID]] * [[https://docs.modmore.com/en/ContentBlocks/v1.x/Fields/Templates.html|Layouteinstellungen im Feld nutzen]] * [[https://modmore.com/contentblocks/faqs/|FAQ]] * [[https://docs.modmore.com/en/ContentBlocks/v1.x/Parsing_Templates.html|Outputmodifier in ContentBlocks]]