Docs menu
Getting started
IntroductionInstallationProject structureBuilding pages
RoutingPagesLayoutsStylingMarkdownContent and dataIslandsGoing live
SEO and headDeployingFormsGuides
Build a brochure siteAdvanced
Running as a serverReference
ReferenceBuilding pages
Layouts
The tag that wraps every page, and how to use others.
src/layouts/default.imba wraps every page. The page goes where the <slot> is:
export default tag Layout
meta = {}
path = '/'
<self>
<header>
<a href='/'> "My site"
<a href='/about' [fw:700]=(path == '/about')> "About"
<main> <slot>
<footer> "© {new Date!.getFullYear!}"
A layout receives:
meta: the page's final meta (title, description, any extra fields you add)path: the current URL path, handy for highlighting the current linkparams: the page's URL params
Other layouts
Every file in src/layouts/ is available by name:
- Markdown pages pick one in their front matter:
layout: proseusessrc/layouts/prose.imba;layout: falseuses none. .imbapages export it:export const layout = ProseLayout(imported), orexport const layout = nullfor no layout at all.
A layout can wrap another one, which is handy for a "long text" variant of the default:
# src/layouts/prose.imba
import Layout from './default'
export default tag ProseLayout
meta = {}
path = '/'
<self>
<Layout meta=meta path=path>
<article>
<h1> meta.heading or meta.title
<slot>
The rest of the page
The layout is everything inside <body>. The <html> and <head> around it are written by
imba-pages from the page's meta and src/site.imba; see SEO and head.