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

傷城~ 2022-07-14 06:13 189阅读 0赞

## 症状 ##

我从 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`

1.  在 `_config.yml` 中写入 `baseurl: "/repo"`, 比如 `/cs231n-cn`.
2.  图片链接加入 `{ { 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 却并没有，看了一下从中学到了一些：

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

参考：[https://github.com/jekyll/jekyll/issues/332][https_github.com_jekyll_jekyll_issues_332]

[cs231n.github.io]: https://github.com/cs231n/cs231n.github.io
[cs231n-cn]: https://github.com/liuchengxu/cs231n-cn
[https_github.com_jekyll_jekyll_issues_332]: https://github.com/jekyll/jekyll/issues/332