Jekyll 基于 JS url 参数有条件地渲染文件答案

【问题标题】：Jekyll conditionally render file based on JS url paramJekyll 基于 JS url 参数有条件地渲染文件
【发布时间】：2021-04-20 12:43:47
【问题描述】：

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

【问题讨论】：

标签： javascript html jekyll

【解决方案1】：

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.

【讨论】：