如何在 css 文件中使用 Jekyll baseurl

Posted 2023-03-14

【中文标题】如何在 css 文件中使用 Jekyll baseurl

【英文标题】：How to use Jekyll baseurl in css files

【发布时间】：2013-11-30 23:34:24

【问题描述】：

我正在使用 Jekyll 在 Github 页面上托管一个网站。问题在于引用 css 文件中的文件路径。

我想做这样的事情：

body  background: #FFF url(' site.baseurl/images/page_bg.JPG') center 0 no-repeat; background-attachment: fixed; color: #4b595f; 

但 Jekyll 似乎不会处理 css 文件，因此 site.baseurl 永远不会被换出。

在其他情况下，我不能将其更改为内联样式，因此假设这是不可能的。

【参考方案1】：

Jekyll 处理所有带有 YAML 前端的文件。在你的文件的开头粘贴一个front matter（即使它是空的）部分，Jekyll 会正确地转换它。尝试在文件开头使用它：

---
title: CSS stylesheet
---

【讨论】：

FWIW，你可以省略任何内容，只写两行 ---\n---（抱歉，我无法让它在这个评论字段中看起来正确......）。

【参考方案2】：

在@import-ed 文件中使用来自 Brian Willis 答案的技巧不适用于 SASS。

相反，您可以这样做：

main.scss

---
---
$baseurl: " site.baseurl ";
@import "myfile";

_sass/_myfile.scss

myclass 
  background: url($baseurl + "/my/image.svg");

---

别忘了

" site.baseurl " 周围的引号（在 site.baseurl 为空的情况下很重要，并且可能更可靠）和 加号与$baseurl + "/my/image.svg"。

【讨论】：

SASS 会弹出同样的问题。除了将 $baseurl 变量的值放在引号中并删除分号之外，相同的修复。引号让我有点搞砸了。

找到一篇关于一些weirdness with SASS strings的相关文章。我认为这个答案将在没有进一步阅读的情况下完美运行。但如果有人好奇的话......

我会稍微改进一下main.scss，使用$baseurl: "% if site.baseurl != '/' % site.baseurl % endif %";，这样当baseurl 只是一个斜杠时，你甚至可以保存。否则你有 // CSS-pathes 中的斜杠