Search code examples
hugo

How to make cross page reference work in Hugo?


I have a hugo project setup based on this theme and have the below project structure.

content
    learning
        aws
            index.md
            how-we-use
                index.md

Inside the aws > index.md file, I want to have a link which opens up how-we-use > index.md. I tried below (and a lot other things), but every time I click it, it give me 404.

Tried below in aws > index.md.

- [How we use AWS](./how-we-use)
- [How we use AWS](/how-we-use)
- [How we use AWS](/learning/aws/how-we-use)

Below is my how-we-use > index.md

+++
title = "How we use AWS"
aliases = "/learning/aws/how-we-use/"
+++

Hi There

Also, tried changing this alias to /how-we-use/ and /how-we-use but still doesn't work.

config.toml

baseurl = "https://welcome-page" 
title = "welcome"
theme = "hugo-universal-theme"
themesDir = "./themes"
languageCode = "en-us"
uglyURLs = false
# Site language. Available translations in the theme's `/i18n` directory.
defaultContentLanguage = "en"

# Define the number of posts per page
paginate = 10

# not pluralize title pages by default
pluralizelisttitles = false

[[menu.main]]
    name       = "Learnings"
    identifier = "menu.learnings"
    url        = "/img/learnings.png"
    weight     = 4

[[menu.main]]
    name       = "Learnings"
    identifier = "section.learnings"
    url        = ""
    weight     = 1
    parent     = "menu.learnings"
    post       = 1


[[menu.main]]
    name       = "AWS"
    identifier = "learning.aws"
    url        = "/aws"
    weight     = 1
    parent     = "section.learnings"

How to get this cross reference to work ?

p.s - if I change the name of the files to _index.md, then no content is displayed and I just see the title getting displayed but nothing else.


Solution

  • md link format []() could be used with full link [](https://...) or with anchor [](#anchor), but you need relative link and hugo has another syntax for it: []({{< ref "" >}})

    According to Hugo documentation index.md can be reference either by its path or by its containing folder without the ending /. _index.md can be referenced only by its containing folder.

    So try it:

    • [How we use AWS]({{< ref "/how-we-use" >}})

    It works with my ananke theme. But you could try also:

    • [How we use AWS]({{< ref "/how-we-use/index" >}})
    • [How we use AWS]({{< ref "/learning/aws/how-we-use" >}})
    • [How we use AWS]({{< ref "/learning/aws/how-we-use/index" >}})