导航栏链接在 Jekyll 中工作错误

Question

我在 Github 页面上使用 twitter bootstrap 添加了一个带有 3 个导航选项卡的简单导航栏，但我不知道为什么它的行为很奇怪。

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
  <a class="nav-link" href="#">Code<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="category/life/index.html">Life</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="aboutme.html">About</a>
  </li>
</ul>

1. 在 Life 页面上，单击 About 时，它以某种方式请求低于 url 并给出 404。当然是 404，但为什么不直接转到基本 url 中的 aboutme.html？在主页上单击“关于”页面可以正常工作。

https://yinkouya.github.io/category/life/aboutme.html

1. 在生活页面，再次点击生活时，是这样的404：

https://yinkouya.github.io/category/life/category/life/index.html

显然有问题，但我找不到答案。

Answer 1

问题与 Bootstrap 无关，而与 Jekyll 生成 URL 的方式有关。

关于链接在Home有效，因为它是一个相对路径，并且home路径没有子层级。

Life 页面有一个/category 子级别，因此About 相关页面将尝试访问/category/about，得到404。

解决方法是将about页面和其他类别设置为完整路径，而不是相对路径：

        <li class="nav-item">
          <a class="nav-link" href="{{'category/life/index.html' | absolute_url }}">Life</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{'aboutme.html'|absolute_url}}">About</a>
        </li>