gohugoio / hugo

The world’s fastest framework for building websites.
https://gohugo.io
Apache License 2.0
74.35k stars 7.43k forks source link

Support markdownify headings in fragments #11241

Open davidejones opened 1 year ago

davidejones commented 1 year ago

Overview

I'd like to propose that the new page fragments functionality is expanded to also capture headings rendered via markdownify.

Example

layouts/shortcodes/short1.html

<div>
  <p>{{- .Inner | markdownify -}}</p>
</div>

layouts/shortcodes/short2.md

**Bold Text**
{{ .Inner }}

content/_index.md

---
title: Test
---

# Intro

This is text under h1 heading

## Section

This is text under h2 heading

{{< short1 >}}

## HTML shortcode
This is text under html shortcode heading

{{< /short1 >}}

{{% short2 %}}

## Markdown shortcode
This is text under md shortcode heading

{{% /short2 %}}

layouts/index.html

{{- define "partials/headings" -}}
  <ul>
    {{- range $k, $v := .data -}}
       <li id="{{ $v.ID | anchorize }}">
          <a href="#{{ $v.ID | anchorize }}">{{ $v.Title }}</a>
          {{- partial "partials/headings" (dict "data" $v.Headings) -}}
       </li>
    {{- end -}}
  </ul>
{{- end -}}

<nav id="TableOfContents">
  {{- partial "partials/headings" (dict "data" .Fragments.Headings) -}}
</nav>

Current Results with hugo 0.115.2

- Intro
   - Section
   - Markdown shortcode

Desired Results

- Intro
   - Section
   - HTML shortcode
   - Markdown shortcode
davidejones commented 1 year ago

possibly should also appear in {{ .TableOfContents }} ?

jmooring commented 1 year ago

As you have discovered, in this context you must use the {{% %}} notation when calling a shortcode.

When you use the {{< >}} notation, we insert a unique placeholder in the content before the the content is rendered, and then replace the placeholder with the rendered shortcode afterwards. Between those two steps is where we capture .Page.Fragments and .Page.TableOfContents.

You can use the {{% %}} when the shortcode contains HTML with this site configuration:

[markup.goldmark.renderer]
unsafe = true

It's not unsafe if you control the content.

If you don't want to do that, you will have to use an alternate method to generate the TOC, either by parsing content or using a JS library such as tocbot.

github-actions[bot] commented 1 month ago

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.