TYPO3 TMENU in Bootstrap 3 带有面板列表组的缩略图

Question

我想在 TYPO3 中渲染一个 overviewsite 某种 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      

   }  

}

TYPO3 TMENU in Bootstrap 3 带有面板列表组的缩略图

TYPO3 TMENU in Bootstrap 3 thumbnail with panel list-group

typo3

typoscript

twitter-bootstrap-3