diff options
| author | Divay Prakash <divayprakash@users.noreply.github.com> | 2019-08-01 16:28:05 +0530 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2019-08-01 16:28:05 +0530 |
| commit | f2b33642a9a26ee58853767eade79797050c39bb (patch) | |
| tree | f33dc0552e35a858b8ebc531ce17ba40e5372bcf | |
| parent | 4e38da9b3debe7f689340ab4a41b4a73988d7889 (diff) | |
| parent | 1b57d297ab78e17cc7d223290d2f4560fd20f9cb (diff) | |
Merge pull request #3547 from MichaelJGW/patch-1
[pug/en] Add Pug language tutorial
| -rw-r--r-- | pug.html.markdown | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/pug.html.markdown b/pug.html.markdown new file mode 100644 index 00000000..0187f1e0 --- /dev/null +++ b/pug.html.markdown @@ -0,0 +1,204 @@ +--- +language: Pug +contributors: + - ["Michael Warner", "https://github.com/MichaelJGW"] +filename: index.pug +--- + +## Getting Started with Pug + +Pug is a little language that compiles into the HTML. It has cleaner syntax +with additional features like if statements and loops. It can also be used +as a server side templating language for server languages like NodeJS. + +### The Language +```pug + +//- Single Line Comment + +//- Multi Line + Comment + +//- ---TAGS--- +//- Basic +div +//- <div></div> +h1 +//- <h1></h1> +my-customTag +//- <my-customTag></my-customTag> + +//- Sibling +div +div +//- <div></div> + <div></div> + +//- Child +div + div +//- <div> + <div></div> + </div> + +//- Text +h1 Hello there +//- <h1>Hello there</h1> + +//- Multi Line Text +div. + Hello + There +//- <div> + Hello + There + </div> + +//- ---ATTRIBUTES--- +div(class="my-class" id="my-id" my-custom-attrs="data" enabled) +//- <div class="my-class" id="my-id" my-custom-attrs="data" enabled></div> + +//- Short Hand +span.my-class +//- <span class="my-class"></span> +.my-class +//- <div class="my-class"></div> +div#my-id +//- <div id="my-id"></div> +div#my-id.my-class +//- <div class="my-class" id="my-id"></div> + + +//- ---JS--- +- const lang = "pug"; + +//- Multi Line JS +- + const lang = "pug"; + const awesome = true; + +//- JS Classes +- const myClass = ['class1', 'class2', 'class3'] +div(class=myClass) +//- <div class="class1 class2 class3"></div> + +//- JS Styles +- const myStyles = {'color':'white', 'background-color':'blue'} +div(styles=myStyles) +//- <div styles="{"color":"white","background-color":"blue"}"></div> + +//- JS Attributes +- const myAttributes = {"src": "photo.png", "alt": "My Photo"} +img&attributes(myAttributes) +//- <img src="photo.png" alt="My Photo"> +- let disabled = false +input(type="text" disabled=disabled) +//- <input type="text"> +- disabled = true +input(type="text" disabled=disabled) +//- <input type="text" disabled> + +//- JS Templating +- const name = "Bob"; +h1 Hi #{name} +h1= name +//- <h1>Hi Bob</h1> +//- <h1>Bob</h1> + +//- ---LOOPS--- + +//- 'each' and 'for' do the same thing we will use 'each' only. + +each value, i in [1,2,3] + p=value +//- + <p>1</p> + <p>2</p> + <p>3</p> + +each value, index in [1,2,3] + p=value + '-' + index +//- + <p>1-0</p> + <p>2-1</p> + <p>3-2</p> + +each value in [] + p=value +//- + +each value in [] + p=value +else + p No Values are here + +//- <p>No Values are here</p> + +//- ---CONDITIONALS--- + +- const number = 5 +if number < 5 + p number is less then 5 +else if number > 5 + p number is greater then 5 +else + p number is 5 +//- <p>number is 5</p> + +- const orderStatus = "Pending"; +case orderStatus + when "Pending" + p.warn Your order is pending + when "Completed" + p.success Order is Completed. + when -1 + p.error Error Occurred + default + p No Order Record Found +//- <p class="warn">Your order is pending</p> + +//- --INCLUDE-- +//- File path -> "includes/nav.png" +h1 Company Name +nav + a(href="index.html") Home + a(href="about.html") About Us + +//- File path -> "index.png" +html + body + include includes/nav.pug +//- + <html> + <body> + <h1>Company Name</h1> + <nav><a href="index.html">Home</a><a href="about.html">About Us</a></nav> + </body> + </html> + +//- Importing JS and CSS +script + include scripts/index.js +style + include styles/theme.css + +//- ---MIXIN--- +mixin basic() + div Hello ++basic("Bob") +//- <div>Hello</div> + +mixin comment(name, comment) + div + span.comment-name= name + div.comment-text= comment ++comment("Bob", "This is Awesome") +//- <div>Hello</div> + +``` + + +### Additional Resources +- [The Site](https://pugjs.org/) +- [The Docs](https://pugjs.org/api/getting-started.html) +- [Github Repo](https://github.com/pugjs/pug) |