我正在使用Jekyll和Bootstrap为自己创建一个投资组合页面。我希望导航栏使用Bootstrap的ScrollSpy组件动态更新活动部分。
主页中包含几个部分，“项目”部分中列出的每个项目都有单独的页面。
这是我的index.html的结构：
<body data-spy="scroll" data-target="#navbar-top" data-offset="0">
<section id="home"></section>
<section id="about"></section>
<section id="projects"></section>
<section id="resume"></section>
</body>
我的导航栏正在使用利用Jekyll的{{ site.baseurl }}的链接，如下所示：
<li class="nav-item">
<a class="nav-link" href="{{site.baseurl}}/#about">About</a>
</li>
这意味着在生成站点时，href最终输出完整的URL（例如index.html/#about）。
在查看Bootstrap's docs时，我发现了这一点：
导航栏链接必须具有可解析的ID目标。例如，
<a href="#home">home</a>必须与DOM中的某些内容相对应，例如<div id="home"></div>。
有什么方法可以使Bootstrap的ScrollSpy将这些链接识别为有效的部分ID目标？还是更好，有没有办法创建一个对Jekyll友好的导航栏，其hrefs使用可解析的id目标？