A Jade Tutorial for Beginners

Pretty neat right?

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

View this example on CodePen

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

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

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.

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?

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.

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

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 tag).

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
• Interpolation
• Mixins

Using JavaScript in Jade

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

- 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:

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

View this example on 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.

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

And voilà, we now have serial numbers:

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

View this example on 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.

Loops

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

- 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:

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

View this example on CodePen

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

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.

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

View this example on 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.

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

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

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.

Which will output HTML like this:

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

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

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

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:

1. 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.
2. Iterate through the movie list and use the mixin to create one card per movie.

So let’s create the mixin first.

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

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:

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

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

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

And here’s the compiled HTML:

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

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.

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

View this example on 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.

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”.

Frequently Asked Questions (FAQs) about Jade Tutorial for Beginners

What is Jade and why is it important in web development?

Jade, also known as Pug, is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. It provides a clean, elegant syntax that allows developers to write HTML templates in a much more concise way. Jade is important in web development because it reduces the amount of time spent writing HTML code, making the development process more efficient. It also supports dynamic code, which means you can include variables and expressions that get evaluated while rendering the HTML.

How do I install Jade?

To install Jade, you need to have Node.js and npm (Node Package Manager) installed on your computer. Once you have these, you can install Jade globally on your system by running the command npm install jade -g in your terminal or command prompt. This will allow you to use Jade from any directory on your computer.

How do I convert HTML to Jade?

Converting HTML to Jade can be done manually or using online tools like html2jade.org. To do it manually, you need to understand the Jade syntax and how it maps to HTML. For example, HTML tags become Jade elements, HTML attributes become Jade attributes, and so forth. Online tools can automate this process, but it’s still important to understand the underlying conversion rules.

What are the main differences between Jade and HTML?

The main differences between Jade and HTML lie in their syntax. Jade uses indentation to represent nested elements and doesn’t require closing tags, making it more concise than HTML. However, HTML is more widely used and understood, and some developers find its explicit closing tags and lack of indentation rules easier to read and understand.

How do I use variables in Jade?

Variables in Jade can be defined using the - syntax. For example, - var title = 'Home' defines a variable named title with the value ‘Home’. You can then use this variable in your Jade template by prefixing it with #{}. For example, h1= title would render as

Home

in HTML.

Can I use JavaScript in Jade templates?

Yes, you can use JavaScript in Jade templates. Jade supports a variety of JavaScript constructs, including variables, expressions, control structures (like if-else statements and for loops), and functions. To include JavaScript code in your Jade template, prefix it with -.

How do I include partials in Jade?

Partials, or reusable chunks of Jade code, can be included in other Jade templates using the include keyword. For example, include header would include the contents of the header.jade file at that point in the template.

How do I comment in Jade?

Comments in Jade can be added using //. For example, // This is a comment would add a comment to your Jade code. Note that this comment will not be included in the rendered HTML.

How do I format text in Jade?

Text in Jade can be formatted using HTML-like tags. For example, p This is some text would render as

This is some text

in HTML. You can also use Markdown syntax in Jade by prefixing your text with :markdown.

How do I handle errors in Jade?

Errors in Jade can be handled using try-catch blocks in your JavaScript code. When an error occurs while rendering a Jade template, Jade will throw an exception that you can catch and handle appropriately.

The above is the detailed content of A Jade Tutorial for Beginners. For more information, please follow other related articles on the PHP Chinese website!