Jekyll 菜单高亮

之前在写 Jekyll 主题的时候，使用 Javascript 来高亮菜单，但有一个缺点是需要等到页面加载之后才动态切换。这里介绍下使用 Jekyll 语法的写法。

在主题文件中的_config.yml中定义好菜单内容，大致如下：

// _config.yml

...

nav:
  - text: about
    url: /about/index.html
  - text: resume
    url: /resume/index.html
  - text: contact
    url: /contact/index.html
  - text: blog
    url: /blog/index.html

其次，在使用到 nav 的地方，例如 layout 里面，这样写：

<nav>
  {% for link in site.nav %}
    {% assign active = nil %}
    {% if page.url == link.url or page.layout == link.layout %}
      {% assign active = 'class="active"' %}
    {% endif %}
    <li>
        <a {{ active }} href="/{{ link.text }}/">
            {{ link.text }}
        </a>
        {{ indicator }}
    </li>
  {% endfor %}
</nav>

这样写大致的意思是：

把配置中定义好的 nav 通过循环取出来。
判断当前页面的 url，如果是和 nav 中一致的，就赋予一个样式类「active」。
随后在模板中把定义好的参数{{ active }}写上去。

通过这样写的好处是可以在页面生成的时候就有这个样式，而不需要通过 Javascript 去动态添加。原理是差不多的，但这样写更加合理。

掌心

Jekyll 菜单高亮