Question

我正在使用Github页面构建一些包含我想从yaml文件获取的文本的页面。目前我有两个yaml文件，每个文件用于不同的车型。我想在标题中使用下拉菜单选择一种汽车类型，然后通知哪个yaml文件可以重新填充包含该汽车特定文本的页面。

我可以创建下拉列表，向页面添加查询字符串参数。我也可以迭代两个yaml文件并输出特定的变量。我无法弄清楚的是如何将两者结合使用，以便通过下拉列表中的用户选择来通知页面的yaml文件。

或许有更好的方法可以做到这一点？

Answer 1

Github页面使用静态站点生成器Jekyll。当您推送到gh-pages分支时，您的网站会构建一次。之后，您的浏览器只会提供生成的HTML页面。对YAML文件的所有迭代都在生成时完成，而不是在您请求页面时完成。由于您没有在更改下拉列表时执行的服务器端代码，因此无法处理查询参数。

由于您无法处理查询参数，因此您需要将汽车放在不同的网址上。以下是使用code from this answer更改使用<select>和JavaScript更改网址的简单示例：

<select name="" onchange="javascript:location.href = this.value;">
    <option value="/mypage/car1/" selected>Car1</option>
    <option value="/mypage/car2/">Car2</option>
</select>

然后，您只需要为每辆车生成HTML页面，分别位于/mypage/car1/和/mypage/car2/。这可以通过使用您的YAML数据作为YAML前端的一部分来完成。例如，这可能是car1.md：

---
layout: car
permalink: /mypage/car1/
data: # data of your car here
  name: my very awesome car
---

Markdown content here (leave empty if you don't need it)

然后创建布局_layouts/car.html并在其中生成相应的HTML页面。例如，要显示汽车的名称，请执行以下操作：

<label>Name:</label> {{page.data.name}}

为避免使用JavaScript，您还可以create a dropdown menu containing <a> links with pure HTML+CSS。

选择yaml并下拉

1 个答案: