Lotus
English简体中文
Type to search documentation.

Customization

Page Layouts

Build custom Astro pages with Lotus layout exports.

View as MarkdownOpen in ChatGPTOpen in ClaudeOpen in GrokOpen in Perplexity

Lotus exports page-level layout primitives from @prosefly/astro-theme-lotus/layouts. Use them for custom Astro routes such as pricing pages, changelogs, landing pages, legal pages, and other pages that should share the same theme shell without using the docs sidebar layout.

Exports

ExportPurpose
BaseLayoutDocument shell with Lotus styles, appearance attributes, metadata, favicon, JSON-LD, and assistant widget support.
DocsContextLayoutThin wrapper around DocsLayout that resolves docs navigation from currentSection.
DocsLayoutDocumentation chrome with the sticky docs header, left sidebar, main content slot, right aside slot, and footer.
SiteHeaderSite header with brand, search, navbar, socials, language selector, theme switch, and mobile menu.
SiteFooterFooter shell using the configured brand, copyright, credits, and footer links.
SplashLayoutComplete splash page layout with site header, hero area, content section, and footer.
TextLayoutComplete centered prose layout for terms, privacy, and other plain text pages.

Use DocsLayout when a custom collection should feel like documentation, such as API reference pages. It owns the docs header, left sidebar, responsive mobile docs navigation, and footer. You provide the main content and optional right aside with slots.

DocsLayout does not calculate navigation. Pass resolved subnav, sidebar, and resolved sidebar data to keep the layout reusable across docs, API reference pages, and other custom collections. Lotus docs routes can use helpers from @prosefly/astro-theme-lotus/navigation; custom collections can create the same data shape directly.

astro
---
import { DocsLayout } from '@prosefly/astro-theme-lotus/layouts';
import type {
  DocsSectionNav,
  DocsSidebarNav,
} from '@prosefly/astro-theme-lotus/navigation';


const sidebar: DocsSidebarNav = {
  links: [{ label: 'Overview', href: '/api/' }],
  groups: [
    {
      title: 'Pets',
      items: [
        { label: 'List pets', href: '/api/list-pets/' },
      ],
    },
  ],
};


const subnav: DocsSectionNav[] = [
  {
    slug: 'api',
    label: 'API',
    href: '/api/',
    active: true,
    items: [],
  },
];
---


<DocsLayout
  title="List pets"
  currentPath="/api/list-pets/"
  subnav={subnav}
  sidebar={sidebar}
  headings={[]}
>
  <h1>List pets</h1>
  <p>Render your custom page content here.</p>


  <aside slot="aside">
    <p class="text-sm text-(--lotus-text-muted)">Endpoint metadata</p>
  </aside>
</DocsLayout>

Header Controls

SiteHeader is a standalone shell header for custom pages. It accepts page-level switches for pages that share Lotus branding and navigation but do not need the full docs header behavior.

astro
<SiteHeader
  currentPath="/blog/"
  search={false}
  assistant={false}
  showLanguage={false}
  showSocials={false}
/>

Use these props for template pages such as blogs, marketing pages, and custom dashboards. They do not change the global Lotus config.

Pricing Page

Use BaseLayout when the page needs a custom composition:

src/pages/pricing.astro
---
import {
  BaseLayout,
  SiteFooter,
  SiteHeader,
} from '@prosefly/astro-theme-lotus/layouts';
import { PageSection } from '@prosefly/astro-theme-lotus/blocks';
import { Card, CardGrid } from '@prosefly/astro-components';
---


<BaseLayout title="Pricing" description="Choose a plan for your team.">
  <SiteHeader currentPath="/pricing/" />


  <main>
    <PageSection class="text-center" size="lg">
      <p class="text-sm font-medium text-(--lotus-accent)">Pricing</p>
      <h1 class="mt-3 text-4xl font-semibold text-(--lotus-text-strong)">
        Plans for every documentation team
      </h1>
      <p class="mx-auto mt-4 max-w-2xl text-(--lotus-text-muted)">
        Start with the free plan and upgrade when your docs need more workflow.
      </p>
    </PageSection>


    <PageSection padding="md" size="lg">
      <CardGrid>
        <Card icon="lucide:sparkles" title="Starter">
          Publish a polished documentation site with the default Lotus shell.
        </Card>
        <Card icon="lucide:building-2" title="Team">
          Add search, page actions, contributors, and custom navigation.
        </Card>
      </CardGrid>
    </PageSection>
  </main>


  <SiteFooter />
</BaseLayout>

Splash Page

Use SplashLayout when the page matches the built-in hero plus content shape:

astro
---
import { SplashLayout } from '@prosefly/astro-theme-lotus/layouts';
---


<SplashLayout
  title="Pricing"
  description="Plans for teams and builders."
  hero={{
    title: 'Pricing',
    tagline: 'Choose the right plan for your docs.',
    actions: [
      { text: 'Get started', link: '/docs/overview/', variant: 'primary' },
    ],
  }}
>
  <p>Use normal Astro, Markdown, or MDX content here.</p>
</SplashLayout>

Text Page

Use TextLayout for standalone prose:

astro
---
import { TextLayout } from '@prosefly/astro-theme-lotus/layouts';
---


<TextLayout title="Terms" description="Terms for using this service.">
  <p>Terms content goes here.</p>
</TextLayout>

Blog Pages

Blog collections belong in your project, not in Lotus config. Use Lotus layouts and the exported Prose component to keep posts visually consistent with docs pages.

src/pages/blog/[...slug].astro
---
import { getCollection, render } from 'astro:content';
import {
  BaseLayout,
  SiteFooter,
  SiteHeader,
} from '@prosefly/astro-theme-lotus/layouts';
import { PageContainer } from '@prosefly/astro-theme-lotus/blocks';
import { Prose } from '@prosefly/astro-theme-lotus/components';


export async function getStaticPaths() {
  const posts = await getCollection('blog');


  return posts.map((post) => ({
    params: { slug: post.id.replace(/\.mdx?$/, '') },
    props: { post },
  }));
}


const { post } = Astro.props;
const { Content } = await render(post);
---


<BaseLayout title={post.data.title} description={post.data.description}>
  <SiteHeader currentPath="/blog/" search={false} assistant={false} />


  <main class="py-16">
    <PageContainer size="md">
      <header class="mb-10">
        <p class="text-sm font-medium text-(--lotus-text-muted)">
          {post.data.date.toLocaleDateString()}
        </p>
        <h1 class="mt-3 text-4xl font-semibold text-(--lotus-text-strong)">
          {post.data.title}
        </h1>
        {post.data.description && (
          <p class="mt-4 text-lg text-(--lotus-text-muted)">
            {post.data.description}
          </p>
        )}
      </header>


      <Prose>
        <Content />
      </Prose>
    </PageContainer>
  </main>


  <SiteFooter />
</BaseLayout>

Last updated Sep 3, 2026

Contributors