Eigenen Block mit Piranha entwickeln

Dieser Artikel beschäftigt sich mit der Erstellung eines eigenen Blocks für das Content Management System Piranha. Ein Block bezeichnet einen Inhaltsabschnitt, welchen man auf eine Inhaltseite einfügen kann. Ein Block besteht dabei aus einer Menge an Feldern, die man mit einer eigenen Logik zur Anzeige bringen kann.

Zunächst definieren wir das Model. Das ist einer einfache Klasse, welche von Block erbt und eine Menge von Fields definiert. Auf Ebene der Klasse beschreiben wir diese noch mithilfe des Attributs BlockType.

Wir vergeben den Namen und die Kategorie unter der der Block im Content Managemet System auftaucht. Wir können ein Icon aus dem Iconset von FontAwesome wählen und definieren den Namen der Komponente.

[BlockType(Name = "Article", Category = "Content", Icon = "fas fa-font", Component = "article-block")]
public class ArticleBlock : Block
{
	[Field(Placeholder = "Etiam porta sem malesuada magna mollis euismod.")]
	public StringField Headline { get; set; }

	public StringField Body { get; set; }
}

Es handelt sich dabei um eine reine Modelklasse, die keine weitere Funktionalität mitbringt. Auch das Setzen der Felder wird nicht direkt erledigt. Hierfür muss man eine Vue-Komponente schreiben. Pianha setzt auf der Vue Framework. Die Komponenten kann man in ein JS-Datei schreiben, man muss nicht mehrere erstellen. Besonders wenn nur kleine Komponenten hat, würde ich auf die Aufteilung verzichten.

Gehen wir in diesem Fall davon aus, dass wir eine neue Datei Names manager.js erstellen und mit einer Komponente füllen, deren Namen wir oben im Model definiert haben. In den einfachsten Fällen, kann man bereits definierte Komponente einfach wiederverwenden und kombinieren. Für alle unterstützen Feldtypen hat Piranha bereits Komponenten bereitgestellt. In unserem Fall nutze ich die String-Field Komponente für ein einfaches und einzeiliges Textfeld und die Text-Field-Komponente für eine TextArea als Tinyeditor.

Beschreibt man eines der Felder mit dem Attribut Field wird das in den Models als Meta zur Verfügung gestellt. So kann zum Beispiel ein Textfeld mit einem Platzhalter versorgt werden.

Vue.component("article-block", {
    props: ["model"],
    template: 
            "<p>" +
             "    <label>Headline</label>" +
             "    <string-field v-bind:model='model.headline' v-bind:meta='model.headline'></text-field>" +
             "    <label>Body</label>" +
             "    <text-field v-bind:model='model.body' v-bind:meta='model.body'></text-field>" +
        "</p>"
});

Nun haben wir die Basis geschaffen und müssen Piranha noch sagen, was wir getan haben. Im Configure Abschitt der Startup Klasse müssen daher der Block registriert und die erstellte JS Datei bekannt geacht werden. public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IApi api)

{
	App.Blocks.Register();
	App.Modules.Get()
				.Scripts.Add("~/js/manager.js");
}

Nun kann der Block im CMS verwendet werden und sollte auch schon funktionieren. Das heißt es werden ein einfach Input-Feld und ein Tiny-Editor angezeigt werden.

Nun wollen wir den Block auf der Webseite zurAnzeige bringen. Dazu müssen wir ein sogenannten DisplayTemplate zum Einsatz bringen. Das ist keine Erfindung von Piranha, das gibt es schon sehr lange in .NET. Dazu erstellen wir ein Template mit dem Namen des Blocks im Order DisplayTemplates unterhalb von CMS. Je nach Konfiguration der Suchorte kann das bei Euch natürlich anders sein. Ich lege meine DisplayTemplates für Blöcke in "Views/Cms/DisplayTemplates" und die DisplayTemplates für andere Modelle lege ich in "Shared/DisplayTemplates". Man kann aber auch alle in Shared legen. Nachfolgend seht ihr ein Beispiel für solch ein Template.

Dabei wir nur die Headline in <h2> verpackt und der Body interpretierbar ausgegeben, schließlich wollen wir ja das interpretierte Html sehen und nicht den Html-Code.

@model ArticleBlock
    
<h1>@Model.Headline</h1>
<p>@Html.Raw(Model.Body)</p>