管理后台-第一部分：Creating custom sections in Umbraco 7

在Umbraco上每个部分都可以被称为一个应用程序，所以这些部分和应用程序基本上是一样的。我们首先要做的事情是需要创建应用程序。在这个例子中，我不会去摆弄xml文件或是数据库——我将使用类来创建我的内容。

我需要做的第一件事就是创建一个类，实现Application接口，这样我们的Umbraco将会初始化这个类。

1. [Application("CustomSection", "CustomSection","icon-car", 15)]
2. public class CustomSectionApplication : IApplication {}

对于V7，这不是新的东西，这个Application属性主要是告诉Umbraco来创建一个新的应用程序。

Name:CustomSection

Alias: CustomSection

Icon:icon-car（css类的图标将显示在左侧栏backoffice）

Sort order: 15

下次Umbraco运行的时候将会在/config/application.config文件中添加一个xml元素，也将会添加一个新的section应用程序。

创建树

在添加树之前，Umbraco是不是在意你新建的应用程序的。一个应用程序没有树它是没有意义的，对吗？

这部分包含了一些V7的新概念。我们开始创建一个新的类，从Umbraco.Web.Trees来继承，确保这个类名称的后缀名是Controller。CustomSectionTreeController。

1. public class CustomSectionTreeController : TreeController
2. {
3. }

现在我们需要给Umbraco关于我们的树的一些额外信息。让我们添加两个属性类，Tree和PluginController。

1. [PluginController("CustomSection")]
2. [Umbraco.Web.Trees.Tree("CustomSection", "CustomSectionTree", "My custom section", iconClosed: "icon-doc")]
3. public class CustomSectionTreeController : TreeController
4. {
5. }

 PluginController

这个属性告诉Umbraco，这个类是一个插件的一部分。而且它也告诉Umbraco这个插件的名称。这将会使Umbraco在/app_plugin/{NameOfApplication}/文件夹中寻找视图，而不是在默认的核心视图的文件夹中查找。

Tree

这个属性是以前Umbraco中就有的，我认为大约是4.7以上的版本。它告诉Umbraco一个tree类，Umbraco会将它添加在/config/trees.config文件中。在V7中这个属性是一个强制性的树，在TreeController类中继承了一些潜在的逻辑来查看属性值确定树的名称。

这些属性有：

Application： CustomSection(在匹配应用程序之前我们必须添加的名称)

Alisa: CustomSectionTree(这是树的名字)

Title: The title of the tree(作为根节点的名称)

Icon：图标（作为类的图标）

现在我们需要添加一些代码使得在树上显示一些内容。

[PluginController("CustomSection")]
[Umbraco.Web.Trees.Tree("CustomSection", "CustomSectionTree","My custom section", iconClosed: "icon-doc")]
public class CustomSectionTreeController : TreeController
{
    protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
    {
        var nodes = new TreeNodeCollection();
        var item = this.CreateTreeNode("dashboard", id, queryStrings, "My item", "icon-truck", true);
        nodes.Add(item);
        return nodes;
    }
 
    protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
    {
       var menu = new MenuItemCollection();
       menu.DefaultMenuAlias = ActionNew.Instance.Alias;
        menu.Items.Add<ActionNew>("Create");
        return menu;
    }
}

我们将会看到：

我们创建一个新的内容至少血药两个方法。

GetTreeNodes (TreeNodeCollection)

这将返回树项目的集合，在我们的例子中我们只返回了一个项目，但是我们可以将更多的项目添加到集合中。我们使用创建TreeNode方法，从基类中创建一个新的id为“dashboard”名称为“My item"的节点。Umbraco将节点的id附加在URL之后，以便我们可以从AngularJS-controllers处理路由。

GetMenuForNode (MenuItemCollection)

这个方法处理右边的选择”DefaultMenuAlias“配置当我们点击触点的时候应该被解雇。

有很多的action来供你使用，你也可以建立自己的。

显示我们新的内容

为了显示我们新添加的内容，我们需要给当前用户对它的访问。现在去users部分，打开edit-view为当前登录用户。在底部，选择复选框[customSection]，然后保存。现在你可能会需要使用F5刷新页面，左边栏中便可以显示出新的内容。

使我们的[customSection]变得更好看

因为Umbraco找不到任何语言为我们的内容翻译，它将会使用括号和应用程序名称。为了使其显示的更好，打开/umbraco/config/lang/en.xml文件，查看<area alias=”sections”>元素，插入一下元素，仅仅添加：

你可能需要接触根目录web.config文件，来重新启动应用程序，使翻译变得可见。

【原文：http://www.enkelmedia.se/blogg/2013/11/22/creating-custom-sections-in-umbraco-7-part-1.aspx】