Pug basic syntax for web templates

The blog was first published at www.litreily.top

Pug — Robust, Elegant, feature Rich Template Engine for Node.js

Originally known as Jade, puG was renamed puG due to copyright issues. Like ejS, the Hexo default module, PUG is a template engine that can be used for fast web site development and, of course, for static blog site design. The theme currently used on this site, Manupassant, also uses puG.

This article illustrates the basic syntax of puG in Hexo as an example.

The installation

# common install
npm install pug

# install for hexo blog
npm install hexo-renderer-pug --save
Copy the code

grammar

Pug is different from HTML, puG does not need to open and close tags, such as HTML

Demo

, puG can use P Demo.

The indentation

Pug is sensitive to Spaces, much like Python is sensitive to the TAB character. Pug uses a space as an indent, but soft TAB also works. Labels at the same level must be aligned to the left.

div
    p Hello, world!
    p Hello, pug.
Copy the code

Render the result as follows:

<div>
    <p>Hellow, world!</p>
    <p>Hello, pug.</p>
</div>
Copy the code

annotation

Pug uses //- or // to comment the code, the former commenting content does not appear in the rendered HTML file, and the latter vice versa.

//- HTML does not contain this line // HTML does contain this lineCopy the code

attribute

Pug stores tag attributes in parentheses (), separated by commas or Spaces. In addition, for the id and class of the tag, puG uses # to follow the tag ID, using. Following the tag class, you can set multiple classes at the same time.

h1#title Test title
img#name.class1.class2(src="/test.png" alt="test")
Copy the code

left

<h1 id="title">Test title</h1>
<img id="name" class="class1 class2" src="/test.png" alt="test">
Copy the code

contains

Pug provides include for code reuse. The following code includes the contents of the head.pug file in the _partial directory to the current call location. Sort of C/C++ for inline functions.

doctype html
html(lang='en')
    include _partial/head.pug
Copy the code

inheritance

Here is a simple Base template that defines the page header head and content body with blocks. A block is a bit like a C/C++ abstract function that needs to be defined in an inheritor to fill in the concrete content.

//- base.pug
html
    head
        block title
    body
        block content
Copy the code

The following files inherit the above template using extends, overwriting or replacing the original block block with a block. Of course, the successor can also build on the original foundation.

//- index.pug
extends base.pug

block title
    title "Test title"

block content
    h1 Hello world!
    block article
Copy the code

Define variables

Pug defines variables in the form of -var name = value

- var intData = 100
- var boolData = false
- var stringData = 'Test'
p.int= intData
p.bool= boolData
p.stringData= stringData
Copy the code

Note that when referencing a variable, you need to add an = sign at the reference position; otherwise, the variable name is used as a normal string by default.

If you want to concatenate a variable with another string constant or variable, instead of using an equal sign, you should use #{}, which evaluates and escapes the variables inside curly braces, resulting in the rendered output.

- var girl = 'Lily'
- var boy = 'Jack'
p #{girl} is so beautiful!
p And #{boy} is handsome.
Copy the code

Conditions of structure

Conditional statements in PUG are similar to those in other languages:

- var A = {value: 'Test'}
- var B = true
if A.value
    p= A.value
else if B
    p= B
else
    p nothing
Copy the code

The iteration

Pug uses each and while to iterate. Each returns the index of the current item, counting from 0 by default.

//- each
ol
    each item in ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']
        li= item

//- get index of each
- var week = ['Sun', 'Mon', 'Tus', 'Wen', 'Thu', 'Fri', 'Sat']
ol
    each item, index in week
        li= index + ':' + item
Copy the code

left

<ol>
  <li>Sun</li>
  <li>Mon</li>
  <li>Tus</li>
  <li>Wen</li>
  <li>Thu</li>
  <li>Fri</li>
  <li>Sat</li>
</ol>
<ol>
  <li>0:Sun</li>
  <li>1:Mon</li>
  <li>2:Tus</li>
  <li>3:Wen</li>
  <li>4:Thu</li>
  <li>5:Fri</li>
  <li>6:Sat</li>
</ol>
Copy the code

The while is called as follows:

//- while
- var day = 1
ul
    while day < 7
        li= day++
Copy the code

Minix

Mixins are called mixins. They are similar to functions in other programming languages, and also for code reuse. They can take parameters or no parameters.

Mixin menu-item(href, name) li span. Dot ● a(href=href)= nameCopy the code

Where, menu-item is the name used in the call, which can be considered as the function name, and href and name are parameters. The second = in a(href=href)= name is intended to treat the following name as an argument, rather than as a string “name”.

To call a block of code defined by a mixin, follow the mixin name and argument with a + sign:

+menu-item('/Archives','Archives')
+menu-item('/About','About')
Copy the code

Mixins are called mixins because their syntax is not limited to function calls; blocks can be used in mixins

mixin print(post)
    if block
        block
    else
        p= post

+print("no block")
+print("")
    div.box
        p this is the content of block
Copy the code

left

<p>no block</p>
<div class="box"><p>this is the content of block</p></div>
Copy the code

JavaScript

Note the first line of the following puG statement. Number.

script(type='text/javascript').
    var data = "Test"
    var enable = true
    if enable
        console.log(data)
    else
        console.log('nothing')
Copy the code

left

<script type='text/javascript'>
    var data = "Test"
    var enable = true
    if enable
        console.log(data)
    else
        console.log('nothing')
</script>
Copy the code

For simple scripts, pug is ok. For complex scripts, it is better to write them in a.js file. Pug references are more convenient.

script(type='text/javascript', src='/path/to/js')

//- with hexo function url_for
script(type='text/javascript', src=url_for(theme.js) + '/ready.js')
Copy the code

Hexo related

When using pug in a hexo theme, you can call the parameters in the _config.yml file in the blog root directory and the parameters in the _config.yml file in the theme root directory by using the global variable config provided by hexo.

//- blog config
p= config.description

//- theme config
p= theme.title
Copy the code

Of course, other global variables and helper functions provided by Hexo can be used directly in PUG, as described in hexo’s documentation

The sample

//- head.pug head meta(http-equiv='content-type', content='text/html; Charset = UTF-8 ') meta(content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0', name='viewport') meta(content='yes', name='apple-mobile-web-app-capable') meta(content='black-translucent', name='apple-mobile-web-app-status-bar-style') meta(content='telephone=no', name='format-detection') meta(name='description', content=config.description) block title link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/style.css' + '?v=' + theme.version) link(rel='Shortcut Icon', type='image/x-icon', href=url_for('favicon.png')) script(type='text/javascript', SRC = "/ / cdn.bootcss.com/jquery/3.3.1/jquery.min.js) block moreCopy the code

//- base.pug doctype html html(lang='en') include _partial/head.pug block more link(rel='stylesheet', type='text/css', href=url_for(theme.plugins) + '/prettify/doxy.css') script(type='text/javascript', src=url_for(theme.js) + '/ready.js' + '? v=' + theme.version, async) //- body body: #container.box .h-wrapper include _partial/nav-menu.pug // article content block content include _partial/footer.pugCopy the code

Among them:

theme.*Configuration file for the topic_config.ymlThe parameters in the
url_forforhexoA function provided to find the path of a resource

conclusion

Pug provides multiple methods for code reuse such as inclusion, inheritance, Mixin, and so on. The syntax is simple and easy to understand, except that it takes some time to learn the meaning of various punctuation marks when you first learn puG, other things are not too difficult.

Of course, puG has many other features, but for my current use, that’s enough.

reference

Pugjs.org/zh-cn/api/g…
hexo.io/zh-cn/docs/

The installation

grammar

The indentation

annotation

attribute

contains

inheritance

Define variables

Conditions of structure

The iteration

Minix

JavaScript

Hexo related

The sample

conclusion

reference

Related Posts

This time, I’m going to understand the modularity of javascript

Vue data response principle

JavaScript implements Flatten in various ways