Не могли бы вы объяснить, почему использовать теги {{,}} в html?

Question

Я хочу использовать тему jekyll на 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 кода. 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 build 

Это будет генерировать HTML-страницу в ./_site. Или:

jekyll serve 

Это запустит тестовый сервер и активировать автоматическую регенерацию HTML-страниц, делая предварительный просмотр доступен в вашем навигаторе на http://localhost:4000/.

Подробнее о командах jekyll here.

Я предполагаю, что вы впервые установили jekyll в своей машине после the documentation.

Как только вы удовлетворены предварительным просмотром, нажмите свой репозиторий на свою учетную запись github. GitHub запускает движок jekyll и генерирует HTML-страницы на своем сервере.

Учитывая ваше имя пользователя «попкорн» на GitHub, вы можете нажать ваши Джекил файлы либо в:

• хранилище под названием «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 -->