3

I'm making a website with Metalsmith that is templated with Handlebars.

I made an archive page named /articles/index.html, which takes all the articles in /articles/ and lists them chronologically, but when I follow a link in the archive page it takes me to /articles/articles/example-post.html instead of /articles/example-post.html. How do I make it take me to the absolute version of the URL instead a relative version?

The Handlebars script I used to generate the archive is:

{{#if archive}}
  <ul>
    {{#each collections.article}}
    <li><a href={{path}}>{{date}} - {{title}} {{description}}</a></li>
    {{/each}}
  </ul>
{{/if}}

The {{path}} metadata is generated automatically by Metalsmith. When I call console.log on my generated files, I get an output like:

'/articles/example-post/index.html':
  { title: 'Example Post',
  ...
  path: 'articles/example-post'
  ...
  }

I have an almost identical setup on my homepage that works exactly like it should. Any idea how to get this running in sub-folders?

Edit: Ok, I should be clear: I realize that {{path}} is a relative link, rather than an absolute one. My question should be: "How do I get this to work correctly when I only have {{path}} to work with and it's relative? Is there another variable I should be able to access that would produce the correct link or is there a way to edit {{path}} so that it points to the correct files? As far as I've been able to find, there's no way to edit a variable in Handlebars so I can't append a '/' onto my link or strip the leading 'article/'.

Peter
  • 33
  • 6
  • 1
    Handlebars is not modifying your link, your link is not correct, handlebars is just taking the value it gets and puts it in the href of the a tag. It looks like maybe it should be /articles/example-post not articles/example-post – Adam H Jul 24 '18 at 18:23
  • When I use the script on different pages (e.g. /, /articles/, /contact/) the links point to different places (e.g. /articles/example-post.html, /articles/articles/example-post.html, /contact/articles/example-post.html), but only ever to the correct link when I use it on the homepage. Handlebars may not be changing the {{path}} variable directly, but it's using it differently in different contexts. – Peter Jul 24 '18 at 18:38
  • 1
    https://www.w3schools.com/htmL/html_filepaths.asp – Adam H Jul 24 '18 at 18:43
  • Sorry, it didn't click with me what you were saying. You're right that it was just a relative link problem, I just couldn't see that while simultaneously trying to figure out how to fix it, even though I knew that was the case in a sense. Thanks for your input. Sorry if I seemed dense. – Peter Jul 24 '18 at 20:20
  • don't worry about it. We all fall victim to that fallacy. – Adam H Jul 24 '18 at 20:31

2 Answers2

3

Generally, it is better to use relative url instead of absolute url, so your app is not bound to that application env.

But if you need to use absolute, you can use /path/to/somewhere instead of path/to/somewhere

The reason it is working for your homepage BUT not your other pages is that when you are at the homepage, there is no difference between your relative path and absolute path. So /location/path and location/path are the same when you are at the root.

Here is another option to put a / to the front:

<a href="/posts/{{../permalink}}#{{id}}">{{title}}</a>

leogoesger
  • 3,476
  • 5
  • 33
  • 71
  • I guess my problem is that I can only grab the link relative to the root with my current configuration as the only metadata related to each file's path is the path variable. And, as-far-as-I-know, Handlebars doesn't have any inbuilt methods that allow me to edit my variables, so I can't just append a '/' onto path and make it absolute or strip off the leading 'article/'. Do I need to make a helper to do what I want, or is there something obvious I'm missing? Pardon my ignorance. – Peter Jul 24 '18 at 19:05
  • I do not use MetalSmith, so I am not sure why you cannot just change your data to include `/` in the front. If that is a problem, you can always append one yourself in your tag. So it would become something like

    `{{title}}

    `     – leogoesger Jul 24 '18 at 19:53
  • Thanks for responding. I just fixed my problem with a metalsmith plugin that did something much like that. – Peter Jul 24 '18 at 19:58
  • You are welcome! Good luck! Could you accept the answer so i can get the mad points. – leogoesger Jul 24 '18 at 19:59
0

Ultimately, I ended up using metalsmith-paths in my build which adds an array of paths to file's metadata including an "href" path, which is basically what I was looking for.

Ultimately, my script ended up looking like:

{{#if archive}}
  <ul>
    {{#each collections.article}}
    <li><a href={{paths.href}}>{{date}} - {{title}} - {{description}}</a></li>
    {{/each}}
  </ul>
{{/if}}

So, yeah, the links I was using were just wrong.

If you happen to need to "fix" a link in Handlebars directly like I thought I might, I'm still not sure what to tell you, but it probably involves helpers if it's possible.

Peter
  • 33
  • 6