Html GitHub页面-CSS中的相对URL问题

我正在尝试使用Jekyll建立一个github页面站点。我的方法是通过相对URL将

\u站点

的内容上传到回购和参考资产的根目录中

下面是调用文件夹的一些相关代码片段：

CSS:

HTML:

我的CSS URL加载不正确…它们看起来像：

myusername.github.io/img/icon1.png
myusername.github.io/img/icon2.png

以此类推，生成404

编辑：我有一个gulptask可以帮助运行Jekyll-看起来是这样的：

//server + file watching 
gulp.task('serve', function() {

    browserSync.init({
        server: "_site"
    });

    gulp.watch("dev/scss/*.scss", ['styles', 'jekyll']);
    gulp.watch('dev/js/*.js', ['scripts', 'jekyll']);
    gulp.watch('_includes/*.html', ['jekyll']).on('change', browserSync.reload);
    gulp.watch('_site').on('change', browserSync.reload);

});


gulp.task('jekyll', function(gulpCallBack){
    var spawn = require('child_process').spawn;
    // After build: cleanup HTML
    var jekyll = spawn('jekyll', ['build'], {stdio: 'inherit'});

    jekyll.on('exit', function(code) {
        gulpCallBack(code === 0 ? null : 'ERROR: Jekyll process exited with code: '+code);
    });
});

我尝试了一些无法解决问题的方法：

更改为相对路径

。/

删除正斜杠，使其看起来像：

背景图像：url（'/img/icon.png'）

将

img

文件夹移动到项目的根目录

---

有没有我遗漏的额外步骤？有人对如何做得更好有什么建议吗？

考虑到您有类似于

myusername.github.io/repository name/。

，您需要使用

absolute\u url

修复相对路径，并在

\u config.yml

中添加

base\u url

：

<link rel="stylesheet" href="{{'/build/css/styles.css'|absolute_url}}">
<script src="{{'/dpd/jquery-3.2.1.min.js'|absolute_url}}"></script>

<script src="{{ '/build/js/app.js'|absolute_url}}"></script>

baseurl: '/repository-name'

要修复CSS中的图像路径，您可以使用url（如

/repository name/CSS/…

）或再次使用

绝对url

）来“手动”调整它们，使Jekyll处理文件，在CSS文件的开头添加三个

-

：

---
---
.image2 {
   background-image:url({{'/img/image2.png'|absolute_url}});
}

---

img目录是否在构建目录中？在这种情况下，像这样的相对url应该是最好的选择：背景图像：url（'../img/image2.png'）；你可能最接近的是#2。实际上，您正在CSS中使用绝对URL（当它们以斜杠开头时）。在CSS中使用相对URL时，URL是相对于CSS文件本身的。（见：）。在您的示例中，如果您只删除了开头斜杠，那么

img/icon.png

将引用

repo name/build/css/img/icon.png

，假设您的css位于

repo name/build/css/styles.css

，例如。感谢您的回复-不幸的是，这并没有修复我的github页面站点，它也破坏了我的本地建筑。当我运行

jekyll-serve

时，它根本不会加载我的字体或图像，而运行gulp（我在gulp任务中集成了jekyll）会返回

错误：在\“background:\”之后的CSS无效：应为\“{\”，was \“url（{{'/img/sce…”\在…

的第43行，我想尽量避免在我的URL中明确定义回购名称，因为我也不想破坏我的本地构建。你在问题中没有提到gulp，请使用构建中涉及的所有信息更新问题。

<link rel="stylesheet" href="{{'/build/css/styles.css'|absolute_url}}">
<script src="{{'/dpd/jquery-3.2.1.min.js'|absolute_url}}"></script>

<script src="{{ '/build/js/app.js'|absolute_url}}"></script>

baseurl: '/repository-name'

---
---
.image2 {
   background-image:url({{'/img/image2.png'|absolute_url}});
}