Orchardcms 如何扩展Orchard导航模块以将图像添加到菜单项

更新：根据伯特朗的建议和我自己的发现，我已经彻底改变了原来的问题。现在，它在文本中提供了一个不完整的解决方案，而不是我自己对Orchard的盲目曲解和评论，这些都是完全错误的

我需要显示一个菜单，使用图像而不是文本，一个标准，另一个用于悬停/选中时。该网站的要求规定，最终用户应能够管理菜单项图像。标准导航模块现在提供了一个HTML菜单项，这不是最终用户想要的。客户需要一个非常简单、直观的界面来配置站点许多菜单，并且所有菜单都是基于图像的

根据Bertrand的建议，在意识到内容菜单项是一种内容类型之后，我在管理界面中创建了一个新的内容部分（不是通过代码，我只想在最终需要时为部分和内容类型编写代码…我真的想看看我能通过使用管理界面和模板/CSSing在Orchard上走多远）

因此，我创建了一个菜单图像部分，其中添加了两个内容选择器字段：图像和悬停图像。然后，我将此部分添加到管理内容项管理界面的内容菜单项中

因为我没有为它编写驱动程序，所以传递到菜单项模板的模型没有像@Model.Href这样易于访问的属性。。。到目前为止，我已经用以下代码覆盖了MenuItemLink-ContentMenuItem.cshtml：

@using Orchard.Core.Common.Models
@using Orchard.ContentManagement
@{
    var contentManager = WorkContext.Resolve<IContentManager>();
    var itemId = Model.Content.ContentItem.ContentMenuItemPart.Id;
    ContentItem contentItem = contentManager.Get(itemId);
    ContentField temp = null;
    var menuImagePart = contentItem.Parts.FirstOrDefault(p => p.PartDefinition.Name == "MenuImagePart");
    if (menuImagePart != null)
    {
        temp = menuImagePart.Fields.First();
    }
}

<span>@temp</span>
<a href="@Model.Href">@Model.Text</a>

因此，上面的所有代码（获取当前内容管理器和表示ContentMenuItemPart的ContentItem的id，然后使用内容管理器获取ContentItem本身，然后通过其部分查找MenuImagePart）（我无法使用Get获取它，因为它需要一个类型，而MenuImagePart不是一个类型，它是在管理界面中创建的），然后最终获取用于调试的第一个字段（这应该是我创建的MenuImagePart的图像字段…）…以上所有代码实际上让我进入了Meny图像部分的媒体选择器字段

我不能做的是找到一种读取MediaPickerField URL属性的方法！我尝试将其强制转换为MediaPickerField，但我无法从上面的模板代码中访问其名称空间。我甚至不知道要向主题添加哪个引用才能添加以下目录与之相关的：

---

@使用Orchard.Fields.Fields

我终于成功完成了这项任务（多亏了Bertrand的指导）

更新：再次感谢Bertrand，我完善了循环运行的解决方案，从content manager查询模型上已经可用的内容项……现在我利用了内容项的动态特性，等等。我终于对这个解决方案感到满意了

有必要创建一个名为“菜单图像”的新内容部分，然后将其添加到名为“内容项菜单”的内容类型中，并最终覆盖“内容项菜单”模板。最后一部分是非常棘手的部分。如果不是Bertrand的指示，下面的代码可能会很臭，令人望而生畏。模板结果如下：

@using Orchard.Utility.Extensions;
@using System.Dynamic
@{

/* Getting the menu content item
***************************************************************/

var menu = Model.Content.ContentItem;

/* Creating a unique CSS class name based on the menu item
***************************************************************/

// !!! for some reason the following code throws: 'string' does not contain a definition for 'HtmlClassify'
//string test = menu.ContentType.HtmlClassify();
string cssPrefix = Orchard.Utility.Extensions.StringExtensions.HtmlClassify(menu.ContentType);
var uniqueCSSClassName = cssPrefix + '-' + Model.Menu.MenuName;

/* Adds the normal and hovered styles to the html if any
***************************************************************/

if (menu.MenuImagePart != null)
{

    if (!string.IsNullOrWhiteSpace(menu.MenuImagePart.Image.Url))
    {
    using(Script.Head()){
    <style>
        .@uniqueCSSClassName {
            background-image: url('@Href(menu.MenuImagePart.Image.Url)');
            width: @{@menu.MenuImagePart.Image.Width}px;
            height: @{@menu.MenuImagePart.Image.Height}px;
            display: block;
        }
    </style>
    }
    }
    if (!string.IsNullOrWhiteSpace(menu.MenuImagePart.HoverImage.Url))
    {
    using(Script.Head()){
    <style>
        .@uniqueCSSClassName:hover {
            background-image: url('@Href(menu.MenuImagePart.HoverImage.Url)');
            width: @{@menu.MenuImagePart.HoverImage.Width}px;
            height: @{@menu.MenuImagePart.HoverImage.Height}px;
        }
    </style>    
    }
    }
}
}    
<a class="@uniqueCSSClassName" href="@Model.Href">@Model.Text</a>

@使用Orchard.Utility.Extensions；
@使用系统。动态
@{
/*获取菜单内容项
***************************************************************/
var菜单=Model.Content.ContentItem；
/*基于菜单项创建唯一的CSS类名
***************************************************************/
//！！！由于某些原因，以下代码抛出：“字符串”不包含“HtmlClassify”的定义
//字符串测试=menu.ContentType.HtmlClassify（）；
string cssPrefix=Orchard.Utility.Extensions.StringExtensions.HtmlClassify（menu.ContentType）；
var uniquecscsclassname=cssPrefix+'-'+Model.Menu.MenuName；
/*将普通样式和悬停样式添加到html（如果有）
***************************************************************/
如果（menu.MenuImagePart！=null）
{
如果（！string.IsNullOrWhiteSpace（menu.MenuImagePart.Image.Url））
{
使用（Script.Head（））{
.@uniquecsclassname{
背景图像：url（'@Href（menu.MenuImagePart.image.url）'）；
宽度：@{@menu.MenuImagePart.Image.width}px；
高度：@{@menu.MenuImagePart.Image.height}px；
显示：块；
}
}
}
如果（！string.IsNullOrWhiteSpace（menu.MenuImagePart.HoverImage.Url））
{
使用（Script.Head（））{
.@uniquecsclassname:hover{
背景图像：url（'@Href（menu.MenuImagePart.HoverImage.url）'）；
宽度：@{@menu.MenuImagePart.HoverImage.width}px；
高度：@{@menu.MenuImagePart.HoverImage.height}px；
}
}
}
}
}    

我唯一不明白的是，为什么我不能将HtmlClassify用作

菜单.ContentItem.HtmlClassify（）

的扩展方法，而必须求助于将该方法作为标准静态方法调用（请参阅带有注释的行`/！！！出于某种原因，下面的代码抛出`…）

---

再次感谢Bertrand！

从HTML菜单项开始。David Hayden也有一篇关于扩展导航的好文章：Bertrand，这是我已经在尝试的！HTML菜单做了我想做的，它“添加”了一个新的“字段”我可以创建一个MenuImagePart并将其添加到我想在菜单中显示的任何内容中。因此，任何内容都可以指定在显示其菜单项时使用哪些图像，而不需要实际更改MenuItemPart上的任何内容。我必须能够n ContentMenuItem获取它指向的ContentItem，以便我可以从中读取MenuImagePart。是否可行？只需添加一个媒体选择器字段，并覆盖主题中的模板，使其显示其内容

@using Orchard.Utility.Extensions;
@using System.Dynamic
@{

/* Getting the menu content item
***************************************************************/

var menu = Model.Content.ContentItem;

/* Creating a unique CSS class name based on the menu item
***************************************************************/

// !!! for some reason the following code throws: 'string' does not contain a definition for 'HtmlClassify'
//string test = menu.ContentType.HtmlClassify();
string cssPrefix = Orchard.Utility.Extensions.StringExtensions.HtmlClassify(menu.ContentType);
var uniqueCSSClassName = cssPrefix + '-' + Model.Menu.MenuName;

/* Adds the normal and hovered styles to the html if any
***************************************************************/

if (menu.MenuImagePart != null)
{

    if (!string.IsNullOrWhiteSpace(menu.MenuImagePart.Image.Url))
    {
    using(Script.Head()){
    <style>
        .@uniqueCSSClassName {
            background-image: url('@Href(menu.MenuImagePart.Image.Url)');
            width: @{@menu.MenuImagePart.Image.Width}px;
            height: @{@menu.MenuImagePart.Image.Height}px;
            display: block;
        }
    </style>
    }
    }
    if (!string.IsNullOrWhiteSpace(menu.MenuImagePart.HoverImage.Url))
    {
    using(Script.Head()){
    <style>
        .@uniqueCSSClassName:hover {
            background-image: url('@Href(menu.MenuImagePart.HoverImage.Url)');
            width: @{@menu.MenuImagePart.HoverImage.Width}px;
            height: @{@menu.MenuImagePart.HoverImage.Height}px;
        }
    </style>    
    }
    }
}
}    
<a class="@uniqueCSSClassName" href="@Model.Href">@Model.Text</a>