Markdown 生成；“参数化”；带杰基尔的书页

我正试图用Jekyll和Liquid Shopify制作一个显示参数化内容的降价页面。这是一个字典项目：有一个页面有26个链接（a | B | C | |…| Y | Z），点击一个字母会让我进入一个页面，但只显示以我点击的字母开头的单词

使用查询字符串很容易，但Jekyll不会处理它们。 我想给一个Javascript值分配一个Jekyll变量，但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

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

尽管我进行了搜索，但我在这个网站或其他与杰基尔有关的网站上什么也没找到

---

感谢您的帮助。

根据您正在查看的条目数量，将所有条目加载到一个页面并使用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 %}

以下是输出HTML的工作模型：

函数展开（字母）{
const words=document.queryselectoral（'.word'）；
words.forEach（word=>word.style.display=（word.dataset.letter==letter）？“内联块”：“无”）；
}

.word{
显示：无；
}

---

根据您查看的条目数量，将所有条目加载到一个页面中并使用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 %}

以下是输出HTML的工作模型：

函数展开（字母）{
const words=document.queryselectoral（'.word'）；
words.forEach（word=>word.style.display=（word.dataset.letter==letter）？“内联块”：“无”）；
}

.word{
显示：无；
}

谢谢@JacobHelton，我用这个替代方案做了一些事情，用class

word

替换s。然而，它添加了大量无法理解的空白，但我正在研究它。您是指生成的HTML文件中的空白还是页面上实际出现的空白？我会避免使用多个表，而是将所有元素封装在一个具有多个列或行的表中，因为这样可以更好地控制元素的空间和位置。查看下面的链接：我说的是页面上出现的空白（我通过向标记添加

-

来管理生成的HTML中的空白：

{%-example-%}

）。我通过生成一个

表而不是

解决了这个问题。谢谢你的链接！谢谢@JacobHelton，我用这个替代方案做了一些事情，用class

word

将s替换为s。然而，它添加了大量无法理解的空白，但我正在研究它。您是指生成的HTML文件中的空白还是页面上实际出现的空白？我会避免使用多个表，而是将所有元素封装在一个具有多个列或行的表中，因为这样可以更好地控制元素的空间和位置。查看下面的链接：我说的是页面上出现的空白（我通过向标记添加

-

来管理生成的HTML中的空白：

{%-example-%}

）。我通过生成一个

表而不是

解决了这个问题。谢谢你的链接！