The basic syntax of page templates pug

This blog first appeared in www.litreily.top

Pug – robust, elegant, feature rich template engine for Node.js

pugFormerly known jade, was renamed because of copyright issues pug, namely pug. The hexodefault module ejs, as pugis a template engine that can be used for rapid web development, of course, can also be used to design a static blog site. This site currently used theme manupassantwas also used pug.

In this paper, Hexothe use pugcase to illustrate the basic syntax.

installation

# common install
npm install pug

# install for hexo blog
npm install hexo-renderer-pug --save

grammar

pugUnlike htmlthe former does not require the opening and closing tags, as htmlis <p>Demo</p>, in puguse p Democan.

indentation

pugFor space sensitive, somewhat similar pythonto a tab tab-sensitive. pugAs indent character spaces, of course, also possible with soft tab. The need to ensure the same level label left-aligned.

div
    p Hello, world!
    p Hello, pug.

Rendering results are as follows:

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

Note

pugUse //-or //the code annotation, annotation content not present in the former the rendered htmldocument, the latter and vice versa.

// - HTML does not contain this line
 // HTML will be included in this line

Attributes

pugThe tag attribute storing in parenthesis ()inner space between the comma or more attributes. In addition, the label idand class, pugusing #keeping label id, use .followed labels class, may be provided a plurality of simultaneously class.

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

↓

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

contain

In order to facilitate code reuse, pugprovided includethat contains the function, the following code sets the _partialdirectory head.pugcontents of the file that contains the location of the current call. A little C/C++in the meaning of inline functions.

doctype html
html (long = ' one ' )
    include _partial/head.pug

inherit

Here is a simple basetemplate, blockdefine the page header headand content body. Block blocksomewhat similar C/C++abstraction function, defined in the successor complete the filling specific content.

//- base.pug
html
    head
        block title
    body
        block content

The following files extendsinherit the template above, by blockcovering or replace the original block block. Of course, the successor can continue to expand based on the original.

//- index.pug
extends base.pug

block title
    title "Test title"

block content
    h1 Hello world!
    block article

Define the variable

pugBy a - var name = valueform defined variable

- was intData = 100 
- was boolData = false 
- was String data = ' test ' 
p. Int = intData
p.bool= boolData
p.stringData= stringData

Note that, when referring to a variable, you need to add in a reference position =number, otherwise it will default to the variable name as an ordinary strings.

If you want to connect to other variables constant or a variable string together, the equal sign can not be used, but should be used #{}, the symbol variable in braces will be evaluated and escape, rendering the finally obtained output content.

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

Structure condition

pugThe conditional statement is similar to other languages, so are as follows:

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

Iteration

pugUsed eachand whileimplemented loop iteration, eachwould return the current value of the index entry is located, counting from zero by default.

// - horse 
ol
    horse item in [ ' Sun ' , ' Mon ' , ' Outcomes ' , ' Wen ' , ' You ' , ' Tue ' , ' 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

↓

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

whileCall as follows:

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

Minix

mixinIt is called mixed , other programming languages similar function , but also to reuse the code, or may be parameters without parameters, defined as follows:

mixin menu-item(href, name)
    at the
        span.dot ●
        a(href=href)= name

Among them, menu-itemis the name used when calling can be considered as a function name hrefand nameparameter. Above defined variables earlier, a(href=href)= namethe second =order to later nameas parameters to process, rather than as a string "name" to handle.

Calling mixindefined code block required by +number immediately mixinname and parameters:

+menu-item('/Archives','Archives')
+menu-item('/About','About')

mixinIt is called mixed, because the syntax is not limited to the function call in mixinyou can use the blockblock

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

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

↓

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

JavaScript

Note the following pugstatement in the first line .number.

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

↓

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

For simple script, use pugis acceptable complex or a separate written .jsdocument, and then by pugreference to a number of convenience, reference is as follows:

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

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

hexo related

In the hexotheme of use pug, it is possible through the use of hexoglobal variables provided config, themerespectively blog root directory of the calling _config.ymlparameters in the file as well as the theme root directory _config.ymlfile parameters.

//- blog config
p= config.description

//- theme config
p= theme.title

 

复制代码

Of course, pugit can be directly used hexoother global variables and auxiliary functions provided, using methods detailed hexoin the document

Examples

//- 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 more

//- base.pug
doctype html
html (long = ' one ' )
    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.pug

among them:

• theme.*As the theme configuration file _config.ymlparameters
• url_forFor the hexofunctions provided resources for finding paths

to sum up

pugProvided that comprises, inheritance, Mixin a variety of ways for code reuse, grammar easy to read, in addition to take some time to learn what the various punctuation mark beginners, the other Actually, I'm too much difficulty.

Of course, pugthere are many other features, but in terms of my current usage, these would be sufficient.

reference

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

Transfer from Denver, author litreily, link: https: //juejin.im/post/5b8aa21251882542b60ebe80