Pug.js is the leading templating engine for Node.js. But it is also works great for general HTML developers and for Python developers.  Like CoffeeScript, Python and Haml, Pug.js uses indentation (whitespace) to define structure, eliminating closing tags, and lots of brackets. This saves typing, reduces errors and makes the code much more readable.

1. Usage
2. Examples
3. Links
4. Class Exercises
5. Render Javascript
6. Javascript Generation
7. Python Interpolation
8. Navbar Exercises
   1. Client Rendered NavBar
   2. Server Rendered Navba
9. Conclusion

 

Usage

For this class, please please go to demo.forestwiki.com, and sign up.  That will give you an account where you can do the exercises. 

At the end of the class, the server is restarted, and all memory is lost.   

 

Here is the command to start your own docker container. 

docker run -d -p 8080:8080 -t pythonlinks/forestwiki

Although the ending number be now be different.  Check here on docker hub for the current  versions. 

 

Examples

First I will show 3 simple examples of Pug. HTML, Chameon and Javascript. 

HTML Example

Python Example

Javascript Example

Then show this websites navbar Pug.  Then show the remote PyOdide Menu and the local one and its navbar Pug.

After learning the basics  two exercises.

Links

Here is the Pug.js Web site. That is where you find the documentation.  Here is the github page.  I wrote up a better README for their github page. And here is the documentation for Multi Cursor.  There are multiple versions of Pug. We are using the Javascript version from Node.js, but running in the browser.  Here is the documentation for Chameleon Page Templates.  And their Language Reference.  The latter is more useful. 

Class Exercises.

First I give everyone their own container on their own subdomain.  This eliminates installation hassles.
Please Login.  admin:admin

1. Create a Pug object. Best to do this in the root directory.   Javascript -> Pug    You need to enter the URL segment name, and a title.  The create buttons are at the top of the page.

2. Center the title.  Use the little known <center></center> tag.  A very simple exercise, but it really tests if you got the idea of how pug works. Use the center tag.  Hint: above and below should be indents. Look at it in the page view lower right hand side of the page. 

3. Change the title tag to a p tag and make the paragraph bold.  Just to make sure you got the idea. 

4. We will  create a link around the title.  Here is how we do the attributed.   (href="http:forestwiki.com").  Make sure there is no space between the a tag and the open parenthesis. 

5. Now add a space between the "a" and the parenthesis.  See what happens. Never forget!

7. Text  Use |  dots and extended dots.  "p.", |p| with an indednted "."  on the next line.  and a line starting with "|"

8. Comments  

     // and //-

It has been reported that comments generate an error.  But I could not reproduce it.  Just reload the page. 

9. MultLine Attributes

input(
  type='checkbox'
  name='agreement'
  checked
)

10.  Now use the   MultiLine Cursor  to move your multi line attributes. 

11. Add the "doctype html."

12. Add the (lang ="en") to the html tag.  

13.  For html beginners, let us create aHeader, paragraph, table, img, embed a youtube video, float a div left. 

These are the basic commands.  You can look up more advanced ones in the Pug Documentation.  Are there any more commands I should have included in this part of the tutorial?

Render Javascript

This is still static page generation.  But now we will create a script that runs on the client side. 

1. Add a script to the body that writes on the page

    document.write("Hello Again World");

1. Add in jQuery to the header. Here is the JQuery CDN.

2. And then display "hello world" using javascript.  This time you get a hint. 

     $("body")[0].innerHTML = "HELLO YET AGAIN"

The different hello messages let you know that all is working as it should. 

Javascript Generation

Now we move onto using Javascript to affect page generation.  

1. In the  Javascript Example change the true to false. 

2. Display the value variable.   Now back to your sandbox. 

2. Add a conditional in Javascript

    if (True)

    if (False)

What else should I add to this section?

Python Interpolation

Interpolate in Python We are doing views on objects.  The variable "view" is the view object.  The variable "context" is the context object.  Here are the docs.   Followed by some exercises. 

   View API 

    ${context.title}

    ${view.getDomain()}

    ${view.url()}

     $ {view.context.__parent__.title}

     $ {vcontext.__parent__.description}

     $ {context.__parent__.source}

    ${view.getRoot().title}

   View API

   tal:condition = ${view.isAuthenticated()}

  tal:repeat = "item range(10)"

   tal:repeat = "item view.context.__parent__.values()"

         ${item.title}

Here are the repeat variables. 

    ${item.repeat.number}

 

Attribute	Description
index	Repetition number, starting from zero.
number	Repetition number, starting from one.
even	True for even-indexed repetitions (0, 2, 4, …).
odd	True for odd-indexed repetitions (1, 3, 5, …).
parity	For odd-indexed repetitions, this is ‘odd’, else ‘even’.
start	True for the starting repetition (index 0).
end	True for the ending, or final, repetition.
length	Length of the sequence, which will be the total number of repetitions.
letter	Repetition number as a lower-case letter: “a” - “z”, “aa” - “az”, “ba” - “bz”, …, “za” - “zz”, “aaa” - “aaz”, and so forth.
Letter	Upper-case version of letter.
roman	Repetition number as a lower-case roman numeral: “i”, “ii”, “iii”, “iv”, “v”, etc.
Roman	Upper-case version of roman.

 

1. Display the page title.

2. Disply the page source. context.source

3. Display the parent title, and source.  ${structure: context.parent.source}

4. So display 10 lines. 

5. Display the line numbers.

6, On the first and last line say first and last. 

About the Forest Wiki

So far the work has all been in a single Pug Object.  Now we are going to start working in multiple objects.  One is the index object.  That generates a page and calls a javascript function generated by Pug.  The other is the Pug object.  Studetns get a bit lost, so here I take a few mintues to describe the Forest Wiki.  I will be offering classes on it in the future.  

Navbar Exercises

Where Pug really shines is in complex html layouts.  Navbars being the best example I know of.  So I have two navbar examples.  One in 

This class has  two exercises.  One for server side rendering.  Chameleon Page Templates. And one for client side rendering. 

Which does the class prefer? 

Client Rendered NavBar

1. Add a link to your home page. 

2. From the Bootstrap 4 Navbar Template add your brand.

2. If the user is not authenticated give them the login link (./login).

3. Use Pug interpolation to display the #{title} as the text in a hyperlink. Take a look at the json  in the index file which defines the title.  

3. Display the page content.  ${context.source}.  First add it to the javascript locals variable in the index page, make sure that works,  then display it. 

Server Rendered Navbar (Python Page Templates)

1. Add a link to your home page. 

2. From the Bootstrap 4 Navbar Template add your brand.

2. If the user is not authenticated give them the login link (./login).

3. Display the page content.  ${context.source}.  First add it to the javascript locals variable in the index page, make sure that works,  then display it. 

 

Conclusion 

  If you liked this class please upvote my Awesome Python pull request.

And is your company on the map of Python companies in Europe?

 Built using the  Forest Map Wiki