html - 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"/>

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

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

谢谢，本。

编辑

我刚刚发现了一些奇怪的东西——如果我将我的 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

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

Project Page URL Structure

Sometimes it’s nice to preview your Jekyll site before you push your gh-pages branch to GitHub. However, the subdirectory-like URL structure GitHub uses for Project Pages complicates the proper resolution of URLs. Here is an approach to utilizing the GitHub Project Page URL structure (username.github.io/project-name/) whilst maintaining the ability to preview your Jekyll site locally.

1. In _config.yml, set the baseurl option to /project-name – note the leading slash and the absence of a trailing slash.
2. When referencing JS or CSS files, do it like this: {{ site.baseurl }}/path/to/css.css – note the slash immediately following the variable (just before “path”).
3. When doing permalinks or internal links, do it like this: {{ site.baseurl }}{{ post.url }} – note that there is no slash between the two variables.
4. Finally, if you’d like to preview your site before committing/deploying using jekyll serve, be sure to pass an empty string to the --baseurl option, so that you can view everything at localhost:4000 normally (without /project-name at the beginning): jekyll serve --baseurl ''