jekyll将变量传递给页面

Question

我试图找到一种方法，用jekyll创建一个预订表单。 例如，我在我的旅游详情页面上预订了一个按钮。

当用户点击该按钮时，我很想知道是否有将参数传递到预订页面的方式，以便显示例如游览的名称 - 价格等等。 / p>

我无法弄清楚它是否可能。任何聪明的人都指出我正确的方向（如果有的话）？

Answer 1

是的，这是可能的，但由于Jekyll是静态的，你必须在客户端这样做。

解释

游览页面（tour.html）：

---
title: tours
layout: page
tour:
  name: Flying with eagles
  description: text here
  price: 120€
---
{% capture url %}n={{ page.tour.name | uri_escape }}&p={{ page.tour.price | uri_escape }}{% endcapture %}

<h2>{{ page.tour.name }} ({{ page.tour.price }}) - <a href="tour-form.html?{{ url }}">Book me for this tour!</a></h2>

<p>{{ page.tour.description }}</p>

请注意，我们使用页面变量来存储名称和价格等值，但您可以在页面正文中对其进行硬编码：

<h2>{{ page.tour.name }} ({{ page.tour.price }}) - <a href="tour-form.html?{{ url }}">Book me for this tour!</a></h2>

然后变成：

<h2>Flying with eagles (120€) - <a href="tour-form.html?n=Flying%20with%20eagles&amp;p=120%E2%82%AC">Book me for this tour!</a></h2>

表单（tour_form.html）：

---
title: tour form
layout: page
---

<form accept-charset="UTF-8" action="" method="POST">
<input type="text" name="tourName" value="">
<input type="text" name="tourPrice" value="">
<input type="email" name="email" placeholder="Your Email">
<input type="text" name="name" placeholder="Your Name">
<button type="submit">Submit</button>
</form>

<script>
// this script will automatically fill name and price fields 
// depending on what's passed in the url
var fillForm = function () {
    var queryString = document.location.search.split("+").join(" ");
    var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(queryString)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    if (params.n == undefined && params.p == undefined){
        // no value in the query string
        // here you have to manage this use case : redirect or print a message to user
    }else{
        // filling form fields with query string values
        document.getElementsByName('tourName')[0].value = params.n;
        document.getElementsByName('tourPrice')[0].value = params.p;
    }
} ();
</script>

此表单会自动填充从tour.html传递的参数。

然后可以指向表单服务，如http://forms.brace.io/，http://www.jotform.com/或任何表单服务来提交提交的数据。

注意：某些服务需要回调页面才能在提交表单时重定向到。 然后，你需要制作另一个页面（例如：thankyou.html），你必须解析并将url传递给用户。