如何创建 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 组件?的主要内容,如果未能解决你的问题,请参考以下文章

控制器已在 DOM 中加载,但视图未加载且无法找到控制器 - oclazyload with jam(pugjs)

我最喜欢的模板jade(pug)学习和使用

显示用户 .pug js 列表

axure如何创建组件

请问各位前辈如何在HyperMesh中创建组件

如何创建从少数其他组件继承的 Delphi 组件?