导航栏链接在 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>

在生活页面，当点击关于时，不知何故它在url下面请求并给出了404。当然是404但是为什么它不直接进入aboutme.html基地url？在主页上单击时，关于页面工作正常。

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

生活页面，再次点击生活，404是这样的：

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

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

Answer 1

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

About link 从 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>

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

Navbar links are working wrong in Jekyll

liquid

jekyll

twitter-bootstrap