为什么我的Jekyll网站在Github Pages上显示巨大的图标

Question

1. 我生成了一个新的jekyll网站 jekyll new simple-site
2. 该站点在localhost中看起来不错.它是默认的,虚拟网站,无论如何生成.
3. 我把它推到gh-pages了回购的分支.

现在该网站显示在github.io/下,但带有巨大的图标.

默认的jekyll生成站点中github和twitter的svg图标跨越页面的整个宽度.它们应该是16px左右.

同样,顶部出现3个巨大的块.它们又是svg,应该是细线.

这是我的网站:http://ananthp.github.io/carnatic_scores/
(repo:https://github.com/ananthp/carnatic_scores/tree/gh-pages)

Answer 1

由于您的站点不在域ananthp.github.io/的根目录,但在"目录"carnatic_scores /中,您必须baseurl在_config.yml文件中设置变量.

baseurl: '/carnatic_scores'

编辑:一些解释

在_includes/head.html中,您可以看到:

<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">

这相当于

<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">

随着baseurl设置为""(默认),您的相对URL是/css/main.css,其解析为http://ananthp.github.io/css/main.css通过浏览器= 404未找到.

随着baseurl设置为"/ carnatic_scores"你的相对URL是/carnatic_scores/css/main.css,其解析为http://ananthp.github.io/carnatic_scores/css/main.css您的浏览器=冷静CSS!

所有资产(css,js和image)都是如此:

<script src="{{ site.baseurl }}/path_to_scripts/script.js"></script>

<img src="{{ site.baseurl }}/path_to_images/image.jpg">

or in markdown

![Image alt]({{ site.baseurl }}/path_to_images/image.jpg)