Link Search Menu Expand Document

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

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