如何在.ejs模板的对象数组中渲染<a>标签及可跳转URL链接

1. 跳转链接配置 #

你现有的链接写法逻辑已经正确，仅需补充安全属性即可正常使用，调整后代码如下：

<a href="<%- powerUpList[i].url %>" target="_blank" rel="noopener noreferrer">了解更多</a>

• 用<%-做非转义输出：避免URL中的特殊字符被EJS自动转义，导致跳转地址失效
• 新增rel="noopener noreferrer"：新窗口打开外部链接的标准安全配置，可避免跨站安全风险
• 若需要保留英文显示，直接把链接文字换回Learn more..即可

2. 手风琴无法关闭修复 #

该问题是Bootstrap Collapse组件的属性配置错误导致，修改核心点如下：

• 为每个折叠面板设置唯一ID，使用ID作为折叠目标，避免类选择器匹配异常
• 修正触发元素的href、aria-controls、aria-expanded属性配置
• 按需设置默认展开项，不要给所有折叠面板加show类

修改后的完整ejs代码： #

<div class="col-md-9" id="root">
  <div role="tablist" id="accordion-1">
    <%for (var i = 0; i < powerUpList.length; i++) { %>
      <div class="card">
        <div class="card-header" role="tab">
          <!-- 修正折叠触发标签的属性 -->
          <a 
            data-toggle="collapse" 
            aria-expanded="<%= i === 0 ? 'true' : 'false' %>" 
            aria-controls="collapse-<%= i+1 %>" 
            href="#collapse-<%= i+1 %>"
          >
            <%= powerUpList[i].name%>
          </a>

          <%if (powerUpList[i].status == 0) { %>
              <a class="live-lable status-live" >
                Live 
              </a>
            <%}else if(powerUpList[i].status == 1){-%>
              <a class="live-lable status-comingsoon" >
                Coming soon 
              </a> 
            <%}else if(powerUpList[i].status == 2){-%>
              <a class="live-lable status-beta" >
                In-Beta 
              </a> 
            <%}-%>
        </div>
        <!-- 给折叠面板加唯一ID，仅第一个默认展开 -->
        <div 
          id="collapse-<%= i+1 %>"
          class="collapse <%= i === 0 ? 'show' : '' %> item-<%= i+1 %>" 
          role="tabpanel" 
          data-parent="#accordion-1"
        >
            <div class="card-body">
                <p class="card-text" ><%= powerUpList[i].description%></p>
                <!-- 修正后的跳转链接 -->
                <a href="<%- powerUpList[i].url%>" target="_blank" rel="noopener noreferrer">了解更多</a> 
            </div>
        </div>
      </div>
    <%}-%>
  </div>
</div>

内容的提问来源于stack exchange，提问作者deepak j