Back to Main Docs © Copyright 2022

# Create New Page

- In example we will create an "About" page in "star-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": "Maestrolux Agency - HTML5 Bootstrap Landing Page Template",
          "prefix": "Maestrolux",
          "footerText": "Maestrolux Agency - All Rights Reserved 2020",
          "logoText": "Maestrolux Theme",
          "projectName": "Agency Project",
          "url": "Maestrolux.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}

# Navigation Menu

This template use 2 type of menu. There are desktop and mobile version

- For Desktop: `src/pug/components/header/header.vue`
- For Mobile: `src/pug/components/header/mobile-menu.vue`
- Those components get the list data from `src/api.js` in "link" and "menu" object.

      "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-

# 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 complete code, for RTL

      // file: src/pug/layouts/base.pug
      - var env = 'dev'

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

      //- Assets Path
      - var multilang = '../../assets'
      - var prod = '../assets'
      - var dev = './assets'

      //- Use assets path
      - var assets = dev

# 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
      }