Select yaml with drop down

Question

I'm using Github pages to build some pages with text I want to get from yaml files. At present I have two yaml files one each for a different car type. I want to use a drop down in the header to select a car type which will then inform which yaml file to get to repopulate the page with text specific to that car.

I can create the drop down which adds a query string param to the page. I can also iterate through the two yaml files and output specific variables. What I can't figure out is how to use the two together so that the yaml file for the page is informed by the user selection from the dropdown.

Or maybe there is a much better way of doing this??

Welcome to StackOverflow. Please take the [tour] and read our [ask] page for suggestions on how to improve this question (by editing it). At the moment, it does not meet the community standards and it's likely to get closed. — blurfus, Mar 29 '18 at 20:58

score 0 · Answer 1 · answered Mar 30 '18 at 08:10

Github pages uses Jekyll, a static site generator. Your site is built once when you push to your gh-pages branch. After that, your browser is just served the generated HTML pages. All the iterating over your YAML files is done at generation time, not when you request the pages. Since you have no server-side code that is executed when you change your dropdown, you cannot process a query parameter.

Since you cannot process query parameters, you need to place your cars on different URLs. Here's a simple example how to change URLs with a <select> and JavaScript, using the code from this answer:

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

Then you just need to generate the HTML pages for each car, located at /mypage/car1/ and /mypage/car2/ respectively. That can be done by using your YAML data as part of the YAML front matter. For example, this could be 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)

You then create the layout _layouts/car.html and in it, generate the appropriate HTML page. For example, to show the car's name, do something like:

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

To avoid JavaScript, you can also create a dropdown menu containing <a> links with pure HTML+CSS.

Select yaml with drop down

1 Answers1