7

我想将指向页面标题的哈希链接引入网页菜单中。该网页是使用 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 hack 来移动这个目录，{{ content }}但这header.html是一个糟糕的解决方案。不可能将{:toc}宏放在里面header.html，因为 Kramdown 没有解析它，即使你确保它是由 Kramdown 使用这个插件解析的，它也会输出 TOCheader.md而不是内容的 TOC。

4

3 回答 3

1

我建议您使用Bootstrap 网站（向下滚动并观察右侧导航区域）正在使用的方法 - 将您的 TOC 作为内容区域的一部分，但将其设置为像主导航一样放置在侧面。我建议您使用这种方法的主要原因是您可能（并且很可能会）拥有不止一页。在这种情况下，您需要为每个页面显示不同的页面导航，并在页面之间显示一些导航。

有关更多信息，您可以参考这篇文章 - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/

于 2015-02-04T05:48:46.217 回答
1

@miroslav-nedyalkov 在这里是正确的。按照他查看 Bootstrap 文档的建议，我发现它使用了 Ruby Gem - jekyll-toc，它允许您将 TOC 放置在布局文件的任何位置。你在前面启用它。我现在成功使用：

<nav aria-label="Table of Contents">
    {{ content | toc_only }}
</nav>

<section itemprop="articleBody">
    {{ content }}
</section>
于 2017-08-29T11:50:53.790 回答
-3

为什么要移动toc块？

说这toc是页面内容的一部分是正确的。从语义上讲。

您的问题不是在文档结构级别，而是在演示级别。

在这种情况下，建议使用 CSS 来解决您的问题。

于 2014-12-23T09:06:55.320 回答