CostaPy / Template / Create

Here is the guide about how to create a template for costapy.

What you need to prepare:

template name
static file and directory
raw HTML template
part or component that you want to create

Create a directory

make a directory with your template name mkdir learn
go to a template directory cd learn
then learn is your template directory

Routing a static file

create static directory inside the template directory.

create main.py inside the template directory and add a static list

static = [
    {
        "route"	: "/templates/learn/css/<filepath:re:.*\.(css|sass|css.map)>",
        "root"	: "./templates/learn/static/css"
    }
]

then you can manage your file on there. For example, put style.css on static/css.

Separate the part or component from the raw HTML template

create html directory inside the template directory. and place your raw index.html in here.

create main.py inside the template directory and set the template parts or components

from core import html

def main(dir, page):
    html_template	= html.main.get_html("templates/learn/html")
    html_page		= html.main.get_html(dir)
    return {
        "index"		: html_template	[ "index.html"	],
        "navbar"	: html_template	[ "navbar.html"	],
        "footer"	: html_template	[ "footer.html"	],
        "container"	: html_page	[f"{page}.html"	]
    }

adjust and separate the code into a modular file. For example, here I separate navbar and footer into a modular file. Use python mako template.

index.html

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>${title}</title>
	<link rel="stylesheet" href="/templates/learn/css/style.css">
  </head>
  <body>
	<header>
	  <h1>${header}</h1>
	</header>
	${navbar}
	<main>
	  ${container}
	</main>
	${footer}
  </body>
</html>

navbar.html

<nav class="navbar">
  % for item in menu:
  % if any(role in item['roles'] for role in user_roles):
  <a class="${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}">
	${item['name']}
  </a>
  % endif
  % endfor
</nav>

footer.html

<footer>
  ${copyright}
</footer>

2.3 KiB Raw Permalink Blame History

CostaPy / Template / Create

Create a directory

Routing a static file

Separate the part or component from the raw HTML template

2.3 KiB

Raw Permalink Blame History