Kentico分層改造和自舉手風琴

Question

這是這個問題的延續：Kentico ASCX transformation page type properties

快速過視圖。最終目標是基於Bootstrap的手風琴，在那裏我可以顯示上傳文件的鏈接和描述。

在CMS.Desk中，我有父節點（一個頁面，CMS.MenuItem）。然後我有孩子頁面，這是組。文件（pdf，word，ppt等）將上傳並且不附加。

所以，最終的代碼就是這樣。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 

 
    <div class="panel panel-default"> 
 

 
     <div class="panel-heading" role="tab" id="heading1"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> 
 
        Group One 
 
       </a> 
 
      </h4> 
 
     </div> 
 

 
     <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1"> 
 
      <div class="panel-body"> 
 
       <ul> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li>     
 
       <ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="panel panel-default"> 
 

 
     <div class="panel-heading" role="tab" id="heading2"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> 
 
        Group Two 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> 
 
      <div class="panel-body"> 
 
           <ul> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li>     
 
       <ul> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 

 
    
 

 
</div>

我的頭變換會是這樣（所有0級）：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

我的頁腳變換（所有0級）：

</div>

每個面板具有開放的和閉合的div，則面板接頭和麪板主體。

所以，我的面板標題，是我的第一個子頁面，而我的面板主體是上傳文件的鏈接和說明。

我覺得在這裏，我需要一個子標題，並打開和關閉div（子級1）的子頁腳，但標題和身體我不確定。

將面板標題爲3級，我的面板主體爲4級，他們是什麼類型的變形？

Answer 1

你只有兩個層次：面板標題和麪板體。

級別0標題：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 

級別0項變換：

<div class="panel panel-default"> 

    <div class="panel-heading" role="tab" id="heading1"> 
     <h4 class="panel-title"> 
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> 
       Group One 
      </a> 
     </h4> 
    </div> 

    <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1"> 
     <div class="panel-body"> 
      <ul> 
       {^SubLevelPlaceHolder^}     
      <ul> 
     </div> 
    </div> 
</div> 

級別1項變換：

   <li> 
       <a href='#'>Link to Document</a> 
       <p>Document subscription</p> 
       </li> 

級別0頁腳：

</div> 

這不是您的層次轉換的唯一配置，它只是衆多可能方法之一。

希望這會有所幫助。