Bootstrap CSS 位置和 github 页面

Question

我正在尝试使用 jekyll 将网页上传到 github 页面，并希望确保我的所有页面和帖子都“看到”bootstrap 3 样式表，它在我的工作目录中只是在根目录中的 css 文件夹中： ./css/

如果我在主页中使用以下内容：

<link href="./css/bootstrap.css" rel="stylesheet">
<link href="./css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="./css/custom.css" type="text/css"/>

然后主页（根目录中的 index.html）加载并正确格式化，但是如果我的页面位于其他位置或文件夹中，他们不会看到这一点，因为 ./ 是相对于当前目录的 - 据我所知去。我试图用 Jekyll 解决这个问题：

<link href="{{site.url}}/css/bootstrap.css" rel="stylesheet">
<link href="{{site.url}}/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="{{site.url}}/css/custom.css" type="text/css"/>

结果：

<link href="ward9250.github.io/HybRIDS/css/bootstrap.css" rel="stylesheet">
<link href="ward9250.github.io/HybRIDS/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="ward9250.github.io/HybRIDS/css/custom.css" type="text/css"/>

但是，如果这是在主页中，它不会以任何设置或引导程序样式或我的自定义修改和覆盖的格式正确加载。

我做错了什么？我该如何解决这个问题，以便我的所有页面，无论它们在哪里，都可以看到我的样式表。

谢谢， 本。

编辑

我刚刚发现了一些奇怪的东西 - 如果我将我的 HTML 设置为：

<link href="/HybRIDS/css/bootstrap.css" rel="stylesheet">
<link href="/HybRIDS/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="/HybRIDS/css/custom.css" type="text/css"/>

然后页面正确加载。但是我认为我们要避免像 /? 之类的绝对路径

Answer 1

您可能已经解决了这个问题，但对于未来的读者：是的，由于 github 项目页面的 url 结构，解决方案是包含直接路径。以下摘自Jekyll docs。

项目页面 URL 结构

有时在推送之前先预览一下 Jekyll 网站会很不错 gh-pages 分支到 GitHub。但是，类似子目录的 URL GitHub 用于项目页面的结构使正确的 URL的解析。这是一种利用 GitHub 的方法 项目页面 URL 结构 (username.github.io/project-name/) 而 保持在本地预览 Jekyll 站点的能力。

1. 在 _config.yml 中，将 baseurl 选项设置为 /project-name - 注意前导斜杠和没有尾随斜杠。
2. 当引用 JS 或 CSS 文件时，这样做： {{ site.baseurl }}/path/to/css.css – 注意紧跟在变量后面的斜线 （就在“路径”之前）。
3. 当做永久链接或内部链接时，这样做：{{ site.baseurl }}{{ post.url }} - 注意中间没有斜线 这两个变量。
4. 最后，如果您想在使用 jekyll serve 提交/部署之前预览您的网站，请务必传递一个空 --baseurl 选项的字符串，以便您可以在以下位置查看所有内容 localhost:4000 通常（开头没有 /project-name）： jekyll serve --baseurl ''