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是静态网站生成器，您希望使用它生成动态内容。你错过了使用Jekyll的目的。我认为这是一个糟糕的主意，强调不好！

Jekyll创建了一个内容，这意味着一旦你到达你的页面它就已经创建了，因为它是一个静态生成器，它无法动态创建内容！。

即使您使用javaScript过滤您的方式，也无法向Jekyll询问特定数据并将该数据重新生成为新的网页内容。我认为你唯一的选择是使用Jekyll将整个数据作为内容生成到页面，然后使用javaScript隐藏/显示相关内容。

正如我之前所说，我不建议使用Jekyll，从长远来看它不会扩展。这也导致了非常糟糕的用户体验：

场景1：用户等待页面自动呈现，同时看到内容出现并从屏幕上消失 - 不知道页面何时最终准备好了正确的内容。
方案2：隐藏整个内容并向用户显示消息"please wait content loading..."用户可能会等待很长时间才能结束该流程，然后获取正确的页面内容）。

我认为您需要重新检查所有网站要求并选择正确的技术来实施它。也许Jekyll并不完全符合你的需要。

jekyll javascript liquid

Answer 2

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

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

传入 URL 的参数；
JavaScript。

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

我的 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将IF变量用于IF条件

2 个答案: