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

Question

我想使用Jekyll设置一个github页面站点。我的做法是通过相对URL将_site的内容上传到回购和参考资产的根目录。

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

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。

编辑：我有帮助经营杰基尔一个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

考虑你的URL喜欢myusername.github.io/repository-name/..，你需要修复使用absolute_url并添加base_url在_config.yml相对路径：

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