Question

您好我是typoscript的新手，我需要帮助才能让菜单正常运行。下面的typoscript将呈现Bootstrap导航栏，但是在没有css样式的情况下，菜单将被完全抛出导航栏。

＆＃13;

topnavigation = HMENU
topnavigation.wrap (

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container"> 
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="http://www.example.com">Brand</a></div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">

      </ul>
    </div>
  </div>
</nav>

)
  topnavigation.entryLevel = 0
  topnavigation {
    1= TMENU
    1 {
      expAll = 1
      maxItems = 4
      NO.wrapItemAndSub = <li>|</li>

      ACT = 1
      ACT.wrapItemAndSub =  <li class="active">|</li>            

      IFSUB = 1
      IFSUB.wrapItemAndSub = <li class="dropdown">|</li>

      ACTIFSUB = 1
      ACTIFSUB.wrapItemAndSub= <li class="active dropdown">|</li>

    }    
    2= TMENU
    2 {
      wrap = <ul class="dropdown-menu">|</ul>
      NO.wrapItemAndSub = <li>|</li>

      ACT = 1
      ACT.wrapItemAndSub =  <li class="active">|</li>

    }    
  }

＆＃13;

请帮忙

Answer 1

你的topnavigation.wrap任何地方都没有管道符号......

每个换行应在放置包装内容的位置使用管道符号|，例如在您的TMENU中：

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

无论如何，使用整个Bootstrap标记的一般包装没有它，很可能这是错误渲染的原因......

很可能它应该在某处：

   ...
      <ul class="nav navbar-nav">|</ul>
   ...

顺便说一句，使用浏览器的检查工具检查缺少的内容，我们只能猜测。

Answer 2

Biesior，感谢管道建议，它确实让我朝着正确的方向前进。经过大量的研究和黑客攻击（不是编码器和抄袭者的陌生人），我设法使用bootporap 3反向导航栏在typo3中正常工作。

以下代码开箱即用。

topnavigation = HMENU
topnavigation.wrap (

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://www.example.com">Your Company Name or Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">|</ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

  )
topnavigation.entryLevel = 0
topnavigation {
    1 = TMENU
    1 {
    expAll = 1
     
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
     
    IFSUB = 1
    IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    IFSUB.after = <b class="caret"></b></a>
    IFSUB.doNotLinkIt = 1
    IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    IFSUB.ATagTitle.field = abstract // description // title
     
    ACTIFSUB = 1
    ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    ACTIFSUB.after = <b class="caret"></b></a>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
    ACTIFSUB.ATagTitle.field = abstract // description // title
     
    }
     
    2 = TMENU
    2 {
    expAll = 1
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
     
    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = |
    ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
    ACTIFSUB.after = </li>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.ATagTitle.field = abstract // description // title
     
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    IFSUB = 1
    IFSUB.before = <li class="divider"></li><li class="nav-header">
    IFSUB.after = </li>
    IFSUB.doNotLinkIt = 1
    IFSUB.ATagTitle.field = abstract // description // title
     
    SPC = 1
    SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>
     
    wrap = <ul class="dropdown-menu">|</ul>
    }
     
    3 = TMENU
    3 {
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
    }
  }

请记住在主页面中引用扩展名（fileadmin / your_template / layouts / your_main_page.html）

<f:cObject typoscriptObjectPath="topnavigation" />

Typo3 BootStrap 3导航栏（typoscript）

2 个答案: