如何在 Umbraco v8 中制作自己的导航栏答案

【问题标题】：How do I make my own navigation bar in Umbraco v8如何在 Umbraco v8 中制作自己的导航栏
【发布时间】：2021-06-28 09:15:59
【问题描述】：

如何在我的自定义部分“我的自定义部分”中制作自己的导航图标，如包、用户等

【问题讨论】：

标签： umbraco7 umbraco8

【解决方案1】：

您可以use Content Apps 这样做。

内容应用程序是 Umbraco 8 中的一个全新概念。它们旨在与内容项配套使用，并且可以通过快速访问他们正在编辑的特定内容项的上下文信息来增强编辑者的体验。话虽如此，它们并不打算用于编辑内容。

您可以按照以下步骤创建自定义内容应用，更多详情请check this Umbraco documentation。

设置新插件 - please see details & code samples here。
为新插件创建新视图和新控制器 - please see details here.
完成后，您应该会看到新的内容应用程序（在本例中，它是“字数计数器”应用程序）。
最后；您可以通过将您的 package.manifest 更新为 described here. 将您的内容应用设置为仅在特定部分可见

PS：这里还有一篇关于如何创建Content Apps.的文章

PSS：You can find more examples here 用您的定制解决方案激发您的灵感。

【讨论】：

我已经尝试过内容应用程序，它适用于内容类型“设置部分中的媒体类型、成员类型和文档类型”我无法让它与我的自定义部分“我的自定义部分”一起使用” 我想要的是，当我单击顶部的“我的自定义部分”部分时，它应该显示我在帖子中提到的子菜单，下面是：左侧的树视图（我有这部分工作）和右侧，我希望我的控制器根据我在左侧选择的内容显示在哪里。包类型和用户部分。

【解决方案2】：

经过一番研究，我发现了这一点：

它被称为导航，这里是文件：

package.manifest

{
    "sections": [
        {
            "alias": "testSection",
            "name": "Test Section"
        }
    ],
    "dashboards": [
        {
            "alias": "welcome",
            "sections": [ "testSection" ],
            "view": "~/App_Plugins/TestSection/backoffice/dashboard/sections.html"
        },
    ],
    // array of files we want to inject into the application on app_start
    "javascript": [
        "~/App_Plugins/TestSection/backoffice/dashboard/sections.controller.js"
    ]
}

sections.controller.js

(function () {
    'use strict';

    function testSectionSections($scope) {

        var tss = this;

        tss.page = {
            title: 'Test Section',
            navigation: [
                {
                    'name': 'Info',
                    'alias': 'info',
                    'icon': 'icon-info',
                    'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/TestSection/backoffice/dashboard/info.html',
                    'active': true
                },
                {
                    'name': 'Page2',
                    'alias': 'page2',
                    'icon': 'icon-box',
                    'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/TestSection/backoffice/dashboard/page2.html',
                },
            ]
        }

    };

    angular.module('umbraco')
        .controller('testSectionSectionsController', testSectionSections);
})();

sections.html

<div ng-controller="testSectionSectionsController as tss">

    <umb-editor-view footer="false">
        <umb-editor-header name="tss.page.title"
                           hide-description="true"
                           name-locked="true"
                           hide-alias="true"
                           hide-icon="true"
                           navigation="tss.page.navigation">
        </umb-editor-header>
        <umb-editor-container class="form-horizontal">
            <umb-editor-sub-views sub-views="tss.page.navigation" model="tss"></umb-editor-sub-views>
        </umb-editor-container>
    </umb-editor-view>
</div>

info.html

<h3>Welcome - Info</h3>

注意：

当我点击“测试部分”时，我在左侧加载了我的自定义树控制器，默认仪表板 info.html 加载在右侧和仪表板上方，“部分导航”正确显示在右上角。

我遇到的唯一问题是，当我单击左侧“树控制器”上的一个项目时，我的“部分导航”消失了。我希望它一直可见。

我该怎么做？

【讨论】：