首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >有没有办法使用Liquid和conditional语句根据当前页面的名称来设置CSS类?

有没有办法使用Liquid和conditional语句根据当前页面的名称来设置CSS类?
EN

Stack Overflow用户
提问于 2019-03-29 07:37:49
回答 1查看 1.4K关注 0票数 2

我正在尝试将一个超文本标记语言站点模板(https://html5up.net/massively)转换为一个支持Jekyll的主题,以便在GitHub页面(https://pages.github.com/)和其他地方使用,但是我在对主题导航栏进行“Jekyll”处理时遇到了一些麻烦。

超文本标记语言主题有一个名为"active“的CSS类,它被分配给用户正在查看的页面(即,如果用户正在查看"/index.html",则URL "/index.html”的导航<li>将具有"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“https://jekyllrb.com/docs/variables/”的页面上)(就像在官方Jekyll Docs中看到的那样)。如果是,那么它将显示带有“活动”类的链接,如果不是,它将在没有“活动”类的{% 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>

例如,目标是当用户在"Home“页面上时突出显示单词"Home”,并且当用户在"About“页面上时突出显示单词"About”,等等。

提前感谢您,如果这个问题令人困惑,我向您道歉。我很困惑,但我很乐意澄清。

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

<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等变体,但它们似乎都不会触发if语句。

EN

回答 1

Stack Overflow用户

发布于 2019-03-29 08:33:56

耶!所以不管我做了什么,下面的代码解决了我的问题:

<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第一件事)是否与我想要将类更改为"active“的标题相同,这是可行的。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55408439

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档