Hugo columns短码内图片无法渲染，如何解决？

下面是几种可行的解决方式：

• 直接使用HTML图片标签：把columns短码内的Markdown图片语法替换成原生HTML标签，无需修改模板即可让图片正常显示。示例代码：

  {{< columns >}}
  
  The top-right corner of the home page shows your email address and can be used to access your profile.
  
  <---&gt;
  
  <img src="top-right.png" alt="email-address">
  
  {{< /columns >}}
  

• 修改columns短码模板：找到站点中columns短码的模板文件（路径一般为layouts/shortcodes/columns.html），将输出内容的{{ .Inner }}替换为{{ .Inner | markdownify }}，确保Hugo解析短码内部的Markdown语法。修改后的模板示例：

  {{ $columns := split .Inner "<---&gt;" }}
  <div class="flex flex-wrap">
    {{ range $columns }}
      <div class="flex-even markdown-inner" style="flex-grow: 1;">
        {{ . | markdownify }}
      </div>
    {{ end }}
  </div>
  

  调整后，短码内的所有Markdown语法（包括图片）都会被正确渲染。

• 改用Hugo内置figure短码：将Markdown图片语法替换为Hugo的figure短码，利用短码嵌套的特性实现解析。示例代码：

  {{< columns >}}
  
  The top-right corner of the home page shows your email address and can be used to access your profile.
  
  <---&gt;
  
  {{< figure src="top-right.png" alt="email-address" >}}
  
  {{< /columns >}}
  

内容的提问来源于stack exchange，提问作者mikeb