7

ページの見出しへのハッシュ リンクを Web ページのメニューに導入したいと考えています。Web ページは Jekyll で生成され、デフォルトのレイアウトは次のようになります。

<!DOCTYPE html>
<html>

  {% include head.html %}

  <body>

    {% include header.html %}

    <div id="BigFatContainer">
        {{ content }}
        {% include footer.html %}
    </div>
  </body>
</html>

さまざまなページに移動するためのメニューが配置されているのはヘッダーです。{{ content }}次の Kramdown コマンドを使用して、目次を に追加できました。

* Point at which the TOC is attached
{:toc}

醜い JavaScript ハックを使用して、この目次を and から{{ content }}and に移動することもできますheader.htmlが、それは悪い解決策です。{:toc}マクロは Kramdown によって解析されないため、内部に配置することはできません。たとえば、このプラグインheader.htmlを使用して Kramdown によって解析されていることを確認したとしても、コンテンツの TOC ではなく TOC を出力します。header.md

4

3 に答える 3

1

Bootstrap Web サイト(下にスクロールして正しいナビゲーション エリアを観察する) が使用しているアプローチを使用することをお勧めします。TOC をコンテンツ エリアの一部として作成しますが、メイン ナビゲーションのように横に配置するようにスタイルを設定します。このアプローチをお勧めする主な理由は、複数のページを持つ可能性がある (そしておそらくそうなる) からです。この場合、ページごとに異なるページ ナビゲーションを表示し、ページ間に何らかのナビゲーションを表示する必要があります。

詳細については、この記事を参照してください - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/

于 2015-02-04T05:48:46.217 に答える