当表格包含短代码时，如何为Hugo / markdown表格提供类别？

编程问答 2022-06-05

问题描述

在（版本v0.77.0）中，我试图呈现具有某些特定样式的表。我正在使用

我正在尝试使用zwbetz的{{ bootstrap-table "classname" }} shortcode。像这样在/layouts/shortcodes/bootstrap-table.html中定义：

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

它可以正常使用markdown中的普通表，如下所示：

{{< bootstrap-table "someclassname" >}}
| animal | sound |
|--------|-------|
| dog    | meow  |
| cat    | woof  |
{{< /bootstrap-table > }}

但是如果标记后的表格包含其他Hugo短代码，它将拒绝表格标记并创建一个空表，然后在生成的html中显示消息（在html注释中），表示Hugo拒绝了某些html。

这是一个令人讨厌的降价表。

{{< 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 > }}

我该怎么做才能使这个bootstrap-table雨果标签接受带有图像或其他雨果简码的表格？

解决方法

这取决于您的img.html短代码，因为bootstrap-table.html使用markdownify渲染内部HTML。因此，我的猜测是img.html正在输出非降价语法，因此外部短代码无法理解它。

我使用常规的图像降价语法测试了您的bootstrap-table.html短代码以插入图像，这似乎很好用。

{{< bootstrap-table "someclassname" >}}
| animal | sound |
|--------|-------|
| ![alt text](https://i.imgur.com/JOKsNeT.jpg "cat") | meow  |
| ![alt text](https://i.imgur.com/zq0bDrk.jpeg "dog") | woof  |
{{< /bootstrap-table >}}
,

我尝试了{{<的各种组合。 {{%。等等。不开心似乎从简码定义引用的markdownify不允许嵌入的简码本身呈现HTML。

此{{< tablestyle class="table-striped" >}}短代码确实对我有用；它将在页面加载后将一个或多个类添加到浏览器中页面中的所有表，并将表的ID设置为table_0，table_1等。

有点javascript-kludgey，但是可以用。

{{ $classes := .Get "class" }}
{{ $name := .Get "name" }}
{{ $filename := .Page.File.BaseFileName }}
<script>
  window.addEventListener('DOMContentLoaded',(event) => {
      try {
        var filename = {{ $filename }} || "page"
        filename = filename.toLowerCase()
        var name = {{ $name }}
        name = name || filename || "t"
        var tables = document.querySelectorAll("body section article table")
        var classes = {{ $classes }}
        var classarray = classes.split(/\s+/)
        for (var i = 0; i < tables.length; i++){
          var table = tables[i]
          for (var c = 0; c < classarray.length; c++ ) {
            table.classList.add(classarray[c])
          }
          var id = "table_" + i
          if (!table.id) table.id = id
          if (!table.getAttribute("name")) table.setAttribute ("name",id)
          table.classList.add(id)
          table.classList.add(name + "_table")
        }
      }
      catch (e) {
        /* empty,intentionally,don't honk out if this doesn't work. */
      }
    });
</script>
htmlhugotwitter-bootstrap