HTML 到 Jade 帮助答案

【问题标题】：HTML to Jade helpHTML 到 Jade 帮助
【发布时间】：2011-10-26 14:57:07
【问题描述】：

我正在尝试创建一个带有 2 个输入字段和 1 个按钮的简单表单。

这里是需要翻译成 Jade 的 HTML：

<form name="input" action="html_form_action.asp" method="get">
  Username: <input type="text" name="user" />
  Password: <input type="text" name="pswd" />
  <input type="submit" value="Submit" />
</form>

请在我把这台电脑扔出窗外并在 Jade 模板语言开发人员之后派出杀戮小队之前帮助我。

【问题讨论】：

我需要把它翻译成 Jade。
我不能在这里发布，缩进不起作用。此外，我刚开始使用 Express.js 和 Jade；我什至不知道从哪里开始。
非常糟糕的道德...... :(
可以使用html2jade直接将html转成jade-github.com/donpark/html2jade

标签： html node.js express pug

【解决方案1】：

form(name="input", action="html_form_action.asp", method="get")
  | Username:
  input(type="text", name="user")

  | Password:
  input(type="text", name="pswd")

  input(type="submit", value="Submit")

【讨论】：

只是出于好奇，这其中的哪一部分让你挂了？
我不知道我必须使用竖线。不知道表单和输入是函数。

【解决方案2】：

还有更优雅和正确的方法。不要忘记可用性。跳过冒号，这不是纸质表格！

form(name="input", action="html_form_action.asp", method="get")
  key Username
    input(type="text", name="user")

  key Password
    input(type="password", name="pswd")

  input(type="submit", value="Submit")

对于表单渲染，我使用的是 mixins。它使我的代码可重用且灵活。看这里：

mixin text(name, value, title)
  key=title
    input(type="text" name=name value=value)

mixin password(name, value, title)
  key=title
    input(type="password" name=name value=value)

mixin submit(name, value)
  input(type="submit" name=name value=value)

form(name="input", action="html_form_action.asp", method="post")
  mixin text('user', null, 'User')
  mixin password('pswd', null, 'Password')
  mixin submit('do', 'Login')

【讨论】：

而不是 name="#{name}" 您可以简单地使用 name=name （并且输入中缺少逗号）。使用 mixins 的不错的解决方案！

【解决方案3】：

我最近注意到 Jade github 页面上添加了一个 HTML 到 Jade 转换器的链接：

https://github.com/donpark/html2jade

如果您有多个要转换的内容，可能值得一试，而不是手动翻译。

【讨论】：

谢谢它会派上用场。

【解决方案4】：

您可以在 Jade 文档中使用纯 HTML，它会正确呈现（以防万一您需要使用它！）

【讨论】：

【解决方案5】：

有很多在线 HTML 到 JADE 的转换。这是一个很好的。

HTML to Jade converter

【讨论】：