根据OctoberCMS中的URL链接更改CSS类

Question

因此，我正在尝试为自己的项目设计OctoberCMS主题。目标是根据用户所在的页面，使整个导航标题具有不同的颜色。似乎很简单，但经过数小时的尝试，我仍然无法管理。

所以我的想法是根据用户所在的页面添加一个不同的CSS类。对于https://example.com/foo/bar，应显示如下类：navbar-foo

[我发现OctoberCMS Twig有一个名为this.param.tab的选项，该选项应准确返回“ foo”，所以我想到了这一点：

{% if this.param.tab == 'foo' %}
    <nav class="navbar-foo">
{% if this.param.tab == 'bar' %}
    <nav class="navbar-bar">

依此类推。事实是，这将占用大量空间，而且我认为这不是一种干净的方法。同样，该类将需要位于多个元素上，这会使它有点不可读。所以我想我会像这样解决它：

{% set slug = this.param.tab %}
<nav class="navbar-{ slug }">
    <div class="navbar-menu-{ slug }

这没有用。首先，我认为它不起作用，因为我没有正确插入树枝以使其被视为html中的字符串。我以为我做错的另一件事是this.param.tab返回一个数组而不是字符串。因此，当我意识到this.param.tab为空时，我尝试了不同的想法将其插入到class属性中，并将其从数组更改为字符串。但这只是空洞的。我尝试过{{ dump(this.param.tab) }}，结果也显示为空。

所以在我看来this.param.tab实际上没有返回任何东西。由于代码位于header.htm中，因此我认为可能需要将其保存在主调用文件中，因为header.htm只是插入的一部分。因此，我尝试了layout.htm，然后尝试了home.htm（layout是文件，它定义了页面的布局，其中插入了局部/页面，而home.htm是该文件实际上包含用户访问的页面的代码和其他代码）。但这也无济于事。

所以我不完全确定这里出了什么问题。 this.param.tab确实有效吗？还是有更好的方法应该这样做？

如果您需要其他信息，请询问，但我认为没关系，因为它只是十月的基本设置，主题只是树枝，javascript和scss。

Answer 1

如果您只需要url作为条件，可以这样做

{% set slug = this.page.settings.url|replace({'/': '-'} %}
    <nav class="navbar{{ slug }}">
        <div class="navbar-menu{{ slug }}

[现在，如果您设置url = "/foo/bar"，您的班级名称将是navbar-foo-bar，如果您设置url = "/test"，您的班级名称将是navbar-test，如果您设置了url = "/bla/ok/test"，您的班级名称将是navbar-bla-ok-test 。

带参数

您需要将网址设置为=> /foo/:tab，然后才能将tab值输入{{ this.param.tab }}

所以一旦您这样设置了url，就可以得到像这样的值

如果使用网址http://example.com/foo/bar-> {{ this.param.tab }}将为foo

<nav class="navbar-{{ this.param.tab }}"> -> will be  -> <nav class="navbar-foo">

如果使用URL http://example.com/foo/test-> {{ this.param.tab }}将为test

<nav class="navbar-{{ this.param.tab }}"> -> will be  -> <nav class="navbar-test">

如有任何疑问，请发表评论。