HarpJS: layout asset paths in nested folders

Question

In harpJS, say I have a folder structure like this:

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

In _layout.ejs I have a CSS path reference:

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

It works fine in index.ejs, however the path breaks in page-level-1.ejs and page-level-2.ejs, since it is not relative.

My current solution (which I'm not that satisfied with) is a little script at the top of _layout.ejs:

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

Then I can write the CSS path as:

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

score 3 · Accepted Answer · answered Jul 30 '15 at 13:28

3

This can be simply solved by referencing an absolute path for /styles/main.css.

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

Then no matter which child page is rendered, it will always reference /styles/main.css and not /folder-level-1/styles/main.css

answered Jul 30 '15 at 13:28

burroughs06

243
2
5

1

There's an issue, however, when deploying the compiled output to a webserver. The root is not always what you'd expect... – agibsen Jun 14 '17 at 13:50

HarpJS: layout asset paths in nested folders

1 Answers1