EJS视图片段引入技术问询：如何正确引入公共菜单组件？

看起来你正在尝试用EJS的include语法引入公共菜单组件，我来帮你梳理正确的用法和可能的排查点：

1. 确认路径是否匹配你的项目结构 #

你的公共菜单文件在/views/common/menu.ejs，要根据当前页面的位置调整include的路径：

• 如果当前页面在/views的子目录（比如/views/pages/home.ejs），你写的<%- include('../common/menu') %>（带括号是EJS v3+的推荐写法）是正确的；
• 如果当前页面就在/views根目录（比如/views/index.ejs），路径要改成<%- include('./common/menu') %>或者直接<%- include('common/menu') %>。

2. 确保EJS语法与版本兼容 #

• EJS v3及以上版本推荐使用带括号的写法：<%- include('../common/menu') %>；
• 如果你用的是旧版EJS，可能需要去掉括号：<%- include ../common/menu %>。
  你可以通过运行npm list ejs命令查看当前使用的EJS版本。

3. 完整代码示例验证 #

假设你的项目结构是这样的：

项目根目录
└── views
    ├── common
    │   └── menu.ejs
    └── pages
        └── home.ejs

在home.ejs中引入菜单的代码如下：

<!DOCTYPE html>
<html>
<head>
    <!-- 你的页面头部内容 -->
</head>
<body>
    <!-- 引入公共菜单 -->
    <%- include('../common/menu') %>
    
    <!-- 页面其他内容 -->
    <h1>欢迎来到首页</h1>
</body>
</html>

补全后的menu.ejs代码（你提供的内容有截断，这里补充完整示例）：

<div class="button" id="menu-btn"> 
  <a class="btn-open" href="#"></a> 
</div> 
<div class="overlay"> 
  <div class="wrap"> 
    <ul class="wrap-nav"> 
      <li> 
        <a href="/">Welcome Page</a> 
        <ul> 
          <li> 
            <a href="/main">Main Page</a> 
          </li> 
          <li> 
            <a href="/about">About Us</a> 
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

4. 排查引入失效的常见问题 #

• 检查Express视图引擎配置：确保你已经在项目中正确设置了EJS作为视图引擎，并且指定了views目录的路径：

const express = require('express');
const path = require('path');
const app = express();

// 设置视图引擎为EJS
app.set('view engine', 'ejs');
// 指定views目录的绝对路径
app.set('views', path.join(__dirname, 'views'));

• 检查文件名和路径的大小写：在Linux或macOS系统中，文件路径是区分大小写的，确保menu.ejs的拼写和路径完全匹配；
• 确认文件权限：确保menu.ejs文件有可读权限，没有被误删除或移动位置。

内容的提问来源于stack exchange，提问作者Nguyen Hoang Vu