96 lines
2.3 KiB
Markdown
96 lines
2.3 KiB
Markdown
|
# 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
|
||
|
|
```python
|
||
|
|
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
|
||
|
|
```python
|
||
|
|
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`
|
||
|
|
```python
|
||
|
|
<!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`
|
||
|
|
```python
|
||
|
|
<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`
|
||
|
|
```python
|
||
|
|
<footer>
|
||
|
|
${copyright}
|
||
|
|
</footer>
|
||
|
|
```
|