GitHub 页面和相对路径 [英] GitHub pages and relative paths

问题描述

我为我在 GitHub 上工作的项目创建了一个 gh-pages 分支.

我使用 Sublime 文本在本地创作网站，我的问题是当它被推送到 GitHub 时，所有指向 javascrips、图像和 css 文件的链接都无效.

例如，我在我的头部部分有这个.

这在本地效果很好，但它在 GitHub 上不起作用，因为未使用存储库名称作为 URL 的一部分来解析链接.

它要求:

http://[user].github.io/assets/css/common.css

什么时候应该要求:

http://[user].github.io/[repo]/assets/css/common.css.

我当然可以将 repo 名称作为 URL 的一部分，但这会阻止我的站点在开发过程中在本地工作.

知道如何处理这个问题吗?

解决方案

您使用的是哪个浏览器?你确定会发生这种情况吗?因为它不应该.如果在链接中包含相对 URL，它将相对于包含该链接的文档的 URL 进行解析.换句话说，当你包含

在 http://www.foo.com/bar/doc.html 的 HTML 文档中，assets/css/common.css 的链接将得到通过将它附加到 HTML 文档的 URL 前缀而不是路径的最后部分(没有 doc.html)来解析，即链接将解析为 http://www.foo.com/bar/assets/css/common.css，而不是你声称的 http://www.foo.com/assets/css/common.css.>

例如查看 Twitter Bootstrap 网页的源码:http://twitter.github.io/bootstrap/.注意顶部的样式链接，指定为 .该链接正确解析为 http://twitter.github.io/bootstrap/assets/css/bootstrap.css，即它包含存储库名称.

I have created a gh-pages branch for a project that I am working on at GitHub.

I use Sublime text to author the website locally and my problem is that when this is pushed to GitHub, all the links to javascrips, images, and css files are invalid.

For instance, I have this in my head section.

<link href="assets/css/common.css" rel="stylesheet">

This works great locally, but it does not work from GitHub as the links are not resolved using the repository name as part of the URL.

It asks for:

http://[user].github.io/assets/css/common.css

when it should have been asking for:

http://[user].github.io/[repo]/assets/css/common.css.

I could of course put the repo name as part of the URL, but that would prevent my site to work locally during development.

Any idea how to deal with this?

解决方案

Which browser are you using? Are you sure that this happens? Because it shouldn't. If you include a relative URL in a link, it will get resolved relative to the URL of the document that contains the link. In other words, when you include

<link href="assets/css/common.css" rel="stylesheet">

in an HTML document at http://www.foo.com/bar/doc.html, the link to assets/css/common.css will get resolved by appending it to the prefix of the URL of the HTML document without the last part of the path (without doc.html), i.e. the link will resolve to http://www.foo.com/bar/assets/css/common.css, not to http://www.foo.com/assets/css/common.css as you claim.

For example, view the source of the Twitter Bootstrap webpage: http://twitter.github.io/bootstrap/. Notice the style links at the top, specified as <link href="assets/css/bootstrap.css" rel="stylesheet">. That link correctly resolves to http://twitter.github.io/bootstrap/assets/css/bootstrap.css, i.e. it does include the repo name.

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