你能解释一下为什么在 html 中使用标签 {{ , }} 吗？

Question

我想在 Github 上使用 jekyll 主题。所以我克隆了this repository，但它没有包含css文件。

一些代码如下所示：

<link href="{{ "/assets/css/style.css" | prepend: site.baseurl }}" rel="stylesheet">

{{ 和 }} 是什么？

这些会给我的编辑器带来错误。消息是“标签开始未关闭”。

我已经尝试了以下方法：

   <link href="assets/css/style.css" rel="stylesheet">

但我想知道为什么我必须这样写。

Answer 1

这些{{ 和}} 是HTML 代码中的流动语法。 Liquid 是 Jekyll 中用于制作动态内容的特定语言。您可以将其视为 PHP 的替代品。

在这里，您的示例 {{ "/assets/css/style.css" | prepend: site.baseurl }} 表示 insert the string "/assets/css/style.css" prepended with the value of site.baseurl (this variable should be declared in your _confil.yml)。

但表达式中的双引号与 HTML 代码中的双引号冲突。试试：

<link href="{{ '/assets/css/style.css' | prepend: site.baseurl }}" rel="stylesheet">

一旦被 Jekyll 引擎解释，这可能会生成以下 HTML 代码：

<link href="http:/www.baseurl.of.mysite.com/assets/css/style.css" rel="stylesheet">

液体简介here.

因此，您必须使用适当的命令在克隆的存储库上运行 jekyll 引擎：

jekyll build

这将在./_site 中生成 HTML 页面。或者：

jekyll serve

这将启动一个测试服务器，并激活 HTML 页面的自动重新生成，在您的导航器中提供预览，地址为 http://localhost:4000/。

更多关于 jekyll 命令here.

我假设你首先在 the documentation 之后在你的机器上安装了 jekyll。

一旦您对预览感到满意，请将您的存储库推送到您的 github 帐户。 GitHub 将运行 jekyll 引擎并在其服务器中生成 HTML 页面。

鉴于您在 github 上的用户名是“popcorn”，您可以将您的 jekyll 文件推送到：

• 名为“popcorn.github.io”的存储库：这是您的用户站点，可在 https://popcorn.github.io/ 获得。
• 如果你有一个现有的项目“foo”，将这个存储库推入一个名为“gh-pages”的分支中（这是 github 页面的默认分支；你可以使用其他分支，但你必须标记它作为 github 页面：请参阅下面的教程）：这是您的项目站点，可在 https://popcorn.github.io/foo/ 获得。

见GitHub tutorial。

Answer 2

它们是 Jekyll 在构建时插入必要值的扩展点。将它们视为 C/C++ 预处理器宏。您收到这些错误的原因是：

<link href="{{ '/assets/css/style.css' | prepend: site.baseurl }}"
      rel="stylesheet"> <!-- Use single quotes when put inside double quotes -->