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

然后主页（root.html中的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。

项目页面网址结构

有时候在推送你的Jekyll网站之前预览你的网站是很好的   gh-pages分支到GitHub。但是，类似于子目录的URL   结构GitHub用于项目页面使正确的复杂化   URL的解析。这是一种利用GitHub的方法   项目页面URL结构（username.github.io/project-name/）while   保持在本地预览Jekyll网站的能力。


在_config.yml中，将baseurl选项设置为/ project-name - 注意前导斜杠和没有尾部斜杠。

引用JS或CSS文件时，请执行以下操作：{{site.baseurl}} / path / to / css.css - 注意变量后面的斜杠   （就在“路径”之前）。

执行固定链接或内部链接时，请执行以下操作：{{site.baseurl}} {{post.url}} - 请注意，之间没有斜杠   两个变量。

最后，如果您想在使用jekyll服务提交/部署之前预览您的网站，请确保传递空   字符串到--baseurl选项，以便您可以查看所有内容   localhost：4000正常（开头没有/ project-name）：   jekyll serve --baseurl''

Bootstrap CSS位置和github页面

1 个答案: