搜索

首页 >web前端 >css教程 >初学者的玉教程

初学者的玉教程

William Shakespeare
William Shakespeare原创
2025-02-22 08:38:11778浏览

A Jade Tutorial for Beginners 非常整洁吗？

<span><span><span><div</span> class<span>="movie-card"</span> id<span>="oceans-11"</span>></span>
</span>  <span><span><span><h1</span> class<span>="movie-title"</span>></span>Ocean's 11<span><span></h1</span>></span>
</span>  <span><span><span><img</span> src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul</span> class<span>="genre-list"</span>></span>
</span>    <span><span><span><li</span>></span>Comedy<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Thriller<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>
在Codepen上查看此示例

>，但它不止于此。 Jade为ID和课程提供了特殊的速记，并使用熟悉的符号进一步简化了我们的标记：

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster(src="/img/oceans-11.png")
  ul.genre-list
    li Comedy
    li Thriller
在Codepen上查看此示例

如您所见，Jade使用与我们在编写CSS选择器时已经熟悉的语法相同的语法，从而更容易找到类。>

>文本

的块

>假设您有一个段落标签，您想在其中放置一大堆文本。 Jade将每行的第一个单词视为HTML标签 - 那么您该怎么办？

>您可能已经注意到本文第一个代码示例中的一个无辜时期。在标签之后添加一个周期（完整停止）表明该标签中的所有内容都是文本，Jade停止将每个行上的第一个单词视为HTML标签。

在Codepen上查看此示例

只是要开车回家，如果我要删除p标签之后的时间情况，它将是标签）。
div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.
>

强大的功能

>现在我们已经介绍了基础知识，让我们窥视一些功能强大的功能，这将使您的标记更聪明。我们将在本教程的其余部分中查看以下功能：

循环

> javascript
  • 插值
  • > Mixins
    • 在玉>中使用javascript Jade用JavaScript实施了Jade，因此在Jade中使用JavaScript是非常容易的。这是一个例子。
我们在这里做了什么？通过使用连字符启动一条线，我们向Jade编译器指出，我们希望开始使用JavaScript，并且它可以按照我们的期望。当您将上面的Jade代码汇编为HTML时，这就是您得到的：

>

在Codepen上查看此示例

当代码未直接添加输出时，我们使用连字符。如果我们想使用JavaScript在Jade中输出某些内容，我们会使用=。让我们调整上面的代码以显示一个序列号。
- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li Hello
    - }

和voilà，我们现在有序列号：
<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

在Codepen上查看此示例

当然，在这种情况下，有序列表会更合适，但是您明白了。现在，如果您担心XSS和HTML逃脱，请阅读文档以获取更多信息。

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li= i + ". Hello"
    - }
循环

Jade提供了出色的循环语法，因此您无需求助于JavaScript。让我们循环浏览一个数组：
<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>1. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>2. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>3. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>4. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>5. Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

这将按照以下方式进行编译：

>

在Codepen上查看此示例

>您也可以迭代对象并使用循环时使用。查看文档以获取更多信息。

插值

>将JavaScript混合到这样的文本中可能会很烦人。玉有一个优雅的解决方案吗？您敢打赌。

<span><span><span><div</span> class<span>="movie-card"</span> id<span>="oceans-11"</span>></span>
</span>  <span><span><span><h1</span> class<span>="movie-title"</span>></span>Ocean's 11<span><span></h1</span>></span>
</span>  <span><span><span><img</span> src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul</span> class<span>="genre-list"</span>></span>
</span>    <span><span><span><li</span>></span>Comedy<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Thriller<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

在Codepen上查看此示例

不是整洁吗？

> Mixins

混合蛋白就像功能一样。他们将参数作为输入，并将标记作为输出。使用Mixin关键字定义Mixin。 

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster(src="/img/oceans-11.png")
  ul.genre-list
    li Comedy
    li Thriller
定义了混合蛋白后，您可以用语法调用混合物。

将像这样输出HTML：
div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.
>

将它们全部放在一起
- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li Hello
    - }

>让我们整理到迄今为止所学到的一切。假设我们有一系列不错的电影，每个项目都包含电影的标题，演员阵容（子阵列），评分，类型，指向IMDB页面的链接以及电影海报的图像路径。阵列看起来像这样（添加了可读性的空白）：

>

>我们有10部电影，我们想为每张电影制作漂亮的电影贺卡。最初，我们不打算使用IMDB链接。如果电影的评分在5以上，我们将其竖起大拇指，否则，我们将其放下大拇指。我们将使用Jade的所有不错的功能来编写一些模块化代码来执行以下操作：> 
<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

>为电影卡创建混合蛋白

>
    >
  1. >遍历演员表并显示演员。我们将对流派做同样的事情。
      检查评分，然后决定是向下表现大拇指还是向下表现大拇指。
    • >
    >遍历电影列表，并使用Mixin每部电影创建一张卡片。>
  2. ，让我们先创建混合蛋白。>
>那里有很多事情要做，但是我敢肯定它看起来很熟悉 - 我们在本教程中介绍了所有这些。现在，我们只需要在循环中使用Mixin：

就是这样。是优雅还是什么？这是最终代码。
- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li= i + ". Hello"
    - }

这是编译的HTML： 
<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>1. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>2. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>3. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>4. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>5. Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

，但是请等一下。如果我们现在想在单击电影的标题时转到电影的IMDB页面怎么办？我们可以在混音中添加一行：a（href = movie.imdburl）。

> 
- var droids = ["R2D2", "C3PO", "BB8"];
div
  h1 Famous Droids from Star Wars
  for name in droids
    div.card
      h2= name

在Codepen上查看此示例

<span><span><span><div</span>></span>
</span>  <span><span><span><h1</span>></span>Famous Droids from Star Wars<span><span></h1</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>R2D2<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>C3PO<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>BB8<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>
结论

>我们从对翡翠一无所知，到建造一些漂亮的模块化电影贺卡。玉还有更多的东西，但是我已经掩盖了一些概念，以使事情变得简单。因此，我希望这个教程能使您的好奇心了解更多。
- var profileName = "Danny Ocean";
div
  p Hi there, #{profileName}. How are you doing?
>

重要说明：正如你们中有些人可能已经知道的那样，由于软件商标索赔，Jade已重命名为Pug。将来，有关玉的文章将使用新名称“ pug”或“ pugjs”。

关于初学者Jade教程的经常询问的问题（常见问题解答）

什么是玉，为什么在网络开发中很重要？

也称为帕格，是一种高性能模板引擎，受HAML的影响很大，并用node.js和浏览器的JavaScript实施。它提供了一种干净，优雅的语法，允许开发人员以更简洁的方式编写HTML模板。 Jade在Web开发中很重要，因为它减少了编写HTML代码所花费的时间，从而使开发过程更加有效。它还支持动态代码，这意味着您可以在渲染html时包含评估的变量和表达式。

>如何安装jade？

安装Jade，您需要具有节点。 JS和NPM（节点软件包管理器）安装在您的计算机上。一旦拥有这些，您可以通过在终端或命令提示符中运行命令NPM安装Jade -G来在系统上安装Jade。这将允许您使用计算机上任何目录中的JADE。

>如何将html转换为jade？

>可以手动完成将html转换为jade或使用html2jade.org等在线工具。 。要手动做到这一点，您需要了解玉器语法以及它如何映射到HTML。例如，HTML标签成为Jade元素，HTML属性成为Jade属性，等等。在线工具可以自动化此过程，但是了解基本的转换规则仍然很重要。

>

> jade和html？

>

>> jade和html之间的主要区别在于他们的主要区别。句法。 Jade使用凹痕代表嵌套元素，不需要关闭标签，这比HTML更简洁。但是，HTML的使用和理解更广泛，有些开发人员发现其明确的关闭标签和缺乏压痕规则易于阅读和理解。

>

>我如何在Jade中使用变量？可以使用 - 语法来定义翡翠。例如，-var title ='home'定义了一个名为“ home”的变量。然后，您可以在Jade模板中使用此变量，将其与＃{}一起前缀。例如，h1 =标题将呈现为

home

在html中。

>我可以在玉模板中使用javascript吗？

是的，是的，您可以在Jade模板中使用Javascript。 Jade支持各种JavaScript构造，包括变量，表达式，控制结构（例如IF-ELSE语句和循环）和功能。要将JavaScript代码包含在您的Jade模板中，请以 - 。

将其包括在玉中？使用包含关键字。例如，包括标头将在模板中的该点包含标题文件的内容。

。

我如何用//添加玉中中的评论

>。例如，//这是评论将向您的Jade代码添加评论。请注意，此评论将不包含在渲染的html中。

>如何使用类似于HTML的标签对Jade中的文本格式化？例如，p这是一些文本会呈现为

这是html中的一些文本

。您还可以通过以下文本以：markdown。代码。当呈现玉模板时发生错误时，玉会抛出一个例外，您可以捕获并适当处理。

以上是初学者的玉教程的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html npm xss Array if for while format include require try throw catch Directory Error using var JS number this href display input everything prompt word Prompt Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Getting Started with Foundation 6&#x27;s CLI Tools下一篇：How to Use ARIA Effectively with HTML5

相关文章

查看更多