Jekyll 根据 JS url param

问题描述

我正在尝试根据 URL 参数是否包含在我的 URL 中以生产模式（已编译）有条件地在我的 Jekyll 应用程序中呈现包含文件，以便我可以更改已加载的文件。

我需要用 JS 来做这件事，因为 JS 将接受参数，但我不知道 Jekyll 怎么会知道，我想知道是否有 JEKYLL 插件或类似的东西可以工作。

在我的 URL 中，例如：https://example.com/page 我将指定一些 mode 参数，然后我想决定显示哪个文件。

<div>

  <!-- Default -->
  {% include_relative includes/form/form.html %}

  <!--
    If URL param 'mode' is set
  -->
  {% include_relative includes/form/form_lookup.html %}
  
</div>

解决方法

Jekyll 生成静态网站，因此它甚至在知道 JS 告诉页面什么之前就生成了所有内容。对于这种动态行为，您不能使用 Jekyll 本身。有一些解决方法：

您可以生成两个单独的页面，然后根据您的 URL 参数返回一个或另一个页面。
生成一个包含表单和嵌入脚本的单个页面，该脚本根据从 javascript 设置的值隐藏一个或另一个：


<script>
  // Check the URL parameter
  check_mode(){
    // See tutorial below
  }
  // Display one or another
  show_form(x){
    if(x == "formA"){
      document.getElementById("formB").style.display = "none"
    }else if(x == "formB"){
      document.getElementById("formA").style.display = "none"
    }
    document.getElementById(x).style.display = "initial" // or whatever visible
  }

if(check_mode())
  show_form("formA")
else
  show_form("formB")
</script>

<div>

  <!-- Default -->
  <div id="formA">
    {% include_relative includes/form/form.html %}
  </div>

  <!--
    If URL param 'mode' is set
  -->
  <div id="formB">
    {% include_relative includes/form/form_lookup.html %}
  </div>
</div>

确实，您同时发送了两种表单，这并不是带宽和浏览器内存的最有效使用方式，但最糟糕的事情发生在网络上。此外，虽然这不是最干净的方法，但考虑到问题的范围，我认为足以为您指明方向。

Get the URL parameters from Javascript。

html javascript jekyll