Internal link inside the footer.html file

support
1

Hello,

I’m quite new to Hugo (after a couple of years on Jekyll).

I’d like to insert an internal link inside the /layouts/partials/footer.html file.
This link would lead to a page named colophon located at content/colophon/colophon.md.
All my attempts have been fruitless.
Here they are:

The first line of code I inserted was:

[colophon]{{< ref "/colophon/colophon.md" >}}

It yielded an ERROR message in the terminal:

parse failed: template: partials/footer.html:18: unexpected “<” in command

Ditto with:

[colophon]({{< relref “colophon.md” >}})

I renamed the file colophon.html and successively tried:

 <a href="colophon.html"> colophon </a>
 <a href="/colophon/colophon.html"> colophon </a>
 <a href="content/colophon/colophon.html"> colophon </a>

The link (i.e. the word colophon) would show in the footer, but clicking on it returned a 404 page not found.

I feel I’m missing something very simple and obvious.

I looked up in the Hugo documentation, to no avail.

I’d be grateful if someone would tell me what I’m doing wrong.

Thanks!

2

Hi there,

Do you mean you inserted this into the layouts/partials/footer.html file?

This line is in markdown syntax, and is meant to be used inside your markdown content file, not from a layout file.

What does your config file look like?

By default, Hugo will render a page at content/foo/bar/baz.md to yoursite.com/foo/bar/baz/index.html, unless you have uglyURL configured.

There may be other things going on in addition to these issues, but you should try in your layout/... file, to add this:

<a href="/colophon/colophon/">Link to Colophon</a>

It is generally easier to help you if you had your site code somewhere we can have a look at. Have a read about Requesting Help

1 Like
3

HI pointyfar,

I followed your advice:

There may be other things going on in addition to these issues, but you should try in your layout/... file, to add this:

<a href="/colophon/colophon/">Link to Colophon</a>

and it worked!

Still, I don’t fully understand why /colophon/colophon did the job without the .md suffix. Any suggestion for some documentation about this would be most welcome!

Thanks again!

4

That’s because you want to link to the generated page, not the input file. The content file colophon.md does not exist in the published site, only the generated files do.

Hugo takes your content (i.e. *.md files) as input, and uses the layout files to figure out how to create the published HTML files.

Think of the content files as ingredients, the layout files as the recipe, and the published website as pancakes. After Hugo has assembled the ingredients in the way it is described in the recipe, all you will see is the final pancakes; you don’t see the flour independently of the milk.

Docs ref: Content organization | Hugo

Note that there are many ways to accomplish the same thing in Hugo.

If, for example, you didn’t want to hard-code the URL to the page you want to link to (for instance if the URL is likely to change, but the content filename is not), the following should get you similar results:

<a href="{{ (site.GetPage "colophon/colophon.md").Permalink }}"> ... </a>
<a href="{{ relref . "/colophon/colophon.md" }}"> ... </a>
1 Like
5

Your analogy is so clear! Thanks!
I think I will greatly benefit from re-reading the documentation.

And for sure I will test the alternate solutions you kindly mentioned:

<a href="{{ (site.GetPage "colophon/colophon.md").Permalink }}"> ... </a>
<a href="{{ relref . "/colophon/colophon.md" }}"> ... </a>
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.