Question

我有一个侧边栏ejs

<div class="col-3 flex-nowrap">
<nav id="sidebar">
    <!-- Sidebar Header -->
    <div class="sidebar-header text-center">
        <h1 id="notification">Notification</h1>
    </div>
    <!-- Sidebar Links -->
    <ul class="nav-list">
        <li class="active"><a href="#">Edit Profile</a></li>
        <li><a href="#">Privacy & Security</a></li>
        <li><a href="#">Payment Setting</a></li>
        <li><a href="#">Transaction History</a></li>
        <li><a href="#">Trust & Verfication</a></li>
        <li><a href="#">My Education Blog</a></li>
        <li><a href="#">Promotions</a></li>
    </ul>
    <ul id="cancel"><a><strong>Cancel Account</strong></a></ul>
</nav>

在我的notifcation.ejs中，我将这种方式包括在内

<%-include("./partials/sidebar.ejs")%>

由于我想重用我的侧边栏部分，我希望该侧边栏中的标题在每个页面上都是不同的。

例如：在notification.ejs页面中，它已设置为在该侧栏标题中有通知。但是在promotion.ejs中，我希望标题代替促销。

如何在侧边栏的每个链接中指定要使用哪个侧边栏标题？

Answer 1

您要归档的内容是将变量传递到partial中。以下是documentation的链接，在包含部分，您可以找到有关此案例的信息。

例如，您的部分可能看起来像

<%-include("./partials/sidebar.ejs", { title: title })%>

当您使用partial时，可以使用变量

定义它

  .flex-nav li:hover::after {
    content:'';
    position:absolute;
    width: 100%;
    height: 0;    
    left:0;
    bottom: 10px; 
    background: none;
    color: #2d2d2d;
    text-shadow: none 0 1px;
    font-weight: 500;
    border-bottom: 2px solid #1f6fa4; 
    transition: border-bottom .5s ease-out;
}

.nav-item {
    margin-right: 5px;
    font-size: 14px;
    text-transform: uppercase;
    color: #2d2d2d;
    padding: 0px;
    /* height: 40px; */
    line-height: 40px;
    font-weight: 500;
    text-shadow: none;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    padding-right: 18px;
    padding-left: 18px;
}

import React, { Component, Fragment} from 'react';
import { NavLink } from 'react-router-dom';
import './navbar.css';

const Navbar = props => {
  return (
      <Fragment>
        <header> 
            <div className="logo-image">
                <img className="logo-img" src={require("../images/logo.jpg")} alt="Mountain View" />
            </div>
            <nav className="flex-nav">
                <ul>
                    <li><NavLink className="nav-item" to="/questions/new">SERVICES</NavLink></li>
                    <li><NavLink className="nav-item" to="/questions">COMPANY</NavLink></li>
                    <li><NavLink className="nav-item" to="/questions/new">STUFF</NavLink></li>
                    <li><NavLink className="nav-item" to="/questions/new">THINGS</NavLink></li>
                    <li><NavLink className="nav-item" to="/questions/new">ITEMS</NavLink></li>
                </ul>              
            </nav>
        </header>
    </Fragment>
  );
}

如何正确设置Ejs Partials

1 个答案: