Skip to content

Layouts & Views

Albedo removes the boilerplate from rendering Jinja2 templates, letting you focus on the actual content of your pages.

Auto-Resolving Layouts

Say goodbye to manually writing {% extends "base.html" %} in every template.

If you place a _layout.html file in a directory, Albedo automatically wraps every page.html in that folder (and its subfolders) with that layout.

app/pages/_layout.html

<!DOCTYPE html>
<html>
    <head>
        <title>My App</title>
    </head>
    <body>
        <nav>My App Navbar</nav>

        <!-- Albedo injects the specific page.html content here -->
        {{ content | safe }}
    </body>
</html>

app/pages/about/page.html

<!-- No HTML boilerplate needed here! -->
<h1>About Us</h1>
<p>This content is injected into the layout automatically.</p>

Opting Out of a Layout

Sometimes you have a specific folder (like an /auth directory for login pages) that shouldn't use the main application layout.

To break out of the layout chain, simply create a new _layout.html inside that specific folder and pass the content through as raw HTML. Because Albedo resolves layouts from the bottom up and stops at the first one it finds, the root layout will be ignored.

app/pages/auth/_layout.html

<!-- Intercepts the main layout and renders the page as a blank slate -->
{{ content | safe }}

Static Assets

Serving client-side CSS, JavaScript, and images is built right in. Any file placed inside the root public/ directory is automatically served at the /static URL path.

Linking to a stylesheet:

<link rel="stylesheet" href="/static/styles.css">

Note: The albedo dev server automatically watches the public/ directory and will hot-reload your browser when CSS or JS files change.

Custom Error Pages

Albedo intercepts HTTP errors and automatically renders custom Jinja templates, wrapping them seamlessly in your existing _layout.html so your site's navigation remains intact.

To customize an error page, create an HTML file matching the HTTP status code directly inside your app/pages/ directory:

  • app/pages/404.html (Not Found)
  • app/pages/500.html (Internal Server Error)