Alias#redirect to anchors

support
1

Hello everyone

This is my first posting here. I’m very new to Hugo and not exactly brilliant when it comes to the technical side, so please be gentle :slight_smile:

Before my question, I want to express my gratitude both to @spf13 for creating Hugo and to this whole community for giving so freely of their time and knowledge. I’ve learned a lot just lurking here.

Thank you all.

So onto my question. I’m migrating an existing site to Hugo and as part of the migration I’m tidying up a few things. Most of the pages that are being culled can be easily redirected through an alias in the respective destination page’s front matter.

However, a few pages are being repurposed as sections within larger pages. So for instance:

http://example.com/news

will now be at a section (id=“news”) on another page, and will be found at:

http://example.com/recent#news

Clearly I can redirect to the /recent page. My question is: is it possible–and if so, how–to redirect to an anchor on a page (in this example, the news anchor).

Very many thanks in advance for any help.

Simon

2

Check using ref and relref examples in the Cross-References documentation page.

Essentially you can do things like:

{{< ref "recent.md#news" >}}

In recent.md you can add your own anchor for news in a heading. Hugo also generates anchors.

### news {#news}

3

Thanks for getting back to me @parsiya.

I don’t understand how your answer helps, I’m afraid. You’re telling me how to link–I’m trying to build 301 auto-redirects.

Am I missing something? Are you suggesting that I can put these links somewhere to redirect retired pages to the anchors?

Thanks again for your help.

4

Ah, you are absolutely right. My apologies, I had not understood your question completely.

Have you looked at the meta-tag refresh? Technically you should be able to generate pages with the meta tag (you need to have a different partial header or use a new type for these pages) and then use the ref function to link to the new page#anchor.

5

Hey @parsiya

Thank you! That’s got me on the right track.

What I’ve done is follow the system for aliases that Hugo uses. So for the old URLs that I want to be redirected, I’ve put a corresponding folder in the static folder. Inside the “old URL” folders (in my earlier example static/news) I’ve created an index.html file with the refresh tag that redirects to the new page#anchor link (in this example it refreshes to http://example.com/recent#news).

It works like a charm.

Thanks so much for your help.

All the best

Simon

6

@spc are you creating separate folders and index.html files manually within static? Your best bet is to just add the appropriate alias in the front matter of the new content piece. If I understand what you are saying correctly, you don’t have to worry about the hash in your alias since the browser will just go to that page regardless and stops routing up to that symbol in the URL. Have you tried the following?

<!--content/articles/my-new-page.md-->
---
title: My New Page and URL 
date: 2016-02-23
aliases: 
   - /my-old-url
   -/another-old-address#anchor
---

Then Hugo will do the work for you by redirecting the two above urls to yoursite.com/articles/my-new-page/. Hope that helps.

7

Thanks for your thoughts @rdwatters, but I don’t get how this helps me.

I’m trying to redirect a url TO an anchor on a separate page. Unless I’m not understanding, your suggestion does the opposite (linking an anchor to a page).

Am I missing something in what you’re saying?

8

I was also looking for this feature. We’re combining several old pages to a single one and we’d like to add anchors to redirect the user to the right location. It would be cool to have a way to pass a hash along to the redirected page…

9

I would love to have a built-in solution to this problem. So far the best I have managed is to add an “aliasAnchor” parameter to the frontmatter:

aliases:
  - /index.htm_UserList.htm
aliasAnchor: "add-new-users"

Then use a custom alias.html template to append the anchor to the permalink:

 <!DOCTYPE html>
    <html>
      <head>
        <title>{{ .Permalink }}</title>
        <link rel="canonical" href="{{ .Permalink }}{{ with .Page.Params.aliasAnchor }}#{{.}}{{end}}"/>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="refresh" content="0; url={{ .Permalink }}{{ with .Page.Params.aliasAnchor }}#{{.}}{{end}}" />
      </head>
    </html>

The obvious downside is it only works for one alias. So if you have a list it would be ideal if they could each have their own fragment eg:

aliases:
  - /index.htm_UserList.htm#add-new-users
  - /index.htm_EditUser.htm#edit-existing-users

with the fragment being stripped off to produce the filename and appended to the end of the permalink

1 Like
10

While @peterhartman’s workaround is very useful, I would also like to see this properly implemented. Therefore I created an issue here: https://github.com/gohugoio/hugo/issues/7126.