Jekyll 博客在 github 页面中的样式不正确

Question

我已经安装了 jekyll 并在本地创建了一个 post。我将我的提交推送到 master 分支并创建了一个没有提交的孤立分支 gh-pages。

在我的 _config.yml 中，基础 url 代码是这样的， baseurl: "https://githubusername.github.io/blog" 博客是我的仓库。

我将 <link rel="stylesheet" href="css/main.scss"> 添加到 default.html。 当我加载这个 link、https://githubusername.github.io/blog the site doesn't render properly.See Image

我的 problem/error 是什么？提前致谢。

Answer 1

1. 将您的 baseurl 设置为：/blog.

   • Baseurl 是 之后 url (something.github.io)，页面路径之前的部分，read this 进一步说明。

2. 为什么您的 HTML 样式 sheet 代码 link 正在 .scss 文件中？那是 SCSS/SASS，它需要由 Jekyll 的 SASS 转换器处理（或您自己的转换器，转换成一个不错的 CSS 文件）。 HTML 只接受 CSS 样式sheets.

   • 为此，请确保您的 SCSS 文件有一个 YAML 前端，即 3 个破折号 (-)，然后是 2 个换行符，然后是另外 3 个破折号。

3. 将 default.html 中的 sheet link 更改为：

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

   • 注意 .css 而不是 .scss，还有附加的 site.baseurl

或者，如果你决定不处理所有 site.baseurl 的东西，你可以让 site.baseurl 保持 [=23= 的值] 然后只需将样式 sheet link 修改为 href= blog/css/main.css（在转换 .scss 文件之后），但这违背了 baseurl 的目的。 另外，如果您决定以后不希望它出现在 blog 中，您将不得不进行大量 link 编辑。