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

Question

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

Answer 1

您可以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 用您的自定义解决方案激发您的灵感。

Answer 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 在右侧和仪表板上方加载，“部分导航”正确显示在顶部-对。

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

我该怎么做？

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

How do I make my own navigation bar in Umbraco v8

umbraco7

umbraco8