如何获取菜单的当前链接（11ty / ejs）？

Posted 2023-03-06

【中文标题】如何获取菜单的当前链接（11ty / ejs）？

【英文标题】：How to get the current link for a menu (11ty / ejs)?

【发布时间】：2021-09-03 04:12:47

【问题描述】：

我有一个 menu.json 文件，其中包含有关页面及其链接的信息：

    "Home": "./",
    "Services": "./services.html",
    "About": "./about.html",
    "Portfolio": "./portfolio.html",
    "Team": "./team.html",
    "Contact": "./contact.html"

我有部分 header.ejs，将包含在页面中：

<ul
  class="main-menu"
  >
    <% for (var link in menu)  %>
      <li class="main-menu__item">
         <a
           class="main-menu__link"
           href="<%= menu[link] %>"
           ><%= link %>
         </a>
       </li>
   <%  %>
</ul>

我想为当前页面链接添加一个类。我该怎么办？

【参考方案1】：

在Eleventy Supplied Data 的文档中，他们提到了包含page.url 的页面对象。如果您将其与链接值进行比较，您可以识别您何时在页面上。

可能是这样的：

<ul
  class="main-menu"
  >
    <% for (var link in menu)  %>
      <li class="main-menu__item">
         <a
           class="main-menu__link
<% if(page.url === link)  %>
currentpage
<%  %>
"
           href="<%= menu[link] %>"
           ><%= link %>
         </a>
       </li>
   <%  %>
</ul>