jekyll - 带有变量的 Jekyll/Liquid 表单模板

Question

有没有办法设计一个表单模板，供具有各种参数的内容页面使用？像这样的东西：

_layouts/form.html

---
layout: default
---

<form method="POST" action="/info/{{ page.action }}">
  {% for question in page.questions %}
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="question{{ question.id }}">
    <label class="form-check-label" for="question{{ question.id }}">{{ question.text }}</label>
  </div>
  {% endfor %}
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
  $("form").submit(function(event) {
    var inputElems = $("input"),
    count = 0;
    for (var i=0; i<inputElems.length; i++) {
      if (inputElems[i].type === "checkbox" && inputElems[i].checked === true){
          count++;
      }
    }
    if (count > {{ page.count }}) {
      return;
    } else {
      event.preventDefault();
      alert("Alert");
    }
  });
</script>

一个内容页面可能只包含一个定义模板使用的变量的前端：

---
layout: form
title: Title
action: /results
questions: site.data.questions1
count: 10
---

更好的解决方案是创建一些带有变量定义的 YAML 文件，这些变量定义被注入到模板中，以说明表单页面的永久链接。该文件将用于生成最终表单页面。

标签： jekyllliquid

Answer 1

你知道 Jekyll 中的包含文件吗？

与其确定页面的布局，因此很难向其中添加内容，而是包含功能就像一个函数或一段可重用的代码。您可以在页面或布局上使用它。

它适用于参数。

从文档

_include/image.html

<figure>
   <a href="{{ include.url }}">
   <img src="{{ include.file }}" style="max-width: {{ include.max-width }};"
      alt="{{ include.alt }}"/>
   </a>
   <figcaption>{{ include.caption }}</figcaption>
</figure>

打电话喜欢

---
---
{% include image.html url="http://jekyllrb.com"
max-width="200px" file="logo.png" alt="Jekyll logo"
caption="This is the Jekyll logo." %}

或者传递变量名称而不是值，如 frontmatter 或数据文件中定义的那样。请注意不要使用图像 url 覆盖页面上的 URL，否则可能会破坏。

---
my_image:
  url: '...'
  alt: '...'
---
{% include image.html url=page.my_image.url alt=page.my_image.html ... %}

From _data/gallery.yaml

{% include image.html url=site.data.gallery.my_image.url 
... %}

或者传递一个带有属性的对象。

---
my_image:
  url: '...'
  alt: '...'
---
{% include image.html image_attributes=page.my_image %}