有没有办法使用Liquid和条件语句基于当前页面的名称设置CSS类？

Question

我正在尝试将HTML网站模板（https://html5up.net/massively）转换为Jekyll-ready主题，以便在GitHub页面（https://pages.github.com/）和其他地方使用，我在使用“Jekyll-izing”导航栏时遇到了一些麻烦。主题。

HTML主题有一个名为“active”的CSS类，它被分配给用户正在查看的页面（即，如果用户正在查看“/index.html”，则URL“/index.html”的导航<li>将具有类“活动”，它将突出显示导航栏中“文本框”白色的背景，并将其他导航文本框保留为其原始颜色）。

但是，对于Jekyll网站，我不需要（也不想）复制每个页面的导航代码（<ul><li></li></ul>）和链接，因此导航链接都方便地位于“_includes / nav.html”中我可以插入使用Liquid（“{% include nav.html %}”）的任何HTML布局中的文件。

由于我将所有导航链接都包含在一个HTML文件中，该文件当前与我的所有网站页面共享（我已经“包含”了我的default.html布局中的nav.html，我用于至少两页） ，我正在努力找到一种方法来通过更改元素的背景颜色来突出显示用户所在的页面。

我已经尝试过使用Liquid的条件语句，但我不知道我做错了什么（也许我没有得到正确的语法，或者其他一些错误）。

这是原始代码（在我篡改之前）：

<nav id="nav">
    <ul class="links">
        <li><a href="{{ site.baseurl }}/index">Home</a></li>
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
    </ul>
    {% include social.html %}
</nav>

我试图通过创建我希望用Liquid的无错误条件语句来“修复”我的问题，该条件语句将检查用户是否在与我想要突出显示的页面同名的页面上（即，如果用户是在页面上的名称/ URL“索引”）（在这里看到官方Jekyll Docs中的https://jekyllrb.com/docs/variables/）。如果是这样，那么它将呈现与“活动”类的链接，如果没有，那么它将在{% else %}中呈现链接，该链接没有“活动”类：

<nav id="nav">
    <ul class="links">
        {% if page.name == /index.md %}
        <li class="active"><a href="{{ site.baseurl }}/index">Home</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/index">Home</a></li>
        {% endif %}

        {% if page.name == /about.md %}
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/about">About</a></li>
        {% endif %}
    </ul>
    {% include social.html %}
</nav>
</nav>

例如，当用户在“主页”页面时突出显示“主页”一词，并且当用户在“关于”页面上时突出显示单词“关于”，并且等等。

提前谢谢你，如果这个问题令人困惑，我道歉。我很困惑，但我很乐意澄清。

编辑当我像这样修改文件时，链接消失了：

<nav id="nav">
    <ul class="links">
        {% if page.name == index.html %}
        <li class="active"><a href="{{ site.baseurl }}/index">Home</a></li>
        {% endif %}
        {% if page.name == about.html %}
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
        {% endif %}
    </ul>
    {% include social.html %}
</nav>

也许是因为我没有正确调用index.html或about.html文件？我已经尝试了诸如index.md之类的变体（该文件实际上称为index.md，但我认为Jekyll将其更改为index.html），/ index.md，/ index.html，index，/ index，但都没有似乎触发了if语句。

Answer 1

好极了！所以不管我做了什么，下面的代码解决了我的问题：

<nav id="nav">
    <ul class="links">
        {% if page.title == "Home" %}
        <li class="active"><a href="{{ site.baseurl }}/index">Home</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/index">Home</a></li>
        {% endif %}
        {% if page.title == "About" %}
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/about">About</a></li>
        {% endif %}
    </ul>
    {% include social.html %}
</nav>

我相信之前的if语句不起作用，因为我没有将index.html放在引号（“”）中。相反，我检查了页面的标题（YAML前面的内容）是否与我想要将类更改为“活动”的标题相同，这是有效的。