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