如何创建 pugjs 组件?
Posted
技术标签:
【中文标题】如何创建 pugjs 组件?【英文标题】:How to create pugjs components? 【发布时间】:2021-04-27 02:33:29 【问题描述】:是否有可能创建 pugjs 组件,我可以在其中调用该组件,例如 x-button Sign In
组件将如下所示
button(class="py-3 px-8 rounded-lg inline-flex justify-center items-center font-semibold text-base leading-6 tracking-wide") #text
类似于这个概念Laravel component
【问题讨论】:
【参考方案1】:组件的 Pug 等效项是 template inheritance 和 includes。包含适用于您的用例:
//- includes/button.pug
button(class="py-3 px-8 rounded-lg inline-flex justify-center items-center font-semibold text-base leading-6 tracking-wide") #text
//- some-page.pug
//- index.pug
doctype html
html
head
body
- var text = 'some-button-text'
include includes/button.pug
【讨论】:
谢谢 Zac 希望有像x-button blah
这样更好的方法,但这看起来只是自定义功能。
Pug 等价的组件是mixins
@Sean 谢谢,我完全忘记了 mixins 的存在!你的答案是正确的。【参考方案2】:
这就是Pug mixins 的用途:
// declare the mixin
mixin x-button
button.py-3.px-8.rounded-lg.inline-flex.justify-center.items-center.font-semibold.text-base.leading-6.tracking-wide
if block
block
// use the mixin
+x-button Sign In
【讨论】:
Sean 快速问题:mixin 是否必须插入到您将要使用它的同一个文件中,或者它可以在单独的文件中并扩展到一个文件,如果是这样,你如何将它扩展到另一个文件? @NicoTravassos 你可以把它放在一个单独的文件中,然后include
那个文件放在你的根模板或任何你想使用的地方。以上是关于如何创建 pugjs 组件?的主要内容,如果未能解决你的问题,请参考以下文章