variables - jekyll 将变量传递给表单页面

Question

我尝试找到一种使用 jekyll 创建单一预订表格的方法。例如，我在旅游详细信息页面上有一个预订按钮。

当用户单击该按钮时，我很想知道是否有一种方法可以将参数传递到预订页面，以便显示例如旅游的名称、价格等。

我不知道如何或即使它可能。有没有足够聪明的人为我指出正确的方向(如果有的话)？

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 传递的数据。