Obsidian style Include in markdown render hook working but without TOC

support
1

Currently have an Obsidian style markdown file inclusion / include working with Hugo Markdown Render Hooks. This allows the including of repeatable content using markdown syntax instead of a shortcode such as ![Include File](/path/file.md)

Although it is working in tests, it does not include the headings in the table of contents, TOC. Is there a way to get the rendered markdown from the render hook to be in the page’s table of contents?

Include code adapted from the Hugo Portable links example, and this Hugo shortcode include example by @iaeiou

Thank you in advance for any assistance or guidance.


{{- $includeUrl := urls.Parse .Destination -}}
{{- if strings.HasSuffix $includeUrl.Path ".md" -}}
{{ .Destination | readFile | replaceRE "^---[\\s\\S]+?---" "" | markdownify }}
{{- end -}}

{{- if not (strings.HasSuffix $includeUrl.Path ".md") -}}
{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- if and (not $img) .Page.File -}}
{{ $path := path.Join .Page.File.Dir .Destination }}
{{- $img = resources.Get $path -}}
{{- end -}}
{{- with $img -}}
{{- $large := $img.Resize "1200x" -}}
{{ $medium := $large.Fill "726x402" -}}
{{ $small := $medium.Fill "458x254" -}}



<figure class="image-caption">
  <img alt="{{ $.Text }}" srcset="
        {{ $small.RelPermalink }} 458w,
        {{ $medium.RelPermalink }} 726w,
        {{ $large.RelPermalink }} 1200w" sizes="50vw" src="{{ $small.RelPermalink }}" />
  <figcaption>{{ with $.Title | safeHTML }}{{ . }}{{ end }}</figcaption>
</figure>
{{- else -}}
<img src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" />{{- end -}}{{- end -}}
2

Attempted to use the parsed HTML TOC from this Veriphor Article, but it does not render on my test page with the include of this content that does show the TOC since it is regular markdown without any includes.

The page contents include fine, but the TOC still does not render.

3

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

1 Like
4

My mistake, link to repository.

This page has an included file. It renders the Markdown but does not have a toc, will continue to try to get the your parse-toc to work.

5

There are several problems with your site.

First, I’m not sure how you did this, but themes/basicTheme/layouts/partials/toc-parse-content.html is corrupt. If you are trying to format the code automatically, don’t. Replace the file with the original source.

Second, when determining whether to call toc or toc-parse-content you are comparing a boolean to a string. Change this:

{{- if eq .Params.tocparse "true -}}

to this:

{{- if eq .Params.tocparse true -}}

or this:

{{- if .Params.tocparse -}}

Third, you have placed the configuration settings for toc-parse-content under the params key, but it should be under params.toc as described in the partial’s header.

Finally, unrelated, if you want access to Git information for a page backed by a file, the enableGitInfo setting must be in the root configuration table, not under params, and set it to true not "true".

1 Like
6

Thank you for the help and detailed advice. I recopied the corrupted file and it now works.

Thanks for correcting the boolean to string mistake, I fixed that and removed the extra tocparse parameter that I added for testing. Now it works with just your original toc = true.

I fixed the enableGitInfo as well, thanks for noticing and mentioning, now I will continue working on getting “last modified” to display.

Potential Bug in Example Code

Also, likely due to a mistake in my coding but I might have found a bug in your example … I needed to change the line >{{ .text }}</a></li> to >{{ .text | safeHTML }}</a></li> in order for an apostrophe to properly print in the toc.

Remaining Issues

1. Nested lists in toc?

The parsed Toc now works but it does not make a series of nested lists like the default Hugo template does. I added in a <ul> and a <li> but currently need to use your suggested CSS to have indenting on the toc.

Is there a way to make it have the same nested list as the Hugo Template? This page has a <h1> <h2> and a <h3> but all are in the same list. If this is the best semantic HTML to use then I will just use CSS to indent, but if there is a way to put each level in a nested <ul> that would be great.

2. Links in Included File that work in Visual Studio Code, GitHub, and the Hugo Include?

Currently I can not get the links in the content to work in all 4 places. This page with an include has all the test cases. Evertyhing works except for the links when included.

3. Root Relative ![include](/folder/makrdown.md] works but ../../../../folder/markdown.md doesn’t

This page has both root relative and document relative links, only the the root relative link includes the content on the new page.

I think I can solve this by parsing the .Destination and .Url better. The end goal is to have the ![](*.md) link include the file, not throw an error in Visual Studio Code, and fallback to a non-include working link when viewed on GitHub.

7

Thanks for letting me know. I’ve corrected the example.

This is intentional. At least for my needs, the required effort and resulting complexity outweighed the benefit. If nested lists are important to you, and you need to generate the TOC after Hugo completely renders the content, you could use tocbot instead. Here’s a working example:

git clone --single-branch -b hugo-forum-topic-39819 https://github.com/jmooring/hugo-testing hugo-forum-topic-39819
cd hugo-forum-topic-39819
hugo server
1 Like
8

Thanks for helping get a working table of contents.

1 Like
9

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