Theme configuration
The theme configuration look like this. You can easily edit and config it.
const themeConfig = {
settings: {
title: "Start your blog or portfolio using MDX, Next.Js, and Nextra.",
description: "Section blog theme is build with Nextjs and tailwind css.",
SiteURL: "https://officialrajdeepsingh.dev",
defaultSEO: {
title: "Start your blog or portfolio using MDX, Next.Js, and Nextra.",
titleTemplate: '%s | Section Blog Theme',
twitter: {
handle: "@FrontendWeb3",
site: "FrontendWeb3",
cardType: "summary_large_image",
}
}
},
bannerMessage: "Start your markdown portfolio blog with nextjs, nextra, tailwind CSS, and Shadcn UI using <a style='margin: 0px 4px;text-decoration:underline;' target='_blank' href='https://www.npmjs.com/package/section-blog-theme'> the section blog theme. </a>",
SocialLinks: [
{
name: "twitter",
url: "https://twitter.com/FrontendWeb3",
},
{
name: "linkedin",
url: "https://www.linkedin.com/company/frontendweb",
},
{
name: "github",
url: "https://github.com/frontendweb3/section-theme-blog",
},
],
Logo: {
logo: (
<>
<svg width="36" height="36" viewBox="0 0 434 420" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" fill="currentColor" d="M226.569 66.5458C222.348 59.1514 211.686 59.1514 207.464 66.5458L63.4636 318.753C59.2767 326.086 64.5719 335.207 73.0163 335.207H361.018C369.462 335.207 374.757 326.086 370.57 318.753L226.569 66.5458ZM217.017 270.333C235.355 270.333 250.221 256.557 250.221 239.563C250.221 222.57 235.355 208.793 217.017 208.793C198.679 208.793 183.813 222.57 183.813 239.563C183.813 256.557 198.679 270.333 217.017 270.333Z" />
</svg>
</>
),
link: "/",
target: "_blank"
},
PrimaryNavigation: [
{
href: "/",
title: "Home",
},
{
href: "/posts",
title: "Blog",
},
{
title: "Projects",
subNav: true,
subNavigation: [
{
title: "Personal Blog",
href: "https://officialrajdeepsingh.dev/",
description:
"Check out my personal portfolio blog website.",
},
{
title: "Section Blog Theme",
href: "https://github.com/frontendweb3/section-blog-theme",
description: "Section blog theme is nextra based theme.",
},
{
title: "Awesome Nextjs",
href: "https://github.com/officialrajdeepsingh/awesome-nextjs",
description:
"A curated list of awesome Nextjs-based libraries that help build small and large-scale applications with next.js.",
},
],
},
{
href: "/about",
title: "About",
},
{
href: "/contact",
title: "Contact",
},
],
SecondaryNavigation: [
{
href: "/disclaimer",
title: "Disclaimer",
},
{
href: "/privacy-policy",
title: "Privacy policy",
},
{
href: "/contact",
title: "Contact",
},
]
};
export default themeConfig;
DateFormat
Change the date DateFormat in your blog site. By default date type is MMM DD, YYYY
, and it built the use of the day.js library. Check out all the date format lists (opens in a new tab).
Option | TYPE | Require | Description |
---|---|---|---|
DateFormat | string | false | Change the date format. |
CardType
Currently, we have three cards for the section blog theme. The card names are one, two and three. The one card is the default card.
Option | TYPE | Require | Description |
---|---|---|---|
CardType.post | one & two & three | false | Available card option for posts. |
CardType.tag | two & three | false | Available card option for tag. |
bannerMessage
Show banner on top website.
Option | TYPE | Require | Description |
---|---|---|---|
bannerMessage | string | false | show banner message. |
settings
settings is part of the next-SEO (opens in a new tab) package. You can add a default Seo Meta tag for your blog.
Option | TYPE | Require | Description |
---|---|---|---|
settings.defaultSEO | DefaultSeo (opens in a new tab) | false | Config SEO Meta Tag |
settings.title | string | false | Title |
settings.description | string | false | Description |
settings.SiteURL | string | false | Site URL is help in SEO. It takes your production URL by default it uses the local development http://localhost:3000 URL. |
Logo
You can add a logo on your blog.
Option | TYPE | Require | Description |
---|---|---|---|
Logo.logo | ReactNode | FC | true |
Logo.link | strig | false | add a link in logo default is / . |
Logo.target | _blank or _parent or _self or _top | false | Open link in new tab. default is _self |
PrimaryNavigation
Primary Navigation is used on your header; you can edit and change it.
Option | TYPE | Require | Description |
---|---|---|---|
href | string | true | path or url |
title | string | true | name of url |
subNavigation | { href: string; title:strig; }[] | false | show sub navigation |
SecondaryNavigation
Secondary Navigation is used on your footer; you can edit and change it.
Option | TYPE | Require | Description |
---|---|---|---|
href | string | true | path or url |
title | string | true | name of url |
SocialLinks
Social media icon show on your website header. I all
Option | TYPE | Require | Description |
---|---|---|---|
url | string | true | full link of social media |
name | use any Simple Icons(ex: facebook) (opens in a new tab) | true | name of icon |