This is in spite of many more efficient options such as Pug, Slim, HAML among others being in existence. However, when it comes to templates, only two options are available: HTML and SVG.
#PUG TEMPLATE WIDTH CODE#
Components provide an amazing means to structure views, facilitate code reusability, interpolation, data binding, and other business logic for views.Īngular CLI supports multiple built-in CSS preprocessor options for component styling like Sass/SCSS, LESS, and Stylus. In this article, Zara Cooper explains what Pug is and how you can use it in your Angular app.Īs a developer, I appreciate how Angular apps are structured and the many options the Angular CLI makes available to configure them. In Angular, you can use Pug to write component templates and improve a project’s development workflow. Module.Pug is a template engine that allows you to write cleaner templates with less repetition. gulp-html-beautify - to format the generated HTML files.If you’re following Gulp workflow for Perch and considering to introduce Pug to your workflow, you can use the following and edit your gulpfile.js to include it. To get you started, you can find some of Perch default templates written in Pug on GitHub. Pug files need to be compiled so your adding an extra step here, but you may find Pug files faster to write and/or easier to read. It’s up to you to evaluate whether it’s going to benefit you. Perch:content(id="page_links" encode="false")/Ī(href!=nextURL) Next Should you use Pug in your Perch workflow? Perch:content(id="number_of_pages" type="hidden" )/ Perch:content(id="current_page" type="hidden")/ Let’s re-write another example from the documentation: Perch:content(id="name" type="text" label="Name")/ Li(style!='margin-left:'+catDepth+'0px ') Or if you prefer variables: - var catDepth = '' Perch:category(id="desc" type="textarea" label="Description" editor="markitup" markdown="true" size="s")/ Perch:category(id="catSlug" type="slug" for="catTitle" suppress="true")/ Perch:category(id="catTitle" type="smarttext" label="Title" required="true")/ This can be written like this in Pug: perch:before This is perch/templates/categories/category.html: pug files, you might want to use //- when adding development notes that don’t need to be output to the browser. For example, if your development team mainly look at your. It’s up to you where to keep your comments. - This comment won't be in your perch_template.html so won't get output to the browser This comment will also be in your perch_template.html and get output to the browser pug files and not have them in your perch_template.html at all: The above works fine in Pug, but perhaps you want to keep comments in your. Since we need the special characters we need to use != instead of =.Īlternatively, you can use variables for this: - var url = '' Note that Pug by default escapes special characters in attributes. What you can do instead is writing the tag yourself: a(href!='') Link You cannot do the following as Pug won’t compile the perch:content here: // doesn't workĪ(href='perch:content(id="url" type="text")/') Link In Perch templates we often have Perch tags inside HTML tags. 3- Tags inside another tag’s attributes: Perch:content(id="title" type="text" label="Title")/ Perch:content(id="title" type="text" label="Title") While Pug automatically self-close HTML tags such as img and meta, you need to explicitly self-close your Perch tags when needed: // not self-closing In Pug you can output plain text (including raw HTML) like so: perch:before In this case, we have to manually write the opening and closing tags. It’s common to have an opening tag inside and the closing tag inside. This compiles to: Notes: 1- Manually outputting opening and closing tags: perch:before Here’s how you’d write a simple perch:content tag with Pug: perch:content(id="title" type="text" label="Title")/ So I decided to try using Pug (previously known as Jade), because why not?! I was using a HTML preprocessor on a non-Perch project and I started wondering whether using one to write Perch templates would be a worthy addition to my Perch workflow.