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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (51)

我正在尝试将HTML网站模板(https://html5up.net/massively)转换为Jekyll-ready主题,以便在GitHub页面(https://pages.github.com/)和其他地方使用,我“Jekyll-izing”主题的导航栏有点麻烦。

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

但是,使用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“index”的页面上(如此处所见)官方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语句。

提问于
用户回答回答于
<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前面的内容)是否与我想要将类更改为“活动”的标题相同,这是有效的。

扫码关注云+社区

领取腾讯云代金券