2

そこで、KSS テンプレートを使用して、必要なもので動作するように修正しました。しかし今、私には小さな問題があります。各セクションが生成され、目次が作成されます。しかし、入力の 6 つのバリエーションを含む「入力」などのセクションがある場合、サブセクションを選択して、サイド ナビゲーションの目次のメイン セクションの下にサブセクションを作成できるようにする必要があります。

これが私のコードが今どのように見えるかです。各セクションなどを生成するときはすべてうまく機能しますが、左側のナビゲーションの下にサブセクションを作成する方法がわかりません。もちろん、私は 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>

ここに画像の説明を入力

もちろん、適切なscssファイルで生成されるものは次のとおりです。ご覧のとおり、「入力」には多くのバリエーションがありますが、左側の目次には主要な「入力」セクションのみがあります。

ここに画像の説明を入力

4

1 に答える 1

1

だから私は問題を解決しました。セクションがサブセクションを生成するために、ナビゲーションは次のようになります。

         <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-17T22:39:20.913 に答える