HTML转Jade的帮助

Question

我正在尝试创建一个带有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模板语言开发人员之前，请帮帮我。

- Sahat Yalkabov

---

我需要将其翻译成Jade。 - Sahat Yalkabov

我不能在这里发布它，缩进不起作用。此外，我刚开始使用Express.js和Jade；我甚至不知道从哪里开始。 - Sahat Yalkabov

令人惊讶的糟糕道德... :( - kumarharsh

你可以使用html2jade直接将HTML转换为Jade - https://github.com/donpark/html2jade - Kevin

Answer 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")

- Alex Wayne

---

只是出于好奇，这个问题的哪一部分让你卡住了？ - Alex Wayne

我不知道我必须使用垂直线。不知道form和input是函数。 - Sahat Yalkabov

Answer 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")

我正在使用mixin来进行表单渲染，这使得我的代码具有可重用性和灵活性。请看这里：

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')

- Paul Rumkin

---

你可以使用name=name而不是name="#{name}"（并且输入中缺少逗号）。使用mixin的好解决方案！ - w00t

Answer 3

我最近在Jade的github页面上注意到添加了一个HTML转换为Jade的链接： https://github.com/donpark/html2jade 如果你需要转换的内容不止一两个，使用这个工具可能会更加方便。

- NeonNinja

---

谢谢，这会很有用。 - Sahat Yalkabov

Answer 4

有很多在线的HTML转Jade工具。这里是一个不错的工具。

HTML转Jade转换器

- Madhukarah

Answer 5

你可以在Jade文档中使用普通的HTML，它会被正确渲染（以防你需要使用它！）

- Jack