Bootstrap CSS位置和github页面 [英] Bootstrap CSS location and github pages

问题描述

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

I'm trying to upload a webpage to github pages using jekyll and want to make sure all my pages and posts 'see' the bootstrap 3 stylesheets, which in my working directory is simply in a css folder in the root directory: ./css/

如果我在首页中使用以下内容:

If I use the following in my home page:

<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解决这个问题:

Then the homepage (index.html in root) loads and is formatted correctly, however if I have pages located in other places or folders, they wont see this because ./ is relative to the current directory - as far as my understanding goes. I tried to get around this issue with 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"/>

但是，如果它在主页中，则无法使用引导程序的任何设置或样式或我的自定义修改和替代正确加载格式.

However if this is in the homepage it does not load correctly formatted with any of the settings or styles of bootstrap or my custom modifications and overrides.

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

What am I doing wrong? How can I fix this so all my pages, no matter where they are can see my stylesheets.

谢谢，本.

编辑

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

I've just found something strange - if I set my HTML to:

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

然后正确加载页面.但是我认为我们应该避免使用/?之类的绝对路径.

Then the page loads correctly. However I thought we were to avoid absolute paths like /?

推荐答案

您可能已经解决了该问题，但是对未来的读者:是的，由于github项目页面的url结构，解决方案是包括直接路径.以下摘录摘自 Jekyll文档.

You probably have solved the issue, but to future readers: Yes, the solution is to include direct path due to github project pages' url structure. The following excerpt is taken out from Jekyll docs.

项目页面URL结构

Project Page URL Structure

有时候，在推送您的Jekyll网站之前，最好先预览一下gh-pages分支到GitHub.但是，类似子目录的网址GitHub用于Project Pages的结构使适当的结构复杂化URL的解析度.这是一种利用GitHub的方法项目页面URL结构(username.github.io/project-name/)而保持在本地预览Jekyll网站的功能.

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. 在_config.yml中，将baseurl选项设置为/project-name –注意前导斜杠和尾随斜杠.
2. 在引用JS或CSS文件时，请按以下步骤进行操作:{{site.baseurl}}/path/to/css.css –注意紧随变量后的斜杠(就在路径"之前).
3. 进行永久链接或内部链接时，请按以下步骤进行操作:{{site.baseurl}} {{post.url}} –请注意，两者之间没有斜线这两个变量.
4. 最后，如果您想在使用jekyll serve进行提交/部署之前预览您的网站，请确保传递一个空白--baseurl选项的字符串，以便您可以在以下位置查看所有内容本地主机:4000正常(开头没有/project-name):jekyll服务--baseurl''

这篇关于Bootstrap CSS位置和github页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！