目录
使用玉和咕unt弹加快HTML生产
将汇编为：
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span> Jade Tutorial <span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><p</span> class<span>="className"</span> id<span>="idName"</span>></span> Hello SitePoint Readers! <span><span></p</span>></span> </span> <span><span><span><img</span> src<span>="images/image.png"</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
登录后复制
登录后复制
使用Jade，您不必编写关闭标签，这有助于避免潜在的错误，例如忘记添加关闭标签或失去其正确顺序。线路开头的任何文本都被解释为标签。您需要为每个标签使用适当的凹痕。
>注意：如果省略了标签名称，则将创建DIV作为默认标签。
>
使用管道字符（|）>有时我们需要在新行上写下标签的原始内容，但是，正如我前面提到的，在行开头的任何文本都被视为标签
。为避免这种情况，请使用管道或|字符在线路的开头，并在新行上写入标签的内部文本。
在上一节中，我对玉的语法进行了快速概述。在以下各节中，我们将介绍一些其他常见和强大的玉器功能，以及一些更高级的玉。我们将通过简单的“工作空缺页面”示例来做到这一点。您可以在源代码文件中的每种情况或此github存储库中找到每个情况的完整示例。让我们开始！
块并扩展（玉继承）
>
>称为layout.jade的文件将是我们页面布局的基本结构，这是一种干燥的概念，因为您无需为每个页面编写这些标签。相反，您需要扩展布局并开始编写块内容特定的代码，如我们所见。>
>注意：删除了CSS和JavaScript代码以进行简洁和焦点。您可以在存储库中找到这些。另外，我已经使用了复制grunt任务将JS和样式目录从应用程序目录传输到构建目录。这是layout.jade file：
>>您可以根据需要创建脚步和jade。对于我们的页面，我们将使用Foundation和jQuery来帮助我们建立一些基本的设计和功能。
>
这是partials/head.jade文件：
doctype html
html(lang="en" dir="ltr")
block head
include partials/head.jade
body
block content
block footer
include partials/footer.jade登录后复制
登录后复制
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span> Jade Tutorial <span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><p</span> class<span>="className"</span> id<span>="idName"</span>></span> Hello SitePoint Readers! <span><span></p</span>></span> </span> <span><span><span><img</span> src<span>="images/image.png"</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
登录后复制
登录后复制
>
jobs.jade：
doctype html
html(lang="en" dir="ltr")
block head
include partials/head.jade
body
block content
block footer
include partials/footer.jade登录后复制
登录后复制
head meta(name="viewport", content="width=device-width, initial-scale=1.0") meta(charset="UTF-8") title Jobs link(rel = "stylesheet" href = "style/foundation.min.css") link(rel = "stylesheet" href = "style/app.css")
登录后复制
在上一节中，我们包括Job-Container.jade。在本节中，我们将研究循环和混合物的好处，以及如何在Jade中使用它们。
这是新代码段的初始版本：如您所见，我们正在使用多个普通循环语句，例如第一行中的一个 - 作业中的每个作业。 - 字符用于未直接添加任何输出的无封闭代码。
>
在以前的代码段中，有冗余代码可以使用Mixins变干，如以下代码：div#footer.row
div.small-12.large-12.columns
p Copyright (c) foobar
script(src="js/jquery.min.js")
script(src="js/foundation.min.js")
script(src="js/app.js")登录后复制
>在这里，我们使用Mixin功能创建了可重复使用的Jade块。混合素就像具有名称并在其内部代码中评估的参数的方法（或函数）。在上面的示例中，我们创建了一个称为SkillsBlock（）的Mixin。
>要使用此Mixin，我们只编写其名称并传递适当的参数值，并将Mixin名称和符号前缀以将其识别为Mixin Call。>注意：与上述代码一样，我们可以通过=，！=或＃{}来评估值。但是，当您使用！=时，请小心，这不会逃脱，因此对于用户输入不安全。
extends layout.jade
block content
div#container.row
div.small-12.large-12.columns
include job-container.jade登录后复制
传递JSON数据
建立我们的环境后，让我们通过使用grunt任务将JSON数据从JSON文件传递到Jade的JOSON数据来做一些很棒的事情。>首先，创建JSON文件data.json，然后用所需的数据填充它。
>作业数据/当地人（传递给Jade模板的数据称为当地人）属性将传递给文件属性中标识的JADE文件，并且可以在Jade代码中使用。这种方式使您能够轻松地将文本内容添加到网页中。
>>最后，如果您查看演示，您可以看到页面的外观。当然，该来源是编译的，因此在这种情况下，演示并不重要。屏幕截图如下所示。
总结
使用模板引擎的理由可能会有所不同，但可以将它们归类为更高的生产力，更少的重复和具有更愉快的语法。另外，您可能不想用母语编写代码，因为它过于重复，容易出错，或者您根本不喜欢它。这是像Jade这样的语言，调整了您的代码简洁而简单，开始发挥作用。Jade可以帮助您编写清洁器代码，这使您的工作变得不那么乏味。我们使用Grunt涵盖了一些基本知识，技巧和技巧。您可以在本教程中了解更多有关Jade的信息，因此您可以查看官方文档以获取更多信息。
>>常见问题（常见问题解答）关于使用Jade和Grunt加快HTML生产
什么是翡翠，为什么我应该将其用于HTML生产？它通过允许您编写易于维护的干净，可读的代码来简化编写HTML的过程。它还支持动态代码，可重复使用的块和包含，它们可以显着加快HTML生产的速度。
>如何在加速HTML生产时如何补充Jade？
grunt是JavaScript任务跑步者自动化重复的任务，例如缩小，编译，单位测试和覆盖。当与翡翠一起使用时，可以将翡翠模板编译到HTML中的过程中，从长远来看可以节省大量的时间和精力。
>我如何安装Jade and Grunt？ >可以通过NPM（节点软件包管理器）安装Jade和Grunt。您可以通过在终端或命令提示符中安装'npm安装grunt -cli -g'来安装'jade和grunt。
有几种可以将HTML转换为Jade的在线工具，例如html2jade.org和codebeautify.org。但是，如果要以编程方式将HTML转换为Jade，则可以使用“ HTML2Jade” NPM软件包。>
>使用HTML用于Jade Conversion的在线工具有什么好处？对于HTML到Jade转换，易于使用，不需要任何安装。他们可以快速将您的HTML代码转换为Jade语法，如果您是Jade的新手，或者如果您有大量需要转换的HTML代码，这可能会非常有帮助。>
>我如何使用' HTML2JADE'NPM软件包，用于HTML到Jade转换？>>通过NPM安装'HTML2Jade'软件包后，您可以使用它来转换通过在终端或命令提示符中运行“ html2jade yourfile.html”，通过运行“ html2jade yourfile.html”到Jade。这将输出相当于您的HTML代码的JADE。>我可以将Jade与其他任务跑步者一起使用，例如Gulp？
是的，可以与Gulp这样的其他任务跑步者使用Jade。有一些可用于大口的插件可以将玉模板编译为HTML，类似于Grunt。使用“ Include”关键字，然后使用文件的路径。这对于在多个模板中包括标头和页脚等常见元素非常有用。
>我可以在我的玉模板中使用javascript吗？您可以使用' - '字符在玉模板中启动JavaScript代码线。
>>如何在玉模板中调试错误？
以上是使用玉和咕unt弹加快HTML生产的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
Windows 11 KB5054979中的新功能以及如何解决更新问题
4 周前
By DDD
如何修复KB5055523无法在Windows 11中安装？
3 周前
By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前
By DDD
R.E.P.O.的每个敌人和怪物的力量水平
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
蓝王子：如何到达地下室
3 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何使用HTML，CSS和JavaScript创建动画倒计时计时器
Apr 11, 2025 am 11:29 AM
您是否曾经在项目上需要一个倒计时计时器？对于这样的东西，可以自然访问插件，但实际上更多
为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”？
Apr 05, 2025 pm 05:51 PM
关于Flex布局中紫色斜线区域的疑问在使用Flex布局时，你可能会遇到一些令人困惑的现象，比如在开发者工具（d...
如何通过CSS选择第一个类名为item的子元素？
Apr 05, 2025 pm 11:24 PM
在元素个数不固定的情况下如何通过CSS选择第一个指定类名的子元素在处理HTML结构时，常常会遇到元素个数不�...
