GitHub托管Jeykll网站.css 中的背景图像没有显示?



我在_data文件夹中创建了一个settings.yml。这也包含我的baseurl:/run-and-roll

所以我在我的资产前面插入了{{ site.data.settings.baseurl }}css文件与html中定义的图像一起加载。但是,css 中请求的任何背景图像都没有显示?

https://granttransition.github.io/run-and-roll/

https://jekyllrb.com/docs/configuration/中出现的每个配置变量都有意义地将它们保留在那里。

通常,模板在生成一些网址(如资产的网址)时会使用{{site.baseurl}}来准备基本网址,因此,如果您从其他位置手动设置它,默认情况下不会使用它。

您已经阅读的将设置和配置分开的好习惯是对于与 jekyll 内置变量不完全相关的所有其他配置,将它们放在数据文件中是一种很好的做法,这样您就可以按照官方文档的建议尽可能清晰地保持_conf.yml,这样可以更轻松地维护和更新您的 Jekyll 实例:

除了 Jekyll 提供的内置变量之外,您还可以 指定您自己的自定义数据,这些数据可以通过 Liquid 访问 模板系统。

Jekyll 支持从位于 _data目录。请注意,CSV 文件必须包含标题行。

这个强大的功能可以避免模板中的重复 并在不更改 _config.yml 的情况下设置特定于站点的选项。

插件/主题还可以利用数据文件来设置配置 变量。

TL;博士

只需按照其他答案中的建议baseurl_config.yml:)

b/c 如果您在 Github Page 中使用 Jekyll,那么如果未指定site.urlsite.baseurl,则在生产构建的CNAMEconfig.yml中。 然后它们将由GitHub页面生成器自动设置

解释

从 GitHub 页面生成器代码源:

# Set `site.url` and `site.baseurl` if unset and in production mode.
def set_url_and_baseurl_fallbacks!
return unless Jekyll.env == "production"
repo = drop.send(:repository)
site.config["url"] ||= repo.url_without_path
if site.config["baseurl"].to_s.empty? && !["", "/"].include?(repo.baseurl)
site.config["baseurl"] = repo.baseurl
end
end

Jekyll 的默认构建环境是development。因此,同时,在本地处理您的网站。每件事都会像您期望的那样运行。即使将baseurl放在_config.yml以外的其他位置

但是在 GitHub 页面端,网站是使用以下命令构建的:

JEKYLL_ENV=production jekyll build

并且site.urlsite.baseurl被覆盖。

在您的情况下,如果您使用{{ site.data.settings.baseurl }}访问某个页面,并且它设置为类似 ('''/') 的值,您可能不会注意到导航问题.batassets path因为 CSS 和 JS 将无法按预期工作。

所以,只需把baseurl放在_config.yml,相应地重构你的布局和页面。 你会没事的。

旁注:正如@David答案中提到的,放置网站设置是 Jekyll 惯例。 在_config.yml,但如果你想把它们放在其他地方,你可以。 只要确保,按照意愿为production构建声明它们。

另请参阅: 清除有关baseurl的混淆 - 再次

更新

即使将网站移动到 GitHub 项目存储库:/<user-name>.github.io/<repo-name>而不是用户(或组织)存储库:/<user-name>.github.io。 您需要进行如下设置:

site.baseurl: ''

或者只是删除它。 因为您从主存储库为您的网站提供服务(参见上面的 refence)

使用{{ site.baseurl }}是一个 jekyll 约定,将其移动到数据文件不是一个好主意。

尽管如此,从您的 css 的角度来看,通往runner.jpg的道路将始终是../assets/img/runner.jpg.无需使用baseurl

最新更新