如何在 Jekyll 中使用选择框作为导航？

Question

在我的 Jekyll-Page 中，我想使用 Select 作为主导航。

这是我的代码：

<select id="navigation">
   <option value="/" selected>start</option>
   <option value="/about">about</option>
   <option value="/blog">blog</option>
</select>

<script type="text/javascript">
   document.getElementById("navigation").onchange = function() {
      var selectedOption = this.value;
      window.location.href = "http://127.0.0.1:4000/" + selectedOption;
   }
</script>

我想将当前页面自动设置为选中。我该怎么做？

Answer 1

您可以这样使用 page.url 变量：

<select id="navigation">
   <option value="/" {% if page.url == '/' %}selected{% endif %}>start</option>
   <option value="/about" {% if page.url == '/about' %}selected{% endif %}>about</option>
   <option value="/blog" {% if page.url == '/blog' %}selected{% endif %}>blog</option>
</select>

Answer 2

最好的方法是这样（示例来自 JekyllCodex.org）：

{% assign url_parts = page.url | split: '/' %}
<select>
<option {% if '' == url_parts[1] %}selected{% endif %}>start</option>
<option {% if 'about' == url_parts[1] %}selected{% endif %}>about</option>
<option {% if 'blog' == url_parts[1] %}selected{% endif %}>blog</option>
</select>