freemap初学者教程_初学者玉器教程

最新推荐文章于 2022-07-01 14:35:55 发布

culi3182

最新推荐文章于 2022-07-01 14:35:55 发布

阅读量1.1k

点赞数

文章标签： java python javascript css js ViewUI

原文链接：https://www.sitepoint.com/jade-tutorial-for-beginners/

版权

Jade是一个优雅的NodeJS服务器端模板引擎，提供简洁的语法和强大的功能，如简洁标签、属性添加、文字块等。通过缩进来确定标签嵌套，使用点号表示文本。Jade还支持在模板中使用JavaScript、循环、插补和混入，方便创建模块化和可重用的标记。此外，Jade已经更名为Pug。

摘要由CSDN通过智能技术生成

freemap初学者教程

Jade is an elegant templating engine, primarily used for server-side templating in NodeJS. In plain words, Jade gives you a powerful new way to write markup, with a number of advantages over plain HTML.

Jade是一个优雅的模板引擎，主要用于NodeJS中的服务器端模板。用简单的话来说，Jade为您提供了一种强大的标记编写新方法，与纯HTML相比 ，它具有许多优点。

For example, take a look at this movie card in HTML:

例如，以HTML格式查看此电影卡：

<div>
  <h1>Ocean's Eleven</h1>
  <ul>
    <li>Comedy</li>
    <li>Thriller</li>
  </ul>
  <p>Danny Ocean and his eleven accomplices plan to rob
     three Las Vegas casinos simultaneously.</p>
</div>

This is what the same markup looks like in Jade:

这就是在Jade中相同的标记：

div
  h1 Ocean's Eleven
  ul
    li Comedy
    li Thriller
  p.
    Danny Ocean and his eleven accomplices plan to rob
    three Las Vegas casinos simultaneously.

The Jade version is elegant and concise. But it’s not just about the beautiful syntax. Jade has some really neat features, allowing you to write modular and reusable markup. Before we get into these powerful features, let’s do a quick overview of the basics.

翡翠版本优雅简洁。但这不只是优美的语法。 Jade具有一些非常简洁的功能，可让您编写模块化和可重用的标记。在介绍这些强大功能之前，让我们快速概述一下基础知识。

基础 (The Basics)

I’m going to highlight three basic features in Jade

我将重点介绍Jade的三个基本功能

Simple tags
简单标签
Adding attributes to the tags
向标签添加属性
Blocks of text
文字块

If you want to try this out as we go along, you can use CodePen and choose Jade as your HTML preprocessor or use the online compiler on the official Jade page to compile your Jade to HTML.

如果您想在尝试过程中进行尝试，可以使用CodePen并选择Jade作为HTML预处理器，或者使用Jade官方页面上的在线编译器将Jade编译为HTML。

简单标签 (Simple Tags)

As you might have noticed earlier, there are no “closing” tags in Jade. Instead, Jade uses indentation (i.e. white space) to determine how tags are nested.

您可能已经注意到了，Jade中没有“ closing”标签。相反，Jade使用缩进(即空格)来确定标签的嵌套方式。

div
  p Hello!
  p World!

In the example above, since the paragraph tags are indented, they will end up inside the div tag. Simple!

在上面的示例中，由于段落标签是缩进的，因此它们将最终在div标签内。简单！

<div>
  <p>Hello!</p>
  <p>World!</p>
</div>

Jade compiles this accurately by treating the first word on each line as a tag, while subsequent words on that line are treated as text inside the tag.

Jade通过将每行上的第一个单词视为标签，而将该行上的后续单词视为标签内的文本，来准确地编译此代码。

View this example on CodePen

在CodePen上查看此示例

属性 (Attributes)

All this is great, but how do we add attributes to our tags? Quite simple really. Let’s go back to our first example and toss in some classes and a poster image.

所有这些都很棒，但是如何为标签添加属性？真的很简单。让我们回到我们的第一个示例，并在一些课程和海报图像中进行介绍。

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

Pretty neat right?

很整洁吧？

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

View this example on CodePen

在CodePen上查看此示例

But it doesn’t stop here. Jade provides special shorthand for IDs and classes, further simplifying our markup using a familiar notation:

但这并不止于此。 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

View this example on CodePen

在CodePen上查看此示例

As you can see, Jade uses the same syntax as that which we’re already familiar with when writing CSS selectors, making it even easier to spot classes.

如您所见，Jade使用与我们在编写CSS选择器时已经熟悉的语法相同的语法，这使得发现类更加容易。

文字块 (Blocks of Text)

Let’s say you have a paragraph tag and you want to place a large block of text in it. Jade treats the first word of every line as an HTML tag – so what do you do?

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

You might have noticed an innocent period in the first code example in this article. Adding a period (full stop) after your tag indicates that everything inside that tag is text and Jade stops treating the first word on each line as an HTML tag.

在本文的第一个代码示例中，您可能已经注意到了一个天真烂漫的时期。在标签后添加句点(句号)表示该标签内的所有内容均为文本，而Jade停止将每行的第一个单词视为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.

View this example on CodePen

在CodePen上查看此示例

And just to drive home the point, if I were to remove the period after the p tag in this example, the compiled HTML would treat the “I” in the word “I’m” as an opening tag (in this case, it would be the <i> tag).

只是为了说明这一点，如果在此示例中我要删除p标记之后的句点，则已编译HTML将把“ I'm”一词中的“ I”视为开始标记(在这种情况下将是<i>标记)。

强大的功能 (Powerful Features)

Now that we’ve covered the basics, let’s take a peek at some powerful features that will make your markup smarter. We’ll look at the following features in remainder of this tutorial:

既然我们已经介绍了基础知识，那么让我们来看看一些可以使您的标记更智能的强大功能。在本教程的其余部分中，我们将介绍以下功能：

Loops
循环
JavaScript
JavaScript
Interpolation
插补
Mixins
混合蛋白

在Jade中使用JavaScript (Using JavaScript in Jade)

Jade is implemented with JavaScript, so it’s super-easy to use JavaScript in Jade. Here’s an example.

Jade是用JavaScript实现的，因此在Jade中使用JavaScript非常容易。这是一个例子。

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

What did we just do here?! By starting a line with a hyphen, we indicate to the Jade compiler that we want to start using JavaScript and it just works as we would expect. Here’s what you get when you compile the Jade code above to HTML:

我们只是在这里做什么？通过以连字符开头的行，我们向Jade编译器表明我们要开始使用JavaScript，并且它可以按预期工作。将上面的Jade代码编译为HTML时，将获得以下内容：

<div>
  <ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>
</div>

View this example on CodePen

在CodePen上查看此示例

We use a hyphen when the code doesn’t directly add output. If we want to use JavaScript to output something in Jade, we use =. Let’s tweak the code above to show a serial number.

当代码不直接添加输出时，我们使用连字符。如果要使用JavaScript在Jade中输出内容，请使用= 。让我们调整上面的代码以显示序列号。

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

And voilà, we now have serial numbers:

瞧，我们现在有了序列号：

<div>
  <ul>
    <li>1. Hello</li>
    <li>2. Hello</li>
    <li>3. Hello</li>
    <li>4. Hello</li>
    <li>5. Hello</li>
  </ul>
</div>

View this example on CodePen

在CodePen上查看此示例

Of course, in this case, an ordered list would be much more appropriate, but you get the point. Now, if you’re worried about XSS and HTML escaping, read the docs for more info.

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

循环 (Loops)

Jade provides an excellent looping syntax so that you don’t need to resort to JavaScript. Let’s loop over an array:

Jade提供了出色的循环语法，因此您无需诉诸JavaScript。让我们遍历一个数组：

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

And this will compile as follows:

它将编译如下：

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

View this example on CodePen

在CodePen上查看此示例

You can iterate over objects and use while loops too. Check out the docs for more.

您可以遍历对象，也可以使用while循环。查看文档以了解更多信息。

插补 (Interpolation)

It can get annoying to mix JavaScript into text like this p= "Hi there, " + profileName + ". How are you doing?". Does Jade have an elegant solution for this? You bet.

像这样将JavaScript混合到文本中可能会很烦人p= "Hi there, " + profileName + ". How are you doing?" 。 Jade是否对此有一个优雅的解决方案？你打赌

- var profileName = "Danny Ocean";
div
  p Hi there, #{profileName}. How are you doing?

View this example on CodePen

在CodePen上查看此示例

Isn’t that neat?

那不是很整洁吗？

混合蛋白 (Mixins)

Mixins are like functions. They take parameters as input and give markup as output. Mixins are defined using the mixin keyword.

Mixins就像函数一样。他们将参数作为输入，并将标记作为输出。使用mixin关键字定义mixin 。

mixin thumbnail(imageName, caption)
  div.thumbnail
    img(src="/img/#{imageName}.jpg")
    h4.image-caption= caption

Once the mixin is defined, you can call the mixin with the + syntax.

定义混入后，即可使用+语法调用混入。

+thumbnail("oceans-eleven", "Danny Ocean makes an elevator pitch.")
+thumbnail("pirates", "Introducing Captain Jack Sparrow!")

Which will output HTML like this:

它将输出如下HTML：

<div class="thumbnail">
  <img src="/img/oceans-eleven.jpg">
  <h4 class="image-caption">
    Danny Ocean makes an elevator pitch.
  </h4>
</div>
<div class="thumbnail">
  <img src="/img/pirates.jpg">
  <h4 class="image-caption">
    Introducing Captain Jack Sparrow!
  </h4>
</div>

放在一起 (Putting It All Together)

Let’s put together everything we’ve learned so far. Say we have a nice array of movies, with each item containing the movie’s title, the cast (a sub-array), the rating, the genre, a link to the IMDB page and the image path for the movie’s poster. The array will look something like this (white space added for readability):

让我们将到目前为止所学到的一切放在一起。假设我们有一系列不错的电影，每个项目都包含电影的标题，演员表(子阵列)，评分，类型，IMDB页面的链接以及电影海报的图像路径。该数组将如下所示(为便于阅读而添加了空白)：

- var movieList = [
  {
    title: "Ocean's Eleven",
    cast: ["Julia Roberts", "George Clooney", "Brad Pitt", "Andy Garcia"],
    genres: ["Comedy", "Thriller"],
    posterImage: "/img/oceans-eleven",
    imdbURL: "http://www.imdb.com/title/tt0240772/",
    rating: 7
  }
  // etc...
];

We have 10 movies and we want to build nice movie cards for each of them. Initially, we don’t plan to use the IMDB link. If a movie is rated above 5, we give it a thumbs up, otherwise, we give it a thumbs down. We’ll use all the nice features of Jade to write some modular code to do the following:

我们有10部电影，我们希望为每部电影制作精美的电影卡。最初，我们不打算使用IMDB链接。如果电影的评级高于5，则我们将其表示为赞许，否则，我们将其表示为反对。我们将使用Jade的所有出色功能来编写一些模块化代码来执行以下操作：

Create a mixin for a movie card
为电影卡创建混音
- Iterate through the cast list and display the actors. We’ll do the same with genres.
  遍历演员表并显示演员。我们将在流派上做同样的事情。
- Check the rating and decide whether to display a thumbs up or a thumbs down.
  检查等级并决定显示大拇指还是大拇指朝下。
Iterate through the movie list and use the mixin to create one card per movie.
遍历电影列表，并使用mixin为每个电影创建一张卡。

So let’s create the mixin first.

因此，让我们首先创建mixin。

mixin movie-card(movie)
  div.movie-card
    h2.movie-title= movie.title
    img.movie-poster(src=movie.posterImage)
    h3 Cast
    ul.cast
      each actor in movie.cast
        li= actor
    div.rating
      if movie.rating > 5
        img(src="img/thumbs-up")
      else
        img(src="img/thumbs-down")
    ul.genre
      each genre in movie.genres
        li= genre

There’s a lot going on up there, but I’m sure it looks familiar – we’ve covered all this in this tutorial. Now, we just need to use our mixin in a loop:

那里有很多事情要做，但是我敢肯定它看起来很熟悉–我们已经在本教程中介绍了所有这些内容。现在，我们只需要在循环中使用我们的mixin：

for movie in movieList
  +movie-card(movie)

That’s it. Is that elegant or what? Here’s the final code.

而已。那是优雅的还是什么？这是最终代码。

- var movieList = [
  {
    title: "Ocean's Eleven",
    cast: ["Julia Roberts", "George Clooney", "Brad Pitt", "Andy Garcia"],
    genres: ["Comedy", "Thriller"],
    posterImage: "/img/oceans-eleven",
    imdbURL: "http://www.imdb.com/title/tt0240772/",
    rating: 9.2
  },
  {
    title: "Pirates of the Caribbean",
    cast: ["Johnny Depp", "Keira Knightley", "Orlando Bloom"],
    genres: ["Adventure", "Comedy"],
    posterImage: "/img/pirates-caribbean",
    imdbURL: "http://www.imdb.com/title/tt0325980/",
    rating: 9.7
  }
];

mixin movie-card(movie)
  div.movie-card
    h2.movie-title= movie.title
    img.movie-poster(src=movie.posterImage)
    h3 Cast
    ul.cast
    each actor in movie.cast
      li= actor
    div.rating
      if movie.rating > 5
        img(src="img/thumbs-up")
      else
        img(src="img/thumbs-down")
    ul.genre
      each genre in movie.genres
        li= genre

for movie in movieList
  +movie-card(movie)

And here’s the compiled HTML:

这是编译HTML：

<div class="movie-card">
  <h2 class="movie-title">Ocean's Eleven</h2>
    <img src="/img/oceans-eleven" class="movie-poster"/>
  <h3>Cast</h3>
  <ul class="cast">
    <li>Julia Roberts</li>
    <li>George Clooney</li>
    <li>Brad Pitt</li>
    <li>Andy Garcia</li>
  </ul>
  <div class="rating">
    <img src="img/thumbs-up"/>
  </div>
  <ul class="genre">
    <li>Comedy</li>
    <li>Thriller</li>
  </ul>
</div>
<div class="movie-card">
  <h2 class="movie-title">Pirates of the Carribean</h2>
  <img src="/img/pirates-caribbean" class="movie-poster"/>
  <h3>Cast</h3>
  <ul class="cast">
    <li>Johnny Depp</li>
    <li>Keira Knightley</li>
    <li>Orlando Bloom</li>
  </ul>
  <div class="rating">
    <img src="img/thumbs-up"/>
  </div>
  <ul class="genre">
    <li>Adventure</li>
    <li>Comedy</li>
  </ul>
</div>

But wait a minute. What if we now want to go to the movie’s IMDB page when we click on a movie’s title? We can add one line: a(href=movie.imdbURL) to the mixin.

等一下如果我们现在想在单击电影标题时转到电影的IMDB页面怎么办？我们可以向mixin添加一行： a(href=movie.imdbURL) 。

mixin movie-card(movie)
  div.movie-card
    a(href=movie.imdbURL)
      h2.movie-title= movie.title
    img.movie-poster(src=movie.posterImage)
    h3 Cast
    ul.cast
    each actor in movie.cast
      li= actor
    div.rating
      if movie.rating > 5
        img(src="img/thumbs-up")
      else
        img(src="img/thumbs-down")
    ul.genre
      each genre in movie.genres
        li= genre

View this example on CodePen

在CodePen上查看此示例

结论 (Conclusion)

We went from knowing nothing about Jade to building some beautiful modular movie cards. There’s a lot more to Jade, but I’ve glossed over some concepts to keep things simple. So I hope this tutorial piqued your curiosity to learn more.

我们从对Jade一无所知到构建一些漂亮的模块化电影卡。 Jade还有很多其他东西，但是我已经简化了一些概念以使事情变得简单。因此，我希望本教程能激发您的好奇心，以了解更多信息。

Important note: As some of you might already know, Jade has been renamed to Pug due to a software trademark claim. In the future, articles on Jade will use the new name “Pug” or “PugJS”.

重要说明：某些人可能已经知道，由于软件商标声明， Jade已重命名为Pug 。 将来，有关Jade的文章将使用新名称“ Pug”或“ PugJS”。

翻译自: https://www.sitepoint.com/jade-tutorial-for-beginners/

freemap初学者教程

culi3182

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
freemap初学者教程_初学者玉器教程

freemap初学者教程Jade is an elegant templating engine, primarily used for server-side templating in NodeJS. In plain words, Jade gives you a powerful new way to write markup, with a number of advantages ov...
复制链接

扫一扫