Optimizely CMS 12如何在设置页Display Option后新增自定义选项卡

按通用菜单配置文档操作不生效的核心原因：「我的设置」弹窗内的选项卡不属于全局导航菜单体系，通用IMenuProvider菜单扩展逻辑仅对侧边主菜单、全局工具栏生效，无法挂载到个人设置页内。
以下是可直接运行的实现步骤： #

1. 实现自定义选项卡逻辑 #

确保项目已安装和当前CMS版本匹配的EPiServer.CMS.UI 12.x版本NuGet包，新增自定义选项卡类，通过[SettingsItem]特性指定挂载位置，直接放在Display Options选项卡后方：

using EPiServer.Shell.Settings;
using EPiServer.Shell.Web.Mvc;
using Microsoft.AspNetCore.Mvc;

// 特性注册自定义选项卡，无需额外编写菜单provider
[assembly: SettingsItem(
    ParentPath = "personal", // 固定值：挂载到「我的设置」根节点
    SortOrder = 200, // Display Options默认排序值为100，200即排在其后方
    ViewComponentType = typeof(CustomSettingsTabComponent),
    Title = "你的自定义选项卡名称",
    Name = "custom-settings-tab"
)]

namespace YourProjectNamespace.Settings
{
    // 选项卡视图组件
    public class CustomSettingsTabComponent : ViewComponent, ISettingsView
    {
        public string MenuText => "你的自定义选项卡名称";
        public string ControllerName => "CustomSettingsTab";
        public string ActionName => nameof(Index);

        public IViewComponentResult Invoke()
        {
            // 按业务需求初始化绑定到视图的模型
            var settingsModel = new CustomSettingsModel();
            return View(settingsModel);
        }

        public IActionResult Index()
        {
            return View();
        }
    }

    // 自定义设置项模型，按业务需求定义字段即可
    public class CustomSettingsModel
    {
        // 示例：public string CustomConfigValue { get; set; }
    }
}

2. 添加选项卡对应视图 #

在项目视图目录下创建视图文件，路径固定为/Views/Shared/Components/CustomSettingsTab/Index.cshtml，复用Optimizely后台内置样式保证UI一致性：

@model CustomSettingsModel
<div class="epi-form-container">
    <h2 class="epi-form-container__section__header">你的自定义选项卡名称</h2>
    <div class="epi-form-container__section__content">
        @* 在这里编写自定义设置项的表单、交互逻辑即可 *@
    </div>
</div>

3. 业务逻辑扩展（可选） #

如果需要实现配置保存、数据读取逻辑，直接在Startup.cs的ConfigureServices方法中注入你写的服务即可，用户级配置存储可以直接复用Optimizely内置的IPersonalizationService，无需额外实现存储逻辑。 #

常见不生效排查点 #

• 不要使用IMenuProvider尝试挂载该选项卡，该接口仅处理全局导航菜单，无法识别个人设置页的挂载节点
• 确认[SettingsItem]特性的ParentPath属性值为personal，路径错误会导致选项卡无法渲染
• 若修改SortOrder数值，不要小于100，否则会排在Display Options选项卡前方
• 部署/调试时重启站点后清空浏览器缓存，Optimizely后台UI资源存在本地缓存，不强制刷新可能看不到新增选项卡

内容的提问来源于stack exchange，提问作者Eranga Wijethunga