当表包含短代码时,如何为Hugo/markdown表指定一个类?
在(v0.77.0版)中,我试图用一些特定的样式呈现一个表。我在用电话 我正在尝试使用zwbetz的当表包含短代码时,如何为Hugo/markdown表指定一个类?,hugo,html,twitter-bootstrap,markdown,hugo-shortcode,Hugo,Html,Twitter Bootstrap,Markdown,Hugo Shortcode,在(v0.77.0版)中,我试图用一些特定的样式呈现一个表。我在用电话 我正在尝试使用zwbetz的{{bootstrap table“classname}}。它在/layouts/shortcode/bootstrap table.html中定义如下: {{ $htmlTable := .Inner | markdownify }} {{ $class := .Get 0 }} {{ $old := "<table>" }} {{ $new := printf
{{bootstrap table“classname}}
。它在/layouts/shortcode/bootstrap table.html
中定义如下:
{{ $htmlTable := .Inner | markdownify }}
{{ $class := .Get 0 }}
{{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable | safeHTML }}
{{$htmlTable:=.Inner | markdownify}
{{$class:=.Get 0}
{{$old:=“”}
{{$new:=printf”“$class}
{{$htmlTable:=替换$htmlTable$old$new}
{{$htmlTable | safeHTML}}
它可以正确地处理标记中的一个普通表,如下所示:
{{< bootstrap-table "someclassname" >}}
| animal | sound |
|--------|-------|
| dog | meow |
| cat | woof |
{{< /bootstrap-table > }}
{{}
|动物声|
|--------|-------|
|狗叫|
|猫头鹰|
{{ }
但是,如果标记下来的表包含其他Hugo短代码,它将拒绝该表标记并生成一个空表,然后在生成的html中显示Hugo拒绝某些html的消息(在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 > }}
{{}
|动物声|
|--------|-------|
|{{{img src=“dog.jpg”alt=“dog”class=“align_uuleft size_uu80”>}}喵喵|
|{{{img src=“cat.jpg”alt=“cat”class=“align_uuuleft size_uuu80”>}}|
{{ }
如何使此
bootstrap表
Hugo标记接受包含图像或其他Hugo短代码的我的表?这取决于您的img.html
shortcode,因为bootstrap表.html
正在使用markdownify
呈现内部html。所以我猜,img.html
正在输出非标记语法,因此外部的短代码无法理解它
我测试了您的bootstrap table.html
shortcode,使用常规的图像标记语法插入图像,似乎效果不错
{{< 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 >}}
{{}
|动物声|
|--------|-------|
| ![替换文本](https://i.imgur.com/JOKsNeT.jpg “猫”)喵喵叫|
| ![替换文本](https://i.imgur.com/zq0bDrk.jpeg “狗”)|汪汪|
{{ }
我尝试了{{
试一试{
var filename={{$filename}}| |“第页”
filename=filename.toLowerCase()
var name={{$name}
名称=名称| |文件名| |“t”
var tables=document.queryselectoral(“正文部分文章表”)
var classes={{$classes}
var classarray=classes.split(/\s+/)
对于(变量i=0;i
{{ $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>