帶有面板列表組的Bootstrap 3縮略圖中的TYPO3 TMENU

Question

我想在TYPO3中提供某種不太容易的TMENU的總覽站點。 依靠以下HTML結構：

  <div class="col-xs-12 col-sm-4 col-md-4"> <div class="thumbnail"> <div class="headline"> <h2>Headline</h2> </div> <img src="img/product/picture.jpg" alt="..."> <div class="caption"> <div class="panel list-group"> <a href="#" class="list-group-item" data-toggle="collapse-next">Menu 1</a> <div class="collapse list-group-submenu"> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a> </div> <a href="#" class="list-group-item" data-toggle="collapse-next">Menu 2</a> <div class="collapse list-group-submenu"> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a> </div> <a href="#" class="list-group-item">Menu 3</a> <a href="#" class="list-group-item">Menu 4</a> <a href="#" class="list-group-item">Menu 5</a> </div> </div> </div> </div> 

現在的問題是，如果沒有第二個導航區域，則主DIV不會關閉。 而且我無法從菜單的第一級分配的遮罩中插入圖片。 包裝不能插入任何數據。 這是我實際的不當嘗試。 這里有什么想法嗎？

 # OVERVIEW MENU lib.overviewmenu = HMENU lib.overviewmenu { special = directory special.value.data = leveluid:2 # erstes level 1 = TMENU 1.expAll = 1 1 { # no state: normale Formatierung wrap = NO { before.cObject = LOAD_REGISTER before.cObject { parentImage.cObject = IMAGE parentImage.cObject.field = tx_mask_menuteaser } allWrap = <div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail"><div class="headline"><h2>| wrapItemAndSub = ||*|||*|| #ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } subst_elementUid = 1 } ACT = 1 ACT < .NO } 2 < .1 2 { # no state: normale Formatierung wrap = </h2></div><img src="{register:parentImage}" alt=""><div class="caption"><div class="list-group">|</div></div></div></div> NO { allWrap = wrapItemAndSub = ||*|||*|| #ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" subst_elementUid = 1 } ACT = 1 ACT < .NO IFSUB = 1 IFSUB { #ATagBeforeWrap = 1 stdWrap { wrap = |<i class="fa fa-caret-down pull-right"></i> wrap.insertData = 1 htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" data-toggle="collapse-next" subst_elementUid = 1 } ACTIFSUB = 1 ACTIFSUB < .IFSUB } 3 < .2 3 { # no state: normale Formatierung wrap = <div class="list-group-submenu collapse">|</div> NO { allWrap = linkWrap = <span class="fa fa-chevron-right"></span>&nbsp;| wrapItemAndSub = ||*|||*|| ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item sub-item small" subst_elementUid = 1 } ACT = 1 ACT < .NO } } 

謝謝，最好，克里斯

Answer 1

ouch代碼非常不平衡。

嘗試在打開包裝盒的地方將其關閉。
在使用before和after 。

否則，請注意頂層的IFSUB 。 如果在下一級菜單中關閉標簽，則只有在確定具有下一級標簽時才應打開它。

Answer 2

嘗試這樣的事情。

你的HTML是這樣的。

<div class="col-xs-12 col-sm-4 col-md-4">
    <div class="thumbnail">
      <div class="headline">
        <h2>Headline</h2>
      </div>
      <img src="img/product/picture.jpg" alt="...">
      <div class="caption">              
         <!-- Add menu typoscript here -->
      </div>
   </div>              
</div>

和您的打字稿喜歡這個。

lib.mainmenu = TMENU
lib.mainmenu{
  expAll = 1
  wrap = <div class="panel list-group">|</div>
  NO{
    ATagParams = class="list-group-item"
  }

  ACT = 1
  ACT {
    linkWrap= <li class="active">|</li>
  }

   IFSUB < .NO
   IFSUB = 1
   IFSUB {
       wrapItemAndSub = <div class="collapse list-group-submenu">|</div>
       ATagParams = class="list-group-item sub-item small"
       stdWrap.wrap = <span class="fa fa-chevron-right"></span> |
    }
}

Answer 3

關於這個html結構呢？ 會容易得多，不是嗎？

                   <div class="panel list-group thumbnail">
                     <div class="headline"><h2>Headline</h2></div>
                     <img src="img/product/picture.jpg" alt="...">
                     <a href="#" class="list-group-item" data-toggle="collapse-next">Page 1</a>
                       <div class="collapse list-group-submenu">
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a>
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a>
                       </div>                        
                     <a href="#" class="list-group-item" data-toggle="collapse-next">Page 2</a>
                       <div class="collapse list-group-submenu">
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a>
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a>
                       </div>                            
                     <a href="#" class="list-group-item">Page 3</a>
                     <a href="#" class="list-group-item">Page 4</a>
                     <a href="#" class="list-group-item">Page 5</a>
                   </div>

Answer 4

我懂了：

 # OVERVIEW MENU lib.overviewmenu = HMENU lib.overviewmenu { special = directory special.value.data = leveluid:2 # erstes level 1 = TMENU 1.expAll = 1 1 { # no state: normale Formatierung NO { after.cObject = COA after.cObject { 10 = FILES 10 { references { table = pages uid.field = uid fieldName = tx_mask_menuteaser } renderObj = IMG_RESOURCE renderObj { file.import.data = file:current:uid file.treatIdAsReference = 1 stdWrap.wrap= <img src='|' /> } } } linkWrap = <div class="headline"><h2>|</h2></div> wrapItemAndSub = <div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail">|</div></div>|*|<div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail">|</div></div>|*|<div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail">|</div></div> stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } subst_elementUid = 1 } ACT = 1 ACT < .NO } 2 < .1 2 { # no state: normale Formatierung wrap = <div class="caption"><div class="list-group">|</div></div> NO { linkWrap = allWrap = wrapItemAndSub = ||*|||*|| #ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" subst_elementUid = 1 } ACT = 1 ACT < .NO IFSUB = 1 IFSUB { #ATagBeforeWrap = 1 stdWrap { wrap = |<i class="fa fa-caret-down pull-right"></i> wrap.insertData = 1 htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" data-toggle="collapse-next" subst_elementUid = 1 } ACTIFSUB = 1 ACTIFSUB < .IFSUB } 3 < .2 3 { # no state: normale Formatierung wrap = <div class="list-group-submenu collapse">|</div> NO { allWrap = linkWrap = <span class="fa fa-chevron-right"></span>&nbsp;| wrapItemAndSub = ||*|||*|| ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item sub-item small" subst_elementUid = 1 } ACT = 1 ACT < .NO } }