基于GitHub Pages实现下拉选择YAML文件动态渲染车型页面的疑问

看起来你已经走了大半流程了——下拉菜单加查询参数、能遍历YAML输出变量，就差把这俩环节串起来了！结合GitHub Pages常用的Jekyll环境，给你两种靠谱的实现思路，看哪种更贴合你的需求：

方案一：前端JS动态渲染（适配你已有的查询参数方案） #

这个方案不用改太多现有代码，靠JS读取URL里的参数，从预加载的YAML数据里捞对应内容渲染：

步骤1：规整YAML文件存放 #

把两个车型的YAML文件放到Jekyll的_data/cars/目录下（没有就新建），比如model_a.yml和model_b.yml，确保两个文件的字段结构完全一致，比如：

# _data/cars/model_a.yml
name: 车型A
price: "28万"
features:
  - 自动泊车
  - BOSE音响

步骤2：在页面中注入所有车型数据 #

在你的页面模板里，把_data里的车型数据转换成JSON，给JS用：

<script>
  // 让Jekyll把YAML数据转成JS能识别的JSON
  const allCarData = {{ site.data.cars | jsonify }};
</script>

步骤3：写JS读取查询参数并渲染内容 #

在页面底部加一段JS，负责解析URL参数、匹配数据、渲染到页面：

// 读取URL里的car参数
const urlParams = new URLSearchParams(window.location.search);
const targetCar = urlParams.get('car');

// 找到对应车型的数据
const currentCarData = allCarData[targetCar];

// 准备渲染的容器（你需要在页面里提前写好这些元素）
const carNameEl = document.getElementById('car-name');
const carPriceEl = document.getElementById('car-price');
const carFeaturesList = document.getElementById('car-features');

if (currentCarData) {
  // 渲染基础信息
  carNameEl.textContent = currentCarData.name;
  carPriceEl.textContent = currentCarData.price;
  
  // 渲染配置列表
  carFeaturesList.innerHTML = '';
  currentCarData.features.forEach(feature => {
    const li = document.createElement('li');
    li.textContent = feature;
    carFeaturesList.appendChild(li);
  });
} else {
  // 如果没有参数或者参数不对，默认跳转到第一个车型
  const defaultCarKey = Object.keys(allCarData)[0];
  window.location.search = `?car=${defaultCarKey}`;
}

步骤4：优化下拉菜单的选中状态 #

把你现有的下拉菜单改成用Jekyll遍历生成，自动匹配当前选中的车型：

<select id="car-dropdown" onchange="window.location.search = '?car=' + this.value">
  {% for car in site.data.cars %}
    <option 
      value="{{ car[0] }}" 
      {% if page.url contains car[0] %}selected{% endif %}
    >
      {{ car[1].name }}
    </option>
  {% endfor %}
</select>

方案二：纯静态预生成（无JS，适合SEO需求） #

如果不想用JS，想让每个车型都是独立的静态页面，也可以用Jekyll的模板自动生成：

步骤1：创建车型页面模板 #

在_layouts目录下新建car-page.html：

---
layout: default
---
<h1>{{ page.car_data.name }}</h1>
<p>价格：{{ page.car_data.price }}</p>
<h3>核心配置</h3>
<ul>
  {% for feature in page.car_data.features %}
    <li>{{ feature }}</li>
  {% endfor %}
</ul>

步骤2：生成每个车型的页面 #

在项目根目录新建cars文件夹，里面创建model-a.md和model-b.md，内容分别是：

---
layout: car-page
car_data: {{ site.data.cars.model_a }}
title: 车型A详情
---

---
layout: car-page
car_data: {{ site.data.cars.model_b }}
title: 车型B详情
---

步骤3：修改下拉菜单跳转链接 #

把下拉菜单的选项改成直接跳转到对应静态页面：

<select onchange="window.location.href = this.value">
  <option value="/cars/model-a.html">车型A</option>
  <option value="/cars/model-b.html">车型B</option>
</select>

两种方案里，方案一更贴合你当前已经实现的查询参数逻辑，改起来更快；方案二更适合需要SEO的场景，毕竟静态页面搜索引擎更友好。

内容的提问来源于stack exchange，提问作者Rosie