How to control the rendering of a menu in Orchard

问题

I have the following problem: I'm making a site in Orchard and have to apply a design made by some design company. They delivered html and CSS (+ LESS) and I have to make it into a theme. I get it done for the most part except the menu's. I want to apply a class to the nav tag in the following code, but I can't make any alternates for that end up rendering it.

<article class="widget-navigation widget-menu-widget widget" shape-id="18">
<nav shape-id="19">
    <ul class="menu menu-main-menu" shape-id="19">
<li class="current first" shape-id="22">
    <a href="/" shape-id="22">Home</a> 
</li>
<li shape-id="24">
<a href="/Something1" shape-id="24">Something1</a>
</li>
<li shape-id="26">
<a href="/Something2" shape-id="26">Something2</a>
</li>
<li class="last" shape-id="28">
<a href="/Something3" shape-id="28">Something3</a>
</li>
    </ul>
</nav>
</article>

How do I influence the rendering of my menu's so that I can apply proper CSS to it? The only alternates that I can make either contain only:

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

or:

@Display(Model.Menu)

回答1:

I think you can create a custom shape for the menu, inside Views/Menu-Main.cshtml, as explained on this page. From there on, you can pretty much do whatever you want to the shape. For example

@{
// Model is Model.Menu from the layout (Layout.Menu)
    var tag = Tag(Model, "ul");

    var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);

    if (items.Any()) {
        items[0].Classes.Add("first");
        items[items.Count - 1].Classes.Add("last");
    }    
}
<nav class='my-custom-class'>
    @tag.StartElement
        @DisplayChildren(Model)
    @tag.EndElement
</nav>

I haven't actually tried this so apologies if I'm not 100% correct, but this should get you in the right direction at least.

Also, the sample code above is just a slightly modified version of the original menu's code, best part about Orchard is that it's open source... You can view the original code here

来源：https://stackoverflow.com/questions/15019611/how-to-control-the-rendering-of-a-menu-in-orchard