我想让类似于UI组件的东西在GO模板中100%可重用,但我不知道是否可能做到这一点.所以我试着做下一件事:

{{define "components/menu-button"}}
<a href="{{.link}}" class="text-white">{{.content}}</a>
{{end}}

这是我的组件,它应该是map,因为属性都是小写的.

然后在我的主页上,我有一个小菜单,它使用了导航栏中components/menu-button个组件的3倍:

<div class="hidden gap-4 sm:flex">
    {{template "components/menu-button" {"link": "/contact", "content": "Contact"}}}
    {{template "components/menu-button" {"link": "/docs", "content": "Docs"}}}
    {{template "components/menu-button" {"link": "/download", "content": "Download"}}}
</div>

但我不知道我是否能以某种方式创建一个map,就像我在示例中所做的那样,这类似于JSON的事情,但我try 了.

顺便说一句,它给了我下一个错误:

unexpected "{" in template clause

推荐答案

Go的模板不支持这种语法.

您可以做的是声明一个定制函数,例如

func MakeMap(kvs ...any) map[any]any {
    m := make(map[any]any)
    for i := 0; i < len(kvs)-1; i+=2 {
        m[kvs[i]] = kvs[i+1]
    }
    return m
}

然后,您可以通过使用(*Template).Funcs使该函数对模板可用,例如

t.Funcs(template.FuncMap{"M":MakeMap})

然后,在模板内部,您可以使用键M调用该函数.

{{template "components/menu-button" (M "link" "/contact" "content" "Contact")}}

https://go.dev/play/p/Sl1ON-z7Mtn

Html相关问答推荐

自动字间距以适应行CSS

损坏的可点击html邮箱签名

垂直页眉,每行只显示一个使用css的字母

如何在html和css中创建动态调整大小的表元素

创建带有弯曲边框的水平时间线

仅向上扩展并以最大高度滚动的Div

风格规则应该适用于响应图像的哪些方面?哪种规则适用于<;图片和gt;,哪种规则适用于<;img>;?

Style=背景图像URL引用变成&;Quot;

有没有办法移动占位符?

当底部进入视图时从底部粘性定位

为什么我的 html 对话框在 React 中没有渲染在我的内容之上?

如何使Bootstrap 5卡可点击

带圆角帽的 CSS 部分边框

防止HTML输入中出现负数但接受小数

ul li 右侧的 Bootstrap 加载微调器

文本溢出:省略号不适用于 flexbox

是否可以设置用户在联系表单中输入的文本字体的样式

如何使列表的第一个元素比 css 中的其他元素大?

如何向上移动图像并溢出图像的一部分而另一部分不溢出

我怎么能有 :not(.class):nth-of-type(even)?