Question

我通过手动创建所有页面创建了GitHub Pages / Jekyll网站。然后我想“让我们变得有趣”，我用这些工具生成一个带有酷炫主题和疯狂CSS的新页面。幸运的是，我有先见之明在完成所有这些之前下载原始主分支的副本。

该网站的基本布局是：

Home About Blog ->Blog Posts

一旦GitHub工具发表意见（并覆盖了我的index.html），我就会清理它。我将所有新的html放在我的default.html中的/ _layouts中，以便我可以将其保留为布局，并将index.html重新定义为我原来的YAML和文本。我摆脱了我早先（和穷人）对CSS的尝试。巴姆！一个美丽的头版迎接我。但当我尝试导航到关于，博客或任何博客帖子时，我得到的只是黑白渲染的HTML。没有CSS，没有花哨的东西，虚无...只是我的文字和链接。

obligatory GitHub repo

我试图更改任何可能特意绑定到主页面的内容，但它没有做任何事情。我被卡住了。

有人可以帮我确定导致CSS不呈现的具体原因吗？请记住，这是我第一次使用CSS。

Answer 1

样式表链接的路径不正确，因此无法在您的网页中正确加载。例如，在您的about页面中，样式表链接是https://linkreincarnated.github.io/about/stylesheets/github-dark.css，它不存在。相反，您需要从https://linkreincarnated.github.io/stylesheets/github-dark.css加载样式表。

要解决此问题，您需要在样式表链接中使用标记{{site.baseurl}}，以从网站的基本路径加载样式表。

在https://raw.githubusercontent.com/linkReincarnated/linkReincarnated.github.io/master/_layouts/default.html的default.html页面中，替换以下行

    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-dark.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">

与

    <link rel="stylesheet" type="text/css" href="{{site.baseurl}}/stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="{{site.baseurl}}/stylesheets/github-dark.css" media="screen">
    <link rel="stylesheet" type="text/css" href="{{site.baseurl}}/stylesheets/print.css" media="print">

然后再次尝试加载。这应该从正确的路径加载样式表。

为什么GitHub Pages不将CSS应用到其他页面？

1 个答案: