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>

这不是层次转换的唯一配置，它只是众多可能方法中的一种。

希望这有帮助。

Kentico等级转换和bootstrap手风琴

1 个答案: