当表包含简码时，如何给 Hugo / markdown 表一个类？答案

【问题标题】：How to give a Hugo / markdown table a class, when the table contains shortcodes?当表包含简码时，如何给 Hugo / markdown 表一个类？
【发布时间】：2021-10-13 00:17:39
【问题描述】：

在hugo（版本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 cmets 中）说 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 Hugo 标签接受我的桌子，里面有图片或其他 Hugo 短代码？

【问题讨论】：

标签： hugo html twitter-bootstrap markdown hugo hugo-shortcode

【解决方案1】：

这取决于您的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 >}}

【讨论】：

【解决方案2】：

我尝试了{{< 的各种组合。 {{%。等等。没有喜悦。看起来从短代码定义中引用的 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>

【讨论】：

【解决方案3】：

这是最终的表格简码。

功能：HTML5 兼容性（无 align-*）、markdown 对齐、Bootstrap 4/5 兼容性、支持、Schema.org 标记、WAI 可访问性、自定义 CSS、自定义 ID、响应式（使用 CSS）

&lt;script src="https://gist.github.com/djibe/7a8ba9516f4495dbd6fdf1d1de7a60fe.js"&gt;&lt;/script&gt;

  {{< table title="Optional title" class="optional CSS class declaration" id="optional- declaration-a-unique-one-will-be-generated" >}}
| Stade | DFG (CKD-EPI) | Définition |
|:-------:|:----------------------:|------------|
| 1     | &gt; 90       | MRC avec DFG normal ou augmenté |
| 2     | 60-89         | MRC avec DFG légèrement diminué |
| 3A    | 45-59         | IRC modérée |
| 3B    | 30-44         | IRC modérée |
| 4     | 15-29         | IRC sévère  |
| 5     | < 15          | IRC terminale |
{{< /table >}}

【讨论】：