Question

我正在尝试使用Jekyll和Liquid-Shopify制作一个显示参数内容的降价页面。这是一个字典项目：一页包含26个链接（A | B | C | ... | Y | Z），单击一个字母将我带到一页上，但仅显示以我单击的字母开头的单词上。

使用查询字符串会很容易，但是Jekyll不处理它们。我想将Jekyll变量分配给Javascript值，但是Javascript是在Jekyll之后执行的。

主页：

---
layout: default
permalink: /main/
---

[A]({{ link_for_A }})
[B]({{ link_for_B }})
[C]({{ link_for_C }})
...
[Y]({{ link_for_Y }})
[Z]({{ link_for_Z }})

信函页面：

---
layout: default
permalink: /letter/
---

{% comment %} Here I'd like to assign a variable called letter, chosen according to which link I clicked on, i.e. if I clicked on A link on the main page, then letter = A {% endcomment %}

{% assign sorted_post = site.posts | sort: 'title' %}

{%- for post in sorted_post -%}
{% assign first_letter = post.name | slice: 0, 1 | capitalize %}
{%- if first_letter == letter -%}

Content

{% endif %}
{% endfor %}

我假设每个帖子都对应一个不同的条目，并且该条目的名称位于post.name中。

通过单击主页上的任何字母，新页面将只显示以该字母开头的单词，但是由于条件简单，因此使用了同一页面。这样可以避免创建26个不同的页面，每个字母一页。

尽管进行了搜索，但在该网站或其他与Jekyll相关的网站上却找不到任何内容。

谢谢您的帮助。

Answer 1

根据要查看的条目数，将所有条目加载到一页并使用Java脚本过滤DOM中实际显示的内容可能会更有利。所以说真的，您的主页应该看起来一样，但是下面还有列表：

---
layout: default
permalink: /main/
---

<a class="letters" onclick="expand('A')">A</a>
<a class="letters" onclick="expand('B')">B</a>
<a class="letters" onclick="expand('C')">C</a>
...
<a class="letters" onclick="expand('Y')">Y</a>
<a class="letters" onclick="expand('Z')">Z</a>

{%- for post in sorted_post -%}
  <a href="{{post.url}}" data-letter="{{post.name | slice: 0, 1 | capitalize}}" hidden>
    {{post.title}}
  </a>
{% endfor %}

然后，您可以隐藏所有已排序的帖子，并且可以使用简单的脚本显示和隐藏每个字母的所有条目。我认为这可能是Jekyll和JS最简单的组合。这是显示和隐藏单词的脚本：

function expand(letter) {
  const words = document.querySelectorAll('.word');
    words.forEach(word =>word.style.display = (word.dataset.letter === letter) ?'inline-block' :'none');
  }

这是输出HTML外观的工作模型：

function expand(letter) {
  const words = document.querySelectorAll('.word');
  words.forEach(word => word.style.display = (word.dataset.letter === letter) ? 'inline-block' : 'none');
}

.word {
  display: none;
}

<div>
  <a class="letters" onclick="expand('A')">A</a>
  <a class="letters" onclick="expand('B')">B</a>
  <a class="letters" onclick="expand('C')">C</a>
  <a class="letters" onclick="">...</a>
  <a class="letters" onclick="expand('Y')">Y</a>
  <a class="letters" onclick="expand('Z')">Z</a>
</div>

<a href="#" class="word" data-letter="A">Apple</a>
<a href="#" class="word" data-letter="B">Banana</a>
<a href="#" class="word" data-letter="B">Boat</a>
<a href="#" class="word" data-letter="C">Cat</a>
<a href="#" class="word" data-letter="C">Car</a>
<a href="#" class="word" data-letter="C">Corral</a>
<a href="#" class="word" data-letter="Y">Yarn</a>
<a href="#" class="word" data-letter="Z">Zoo</a>

使用Jekyll生成“参数”页面

1 个答案: