Share:

M

Mayur Nalwala

in

layouts

August 14 2022

Page Layout for a article with sidebar

#demo

#with sidebar

#default layout

This current article is made using blogwithsidebar layout. This layout will be used to write your blog posts or articles.

// import PageLayout from components
import { ..., PageLayout, ... } from "../../../src/components";
const Article = () => {
return (
// pass blogwithsidebar as shown
<PageLayout blogwithsidebar>
{/* Start writing your article here */}
</PageLayout>
)
}
export default Article;
The above code snippet gives you a demo on how to use blogwithsidebar layout. The current article that you see is the basic output/example of blogwithsidebar layout which will consist of a navbar on the top, a side bar and the main content area. The side bar will content author details and more articles by the author.

How to use

If you want to explore this layout checkout the code for this article in
blog-with-sidebar-layout.tsx file inside pages/tutorial folder.

Features

  • This layout is of contained width i.e has a max width same as the navbar, this is to keep the article / blog posts style consistent.
  • In the sidebar on the right, we have author details and more articles from the author.
  • We can also place ads on the right sidebar.
    // import PageLayout from components
    import { ..., PageLayout, ... } from "../../../src/components";
    const Article = () => {
    // create ads array and paste your add scripts as a string in quotes
    const ads = [
    'ad script',
    'ad script'
    ]
    return (
    // pass blogwithsidebar as shown
    <PageLayout blogwithsidebar ads={ads} >
    {/* Start writing your article here */}
    </PageLayout>
    )
    }
    export default Article;
    The above code block shows how to pass ads in the sidebar layout.

Components Used to write this article

Check blog-with-sidebar-layout.tsx in pages/tutorial file to see all the mentioned components in use.

  • We have used the <PageLayout blogwithsidebar> as shown in the above code block.
  • Image tag for displaying images.
    To use image we have to import Image from components and ImageSize enum from enums. The Image size will help us to set the size of the image.
    Available sizes: ImageSize.DEFAULT, ImageSize.FULL, ImageSize.MEDIUM, ImageSize.SMALL, ImageSize.XS.
    // import ImageSize from enums
    import { ..., ImageSize } from "../../src/shared/enums"
    // import Image from components
    import { ..., Image, ... } from "../../../src/components";
    const Article = () => {
    return (
    <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" className="my-5" />
    <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.FUll} className="mb-5" />
    <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.MEDIUM} className="mb-5" />
    <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.SMALL} className="mb-5" />
    <Image src="/public/images/tutorials/demo-image.jpg" alt="alt text" caption="img caption" size={ImageSize.XS} className="mb-5" />
    )
    }
    export default Article;
  • Text.
    We use this to write content/text. To use image we have to import Text from components. We have different Text types like title, subtitle, p, quote with default styles and by default it is of type paragraph.
    // import TextAlign from enums
    import { ..., TextAlign } from "../../src/shared/enums"
    // import Text from components
    import { ..., Text, ... } from "../../../src/components";
    const Article = () => {
    return (
    <Text>By Default its paragraph tag</Text>
    <Text p>Paragraph</Text>
    <Text title>Title</Text>
    <Text subtitle>Subtitle</Text>
    <Text quote>Quoted text</Text>
    {/* Changing default styles */}
    <Text p className="!text-[20px] !font-bold">Overide text size and weight</Text>
    {/* Text Aligns */}
    <Text p textAlign={TextAlign.CENTER}>Text Align Center</Text>
    <Text p textAlign={TextAlign.LEFT}>Text Align Left</Text>
    <Text p textAlign={TextAlign.RIGHT}>Text Align Right</Text>
    <Text p textAlign={TextAlign.JUSTIFY}>Text Align Justify</Text>
    <Text p textAlign={TextAlign.NONE}>Text Align None</Text>
    {/* Text Aligns via tailwind classes */}
    <Text p className="text-left">...</Text>
    <Text p className="text-right">...</Text>
    {/* Change font colors via color="" */}
    <Text p color="red">Text color red</Text>
    <Text p color="#E2904B">Text color #E2904B</Text>
    {/* Change font colors via tailwind classes */}
    <Text p className="font-blue-600">...</Text>
    <Text p className="font-slate-400">...</Text>
    )
    }
    export default Article;
  • List
    This is used to display lists. We have 3 different types: ListType.disc | ListType.number | ListType.none, by default it is of type ListType.disc.
    // import ListType from enums
    import { ..., ListType } from "../../src/shared/enums"
    // import List from components
    import { ..., List, ... } from "../../../src/components";
    const Article = () => {
    return (
    <List type={ListType.disc}>
    <li>List with disc</li>
    </List>
    {/* or */}
    <List type={ListType.number}>
    <li>List with number</li>
    </List>
    {/* or */}
    <List type={ListType.none}>
    <li>List with no style</li>
    </List>
    )
    }
    export default Article;
  • Seperator
    This is used to add a section sepertator. We have 2 types: <Seperator dots/> or <Seperator line/>, by default it is of type line.
    // import Seperator from components
    import { ..., Seperator, ... } from "../../../src/components";
    const Article = () => {
    return (
    <Seperator dots />
    {/* or */}
    <Seperator line />
    )
    }
    export default Article;

note: all these components are used in blog-with-sidebar-layout.tsx and blog-with-centerd-layout.tsx in pages/tutorial. You can also check All Components Demo, list of all components, its types and how to use them.

For any any queries related to this project / template feel free to connect with us at webexpe13@gmail.com. You can also post any comments on our github discussions.

Copyright © 2023 Next Js Blog Template

Privacy PolicyTerms and Conditions