使用 Jekyll 生成 "parametric" 个页面

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 是一个不同的条目，并且这个条目的名称在 post.name.

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

尽管我进行了搜索，但我在这个网站或其他 Jekyll 相关网站上什么也没找到。

感谢您的帮助。

Answer 1

根据您正在查看的条目数量，将所有条目加载到一个页面并使用 Javascript 过滤 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 生成 "parametric" 个页面

Generating "parametric" pages with Jekyll

markdown

liquid

jekyll