Create New Page

In example we will create an "About" page in "starter-project" by adding the following content to starter-project/src/pug/pages/about.pug


extends ../layouts/app.pug

block variables
  - var pageTitle = " - About"
  
block content
  div
    #home
    .main-wrap
      include ../components/header/header.pug
      +header(true)
      .container-wrap.py-10.py-sm-4
        section.space-top.space-bottom
          h2.display-3.text-center.mb-4 About Us
      section.space-top
        include ../components/footer.pug

Generate the HTML
```
gulp build
```
It will generate file about.html in root directory.
And watch the changes result
```
gulp
```
Then we can access that page with http://localhost:9000/about

Create New Component

Go to src/pug/components/
Create new file hello.pug

In that file create a simple code

// file: /src/pug/components/hello.pug
div
  h4 Hello World
  h5.display-1.text-center Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  p Vestibulum dignissim orci vitae eros rutrum euismod. Vestibulum tempor, sem et molestie egestas, dui tortor laoreet tellus, id rhoncus mauris neque malesuada augue. Duis tristique metus magna, lobortis aliquam risus euismod sit amet.
  p Suspendisse porttitor velit nisl, feugiat tincidunt nisl mattis ut. Nulla lobortis nunc vitae nisi semper semper. Sed mi neque, convallis at ipsum at, blandit pretium enim. Nunc quis sem quis velit tincidunt congue a sit amet ante. In hac habitasse platea dictumst.

Open a target page where you want use it. Ex: Open src/pug/pages/about.pug. (Example page that we've made in previous section)

Then include it inside template


include ../components/hello.pug

Here's complete code

// file: src/pug/pages/about.pug
extends ../layouts/app.pug

block variables
  - var pageTitle = " - About"
  
block content
  div
    #home
    .main-wrap
      include ../components/header/header.pug
      +header(true)
      .container-wrap.py-10.py-sm-4
        section.space-top.space-bottom
          h2.display-3.text-center.mb-4 About Us
          // Add new component
          include ../components/footer.pug
      section.space-top
        include ../components/footer.pug

If you run with gulp command, the updates will change immediately. And the physical file will be updated in about.html
Then you can check the result at http://localhost:9000/about

Brand/Project Name

Open src/api.json

Here's bellow the available brand attribute for example Agency THeme

brand": {
  "agency": {
    "name": "Agency",
    "desc": "Nirwana Agency - HTML5 Bootstrap Landing Page Template",
    "prefix": "Nirwana",
    "footerText": "Nirwana Agency - All Rights Reserved 2020",
    "logoText": "Nirwana Theme",
    "projectName": "Agency Project",
    "url": "nirwana.ux-maestro.com/agency",
    "img": "/images/agency-logo.png",
    "notifMsg": "Donec sit amet nulla sed arcu pulvinar ultricies commodo id ligula"
  }
},

Those attribute is used pug as variable object. After run gulp build it will affect in HTML ‹head› content and other branding purpose.

Example use in src/pug/layouts/document.pug

meta(
  name="description"
  content=brand.agency.desc
)
meta(property="og:url" content=brand.agency.url)
meta(property="og:title" content=brand.agency.projectName)
title #{brand.agency.name} - #{pageTitle}

"link": {
  "movie": {
    "home": "index.html",
    "detail": "detail-movie.html",
    "login": "login.html",
    "register": "register.html"
  }
},
"menu": {
  "movie": [
    {
      "name": "promotions",
      "offset": 0
    },
    {
      "name": "featured",
      "offset": 0
    },
    {
      "name": "top",
      "offset": 0
    },
    {
      "name": "all",
      "offset": 0
    },
    {
      "name": "pricing",
      "offset": 0
    }
  ]
},

Change Theme

This template has 24 Themes with dark/light appearance. And also support for RTL direction. You can change the layout via theme panel but not permanently. To make the layout permanent just follow this step.

Open src/pug/layouts/app.pug
In pug file just change the class name
For dark/light mode in .m-application by switch between .theme--dark or .theme--light
- Dark mode:
```
#app.m-application.theme--dark.transition-page
```
- Light mode:
```
#app.m-application.theme--light.transition-page
```
For theme color in .m-content by change .[theme-name]-var with available theme from src/scss/utils/_color-var.scss - In example joker theme color
```
#main-wrap.m-content.passion.joker-var
```

Here's the complete code, for joker color in dark mode

// file: src/pug/layouts/app.pug
extends ./document.pug

block variables
block layout
  #app.m-application.theme--dark.transition-page
    .loading
    #main-wrap.m-content.passion.joker-var
      block content-

!IMPORTANT

If you change the palette variable, don't forget to update this following files as well
** Crytpo Theme: crypto-theme/src/pug/components/gradient-deco.pug
** Saas Theme: saas-theme/src/pug/components/testimonials.pug
** Hosting Theme: hosting-theme/src/js/banner-animation.js

Make sure the stop-color has same value as in src/scss/utils/_color-var.scss

Use 2D/3D Illustration images

This template including illustration vector images. And for the HTML uses PNG format with 2 version, Flat(2D) and 3D. You can switch between them and applied to all HTML files.

Open src/pug/layouts/base.pug
In pug file just change the variable img_artwork (For homepage) and img_artworkInner (for inner page) with avalable value (commented)
All the source images get from src/api.json

Here's the code

3D Version


  - var img_artwork = imgAPI.agency3d
  - var img_artworkInner = imgAPI.agencyInner3d

2D Version


  - var img_artwork = imgAPI.agency2d
  - var img_artworkInner = imgAPI.agencyInner2d

Generate the HTML
```
gulp build
```

Change Header, Footer and Corner

This template coming with 7 variant headers, 4 variant footers and 2 type bottom corner. As You can see in custom-components/, but for implementatin, that's need to copy manually. With Pug.js, You can use them and generate all html files instantly.

Open src/pug/layouts/base.pug
In pug file just change the variable headerType, footerType and cornerType
Change with avalable value (commented)

Here's the code

// file: src/pug/layouts/base.pug
//- UI Header
- var headerType = 'basic' // available: mixed, basic, droplist, mega, hamburger, navscroll, search

//- UI Footer
- var footerType = 'blog' // available: basic, blog, contact, sitemap

//- UI Floating corner
- var cornerType = 'nav' // available: chat, nav

Generate the HTML
```
gulp build
```

Change Layout direction (LTR & RTL)

This template support for RTL direction. You can change the layout via theme panel but not permanently. To make the layout permanent just follow this step.

Open src/pug/layouts/base.pug
In pug file just change the variable doc_dir to RTL or LTR. And you need to adjust the language variable doc_lang as well.

Here's the code for RTL

// file: src/pug/layouts/base.pug

//- HTML attribute
- var doc_lang = 'ar'
- var doc_dir = 'rtl'

Youtube Config

This template us Youtube API To use this feature we recommend to use https in production. If not there will be some warnings in browser console related cookies and security.

You can disable this feature by open src/api.json in "youtube" object then set set use: false.

"youtube": {
    "use": true
  }

Set Language

To set default language

Open gulpfile.js
in function view() change the locales to any locale json file
In example for Português
```
locales: 'src/locales/pt.json'
```

Full code

function views() {
  var options = {
    i18n: {
      dest: './',
      namespace: '$t',
      localeExtension: true,
      locales: 'src/locales/pt.json'
    },
    data: JSON.parse(fs.readFileSync('./src/api.json'))
  };
  return (
    gulp.src('src/pug/pages/*.pug')
    .pipe(plumber())
    .pipe(pugI18n(options))
    .pipe(prettyHtml({ indent_size: 2 }))
    .pipe(ext_replace('.html', '.en.html'))
    .pipe(gulp.dest(options.i18n.dest))
    .pipe(connect.reload())
  )
}

Add new language
1. By default, gulp-i18n-pug expects your translations to be organised as such by create new language JSON library in src/locales/[localeCode].json
```
└── src
    └── locales
        ├── en.json
        ├── de.json
        └── pt.json
```

Write object as text translation

For example portuguese in src/locales/pt.json

"agency_landing": {
    "header_login": "Conecte-se",
    "header_register": "registro"
}

Put the messages to the Pug file
1. Pick one of sample Components with cointaining text, i.e /componens/header/header.pug
2. Basically the message return is String. And next step is replace/add every string in components
3. Add a translated text inside components
```
h4.use-text-title2 #{$t.agency_landing.header_login}
h4.use-text-title2 #{$t.agency_landing.header_register}
```
4. Then run gulp build. The translated result will in root directory.
5. To generate all available languages, please change variable assets in src/pug/layouts/base.pug
```
//- Assets Path
- var multilang = '../../assets'
- var prod = '../assets'
- var dev = './assets'

//- Use assets path
- var assets = multilang // Change this
                        
                            
```
  Then please run
```
gulp translate
```
6. The translated result will available in multilang/**/*.html

Pug.js Coding