Question

我想在每个导航链接上呈现一个“当前”类，具体取决于我在layout.ejs模板中的哪个页面。

目前，我的快递控制器索引如下所示：

// About
exports.about = function(req, res) {
    res.render('content/about.ejs', {
        title: 'About'
    });
};

在我的layout.ejs中，我有以下内容，我想动态呈现。

<ul class="nav" id="nav">
    <li><a href="/">Home</a></li>
    <li class="current"><a href="/about">About</a></li>
    <li><a href="/">Contact</a></li>
</ul>

有关如何实现这一目标的任何想法？

Answer 1

您可以在page_name: 'about'数据中加入res.render，然后在模板中加入以下内容：

<li <% if (page_name === 'about') { %>class="current" <% } %> ><a href="/about">About</a></li>

我没有测试语法，但这就是要点。

Answer 2

您可以像这样将变量传递到页面，并在class属性内使用条件。

<a
    class="nav-link <%= page_name === 'home' && 'active' %>"
    href="#"
>
    Home
</a>

Answer 3

@thataustin的答案是正确的！但是我丢失了默认类，所以我找到了一种在默认类不处于活动状态时保留默认类的方法。希望有一天能对某人有所帮助

<li            
    <% if (page_name === 'about') { %>
        class="nav-item current"
        <%} else { %>
        class="nav-item"
        <% } %> >
    <a href="/about">About</a>
</li>

Answer 4

首先，我在渲染主 {navSelectTitle : "your-required-page-to-be-selected"} 中的每个页面时传递了一个对象 app.js。然后，您可以在 ejs 模板中创建一个列表，如下所示：

<% const navItems = ["home", "articles", "videos", "audios"] %>

然后，您可以遍历列表并添加一个类以使链接显示为选中状态。（在这里，我使用类 class="selected" 使链接显示为选中状态）

此外，由于我需要主页的 href 为 href="/" 而不是 <a href="/home"，因此我为“home”的情况创建了一个单独的 if 语句以适应这种特殊情况。< /p>

<% navItems.forEach(navlink => { %>
    <% if(navlink == navSelectTitle) { %>
        <% if (navlink == "home") {%>
            <li class="links selected"><a href="/"><%= navlink %></a></li>
        <% } else {%>
            <li class="links selected"><a href="/<%= navlink %>"><%= navlink %></a></li>
        <% } %>
                
    <% } else { %>
        <% if (navlink == "home") {%>
            <li class="links"><a href="/"><%= navlink %></a></li>
        <% } else {%>
            <li class="links"><a href="/<%= navlink %>"><%= navlink %></a></li>
        <% } %>
    <% } %>
<% }) %>

代码逻辑如下：

遍历列表。
如果列表项等于您在呈现页面时传递的对象值，则 li 标记将具有 class="selected"。如果没有，else 语句将创建一个没有所选类的普通链接。
为了适应主页链接应该有 href="/" 的情况，在上述情况的 if 语句中嵌套了一个 if-else 语句。

注意：在导航栏上使用 partial 可以帮助干燥您的代码并使这个逻辑变得有点方便。

Node.js，Express，EJS - 导航中当前页面上的活动类

4 个答案: