Table of contents links are incorrect when layout includes <base> element in <head> #4735

danielfdickinson · 2018-05-20T06:50:59Z

With Hugo version v0.40.3 using the {{ .TableOfContents }} variable when one has a <base href="$.Site.BaseURL"> in a <HEAD> section, and using hugo server fails with Firefox (both ESR and 5x.x

Specifically the relative references for page fragments (e.g. href="#nameofheading") get turned into http://localhost:1313/#nameofheading instead of properly being relative (.e.g. on a /section1/page1/ you should get http://localhost:1313/section1/page1/#nameofheading).

I'm not not sure if this is a browser issue or a Hugo issue, when using BaseURL (as required by the theme site, becase of issue #2575)

The text was updated successfully, but these errors were encountered:

danielfdickinson · 2018-05-28T05:18:13Z

This also affects the statically generated pages.

stale · 2018-09-25T06:08:57Z

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

jeetsukumaran · 2018-09-30T21:14:27Z

Stale or not, I can confirm that this issue exists across multiple browsers. The Table of Contents generated by Hugo is essentially broken if <base href="$.Site.BaseURL"> is used. A simple fix MIGHT be to generate full URLs in the ToC links instead of just "#anchors"?

danielfdickinson · 2018-10-09T06:40:26Z

@jeetsukumaran That seems the obvious solution...not sure how doable it is withing hugo code.

danielfdickinson · 2019-01-05T08:02:59Z

@digitalcraftsman for ToC does it still just generated #anchors even with BaseURL, and is there a way to configure it to generate the right URL when using BaseURL?

shprink · 2019-02-23T13:08:23Z

Since BaseURL is required for Open Graph or Twitter Cards urls, {{ .TableOfContents }} is therefore not usable at all.

EDIT:

I came up with a JS hack that you need to insert into the single.html template.

  <script>
    document.querySelectorAll('#TableOfContents a').forEach((node) => node.setAttribute('href', {{ .Permalink }} + node.getAttribute('href')))
  </script>

siegerts · 2019-03-04T19:08:32Z

Depending on your use case, I was able to make similar adjustments in the template using:

{{ replace .TableOfContents `href="#` (printf `href="%s#` .Permalink) | safeHTML }}

Hope that this helps.

bep · 2019-03-04T19:41:58Z

This issue has been discussed before. I will redo the ToC integration in the not so distant future and will have this in mind.

Curious: Why do you need base href?

danielfdickinson · 2019-05-01T01:28:17Z

base href is required by the Hugo Themes site ... let me scare up the link....

danielfdickinson · 2019-05-01T01:30:02Z

It's mentioned in this section https://github.com/gohugoio/hugoThemes#adding-a-theme-to-the-list

stale · 2019-08-29T01:48:24Z

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

thombergs · 2022-01-12T10:31:36Z

The table of content outputs anchor links like "#section", whether you run hugo with the --baseUrl parameter or not. What changes when you use the --baseUrl parameter, however, is that Hugo adds a <base href="<BASE_URL>"> tag to the page. This tag directs browsers to prefix all relative links with this base URL, and this includes the anchor links.

This means that when you use the --baseUrl parameter, all anchor links break!

To fix this in the table of content, I came up with this workaround:

{{ .TableOfContents | replaceRE `href="#(.*)"` (printf `href="%s#%s"` .Page.RelPermalink "$1") | safeHTML }}

This prefixes the anchor links with the relative link of the current page. When the browser adds the base URL prefix to that, everything will work fine.

jmooring · 2022-01-12T15:19:57Z

Some themes include a <base> element in <head> in an attempt to handle sites served from a subdirectory (baseURL = 'https://example.org/my-site/'). Now that render hooks can produce portable links and images, including a <base> element is the not the optimal approach.

However, I believe that the table of contents links should work either way, and have re-opened this issue. We recently fixed a similar problem with the pagination template.

@thombergs Hugo does not insert a <base> element. That element is present in one or more of your layouts.

thombergs · 2022-01-12T19:17:20Z

@jmooring right, thanks for clearing that up. I didn't check if the <base> tag comes from the theme or from Hugo itself.

Anyway, if Hugo's table of contents would render /relative_path#anchor instead of just #anchor, that would make the table of content more robust.

bep · 2022-01-12T19:33:57Z

Anyway, if Hugo's table of contents would render /relative_path#anchor instead of just #anchor, that would make the table of content more robust.

I think it would need to be relative_path#anchor -- but even so, there are several known issues with using the "base" element with static site generators, so I would recommend not using it. If we implemented the above fix, then the ToC will only work on that particular page which may or may not be OK.

We have another issue that would allow people to render the ToC items as they please -- I'm closing this in favour of #5087

github-actions · 2022-01-20T01:57:05Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

danielfdickinson changed the title ~~ToC doesn't work with BaseURL with hugo server~~ ToC doesn't work with BaseURL May 28, 2018

stale bot added the Stale label Sep 25, 2018

stale bot removed the Stale label Oct 9, 2018

bep changed the title ~~ToC doesn't work with BaseURL~~ ToC doesn't work with BaseURL and base href Mar 4, 2019

stale bot added the Stale label Aug 29, 2019

stale bot closed this as completed Sep 28, 2019

jmooring changed the title ~~ToC doesn't work with BaseURL and base href~~ Table of contents links are incorrect when layout includes <base> element in <head> Jan 12, 2022

jmooring reopened this Jan 12, 2022

jmooring added Keep and removed Stale labels Jan 12, 2022

bep closed this as completed Jan 12, 2022

github-actions bot added the Outdated label Jan 20, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jan 20, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table of contents links are incorrect when layout includes <base> element in <head> #4735

Table of contents links are incorrect when layout includes <base> element in <head> #4735

danielfdickinson commented May 20, 2018 •

edited

Loading

danielfdickinson commented May 28, 2018

stale bot commented Sep 25, 2018

jeetsukumaran commented Sep 30, 2018

danielfdickinson commented Oct 9, 2018

danielfdickinson commented Jan 5, 2019

shprink commented Feb 23, 2019 •

edited

Loading

siegerts commented Mar 4, 2019

bep commented Mar 4, 2019

danielfdickinson commented May 1, 2019

danielfdickinson commented May 1, 2019

stale bot commented Aug 29, 2019

thombergs commented Jan 12, 2022

jmooring commented Jan 12, 2022

thombergs commented Jan 12, 2022

bep commented Jan 12, 2022

github-actions bot commented Jan 20, 2022

Table of contents links are incorrect when layout includes <base> element in <head> #4735

Table of contents links are incorrect when layout includes <base> element in <head> #4735

Comments

danielfdickinson commented May 20, 2018 • edited Loading

danielfdickinson commented May 28, 2018

stale bot commented Sep 25, 2018

jeetsukumaran commented Sep 30, 2018

danielfdickinson commented Oct 9, 2018

danielfdickinson commented Jan 5, 2019

shprink commented Feb 23, 2019 • edited Loading

siegerts commented Mar 4, 2019

bep commented Mar 4, 2019

danielfdickinson commented May 1, 2019

danielfdickinson commented May 1, 2019

stale bot commented Aug 29, 2019

thombergs commented Jan 12, 2022

jmooring commented Jan 12, 2022

thombergs commented Jan 12, 2022

bep commented Jan 12, 2022

github-actions bot commented Jan 20, 2022

danielfdickinson commented May 20, 2018 •

edited

Loading

shprink commented Feb 23, 2019 •

edited

Loading