Question

我正在尝试使用Jekyll设置github页面网站。我的方法是通过相对URL将_site的内容上传到repo和引用资产的根目录。

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

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元素正在加载正确的网址结构。它如下：

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

我的CSS网址未正确加载......它们看起来像：

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

等等，这就产生了404s。

编辑：我有一个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);
    });
});

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

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

我缺少一个额外的步骤吗？有没有人对如何做得更好有任何建议？

Answer 1

考虑到您有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中的图像路径，您可以调整它们＆＃34;手动＆＃34;使用/repository-name/css/...之类的网址或再次使用absolute_url让Jekyll处理文件，在CSS文件中添加三个-，如下所示：

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

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

1 个答案: