Documentation
Configuration

Theme configuration

The theme configuration look like this. You can easily edit and config it.

theme.config.tsx
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).

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

OptionTYPERequireDescription
CardType.postone & two & threefalseAvailable card option for posts.
CardType.tagtwo & threefalseAvailable card option for tag.

bannerMessage

Show banner on top website.

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

OptionTYPERequireDescription
settings.defaultSEODefaultSeo (opens in a new tab)falseConfig SEO Meta Tag
settings.titlestringfalseTitle
settings.descriptionstringfalseDescription
settings.SiteURLstringfalseSite 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.

OptionTYPERequireDescription
Logo.logoReactNodeFCtrue
Logo.linkstrigfalseadd a link in logo default is /.
Logo.target_blank or _parent or _self or _topfalseOpen link in new tab. default is _self

PrimaryNavigation

Primary Navigation is used on your header; you can edit and change it.

OptionTYPERequireDescription
hrefstringtruepath or url
titlestringtruename of url
subNavigation{ href: string; title:strig; }[]falseshow sub navigation

SecondaryNavigation

Secondary Navigation is used on your footer; you can edit and change it.

OptionTYPERequireDescription
hrefstringtruepath or url
titlestringtruename of url

SocialLinks

Social media icon show on your website header. I all

OptionTYPERequireDescription
urlstringtruefull link of social media
nameuse any Simple Icons(ex: facebook) (opens in a new tab)truename of icon