PUG Page Structure

Folder Structure

                
                    modern-admin/
                    ├── src/
                    |   ├── template-builder/
                    |   |   ├── contents/
                    |   |   ├── pages/
                    |   |   |   ├── sections/
                    |   |   |   |   ├── page-headers/
                    |   |   |   ├── template.pug
                    |   |   |   ├── dashboard-index.pug
                    |   |   |   ├── etc...

Modern builder pages/ folder contain all PUG file. Each PUG file include one content HTML file from contents/ folder.

Grunt command Layout value will be use in template.pug, it helps pug file to select for which template page needs to be generate.

PUG Configuration

Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.

PUG Code

              
                block pageVars
                    - var pageTitle    = "Dark Layout"
                    - var pageSubTitle = "Dark template layout"
                    - var description  = "The dark layout has dark version navbar, navigation & footer."
                    - var activeMenu   = "layout-dark"

                extends template

                append pageConfig
                    - var logoType = "light"

                append navbarConfig
                    - var navbarColor = "navbar-dark"

                append verticalMenuConfig
                    - var menuColor = "menu-dark"

                append horizontalMenuConfig
                    - var horizontalMenuColor = "navbar-dark"

                append footerConfig
                    - var footerColor = "footer-dark"

                append breadcrumbs
                    +breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Page Layouts"}, {name:"Dark Layout"}])

                //- Include page content in page block
                append content
                    include ../contents/layout-dark.html

                //- Vendor CSS
                //------------------------------
                //- Add Vendor specific CSS
                append vendorcss
                    link(rel='stylesheet', type='text/css', href='../app-assets/vendors/css/ui/prism.min.css')

                //- Page CSS
                //------------------------------

                //- Add custom page specific CSS
                append pagecss

                //- Vendor JS
                //------------------------------
                //- Add vendor specific JS
                append vendorjs
                    script(type='text/javascript' ,src='../app-assets/vendors/js/ui/prism.min.js')

                //- Page JS
                //------------------------------
                //- Add custom page specific JS
                append pagejs

Page Variables

Page variables help you to define each page title, sub-title, description & menu slug. Menu slug will be use to set active menu for this page. Refer line no: 1-5

Block

Variable

Value

pageVars

pageTitle	"Your page specific title"
pageSubTitle	"Your page specific sub title"
description	"Your page specific desc."
activeMenu	"menu-slug"

Page level customization

As we have already set page level customization variables on template file, you just need to set only those variables which you want to use on specific page only. Ex: Vertical menu template has dark header and menu, now if you need light navbar or header you can re-define those block and variable to set vale for page specific.Refer line no: 9-22

Block

pageConfig

Variable	Datatype	Value
contentLayout	string	"1-column", "2-columns", "content-left-sidebar", "content-right-sidebar", "content-detached-left-sidebar", "content-detached-right-sidebar"
menuOpen	boolean	"click", "hover"
logoType	boolean	"light", "dark"
boxedLayout	boolean	true, false
centerLayout	boolean	true, false
sidebarSticky	boolean	true, false
starterKit	boolean	true, false

navbarConfig

Variable	Datatype	Value
navbarPosition	string	"fixed-top", "navbar-fixed-bottom" ,"navbar-static-top"
navbarColor	string	"navbar-light", "navbar-dark", "navbar-semi-dark"
navbarBrandCenter	boolean	true/false
navbarHideOnScroll	boolean	true/false
navbarBorder	boolean	true/false
navbarShadow	boolean	true/false

verticalMenuConfig
for vertical layout only

Variable	Datatype	Value
menuType	string	"menu-fixed", "menu-static"
menuColor	string	"menu-light", "menu-dark"
menuOpenType	string	"menu-accordion", "menu-collapsible"
menuFlipped	boolean	true/false
menuNativeScroll	boolean	true/false
menuIconRight	boolean	true/false
menuBorder	boolean	true/false
menuShadow	boolean	true/false
verticalMenuConfig	boolean	true/false

horizontalMenuConfig
for horizontal layout only

Variable	Datatype	Value
menuType	string	"navbar-fixed", "navbar-static"
menuColor	string	"navbar-light", "navbar-dark"
menuFlipped	boolean	true/false
menuIconRight	boolean	true/false
menuWithoutDDArrow	boolean	true/false
menuBorder	boolean	true/false
menuShadow	boolean	true/false

footerConfig

Variable	Datatype	Value
footerType	string	"navbar-fixed-bottom", "footer-static"
footerColor	string	"footer-light", "footer-dark", "footer-transparent"
footerBorder	boolean	true/false
footerShadow	boolean	true/false

Page Breadcrumbs

You can define here your page breadcrumbs name, url and current page. Refer line no: 24-25

Page Includes

Page includes define the page-header content, sidebar etc... based on your requirement.Refer line no: 29-39

Block	Includes	Options
header	`include sections/header/{{header-name}}`	"header", "header-back", "header-min", "header-simple"
main-menu	`include sections/menu/{{menu-name}}`	"vertical-menu", "vertical-overlay-menu", "horizontal-menu"
footer	`include sections/footer/{{footer-name}}`	"footer", "footer-custom"

Page specific dependency

You can append vendor and custom js & css dependencies on page level using vendorcss, pagecss, vendorjs & pagejs block. Refer line no: 44-63

PUG Page Structure

Back to top