Hugo v0.77.0中含短代码的Markdown表格添加类名失败的解决办法

The issue you're facing happens because your current shortcode only runs markdownify on the inner content, which doesn't process the Hugo shortcodes (like your img shortcode) embedded in the table. When Hugo encounters unprocessed shortcode syntax in the markdownified output, it can flag parts of the content as unsafe and filter them out, resulting in empty or broken tables.

Here's how to modify your bootstrap-table shortcode to handle embedded shortcodes properly:

Updated Shortcode Code #

Replace the content of /layouts/shortcodes/bootstrap-table.html with this:

{{ $innerRendered := .Inner | .Page.RenderString }}
{{ $class := .Get 0 }}
{{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $htmlTable := replace $innerRendered $old $new }}
{{ $htmlTable | safeHTML }}

What Changed? #

• Instead of using markdownify, we use .Page.RenderString on the inner content. This method fully processes all Hugo shortcodes and markdown in the .Inner block first, converting them to valid HTML.
• We then proceed with the same table class replacement as before, and output the final HTML with safeHTML to ensure Hugo doesn't filter the valid content.

Testing the Fixed Shortcode #

Your example table with image shortcodes will now render correctly:

{{< bootstrap-table "someclassname" >}}
| animal | sound |
|--------|-------|
| {{< img src="dog.jpg" alt="Dog" class="align__left size__80" >}} | meow |
| {{< img src="cat.jpg" alt="Cat" class="align__left size__80" >}} | woof |
{{< /bootstrap-table >}}

This will generate a table with the someclassname class, and the img shortcodes will be rendered into proper <img> tags inside the table cells.

Key Notes #

• RenderString is a more robust method than markdownify when your content includes Hugo-specific shortcodes, as it triggers the full Hugo content rendering pipeline for the inner block.
• Make sure any custom shortcodes (like your img shortcode) are working correctly on their own first, as the bootstrap-table shortcode relies on them rendering properly.

内容的提问来源于stack exchange，提问作者O. Jones