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

【问题标题】：URL string interpolation with liquid tags Jekyll带有液体标签的 URL 字符串插值 Jekyll
【发布时间】：2019-02-14 10:31:05
【问题描述】：

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

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

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

我尝试了以下方法：

注意：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">

这些都不起作用。我怎样才能以一种易于阅读并做我想要的简洁的方式来编写它？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我找到了解决方案。但是，我不确定这是否是最佳解决方案。如果您有更好的解决方案，请在下面发布。

问题是我希望将双引号呈现到实际的生成文件中，因为它是一个href。此外，我还希望能够将由 Liquid 解析的变量作为 URL 的一部分。

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

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

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

你看到它后面的 {{ 符号是液体标签的开始。后面的双引号允许将路径lib/css/ 呈现为字符串。

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

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

【讨论】：