URL 带有液体标签的字符串插值 Jekyll

Question

我正在尝试让 Jekyll 动态生成 link。 link 用于 CSS 文件，但取决于正在呈现的页面。

即如果页面是联系方式，它应该呈现 mywebsite.com/lib/css/contact.css

我遇到的问题是，当我尝试嵌套 liquid 标签时，它无法正确解析名称。它似乎将整个字符串视为文字字符串而不是解析名称。

我试过以下方法：

注意：layout.cssFile 是一个页面变量，其中包含我要呈现的 CSS 文件的名称。

尝试 1：

<link href="{{ lib/css/" | append:  layout.cssFile }} | relative_url }}" rel="stylesheet">

尝试 2：

<link href="{{ "lib/css/{{ layout.cssFile }} | relative_url }}" rel="stylesheet">

尝试 3：

{% assign cssPath="lib/css/{{layout.cssFile}}" %}
  <link href="{{ cssPath | relative_url }}" rel="stylesheet">

None 这些东西都有效。我怎样才能以一种易于阅读且符合我要求的简洁方式编写此文件？

Answer 1

我找到了解决办法。但是，我不确定这是否是最佳解决方案。如果您有更好的解决方案，请执行下面的post。

问题是我希望将双引号渲染到实际的生成文件中，因为它是一个 href。此外，我还希望能够将 liquid 解析的变量作为 URL.

的一部分

解决方案是使用 "append" 过滤器添加液体解析变量，然后在最后添加 relative_url 过滤器。

<link href="{{ "lib/css/" | append: layout.cssFile | append: ".css" | relative_url }}"

等号后的第一个双引号标记将呈现到生成的源文件中的双引号。匹配的是最后的双引号。

您看到的 {{ 符号是 liquid 标签的开头。后面的双引号允许路径 lib/css/ 呈现为字符串。

请注意，我使用了管道符号并开始使用追加过滤器来添加变量 layout.cssFile，并将其与字符串连接起来。然后我使用另一个附加过滤器将 css 扩展添加到文件路径。

最后，我添加了 relative_url 过滤器以确保 link 无论环境如何都能正确呈现。我在我的本地计算机上对此进行了测试，我也希望它可以在线工作而无需进行手动更改。

Answer 2

您不必在 Liquid 中使用双引号。单引号也可以。

<link href="{{ layout.cssFile | prepend: 'lib/css/' | append: '.css' | relative_url }}" />

URL string interpolation with liquid tags Jekyll