Joker / jade

Jade.go - pug template engine for Go (golang)
BSD 3-Clause "New" or "Revised" License
354 stars 37 forks source link

amazing work but not sure how to pass variable of function call to include jade file. #53

Open hiqsociety opened 1 year ago

hiqsociety commented 1 year ago

how to pass categories to "include header.jade"? i'm calling Index() once to display all. Any ideas how to pass the categories to the inside of header.jade fille too?

go compile error :

header.jade.go:25:27: undefined: categories

index.jade

:go:func Index(pageTitle string, categories []Category, currentYear int)

mixin for(golang)
    #cmd Precompile jade templates to #{golang} code.

//-  :go:func Index(pageTitle string, vendors []Vendor)

doctype html
html(lang="en")
    head
        title= pageTitle
        link(href='https://classless.de/classless.css', rel='stylesheet')
        link(href='https://classless.de/addons/tabbox.css', rel='stylesheet')
        meta(name='viewport', content='width=device-width, initial-scale=1')
        style.
            :root, html[data-theme='light'] {
                --width: 78rem;
            }
            .login-signup-tab {
                width: 30%; /* change to desired percentage */
                margin: auto;
            }
    body
        header
            include header.jade
        #container.col
            p
                center Use SPRAPP Account
        .login-signup-tab
            div.tabs
                //- Login Tab
                input(type='radio', name='tabs', id='loginTab', checked)
                label(for='loginTab') Log In
                div.tab
                    //- Login Form
                    form(method='POST', action='/u/l')
                        label(for='e') Email
                        input#e(type='email', name='e', required)
                        label(for='p') Password
                        input#p(type='password', name='p', required)
                        input(type='submit', value='Log In')
                //- Signup Tab
                input(type='radio', name='tabs', id='signupTab')
                label(for='signupTab') Sign Up
                div.tab
                    //- Signup Form
                    include signup.jade
                //- Reset Password Tab
                input(type='radio', name='tabs', id='resetTab')
                label(for='resetTab') Reset Password
                div.tab
                    //- Signup Form
                    form(method='POST', action='/u/r')
                        label(for='e') Email
                        input#email(type='email', name='e', required)
                        input(type='submit', value='Reset')
        footer
            include footer.jade

header.jade

center 
    h3 SPRAPP
nav
    ul.navbar
        li.logo
            a(href='/') 
                strong SPRAPP
        each category in categories
            li.dropdown
                a(href=category.URL)= category.Name
                    ul.dropdown-content
                        each subcategory in category.Subcategories
                            li
                                a(href=subcategory.URL)= subcategory.Name
UnrealView commented 1 year ago

Hello @hiqsociety, you can use layout to solve your problem.

There is a small example:

layout.pug

:go:func(arg) pageTitle string, categories []Category, currentYear int

doctype 5

html(lang="en")

    head
        meta(charset='UTF-8')
        meta(name='viewport' content='width=device-width, initial-scale=1.0')

    body
        header
            block header

        block content

    footer
        block footer

page.pug

extends layout

mixin for(golang)
    #cmd Precompile jade templates to #{golang} code.

block header
    include header

block footer
    //include footer

The Go function generated is Jade_page (from the file name) with arguments defined in the layout. The output combine layout, page and header.

hiqsociety commented 1 year ago

@UnrealView sorry i just read this.

but can you provide a real life example? all the examples doesnt show how to pass variables to be displayed in header / footer / body.

can you please provide a simple example? it's strange you have .pug when all i see in the example files are .jade