logo标签列表

TYPO3的Typoscript导航与子页面

typo3typoscript
3

我正在尝试使用Typoscript实现我的导航，并且我在理解如何正确包含它方面遇到了问题。

我已经有一个基本导航，有1个级别，而且运行良好。 现在，我有一些页面有子页面，其他页面没有子页面。 对于那些没有子页面的页面，我想要现在的行为。 对于那些具有子页面的页面，我想将其添加为下拉菜单。

HTML代码应该是这样的。

<ul class="nav">
   <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Test0
            <b class="caret"></b>
       </a>
       <ul class="dropdown-menu">
             <li class=""><a href="#">DropwDownItem1</a></li>
        </ul>
     </li>
     <li class="active"><a href="#">Test1</a></li>
     <li><a href="#about">Test2</a></li>
     <li><a href="#contact">Test3</a></li>
</ul>

TypoScript:

  lib.menu = HMENU
  lib.menu {
  special = list
  special.value = 3,2

  1 = TMENU
  1 {
    wrap = <ul class="nav">|</ul>
    expAll = 1
    NO.wrapItemAndSub = <li class="">|</li>
    RO < .NO
    RO = 1
    CUR < .NO
    CUR = 1
    CUR.wrapItemAndSub = <li class="active">|</li>
    ACT < .CUR

    IFSUB = 1
    IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
    IFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
    IFSUB.stdWrap.innerWrap= |<b class="caret"></b>
    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub= <li class="dropdown">|</li>
    ACTIFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
    ACTIFSUB.stdWrap.innerWrap= |<b class="caret"></b>
    CURIFSUB = 1
    CURIFSUB.wrapItemAndSub= <li class="dropdown">|</li>
    CURIFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
    CURIFSUB.stdWrap.innerWrap= |<b class="caret"></b>
  }

  2 = TMENU
  2 {
    wrap = <ul class="dropdown-menu">|</ul>
    expAll = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>
  }
}

//编辑：我已经修改了代码，但现在当我点击下拉菜单中的项时，ul类=“dropdown-menu”被包含两次，导致下拉菜单无法正确显示。

3个回答
4
自 TYPO3 v6.0 开始，选项 noBlur 已被移除。我在某个地方读到，RO 状态会通过 JavaScript 显示/隐藏子菜单，因此我尽量不使用它。我更喜欢通过 CSS 来显示/隐藏菜单。
我会像这样做：
lib.menu = HMENU
lib.menu {
    special = list
    special.value = 3,2

    1 = TMENU
    1 {
        expAll = 1
        wrap = <ul class="nav">|</ul>

        NO.wrapItemAndSub = <li>|</li>

        CUR = 1
        CUR.wrapItemAndSub = <li class="active">|</li>

        ACT < .CUR
    }

    2 = TMENU
    2 {
        wrap = <ul>|</ul>

        NO = 1
        NO.wrapItemAndSub = <li>|</li>
    }
}

通过CSS添加悬停效果：
.nav ul {
    display: none;
}
.nav li:hover ul {
    display: block;
}
我认为你需要添加expAll = 1甚至对于第一个TMENU。 - tmt
1
您的子导航应该在TMENU周围使用<ul>标签。我认为不需要ATagBeforeWrap，因为它只是在<a>标签内部创建了linkWrap。因此，它应该像这样（未经测试）：
lib.menu = HMENU
lib.menu {
  special = list
  special.value = 3,2

  1 = TMENU
  1 {
    wrap = <ul class="nav">|</ul>
    expAll = 1
    NO.wrapItemAndSub = <li class="">|</li>
    RO < .NO
    RO = 1
    CUR < .NO
    CUR = 1
    CUR.wrapItemAndSub = <li class="active">|</li>
    ACT < .CUR

    noBlur = 1
    IFSUB = 1
    IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
  }

  2 = TMENU
  2 {
    wrap = <ul class="dropdown-menu">|</ul>
    expAll = 1
    noBlur = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>
  }
}

这里可以找到关于包装的好信息，不幸的是它是德语: http://jweiland.net/typo3/typoscript/wrap-moeglichkeiten-und-hierarchie-in-menues.html

顺便说一下：如果您正在使用TYPO3 6+，则noBlur设置已被删除。

--->编辑:

我稍微缩短了你的代码，但我确实无法重现这个问题。对我来说它工作得很好。下拉菜单周围的li获得了dropdown类。但我没有看到<ul class="dropdown-menu">的副本

  special = list
  special.value = 3,2

  1 = TMENU
  1 {
    wrap = <ul class="nav">|</ul>
    expAll = 1
    NO = 1
    NO.wrapItemAndSub = <li class="">|</li>
    RO < .NO
    CUR < .NO
    CUR.wrapItemAndSub = <li class="active">|</li>
    ACT < .CUR

    IFSUB = 1
    IFSUB.wrapItemAndSub= <li class="dropdown">|</li>
    IFSUB.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
    IFSUB.stdWrap.innerWrap= |<b class="caret"></b>

    ACTIFSUB < .IFSUB
    CURIFSUB < .IFSUB
  }

  2 = TMENU
  2 {
    wrap = <ul class="dropdown-menu">|</ul>
    expAll = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>
  }
1
是我点了个踩，很抱歉，我应该加上一条评论。在第一个“TMENU”的项目上不使用 wrapItemAndSub 意味着整个第二级的 <ul></ul> 不会 位于 第一级的 <li></li> 内部，而这正是问题所要求的。 - tmt
1
同样的，就像@SimonSimCity的回答一样，您在第一个“TMENU”中没有设置“expAll = 1”，因此第二级子菜单将不会在输出的代码中可用，无法作为动态出现的下拉菜单，而这似乎是问题所在。 - tmt
谢谢。这个工作正常。但现在我有一个新问题。如果我点击下拉菜单中的项目，主要的下拉菜单项只会得到类<li class="active">，而不是<li class="dropdown">，下拉菜单<ul>在<li>-标签之外。也许可以用<li class="dropdown active">包装它，如果它有子页面并且处于活动状态。我正在使用v6.1 - user1058712
还有其他的TypoScript吗？就像我说的一样，我无法重现这个问题。以上代码按预期工作。 - Wipster
非常感谢。我忘记了我在这个网站上安装了一个模板扩展，所以导航菜单被创建了两次。现在一切都正常了。 - user1058712
显示剩余3条评论
0

我使用了以下代码片段来创建内部页面链接：

我使用了副标题字段来进行内部导航。

例如：

<a href="#about>about</a>
<a href="#ourservice">Ourservice</a>

menu.main_menu = HMENU
menu.main_menu {

#special = directory
#special.value = 2

    1 = TMENU
    1 {
         wrap = <ul class="nav navbar-nav navbar-right">|</ul>
         expAll = 1
         noBlur = 1

         NO = 1
         NO {
            doNotLinkIt = 1
            allWrap.insertData = 1
           allWrap = <li class="first menu-{field:uid}"><a href="#{field:subtitle}">|</a></li>                      
          }

          ACT < .NO
          ACT {
               ATagParams = class="active dropdown"
               allWrap = <li class="active first menu-{field:uid}">|</li> |*| <li class="active menu-{field:uid}">|</li>
         }

         CUR < .NO
         CUR {
             ATagParams = class="parent_menu active"
             allWrap = <li class="first active menu-{field:uid}">|</li> |*| <li class="active menu-{field:uid}">|</li>
        }
    }   
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接