Question

根据当前处理的无脂肪路线，有人能建议在正确的导航栏菜单项（例如Bootstrap）中设置活动类的好方法吗？

我的主模板中的导航栏菜单如下所示：

<ul class="nav navbar-nav">
    <li class="active"><a href="">Home</a></li>
    <li><a href="athlete/statsimage">Data</a>
    <li><a href="about">About</a></li>
</ul>

我可以检查 - 如果围绕这些，如：

<ul class="nav navbar-nav">
    <li><a href="">{{ @route }}</a></li>
    <li <check if="{{ @route == '/' }}"> class="active"</check>><a href="">Home</a></li>
    <li <check if="{{ @route == '/data' }}"> class="active"</check>><a href="data">Data</a>
    <li <check if="{{ @route == '/about' }}"> class="active"</check>><a href="about">About</a></li>
</ul>

但这意味着在每个路由（$f3->set('route', $f3->get('PARAMS.0'))）中设置@route变量，并且在进行更改时嵌入检查和路由以将其与模板进行比较似乎容易出错。如果路由的开始匹配（例如，如果路由是/ data / set / 5 / report，仍然将数据链接设置为活动），我非常希望链接显示为活动状态，这会增加模板的复杂性

我正在考虑将菜单的所有数据放在代码中的关联数组中并在模板中生成菜单，但我不喜欢从菜单中取出菜单设计的想法进入代码。

任何想法或讨论都受到欢迎！

Answer 1

这部分取决于您如何定义路线。

如果您的路线看起来像GET /@controller/@action，那么以下应该可以解决问题：

{~ $links=array(''=>'Home','data'=>'Data','about'=>'About') ~}
<ul>
  <repeat group="@links" key="@ctrl" value="@label">
    <li class="{{ @ctrl==@@PARAMS.controller ? 'active' : '' }}">
      <a href="{{ @path }}">{{ @label }}</a>
    </li>
  </repeat>
</ul>

（注意双@@不要在主页上窒息。）

如果您的路由是逐个定义的（GET /，GET /data等等），那么您需要优化一下活动状态检测：

{~ $links=array('/'=>'Home','/data'=>'Data','/about'=>'About') ~}
<ul>
  <repeat group="@links" key="@uri" value="@label">
    <li class="{{ (@uri=='/' ? @PATH==@uri : strpos(@PATH,@uri)===0) ? 'active' : '' }}">
      <a href="{{ @path }}">{{ @label }}</a>
    </li>
  </repeat>
</ul>

如果您的路由是逐个定义并且命名相应的（GET @home: /，GET @data: /data，GET @data_foo: /data/foo等等），那么您可以避免在模板中对URI进行硬编码：

{~ $links=array('home'=>'Home','data'=>'Data','about'=>'About') ~}
<ul>
  <repeat group="@links" key="@name" value="@label">
    <li class="{{ strpos(@ALIAS,@name)===0 ? 'active' : '' }}">
      <a href="{{ @path }}">{{ @label }}</a>
    </li>
  </repeat>
</ul>

无论您选择哪种方法，都可以考虑在配置文件中定义$links以提高可维护性。

如何根据当前路线设置活动菜单？

1 个答案: