search

SiteLayout Component

The SiteLayout component is used render the SiteHeader, main page layout, and the SiteFooter. It also includes CSS stylesheets and JavaScript files that are important to the look-and-feel (Bootstraparrow-up-right and Bootstrap Iconsarrow-up-right)

hashtag
SiteLayout Tag Usage

Following is how the tag is used in pages/[...path].js, which is responsible for rendering all common documents from the database.

 <SiteLayout layoutName={layoutName} title={props.post.title} ads={ads}>

hashtag
Setup

You only need to import the component...

import Head from 'next/head'
import SiteLayout from 'components/SiteLayout'

... and then wrap pretty much all the page content with the layout tag...

    return (
        <>
            <Head>
                {/* Inject stuff into the HTML HEAD here */}
            </Head>
            <SiteLayout layoutName={layoutName} title={props.post.title} ads={ads}>
                {/* Put your page content here */}
            </SiteLayout>
        </>
    )

object definition

Property
Type
Required
Description

layoutName

string

no

Defines the layout to be used. Pass "SidebarRight" for a 75%/25%(ish) two-column layout, otherwise, the default full page layout will be used.

title

string

yes

The page title, which is rendered within an <h1/> tag atop the page. The page title is not injected into the HTML head's title tag, however. That must be done by another means.

ads

boolean

no

When present and true, and when the "SidebarRight" layout is also specified for use, the AdComponent will be rendered at the bottom of the right-hand column.

PreviousReact ComponentsNextToggle Lazy Load Image Component

Last updated