What if you have several classes you need to add? Pug’s got you covered there too. If you wanted to add an ID to the h1 tag, you could do it like so: h1#some-id Hello Pug To add a class to the p element, you can just add the selector you’d use in CSS to the element like so: h1 Hello PugĪdding an ID to a tag works pretty much the same way. This won’t take long to get used to either. What if we want to add a class to the p tag so we can give it some specific styles? If you’re familiar with the tool called emmet, this will feel very familiar. P What a beautiful day! Adding Classes and IDs to elements See if you can do it without looking at the next bit of code! When you’re ready, here’s what the code looks like for that: h1 Hello Pug
Pretty quick, right? Now, lets add a p tag (as a sibling, not a child) that says “What a beautiful day!”. h1 Hello Pugīelieve it or not, the code above will create an h1 tag with the text “Hello Pug” inside. Let’s start by creating an h1 that says ‘Hello, Pug’. Part of this is due to the fact that you don’t have to worry about closing tags, which can help lead to much cleaner files. How to create elements in PugĬreating markup for a webpage in Pug may feel a bit strange at first, but after a bit will start to feel pretty intuitive.
There are some other items that make it a little different when writing it, but the elements, attributes, and structure are all the same as standard HTML. The key to writing Pug is indentation because when Pug is compiled into HTML, the indentation is how it determines how to nest the elements. It has become a widely used templating engine for many websites, and for good reason: If you know how to write HTML, this will feel like a shorthand version of it. Pug, formerly known as Jade, released it’s 1.0.0 version on Decemafter being in development for a few years.
Today I will be talking about one of the most popular templating languages for Node.js applications, Pug. These languages allow you to write HTML like structures while retaining the ability to insert variables and use logic within the structure. The engines used in the aforementioned tools are Twig, Blade, and Edge, respectively. A templating engine is a tool that a framework can use to assist in scaffolding a front-end for a website or webapp. If you’ve ever used something like Drupal, Laravel, or Adonis, you’ve likely encountered a template engine. Using the Pug Templating Engine Part 1 – Markup
0 kommentar(er)
