Jekyll 使用 JS 变量作为 IF 条件

Question

我现在正在用 Jekyll 创建一个网站。

我想制作一个内容会根据GET variables变化的页面。

我有不同的链接如下：

<a href="/oneBenchmark?logic=k&problem=cnf"><i class="fa fa-link"></i></a>

<a href="/oneBenchmark?logic=t&problem=cnf"><i class="fa fa-link"></i></a>

我也有页面 oneBenchmark.html 如下：

---
layout: page
permalink: /oneBenchmark/
---

<script>
    var splitUrl = function() {

        var vars = [], hash;
        var url = document.URL.split('?')[0];
        var p = document.URL.split('?')[1];
            if(p != undefined){
                p = p.split('&');
                for(var i = 0; i < p.length; i++){
                    hash = p[i].split('=');
                    vars.push(hash[1]);
                    vars[hash[0]] = hash[1];
                }
            }
            vars['url'] = url;
            return vars;
    };

    var url = splitUrl();

    var logic   = url[0];
    var problem = url[1];

    console.log(logic);
    console.log(problem);
</script>

{% for bench in site.benchmarks %}
    {% if bench.logic == logic %} 
        {% if bench.problem == problem %}           
            {{bench.content}}
        {% endif %}         
    {% endif %}
{% endfor %}

Javascript 小代码给了我 2 个变量 "logic" 和 "problem"，它们包含 URL.

中的值

我想在 Jekyll 的 IF 中使用我的 JavaScript 变量来检查我应该显示哪些内容。

不幸的是，我不知道如何在此 IF 中调用我的 JavaScript 变量，也不知道如何以不同的方式实现此目标：/

在此先感谢您的帮助！

Answer 1

Jekyll 是一个 static 网站生成器，您想用它来生成 dynamic 内容。你错过了使用 Jekyll 的目的。我认为强调不好是个坏主意！

Jekyll 会先创建内容，这意味着一旦您进入页面，它就已经创建好了，因为它是一个静态生成器，无法即时创建内容！

即使您使用 javaScript 进行过滤，您也无法向 Jekyll 询问特定数据并将该数据重新生成为新的页面内容。正如我所见，您唯一的选择是使用 Jekyll 将整个数据作为内容生成到页面，然后使用 javaScript 到 hide/show 相关内容。

正如我之前所说，我不建议以这种方式使用 Jekyll，它不会长期扩展运行。这也导致了非常糟糕的用户体验：

场景 1： 用户等待页面自行呈现，同时看到内容在屏幕上出现和消失 - 不知道页面何时最终准备好正确的内容。
场景 2： 隐藏全部内容并向用户显示一条消息 "please wait content loading..." 用户可能会等待很长时间进程结束，然后得到正确的页面内容）。

我认为您需要重新检查您的所有站点要求并选择正确的技术来实现它。也许 Jekyll 并不是您所需要的。

jekyll javascript liquid

Answer 2

第一重要的事情
流式语法（例如 {% for %}）由 Jekyll 在用户看到页面之前生成，因此无法使用用户在其中传递的变量.

但不要很快放弃！发挥你的创意，还是有办法的。
基本上当你想根据你可能使用的用户操作修改页面时：

参数传入URL;
JavaScript.

例如，我创建了一个带有小型数据库的网页，允许用户在其中搜索项目（例如，按名称）。这是一个静态页面！）我使用 {% for %} 循环从一开始就列出数据库中所有项目的空 div 和 id。在 JavaScript 中，基于我从用户那里得到的 URL，我会修改过滤后的 divs 以显示内容。

我的html:

---
layout: default
---

{% for item in site.data.items %}
    <div id="{{ item.id }}"></div>
{% endfor %}

<script>
function addFilteredElements() {
    var url = new URL(window.location.href);
    var name = url.searchParams.get("name");

    {% for item in site.data.items %}
        if (name == null || {{ item.name }} == name) {
            element = document.getElementById('{{ item.id }}');
            element.innerHTML = '{{ item.name }}, {{note.semester}}';
            console.log('yay!');
        }
    {% endfor %}
}
</script>
<body onload="addFilteredElements();">

items.yml

- name: exampleName0
  id: exampleId0

- name: exampleName1
  id: exampleId1

Jekyll 使用 JS 变量作为 IF 条件

Jekyll use the JS variable for IF condition

javascript

liquid

jekyll