relative-path - HarpJS : layout asset paths in nested folders

Question

在 harpJS 中，假设我有一个像这样的文件夹结构:

mysite/
  - _layout.ejs
  - index.ejs
  + styles/
      - main.css
  + folder-level-1/
      - page-level-1.ejs
      + folder-level-2/
          - page-level-2.ejs

在_layout.ejs中我有一个CSS路径引用:

 <!-- In _layout.ejs -->
 <link href="styles/main.css" rel="stylesheet">

它在 index.ejs 中工作正常，但是路径在 page-level-1.ejs 和 page-level-2.ejs 中中断code>，因为它不是相对的。

我当前的解决方案(我对此不太满意)是 _layout.ejs 顶部的一个小脚本:

<!-- In _layout.ejs -->
<% var pathPrefix = "";
   for (var i = 0; i < current.path.length; i++) {
      pathPrefix += "../";
   };
%>

然后我可以将 CSS 路径写为:

 <!-- In _layout.ejs -->
 <link href="<%- pathPrefix %>styles/main.css" rel="stylesheet">

I feel this solution to be a bit hacky. Is there a better way?

Answer 1

这可以通过引用/styles/main.css 的绝对路径来简单解决。

<!-- In _layout.ejs -->
<link href="/styles/main.css" rel="stylesheet">

那么无论渲染哪个子页面，它总是引用 /styles/main.css 而不是 /folder-level-1/styles/main.css