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 ( and )

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}>

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

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

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 Components NextToggle Lazy Load Image Component

Last updated 3 years ago