html-GitHub页面和相对路径

我为正在GitHub上进行的项目创建了gh-pages分支。

我使用Sublime文本在本地创作网站,而我的问题是,当将其推送到GitHub时,所有指向Javascrips,图像和CSS文件的链接均无效。

例如,我的头部中有这个。

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

这在本地很好用,但是在GitHub上不起作用,因为没有使用资源库名称作为URL的一部分来解析链接。

它要求:

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

什么时候应该要求:

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

我当然可以将回购名称作为URL的一部分,但这会阻止我的网站在开发过程中在本地工作。

知道如何处理吗?

seesharper asked 2019-10-09T02:10:23Z
7个解决方案
60 votes

您需要使用Jekyll。

从相关文档中逐字复制:

有时候,在推送您的Jekyll网站之前先预览是一件好事   gh-pages分支到GitHub。 但是,类似子目录的网址   GitHub用于Project Pages的结构使适当的结构复杂化   URL的解析度。 这是一种利用GitHub的方法   项目页面URL结构(--baseurl)同时   保持在本地预览Jekyll网站的能力。

  1. gh-pages中,将--baseurl选项设置为localhost:4000 –请注意前导斜杠和尾随斜杠的缺失。

  2. 当引用JS或CSS文件时,请按以下方式进行操作:gh-pages –请注意紧随其后的斜杠   变量(在“路径”之前)。

  3. 在做永久链接或内部链接时,请按照以下步骤操作:gh-pages –请注意,之间没有斜线   这两个变量。

  4. 最后,如果您想在使用/ gh-pages进行提交/部署之前先预览自己的网站,请务必将空白   字符串到--baseurl选项,以便您可以在   localhost:4000通常(开头没有/ project-name):   jekyll serve --baseurl ''

这样,您可以从站点根目录本地预览站点   本地主机,但是当GitHub从gh-pages生成您的页面时   分支,所有URL将以/project-name开头并解析   正确地。

(显然有人是几个月前才知道的。)

Anubhav C answered 2019-10-09T02:12:32Z
10 votes

您正在使用哪个浏览器? 您确定会发生这种情况吗? 因为它不应该。 如果在链接中包含相对URL,则相对于包含该链接的文档的URL,它将得到解析。 换句话说,当您包括

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

<link href="assets/css/bootstrap.css" rel="stylesheet">的HTML文档中,通过将http://twitter.github.io/bootstrap/assets/css/bootstrap.css附加到HTML文档的URL前缀(不包含路径的最后一部分)(不包含doc.html),即可解决指向http://twitter.github.io/bootstrap/assets/css/bootstrap.css的链接,即,该链接将解析为http://www.foo.com/bar/assets/css/common.css,而不是http://www.foo.com/assets/css/common.css 如您所言。

例如,查看Twitter Bootstrap网页的源代码:[http://twitter.github.io/bootstrap/。]请注意,顶部的样式链接指定为<link href="assets/css/bootstrap.css" rel="stylesheet">。该链接正确解析为http://twitter.github.io/bootstrap/assets/css/bootstrap.css,即它确实包含 回购名称。

Ivan Zuzak answered 2019-10-09T02:10:53Z
6 votes

三年半之后的2016年12月,这不再是一个问题。
请参阅Ben Balter发布的“ GitHub页面的相对链接”:

在GitHub.com上创作Markdown一段时间后,您已经可以使用相对链接。

(从2013年1月开始)

现在,当通过GitHub Pages发布时,这些链接将继续起作用。

如果您的存储库中有一个Markdown文件,位于Jekyll,并且您希望从该文件链接到index.md,则可以使用以下标记来实现:

[a relative link](another-page.md)

当您在GitHub.com上查看源文件时,相对链接将像以前一样继续工作,但是现在,当您使用GitHub Pages发布该文件时,该链接将被静默转换为Jekyll以匹配目标页面的发布 网址。

在幕后,我们使用的是开源的Jekyll Relative Links插件,默认情况下,所有版本均已激活该插件。

GitHub Pages上的相对链接还考虑了文件的YAML首要事项中的自定义永久链接(例如Jekyll),并在适当时添加了项目页面的基本URL,以确保链接在任何情况下都能正常工作。

并且不要忘记,自2016年8月以来,您可以直接从Jekyll分支发布您的页面(并非总是Jekyll分支)

自2016年12月以来,您甚至都不需要Jekyllindex.md。简单的markdown文件就足够了。

VonC answered 2019-10-09T02:14:15Z
4 votes

你可以放

<base href="/[repo]/">

site.baseurl标签中,它可以解决此问题。

您还可以通过设置以下内容来改进此解决方案:

<base href="{{ site.baseurl }}/">

然后将site.baseurl设置为空字符串以进行本地测试。

Affilnost answered 2019-10-09T02:15:05Z
3 votes

似乎Github Pages的反应不是很好。 尽管它使新文件立即可用,但由于缓存或其他原因,修改后的文件不会立即显示。

等待15分钟左右后,一切都很好。

Andrey Mikhaylov - lolmaus answered 2019-10-09T02:15:42Z
0 votes

另一种选择是专门为github.io网页创建一个新的仓库。 如果在github上将存储库命名为[user].github.io,则它将在https://[user].github.io上发布,您可以避免在URL路径中完全使用存储库名称。 显然,缺点是每个github用户只能有1个这样的回购协议,所以我不确定,它可能无法满足您的需求。

mulllhausen answered 2019-10-09T02:16:11Z
0 votes

现在最好的选择是2561036775795995983360过滤器:

<link href="{{ '/assets/css/common.css' | relative_url }}" rel="stylesheet">
Jason Haslam answered 2019-10-09T02:16:44Z
translate from https://stackoverflow.com:/questions/16316311/github-pages-and-relative-paths