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

Question

我正在尝试使用 Jekyll 建立一个 github 页面站点。我的方法是将_site的内容上传到repo的根目录，并通过相对URL引用资产。

下面是一些调用文件夹的相关代码的sn-ps：

CSS：

@font-face {
    font-family: supermario;
    src: url('/dpd/font/fontfamily.ttf');
}

.scenery {
  position: absolute;
  background:url('/img/image1.gif');
}

.image2 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  background-image:url('/img/image2.png');
}

.icon2 {
  background-image:url('/img/icon2.png');
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: $floorheight;
  background-position-x: 350px;
  z-index: 5;
  transform: scaleX(-1);
}

HTML：

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

<script src="build/js/app.js"></script>

我的 HTML 元素正在加载正确的 URL 结构。如下：

myusername.github.io/repository-name/build/js/app.js
myusername.github.io/repository-name/build/css/styles.css

我的 CSS URL 没有正确加载...它们看起来像：

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

以此类推，正在生成 404。

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

//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);
    });
});

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

1. 更改为相对路径../
2. 删除正斜杠，使其看起来像：background-image:url('/img/icon.png');
3. 将img文件夹移动到项目根目录

我是否缺少额外的步骤？有人对如何更好地做到这一点有任何建议吗？

Answer 1

考虑到您有myusername.github.io/repository-name/.. 之类的网址，您需要使用absolute_url 修复相对路径并在_config.yml 中添加base_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>

然后在_config.yml:

baseurl: '/repository-name'

要修复 CSS 中的图像路径，您可以使用 /repository-name/css/... 之类的 URL“手动”调整它们，或者再次使用 absolute_url 使 Jekyll 处理文件，在 CSS 文件的开头添加三个 -，如下所示：

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