使用静态页面插件在 OctoberCMS 上导航

Posted 2023-04-13

【中文标题】使用静态页面插件在 OctoberCMS 上导航

【英文标题】：Navigation on OctoberCMS with Static Pages plugin

【发布时间】：2021-01-13 05:52:25

【问题描述】：

我正在使用十月 CMS 开发登录页面并使用静态页面插件。 这是我的带有导航的 header.htm 文件：

<div class="header" id="header">
    <div class="container">
        <div class="header__inner">
            <div class="header__logo">
                <img src=" 'assets/img/logo.svg'|theme "  class="logo">
            </div>
            <nav class="nav" id="nav">
                % partial 'menu-items' items=staticMenu.menuItems class='nav__list' %
            </nav>
        </div>
    </div>
</div>

问题是如何修改基本的 menu-items.htm 部分，如果我使用的是单页布局并且我希望在菜单项单击时准确的部分处于活动状态（而不是现在的单独页面）。

目前我有包含此类项目的菜单，并希望这些部分之一在点击时处于活动状态：

/, 
/#about, 
/#projects, 
/#contacts.

我的 menu-items.htm 部分如下：

<ul class=" class ">
    % for item in items %
        <li 
            class="nav__item  item.isActive or item.isChildActive ? 'active' : ''  
             item.items ? 'dropdown' : '' "
        >
            <a class="nav__link"
                % if item.items %class="dropdown-toggle" data-toggle="dropdown"% endif % 
                href=" item.url "
            >
                 item.title 

                % if item.items %<span class="caret"></span>% endif %
            </a>

            % if item.items %
                % partial 'menu-items' items=item.items class='dropdown-menu' %
            % endif %
        </li>
    % endfor %
</ul>

目前 menu-items.htm 部分 if 语句中的代码在点击时添加“活动”类，因为这一行：

<li class="nav__item  item.isActive or item.isChildActive ? 'active' : ''   item.items ? 'dropdown' : '' "

...这是因为单击确切的菜单项时项目“isActive”属性为“true”。但我的问题是，如何在菜单导航中使用部分链接执行相同的操作（添加“活动”类），因为我的项目只有一页“主页”和几个部分。因此，当有人单击 eaxmple“关于”链接并滚动到 /#about 部分时，我希望菜单导航链接在固定导航上处于活动状态。

【问题讨论】：

不理解您的问题，您能否发布一些图片来展示您具体想要做什么。

@Pettis code in menu-items.htm partial if statement add "active" class on click because this line:

嗯，有很多方法可以做你想做的事。您可以只使用 javascript / Jquery，也可以将数据推送到会话中并更新部分菜单。可能有一种方法可以使用 CSS 来实现。 Jquery 可能是最简单的。 IE：$('#about').click(function()$(this).addClass('.active');); 尝试一些东西，如果你遇到困难，然后再回来提出一个更具体的问题。

@Pettis 非常感谢您的建议，请参阅我的解决方案***.com/a/64151201/7895443 只是也许它是更正确的方法（基于良好实践）。我的意思是 AJAX 等？

【参考方案1】：

我只写了几行 Jquery（感谢 Pettis Brandon 的建议）。

$('.nav__item').click(function()
  $('.nav__item').removeClass('active');
  $(this).addClass('active')
);

它从 '.nav__item' 类中删除 'active' 类，然后根据 item.url 在相应的链接上再次添加它。希望它对其他人也有帮助（谁正在使用静态页面插件）。