HTMLで{{、}}タグを使用する理由を説明できますか？

Question

私はGithubでジキルのテーマを使いたいです。だから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コード内の液体の構文です：あなたはこれらのエラーを取得している理由はこれです。液体は動的な内容を作るためにジキルで使われる特定の言語です。 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="http:/www.baseurl.of.mysite.com/assets/css/style.css" rel="stylesheet"> 

here

液体に導入：

一旦ジキルエンジンによって解釈

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

が、これは次のHTMLコードを生成してもよいです。

だから、適切なコマンドを使用して、自分のクローン化されたリポジトリ上のジキルエンジンを実行する必要があります。

jekyll build 

これは./_siteでHTMLページを生成します。または：

jekyll serve 

これはテストサーバーを起動し、HTMLページの自動再生を活性化させる、http://localhost:4000/であなたのナビゲータにプレビューが利用できるようになります。

ジキールコマンドの詳細here。

the documentationの後に初めてマシンにジキールをインストールしたと仮定します。

プレビューが完了したら、githubアカウントでリポジトリをプッシュします。 GitHubはjekyllエンジンを実行し、そのサーバーにHTMLページを生成します。

• 「popcorn.github.io」と呼ばれるリポジトリを：ユーザ名が与えられ

  はgithubの上の「ポップコーン」で、あなたはのいずれかであなたのジキルファイルをプッシュすることができ、それはhttps://popcorn.github.io/で利用できるユーザーサイト、です。

• 既存のプロジェクト "foo"をお持ちの場合は、このリポジトリを "gh-pages"というブランチにプッシュします（これは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 -->