github pages gh-pages 分支图片链接失效

来源：互联网发布：网络艺术名字大全编辑：程序博客网时间：2024/05/18 00:01

症状

我从 github 上 clone 了一个项目 : cs231n.github.io, 并改名为 cs231n-cn. 不过直接 clone 后访问 liuchengxu.github.io/cs231n-cn 却发生图片链接丢失的问题。

原因

因为原来 cs231n.github.io 属于 username.github.io ，直接访问即可。而 clone 后访问的话属于 username.github.io/repo 的形式，比如我的情况是 liuchengxu.github.io/cs231n-cn.

前者的图片链接直接写为 /assets/img1.png 即可，生成的图片地址就为 username.github.io/assets/img1.png, 现在我们需要改为 username.github.io/repo/assets/img1.png才能正常访问。

解决方案

baseurl

在 _config.yml 中写入 baseurl: "/repo", 比如 /cs231n-cn.
图片链接加入 {{ site.baseurl }}, 由 <img src="/assets/pixels_embed_cifar10.jpg"> 改为
<img src="{{ site.baseurl }}/assets/pixels_embed_cifar10.jpg">。

总结

实际上不只是图片，对于其他静态文件如果直接写/assets/foo.file 这样的地址，从 username.github.io 换到 username.github.io/repo 都会发生路径问题，无法获取到文件.

不过 cs231n 却并没有，看了一下从中学到了一些：

    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">    <!-- Custom CSS -->    <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">

以前我都是直接这么写 href='/css/main.css', 没有 prepend 这种东西，像 cs231n 这样就能够将更加平稳地过渡到 username.github.io/repo.

参考：https://github.com/jekyll/jekyll/issues/332

0 0