Welt

Erstellen Sie ein Umgebungsbanner, das die aktuelle Umgebung hervorhebt, z

Kürzlich erhielt ich eine Anfrage von Redakteuren. Manchmal vergaßen sie, die Browser-URL zu überprüfen, arbeiteten in der falschen Umgebung weiter und veröffentlichten den Inhalt in der falschen Umgebung. Zum Beispiel testete einer der Redakteure etwas in der Vorbereitungsumgebung und dazwischen kam etwas zu einer kleinen Aktualisierung der Produktion. Er aktualisierte unbeabsichtigt die Requisitenumgebung und dachte, er hätte seine Arbeit erledigt. Die Redakteure fragten also, ob wir oben auf jeder Seite ein Banner anbringen können, das auf die aktuelle Umgebung hinweist. Das könnte uns helfen, solche menschlichen Fehler zu minimieren?

Mal sehen, wie ich diese Anforderung erfülle.

Zunächst habe ich eine neue Komponentenklasse im Geschäftsordner wie folgt erstellt.

[Component(PlugInAreas = “/episerver/cms/action”,
Categories = “cms”,
WidgetType = “yourCompanyName/environments/environmentHighlighter”)
]
öffentliche Klasse EnvironmentHighlighterComponent
{}
Die Komponente besteht aus drei wichtigen Teilen

PlugInAreas: – definiert, wo im cms der Inhalt der Komponente angezeigt werden soll. Es gibt verschiedene Möglichkeiten, den Wert für PlugInAreas zu ermitteln
EPiServer.Shell.PlugInArea-Klasse

Für meine Anforderung habe ich jedoch keinen Wert gefunden, der für den globalen Menübereich in EPiServer.Shell.PlugInArea verwendet werden könnte. Deshalb habe ich beschlossen, zu prüfen, welche vordefinierten Komponenten im System verfügbar sind. Unter den verschiedenen vordefinierten Komponenten entsprach die Symbolleiste meinen Anforderungen am besten

Bei einem weiteren Blick auf die Toolbar-Definition stellte ich fest, dass „/episerver/cms/action“ PlugInAreas für mich funktionierte.
1. 1. Kategorien: Ich wollte die Komponente für alle CMS-Seiten anzeigen, also habe ich einfach „cms“ als Kategorie eingegeben. Ein anderer Wert könnte „Dashboard“ sein.
  2. WidgetType: Dieser Wert gehört zu verschiedenen Einstellungen Ihrer ClientResources, zum Beispiel Editoren, Widgets usw. für unseren Fall, den wir verwendet haben
    „IhrFirmenname/environments/environmentHighlighter“

Der zweite Teil besteht darin, die Datei module.config im Stammverzeichnis der Website zu aktualisieren oder eine neue Datei zu erstellen und wie folgt zu aktualisieren

In der obigen Konfigurationsdatei versuchen wir, den Widgets-Ordner dem ClientResources-Ordner zuzuordnen.

Der dritte Teil besteht darin, eine Dojo-Skriptdatei zu erstellen. In unserem Fall lautet der Dateiname die Datei „environmentHighlighter.js“.
definieren([
“dojo/_base/declare”,
“dijit/_WidgetBase”,
“dijit/_TemplatedMixin”
],
Funktion (declare, _WidgetBase, _TemplatedMixin)
{
return declare(“yourcomapanyname/environments/environmentHighlighter”,
[
_WidgetBase,
_TemplatedMixin
],
{
templateString: dojo.cache(“/EnvironmentHighlighter/Index”)});
});

Das obige Skript enthält zwei wichtige Teile.

Declare-Anweisung: Der Wert ist derselbe wie der WidgetType-Wert.
Die templateString-Anweisung teilt dem Dojo mit, woher der HTML-Code kommen soll. In unserem Fall ist EnvironmentHighlighter ein Controller und Index eine Methode.

Der vierte und letzte Teil ist das Erstellen eines Controllers, das Anzeigen und Einrichten der Route. Diese Teile sind selbsterklärend
Regler
öffentliche Klasse EnvironmentHighlighterController: Controller
{
öffentlicher ActionResult Index()
{
return PartialView();
}
}
Sicht:

@{
var currentEnvironment = Environments.CurrentEnvironment;
var greenColor = “#2cd31f”;
var orangeColor = “#ff6a00”;
var colorScheme = currentEnvironment == Environments.Environment.Production.ToString() ? orangeFarbe: grüneFarbe;
}

Sie arbeiten in der @currentEnvironment-Umgebung

Routenplanung:
RouteTable.Routes.MapRoute(“EnvironmentHighlighter”, “environmenthighlighter/Index”, new { controller = “EnvironmentHighlighter”, action = “Index” });

Das ist es!

07. August 2023