最適化のCMSの環境固有のバッジ

1751369329
2025-07-01 07:09:00

ステップ1：UIに環境情報を追加します

カスタムを作成します UIDescriptor そしてa ComponentDefinition CMS UIにバッジを注入します。

using EPiServer.Shell;
using EPiServer.Shell.ViewComposition;

[UIDescriptorRegistration]
public class EnvironmentBadgeUIDescriptor : UIDescriptor
{
    public EnvironmentBadgeUIDescriptor()
        : base("environment-badge")
    {
        DisabledViews = new string[] { };
    }
}

ステップ2：クライアントリソースを追加します

CMS UIでバッジをレンダリングするJavaScriptファイルを作成します。

define([
    "dojo/_base/declare",
    "epi/_Module",
    "dojo/dom-construct",
    "dojo/domReady!"
], function (declare, _Module, domConstruct) {
    return declare([_Module], {
        initialize: function () {
            this.inherited(arguments);

            var env = window.cmsEnvironment || "Production";
            var color = {
                Development: "#007bff",
                Staging: "#ffc107",
                Production: "#28a745"
            }[env] || "#6c757d";

            var badge = domConstruct.create("div", {
                innerHTML: env,
                style: `
                    position: fixed;
                    top: 10px;
                    right: 10px;
                    background-color: ${color};
                    color: white;
                    padding: 5px 10px;
                    font-weight: bold;
                    border-radius: 4px;
                    z-index: 9999;
                `
            }, document.body);
        }
    });
});

ステップ3：モジュールを登録します module.config

ステップ4：環境をかみそりまたはレイアウトに設定します

あなたの中で _Layout.cshtml または共有カミソリのビュー：

編集者がCMSにログインすると、右上隅にバッジが表示され、現在の環境を示すバッジが表示されます。

#最適化のCMSの環境固有のバッジ