css中的根路徑（Jekyll）

Question

我使用變量{{root_url}}來訪問我的網站（Jekyll）的根路徑（/）。例如。我可以用它來包含外部css文件的路徑。

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

但是在我的css/main.css中，我無法訪問{{root_url}}，例如。

input { 
    background: url(/{{ root_url }}/img/search-icon.png); 
} 

圖像不顯示爲{{root_url}}在css中無法訪問。我如何訪問CSS內的{{root_url}}？

Answer 1

您可以使用相對路徑。由於CSS位於子文件夾深度一級，因此您可以這樣做：

input { 
    background: URL(../img/search-icon.png) 
} 

Answer 2

只有前端文件是由jekyll處理的液體。

如果你想在CSS使用液體，您必須在css/main.css添加前面的問題（即使是空的）：

--- 
# this is an empty front matter that instruct jekyll 
# to process this file with liquid 
--- 
input { 
    background: url(/{{ root_url }}/img/search-icon.png); 
}