在 OctoberCMS 中根据 url slug 更改 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 是空的时，我尝试了不同的想法将其插入到类属性中并将其从数组更改为字符串。所以我尝试将它包装到一个 div 中并像那样显示它。但这只是空的。我试过{{ dump(this.param.tab) }}，结果也是空的。

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

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

如果您需要更多信息，请询问，但我认为这无关紧要，因为它只是 10 月的基本设置，主题只是 twig、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"，您的班级名称将为@987654330 @。

带参数

您需要将您的 url 设置为 => /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">

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