diff --git a/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md b/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md index 3f605fa3abf..7c9d1aa2411 100644 --- a/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md +++ b/curriculum/challenges/english/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md @@ -12,15 +12,39 @@ One of the greatest features of using a template engine is being able to pass va In your Pug file, you're able to use a variable by referencing the variable name as `#{variable_name}` inline with other text on an element or by using an equal sign on the element without a space such as `p=variable_name` which assigns the variable's value to the p element's text. -We strongly recommend looking at the syntax and structure of Pug [here](https://github.com/pugjs/pug) on GitHub's README. Pug is all about using whitespace and tabs to show nested elements and cutting down on the amount of code needed to make a beautiful site. + Pug is all about using whitespace and tabs to show nested elements and cutting down on the amount of code needed to make a beautiful site. Read the Pug documentation for more information on usage and syntax. + + Here is an example: + + ```html + + head + script(type='text/javascript'). + if (foo) bar(1 + 5); + body + if youAreUsingPug + p You are amazing + else + p Get on it! + + + + + + +

You are amazing

+ + ``` -Looking at our pug file 'index.pug' included in your project, we used the variables *title* and *message*. +Looking at our pug file `index.pug` included in your project, we used the variables `title` and `message`. -To pass those along from our server, you will need to add an object as a second argument to your *res.render* with the variables and their values. For example, pass this object along setting the variables for your index view: `{title: 'Hello', message: 'Please login'}` +To pass those along from our server, you will need to add an object as a second argument to your `res.render` with the variables and their values. For example, pass this object along setting the variables for your index view: `{title: 'Hello', message: 'Please login'}` -It should look like: `res.render(process.cwd() + '/views/pug/index', {title: 'Hello', message: 'Please login'});` Now refresh your page and you should see those values rendered in your view in the correct spot as laid out in your index.pug file! +It should look like: `res.render(process.cwd() + '/views/pug/index', {title: 'Hello', message: 'Please login'});` Now refresh your page and you should see those values rendered in your view in the correct spot as laid out in your `index.pug` file! -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point [here](https://gist.github.com/camperbot/4af125119ed36e6e6a8bb920db0c0871). +Submit your page when you think you've got it right. If you're running into errors, you can check out the [project completed up to this point](https://gist.github.com/camperbot/4af125119ed36e6e6a8bb920db0c0871). # --hints--