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

时间:2023-01-06
本文介绍了Node.js、Express、EJS - 导航中当前页面上的活动类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我想根据我在 layout.ejs 模板中的页面在每个导航链接上呈现一个当前"类.

I'd like to render a 'current' class on each of my navigation links depending on which page I'm on in my layout.ejs template.

目前,我的快速控制器索引如下所示:

Currently, my express controller index looks like this:

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

在我的 layout.ejs 中,我希望动态呈现以下内容.

And in my layout.ejs I have the following, which I'd like be rendered dynamically.

<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>

关于如何实现这一点的任何想法?

Any ideas of how to achieve this?

推荐答案

你可以在 res.render 数据中包含一个 page_name: 'about' 然后在模板之类的:

You could include a page_name: 'about' in the res.render data and then in the template something like:

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

我没有测试语法,但这就是要点.

I didn't test the syntax, but that's the gist.

这篇关于Node.js、Express、EJS - 导航中当前页面上的活动类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

上一篇:React Navigation 切换背景颜色和样式 StackNavigator 下一篇:如何创建一个水平菜单,每个项目之间的宽度和间距相等?

相关文章

最新文章