Question

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

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

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

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

由于我没有为它编写驱动程序，传递给菜单项模板的模型没有像@ 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>

这会产生链接中菜单的预期标题，其前面有一个范围，带有以下文本：

Orchard.Fields.Fields.MediaPickerField

所以上面的所有代码（获取当前内容管理器和ContentItem的id代表ContentMenuItemPart，然后使用内容管理器获取ContentItem本身，然后linqing通过其Parts找到MenuImagePart（我不能使用Get得到它，因为它需要一个类型，而MenuImagePart不是一个类型，它是在管理界面中创建的），然后最终得到第一个字段用于调试目的（这应该是我创建的MenuImagePart的Image字段.. 。）...以上所有代码实际上让我进入了我的Meny Image Part上的Media Picker Field ...

我无法做到的，是什么让我当然有点愚蠢和愚蠢，是找到一种方法来阅读MediaPickerField URL属性！我已经尝试将其转换为MediaPickerField，但我无法从上面的模板代码中访问其命名空间。我甚至不知道添加到我的主题的哪个引用能够添加以下指令：

@using Orchard.Fields.Fields

Answer 1

我终于完成了这项任务（感谢Bertrand的指示）。

更新： 再次感谢Bertrand我已经完善了在圈子中运行的解决方案，当内容管理器上的内容项已经在模型中可用时查询内容项...现在我正在利用内容项目的动态性等。我终于对这个解决方案感到满意。

有必要创建一个名为Menu Image的新内容部件，然后将其添加到名为Content Item Menu的内容类型中，最后覆盖Content Item Menu模板。最后一部分是非常棘手的。如果不是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>

我唯一不理解的是为什么我不能将HtmlClassify用作menu.ContentItem.HtmlClassify()的扩展方法，并且不得不求助于将该方法作为标准静态方法调用（请参阅注释行） `// !!!由于某种原因，以下代码抛出'...）

再次感谢伯特兰！

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

1 个答案: