Как присвоить класс таблице Hugo / markdown, если таблица содержит шорткоды?

В hugo (версия v0.77.0) я пытается отрендерить таблицу с определенным стилем. Я использую

Я пытаюсь использовать {{ bootstrap-table "classname" }} шорткод zwbetz.com/ а>. Он определен в /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 }}

Он корректно работает с тривиальной таблицей в уценке вот так:

{{< 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 Hugo принял мою таблицу с изображениями или другими короткими кодами hugo?


html twitter-bootstrap markdown hugo hugo-shortcode
person O. Jones    schedule 30.10.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это зависит от вашего img.html шорткода, потому что bootstrap-table.html отображает внутренний HTML с помощью markdownify. Итак, я предполагаю, что 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 >}}
person leoybkim    schedule 31.10.2020

arrow_upward
0
arrow_downward

Я пробовал всевозможные комбинации {{<. {{%. и так далее. Никакой радости. Похоже, что markdownify, на который ссылается определение шорткода, не позволяет использовать встроенные шорткоды, которые сами отображают HTML.

Этот {{< tablestyle class="table-striped" >}} шорткод действительно работал у меня; он добавляет класс или классы ко всем таблицам на странице в браузере после загрузки страницы и устанавливает идентификаторы таблиц в 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>
person O. Jones    schedule 01.11.2020