带有面板列表组的 Bootstrap 3 缩略图中的 TYPO3 TMENU答案

【问题标题】：TYPO3 TMENU in Bootstrap 3 thumbnail with panel list-group带有面板列表组的 Bootstrap 3 缩略图中的 TYPO3 TMENU
【发布时间】：2017-05-19 09:11:22
【问题描述】：

我想在 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 不会关闭。而且我无法从菜单的第一级分配的掩码中插入图片。 Wrap 不能插入任何数据。这是我实际糟糕的尝试。这里有什么想法吗？

# 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      

   }  

}

谢谢，最好的，克里斯

【问题讨论】：

标签： twitter-bootstrap-3 typo3 typoscript

【解决方案1】：

哎哟非常不平衡的代码。

尝试在您打开包装的地方关闭包装。
使用before 和after。

否则请注意顶层的IFSUB。如果您在下一级菜单中关闭标签，则只有在确定有下一级时才应打开它。

【讨论】：

感谢您的回答。嗯，很奇怪。但是我必须在哪里放置之前和之后？问题是第二级菜单中所有部分的包装点。他们在另一个地方，然后是第一层包装。这让我很困惑......
如果您想了解所有的包装（查看 TSRef 以获得完整的包装列表。typo3.org/documentation/snippets/sd/476 在一个示例中显示所有包装。以同样的方式，您可以配置所有包装并删除这些包装你不需要。

【解决方案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> |
    }
}

【讨论】：

您好 Pravin，非常感谢您的想法。但这根本不适合我，因为我必须用根导航标题填写
Headline
。并且有很多缩略图框，具体取决于根元素的数量。最后但并非最不重要的一点是渲染图像资源，它位于根导航页面的媒体部分或通过掩码文件关系分配。

【解决方案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>

【讨论】：

【解决方案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      

   }  

}

【讨论】：