Jekyll 根据 JS url 参数有条件地渲染文件

Question

我正在尝试根据我的 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>

Answer 1

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

您可以根据 URL.
的参数生成两个单独的页面和 return 一个或另一个
生成一个包含两种形式的页面和一个嵌入脚本，该脚本根据 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.

Jekyll 根据 JS url 参数有条件地渲染文件

Jekyll conditionally render file based on JS url param

html

javascript

jekyll