Best way to link to a page relative the site's baseurl

support
1

Hello!

I am trying to link to a page on my website. The problem is that I do not want to hard-code the URL, is there a way to refer to the site’s base URL and then add the path to the page? for example $baseurl/page.

I know that this is a very basic thing but I am having a hard time navigating through the docs, can someone help me with this?

Also, I want to do this in the content of the page itself, I use AsciiDoc to make my pages.

Thanks in Advance!

2

If only the base url changes you can link your page without thinking too much about corner cases as follows:

{{ "page" | absURL }}

Alternatively, if your page is related to a content file, you can use .GetPage and the .Permalink attribute of a page to link it as well:

{{ with .Site.GetPage "page" "section/page.md" }}{{ .Permalink }}{{ end }}
3

I am not sure if I can use that in a markdown file. It isn’t working in my .adoc documents, can you give me a simple example of a link to the baseurl?

4

I must have skipped that sentence while reading your question.

That’s because your content isn’t handled like a template. However, you can create a shortcode for this purpose. Shortcodes are similar to templates and can be called from within your content files.

Create a file called linkpage.html at layouts/shortcodes/ and insert the code below:

<a href="{{ .Get "page" | absURL }}">{{ .Get "title" }}</href>

Now, you should be able to call the page in your content file as follows:

{{< linkpage page="/page" title="My awesome page" >}}

The shortcode will create an HTML link. The page parameter is used to pass the path to the page you want to link, title is the link text.

1 Like
5

Don’t know when this became available in Hugo, but for adoc files I just put this in the content file:

link:{{< ref "_somefile_.adoc" >}}[_link text_]

6

@jmalin Is that link relative to the baseurl of the website? My original question was about having a way to reference the website’s root, I know that it is possible to have URLs which are relative to the current page :slight_smile:

8

That is asciidoctor, using the ref built-in shortcode to find a single page in content based on its name. Won’t work for anything else. Syntax for Markdown is different, of course. Trying to find a file in an arbitrary directory based on the website base URL is gnarly.

I did use a shortcode to refer to images in the /static/images site directory, which is not standard. Hugo has the concept of “page bundles” that I can refer to without specifying a path. Nice if you have images that only belong to the content of a particular page or lowest-level branch, but what if you use an image in multiple places?

My shortcode is image.html (listed in the following snippet). Add attributes as needed. If you want, you can put in a <figcaption> tag with <figcaption>{{ .Inner }}</figcaption> at the desired location. I based this shortcode on the built-in {{< figure >}} shortcode described in the Hugo documentation in the topic
Use Hugo’s Built-in Shortcodes in the section figure:

<figure>
    <img src="{{ .Site.BaseURL }}{{ .Site.Params.imageDir }}/{{ .Get "filename" }}"
{{ with .Get "alt"}}
    alt="{{.}}"
{{ end }}
{{ with .Get "width"}}
    width="{{.}}"
{{ end }}
{{ with .Get "height"}}
        height="{{.}}"
{{ end }}/>
</figure>
9

Except this stopped working for me. Don’t know why!

10

Update 2019-01-16:
Shortcode for linking to a file within the /content directory, just using its filename:

adoc_ref.html:

{{ if .IsNamedParams }}
    <a href="{{- ref . (.Get "filename") -}}">{{- .Inner -}}</a>
{{else}}
    <a href="{{- ref . (.Get 0) -}}">{{- .Inner -}}</a>
{{end}}
11

I don’t get to post the same thing twice, but since this is a Google drop point: Best way to reference an image in `/static` directory when baseURL could contain a sub-directory?