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

问题描述

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

解决方法

你可以use Content Apps做到这一点。

内容应用程序是 Umbraco 8 中的一个全新概念。它们旨在成为内容项的伴侣，并且通过快速访问他们正在编辑的特定内容项的上下文信息来增强编辑者的体验。话虽如此，它们并非旨在用于编辑内容。

您可以按照以下步骤创建自定义内容应用，有关详细信息，请check this Umbraco documentation。

设置新插件 - please see details & code samples here。
为新插件创建新视图和新控制器 - please see details here.
完成后，您应该会看到您的新内容应用（在本例中，它是“Word Counter”应用）。
最后；您可以将您的 package.manifest 更新为 described here.

PS：这是另一篇关于如何创建Content Apps.

的文章

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

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

它叫做导航，这里是文件：

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>

信息.html

<h3>Welcome - Info</h3>

注意：

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

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

我该怎么做？

umbraco7 umbraco8