html - 你能解释一下为什么在 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 }} 表示插入字符串“/assets/css/style.css”，前面加上site.baseurl的值(这个变量应该在你的_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 pages 的默认分支；你可以使用其他分支，但你必须标记它作为 github 页面:参见下面的教程):这是您的元素站点，位于 https://popcorn.github.io/foo/。

参见 GitHub tutorial .