Kentico分层转换和一个引导手风琴

Question

这是这个问题的延续:Kentico ASCX转换页面类型属性

快速浏览。最终目标是一个基于Bootstrap的手风琴，在那里我可以为上传的文件显示一个链接和描述。

在CMS中。桌面，我有父节点(页面，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>

一级项目转换:

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

0级页脚:

</div>

这不是您的分层转换的唯一配置，它只是许多可能的方法之一。