Jekyll 的图像设置在不同页面上的工作方式不同

Question

我正在尝试使用 Jekyll 在 Github 页面上创建个人博客。我添加了一堆图片，但是在 css 中调整它们的大小时，我遇到了以下问题：

在主页和关于页面上，CSS 工作正常，图像以正确的尺寸显示，但在代码和生活页面上，CSS 不起作用。我猜它与相对路径有关，但我不知道如何解决它。

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

这是我的github repo，请帮帮我，谢谢

Answer 1

CSS 文件是用相对路径加载的，所以如果 URL 路径不止一层，它就不会工作，要用绝对路径修复它。

您可以使用 absolute_url 过滤器将 url 和基础 url 值添加到输入中。

改变

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

至此

<link rel="stylesheet" href="{{'assets/style.css'|absolute_url}}">

Answer 2

在 _config.yml 中，设置 baseurl: ""

和 link 样式 sheet 如下所示：

<link rel="stylesheet" href="{{ site.baseurl }}/assets/style.css">