Question

我正在使用TYPOscript构建一个导航菜单，该菜单使用tt_content表中的内容进行扩展。

现在我正在尝试更改父元素（.drop-wrapp）的CSS类，如果有来自tt_content的内容并将页面标题从父页面放到第二级（此处：＆＃34; PAGE TITLE第一级＆＃34;）。

到目前为止，这是我的TYPOscript：

lib.navMain = COA
lib.navMain {

  10 = TEXT
  10.wrap = |
  10.value = {$const.lang.navi.skip}
  10.typolink {
    parameter.data = page:uid
    parameter.dataWrap = |#skipMainNavi
    ATagParams = class="sr-only sr-only-focusable"  
  } 

  20 = HMENU
  20 {
    special = directory
    special.value = {$const.pid.home}
    entryLevel = 0

    1 = TMENU
    1 {
      wrap = <ul class="nav navbar-nav" role="menubar">|</ul>

      expAll = 1
      target = _top
      noBlur = 1

      wrap= <ul class="nav navbar-nav" role="menubar">|</ul>

      NO {
        wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
        linkWrap = |  
        ATagParams = role="menuitem"
        title = field:title
        ATagTitle.field = subtitle // title
      }

      ACT < .NO
      ACT = 1
      ACT {
        wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
        ATagParams = class="mainmenuActive"
        # linkWrap = <strong>|</strong>
      }
    }

    2 < .1
    2 {
      wrap = <div class="drop-wrapp CLASS_IF_CONTENT_FROM_TT_CONTEN"><div class="drop-wrapp-inner">|</div></div>


      20 = HMENU
      20 {
        special = directory
        special.value.data = field:pid

        1 = TMENU
        1 {
          expAll = 1

          NO {
            wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
            linkWrap = |  
            ATagParams = role="menuitem"
            title = field:title
            ATagTitle.field = subtitle // title
          }

          ACT < .NO
          ACT = 1
          ACT {
            wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
            ATagParams = class="mainmenuActive"
            # linkWrap = <strong>|</strong>
          }
        }
      }

      stdWrap.append = CONTENT
      stdWrap.append {
        table = tt_content
        select {
          pidInList.field = pid
          where = colPos=1 AND deleted=0 AND hidden=0
          orderBy = sorting
          languageField = sys_language_uid
          max = 2
        }

        stdWrap {
          wrap = <div class="teaser-block"><div class="teaser-block-inner"><strong class="title">PAGE TITLE FIRST LEVEL</strong><div class="teaser-text">|</div></div></div>

          // wrap only if there is content!
          required = 1
        }
      }

      stdWrap.innerWrap = <div class="drop-block"><ul class="list-unstyled nav-list" role="menubar">|</ul></div>

    }
  }

  30 = TEXT
  30.wrap = <a id="skipMainNavi" class="sr-only">|</a>
  30.value = &nbsp;
  30.htmlSpecialChars = 0  
}

更新：

这是我想要达到的目标：

＆＃13;

<nav>
  <ul>
    <li><a href="#">Level 0.0</a></li>
    <li>
      <a href="#">Level 0.1</a>
      
        <div class="drop-wrapp wide"><!-- only add class ".wide" if there is content from tt_content in "div.teaser-block" -->
          <div class="drop-wrapp-inner">
            <div class="drop-block">
              <ul>
                <li><a href="#">Level 1.0</a></li>
                <li><a href="#">Level 1.1</a></li>
                <li><a href="#">Level 1.2</a></li>
              </ul>
            </div>
            <div class="teaser-block">
              Here is content from tt_content
            </div>
          </div>
        </div>
      
    </li>
    <li><a href="#">Level 0.2</a></li>
  </ul>
</nav>

＆＃13;

Answer 1

我确信，有更好的解决方案，但以下示例现在适用于我。我的诀窍是“30 = CONTENT”元素之后的两个元素。如果有来自tt_content的内容，我打开一个“div”元素，然后关闭。也许有更好的方法来做一个特殊的包装？

lib.navMain = COA
lib.navMain {

  10 = TEXT
  10.wrap = |
  10.value = {$const.lang.navi.skip}
  10.typolink {
    parameter.data = page:uid
    parameter.dataWrap = |#skipMainNavi
    ATagParams = class="sr-only sr-only-focusable"  
  } 

  20 = HMENU
  20 {
    special = directory
    special.value = {$const.pid.home}
    entryLevel = 0

    1 = TMENU
    1 {
      expAll = 1
      target = _top
      noBlur = 1

      wrap = <ul class="nav navbar-nav" role="menubar">|</ul>

      NO {
        wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
        linkWrap = |  
        ATagParams = role="menuitem"
        title = field:title
        ATagTitle.field = subtitle // title
      }

      ACT < .NO
      ACT = 1
      ACT {
        wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
        ATagParams = class="mainmenuActive"
        # linkWrap = <strong>|</strong>
      }
    }

    2 < .1
    2 {
      wrap = <div class="drop-wrapp"><div class="drop-wrapp-inner">|</div></div>

      stdWrap.cObject = COA
      stdWrap.cObject {

        20 = HMENU
        20 {
          special = directory
          special.value.data = field:pid

          1 = TMENU
          1 {
            expAll = 1
            wrap = <div class="drop-block"><ul class="list-unstyled nav-list" role="menubar">|</ul></div>

            NO {
              wrapItemAndSub = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
              linkWrap = |  
              ATagParams = role="menuitem"
              title = field:title
              ATagTitle.field = subtitle // title
            }

            ACT < .NO
            ACT = 1
            ACT {
              wrapItemAndSub = <li class="first active">|</li> |*| <li class="active">|</li> |*| <li class="last active">|</li>
              ATagParams = class="mainmenuActive"
              # linkWrap = <strong>|</strong>
            }
          }
        }

        30 = CONTENT
        30 {
          table = tt_content
          select {
            pidInList.field = pid
            where = colPos=99 AND deleted=0 AND hidden=0
            orderBy = sorting
            languageField = sys_language_uid
            max = 2
          }

          stdWrap {
            wrap = |

            // wrap only if there is content!
            required = 1
          }
        }

        1 = COA
        1 {
          if.isTrue.numRows < lib.navMain.20.2.stdWrap.cObject.30
          10 = TEXT
          10.value = <div class="wide">
        }

        100 = COA
        100 {
          if.isTrue.numRows < lib.navMain.20.2.stdWrap.cObject.30
          10 = TEXT
          10.value = </div><!-- /.wide -->
        }
      }

    }
  }

  30 = TEXT
  30.wrap = <a id="skipMainNavi" class="sr-only">|</a>
  30.value = &nbsp;
  30.htmlSpecialChars = 0  
}

如何根据tt_content中的内容在TYPOscript菜单中设置CSS类

1 个答案: