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

Question

我通过手动创建所有页面创建了一个 GitHub Pages/Jekyll 网站。然后我想到 "Let's get fancy" 并使用这些工具生成了一个新页面，该页面具有很酷的主题和疯狂的 CSS 之类的东西。幸运的是，我有先见之明，在做这一切之前下载了原始主分支的副本。

网站的基本布局是：

Home About Blog ->Blog Posts

一旦 GitHub 工具有了发言权（并覆盖了我的 index.html），我就在它之后进行了清理。我将所有新的 html 放在 /_layouts 中的 default.html 中，以便我可以将其保留为布局，并将 index.html 重新定义为我最初拥有的 YAML 和文本。我摆脱了我之前在 CSS 的（和糟糕的）尝试。砰！一个美丽的首页迎接我。但是，当我尝试导航到“关于”、“博客”或任何博客文章时，我得到的只是黑白渲染 html。没有 CSS，没有花哨的东西，nada。只是我的文字和链接。

obligatory GitHub repo

我试图更改任何可能专门绑定到主页的内容，但没有任何效果。我卡住了。

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

Answer 1

样式表 link 的路径不正确，因此无法在您的页面中正确加载。例如，在您的关于页面中，样式表 link 是 https://linkreincarnated.github.io/about/stylesheets/github-dark.css, which doesnt exist. Instead you need to load the stylesheet from https://linkreincarnated.github.io/stylesheets/github-dark.css.

要解决此问题，您需要在样式表 link 中使用标记 {{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 页面不将 CSS 应用到其他页面？

Why isn't GitHub Pages applying the CSS to other pages?

html

css

git

jekyll