KSS Knyle樣式表 - 爲目錄創建子導航

因此，我帶走了KSS模板，並對其進行了修改以使其符合我們的需求。但是現在我有一個小問題。每個部分都在生成，並且我爲它創建了目錄。但是，如果我有一個包含6個輸入變化的「輸入」部分，我需要它能夠在我的側面導航欄中選取子部分並在目錄中的主要部分下創建子部分。KSS Knyle樣式表 - 爲目錄創建子導航

這是我的代碼現在看起來像。在生成每個部分等時，一切都很順利，但我無法弄清楚如何在左側的nav下創建子部分。自從我使用KSS以來，我不想手動編碼它們。

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li><a href="index.html">Overview</a></li> 
       {{#eachRoot}} 
      <li><a href="section-{{reference}}.html">{{header}}</a></li> 
       {{/eachRoot}} 
      </ul> 
     </div> 
     </div> 
    </nav> 

    <div class="container-fluid bs-docs-container"> 
     <nav id="side-menu" role="navigation"> 
      <div class="col-md-2"> 
       <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top toc-top-margin"> 
        <ul class="nav nav-list affix bs-docs-sidenav"> 
         {{#if overview}} 
        <li><a href="index.html">Overview</a></li> 
         {{else}} 
          {{#eachSection rootNumber}} 
          {{#if header}} 

         <li><a href="#bs-docs-section-{{reference}}">{{header}}</a></li> 
          {{/if}} 
          {{/eachSection}} 
          {{/if}} 
         <a class="back-to-top" href="#top">Back to top</a> 
        </ul> 
       </div> 
      </div> 
     </nav> 

      <div class="col-sm-10 article-contain" data-spy="scroll" data-target="#side-menu" data-offset="0" style="height:200px; position: relative;"> 
       <div class="kss-content markdown-body"> 
        <article class="kss-article"> 
          {{#if overview}} 
          <section id="section-0" class="kss-section kss-overview"> 
          {{html overview}} 
          </section> 
          {{else}} 
          {{#eachSection rootNumber}} 
          <section id="bs-docs-section-{{reference}}" class="col-sm-12 kss-section kss-depth-{{refDepth}}"> 
          <h1 class="kss-title">{{header}}</h1> 
          {{#ifAny markup modifiers}} 
          {{#if description}} 
          <div class="kss-description"> 
           {{html description}} 
          </div> 
          {{/if}} 

          <div class="kss-modifier-block"> 
           <div class="kss-modifier kss-modifier-original"> 
           <div class="kss-modifier-example"> 
            {{modifierMarkup}} 
           </div> 
           </div> 
           {{#eachModifier}} 
           <div class="kss-modifier"> 
           <div class="kss-modifier-head"> 
            <div class="kss-modifier-name">{{name}}</div> 
            <div class="kss-modifier-description"> 
            {{html description}} 
            </div> 
           </div> 
           <div class="kss-modifier-example"> 
            {{modifierMarkup}} 
           </div> 
           </div> 
           {{/eachModifier}} 

           <div class="kss-markup"> 
           <pre><code data-language="html">{{markup}}</code></pre> 
           </div> 
          </div> 

          {{else}} 
          {{#if description}} 
          <div class="kss-description"> 
           {{html description}} 
          </div> 
          {{/if}} 
          {{/ifAny}} 
          </section> 
          {{/eachSection}} 
          {{/if}} 
        </article> 
       </div> 
      </div> 
    </div>

enter image description here

下面是它會當然是有一個合適的SCSS文件生成。正如你看到的「輸入」有很多變化，但只有左側目錄中的主要「輸入」部分。

enter image description here

來源

2014-10-16 Robert Wojtow

所以，我解決了這個問題。導航應該看起來像這樣，以便各部分生成子部分。

  <div class="col-md-2 bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top toc-top-margin"> 
 
       <nav class="kss-nav" id="side-menu" role="navigation"> 
 

 
        {{#if overview}} 
 
        {{else}} 
 
        <ul class="nav nav-list affix bs-docs-sidenav"> 
 
         {{#eachSection rootNumber}} 
 
         {{#whenDepth 2}} 
 
         <li class="kss-menu-item"><a href="#bs-docs-section-{{reference}}"><span class="kss-name">{{header}}</span></a></li> 
 
         {{/whenDepth}} 
 
         <ul> 
 
          {{#whenDepth 3}} 
 
          <li class="kss-menu-item"><a href="#bs-docs-section-{{reference}}"><span class="kss-name">{{header}}</span></a></li> 
 
          {{/whenDepth}} 
 
         </ul> 
 
         {{/eachSection}} 
 
         <a class="back-to-top" href="#top">Back to top</a> 
 
        </ul> 
 
        {{/if}} 
 
       </nav> 
 
      </div>

來源

2014-10-17 22:39:20

KSS Knyle樣式表 - 爲目錄創建子導航

回答

相關問題