Problem: TOC and link path

Hello,

I have the following problem: The Table of Content is created correctly in a blog article, but the link path looks like this:

localhost:1313/#example-header

By clicking on the TOC link, the article is left and the home page is called up. The creation of the TOC is generated by a shortcode. The shortcode just consists of the following code: {{.Page.TableOfContents}}

The project is multilingual. The entire link works fine, but the TOC link does not include the article name in the link. Can someone give me a hint - what am I doing wrong?

hugo v0.82.0 + extended darwin / amd64

Do you have a heading render hook (layouts/_default/_markup/render-heading.html)?
What does your site configuration look like?

It would be really helpful if you could share a link to the public repository for your project.

Thank you for your reply.

Do you have a heading render hook (layouts/_default/_markup/render-heading.html)?

Yes, I used the example Configure Markup | Hugo.

What does your site configuration look like?

baseURL = "https://tekki-tipps.de/"
languageCode = "de-DE"
title = "tekki-tipps.de"
theme = "tekki"
enableRobotsTXT = "true"
relativeURLs = "true"
DefaultContentLanguage = "de"

[languages]
  [languages.de]
    languageName = "Deutsch"
    weight = 1
    description = "in deutsch"
    [[languages.de.menu.main]]
      url    = "/leer/"
      name   = "Tags"
      weight = 1
    [[languages.de.menu.main]]
      url    = "/datenschutz/"
      name   = "Datenschutz"
      weight = 10
    [[languages.de.menu.main]]
      url    = "/impressum/"
      name   = "Impressum"
      weight = 20
  [languages.en]
    languageName = "English"
    weight = 2
    description = "in english"

    [[languages.en.menu.main]]
      url    = "/leer/"
      name   = "Tags"
      weight = 1
    [[languages.en.menu.main]]
      url    = "/data-protection/"
      name   = "Data Protection"
      weight = 10
    [[languages.en.menu.main]]
      url    = "/imprint/"
      name   = "Imprint"
      weight = 20

[params]
  homeTitle = "Hugo, Webdesign, CSS/SCSS, SEO, Tools"

[taxonomies]
  tag = "tags"

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
  [markup.highlight]
    noClasses = false
  [markup.tableOfContents]
    endLevel = 3
    ordered = false
    startLevel = 2

[permalinks]
  blog = "/:slug/"

If I want help, I have to provide the basis for it. But I don’t want to make my entire source publicly available. I have no problem sending you my source personally. Would that be a possibility?

The heading render hook example in the documentation does not produce anything special. It simply demonstrates how to customize a heading.

Please disable the heading render hook by renaming:

layouts/_default/_markup/render-heading.html

To:

layouts/_default/_markup/xxx-render-heading.html

Then test again. That will remove one variable from the equation.

Yes, please do.

Thank you for sharing your repository (privately). That made troubleshooting much easier.

The TOC items are generated correctly. For example:

<li><a href="#svg-icon-per-font-schnell-einbinden">SVG-Icon per Font schnell einbinden</a></li>

The problem is in themes/tekki/layouts/partials/head.html.

<base href="{{ .Site.BaseURL }}">

This is causing the browser to go to:

http://localhost:1313/#svg-icon-per-font-schnell-einbinden

Remove that line from your template.

Other comments:

  1. Do not quote boolean (true/false) values when writing TOML. For example, in your config.toml file do this:

    enableRobotsTXT = true
    

    Not this:

    enableRobotsTXT = "true"
    
  2. Your heading render hook is incorrect.

    <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}">mm¶</a></h{{ .Level }}>
    

    I know that you started with the example in the documentation; it is wrong. I will fix the documentation. Unless you need to alter the heading, delete the render hook file. If you do need to alter the heading, use this as a starting point:

    <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
    

    There’s no need to include an <a> element. See https://stackoverflow.com/a/484781.

Wow, thank you very much for your private commitment. That helps me alot.

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