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