Orchard菜单项渲染:两个不同的菜单，需要不同的html类

本文关键字：菜单 html 两个 菜单项 Orchard | 更新日期: 2023-09-27 18:20:19

我有两个菜单，它们通过身份验证状态（无论用户是否登录）在Orchard中有条件地呈现。

我面临的挑战是如何在html类级别控制每个菜单的呈现。每个菜单都有一个稍微不同的html结构，不同的CSS设计有不同的类。

目前，这两个菜单都使用位于主题根文件夹中的相同menu.cshtml和MenuItem.chtml文件。

单独控制每个特定菜单的html类和结构的最佳方式是什么？

菜单1:

        <!--Main Menu HTML Code-->
         <nav class="wsmenu slideLeft clearfix">
              <ul class="mobile-sub wsmenu-list">
                <!-- List Item Ends -->
                  <li class="twelve-point">
                    <a href="#">
                    <p class="r-font-nav">L</p>
                    <h5>MEMBERSHIP</h5>
                  </a>
                    <ul class="wsmenu-submenu">
                      <li><a href="#"></i>ABOUT US</a></li>
                      <li><a href="#"></i>CODES OF PRACTICE</a></li>
                      <li><a href="#"></i>JOIN</a></li>
                      <li><a href="#"></i>MEMBERSHIP</a></li>
                      <li><a href="#"></i>BECOME A MEMBER</a></li>
                      <li><a href="#"></i> MANAGEMENT</a></li>
                    </ul>
                  </li>
                </ul>
              </nav>
             <!-- List Item Ends -->

菜单2:

  <!--Main Menu HTML Code-->
                            <div class="public-nav">
                                <nav class="wsmenu slideLeft clearfix">
                                    <ul class="mobile-sub wsmenu-list">
                                        <li>
                                            <a href="">ABOUT</a>
                                            <ul class="wsmenu-submenu">
                                                <li><a href="#"></i>DIFFERENT</a></li>
                                                <li><a href="#"></i>PRACTICE</a></li>
                                                <li><a href="#"></i>POOLS</a></li>
                                                <li><a href="#"></i>MEMBERSHIP OVERVIEW</a></li>
                                                <li><a href="#"></i>MAPS</a></li>
                                                <li><a href="#"></i>PARK MANAGEMENT</a></li>
                                            </ul>
                                        </li>
                                       </ul>
                                      </nav>

Orchard菜单项渲染:两个不同的菜单，需要不同的html类

您应该实现IShapeTableProvider（它只有一个方法）。在这种方法中，您可以添加任何类型的形状交替。

对于在方法中使用服务，应该通过ctor注入它，并可能包装在Work类中。

public class SomeShapeTableProvider : IShapeTableProvider
{
    private readonly Work<IAuthenticationService> _authenticationService;
    public SomeShapeTableProvider(Work<IAuthenticationService> authenticationService) {
        _authenticationService = authenticationService;
    }
    public void Discover(ShapeTableBuilder builder)
    {
        // add alternates
    }
}

然后你应该像这样执行Discover方法：

public void Discover(ShapeTableBuilder builder)
{
    builder.Describe("MenuItem")
        .OnDisplaying(displaying => {
            if(_authenticationService.Value.GetAuthenticatedUser() != null)
                displaying.Shape.Metadata.Alternates.Add("MenuItem__Authenticated");
        });
}

然后，您可以为经过身份验证的用户MenuItem-Authenticated.cshtml 使用不同的形状

在nav标记中为它们中的每一个赋予唯一的额外类，以便您可以控制它们中的每个。类似：

<nav class="wsmenu menu_1 slideLeft clearfix">
<nav class="wsmenu menu_2 slideLeft clearfix">
相关文章：