Docs
Customization

Customization

Learn how to customize the appearance of your blog.

Sometimes your blog does not look the way you want it to out of the box. By default our sdk does not specifiy any styles such as font color and page layout, so that it seemlessly integrates with your existing styles. However, you can customize the appearance of your blog in a few ways.

Adding a Call to Action

You can add a call to action to your blog posts to encourage your readers to take action. To do this, add the following to your /app/<your-blog-path>/page.tsx file:
1// /app/<your-blog-path>/[articlePath]/page.tsx
2export default async function Page({
3    params,
4}: {
5    params: Promise<{ articlePath: string; }>;
6}) {
7    const { articlePath } = await params;
8    const content = await getArticleContent(articlePath);
9    const yourCallToAction = <div>nxblog.ai rocks!</div>; // your custom call to action
10    return <BlogPost 
11                articleData={content}
12                callToAction={yourCallToAction} // add this here
13            />
14}

Specifying a layout for your blog

If you do not have a root layout in your project that specifies styles such as font color and page layout, we recommend creating a blog specific layout that specifies these styles. To do this create a new file in your project under /app/<your-blog-path>/layout.tsx. For example, If your path is /blog, create a file at /app/blog/layout.tsx. This file could look like this:
1// Path: /app/blog/layout.tsx
2export default function BlogLayout({ children }: {
3    children: React.ReactNode
4}) {
5    return (
6        <main className="bg-black text-white">
7            {children}
8        </main>
9    )
10}

Changing the image styles

You can change the default image styles by passing the imageStyles prop to the BlogPost component. The imageStyles prop should be an object with css properties that you want to apply to the image.
1// /app/<your-blog-path>/[articlePath]/page.tsx
2export default async function Page({
3    params,
4}: {
5    params: Promise<{ articlePath: string; }>;
6}) {
7    const { articlePath } = await params;
8    const content = await getPostContent(articlePath);
9    return <BlogPost 
10                articleData={content}
11                imageStyles={{
12                    borderRadius: "50%",
13                    width: "100px",
14                    height: "100px"
15                }} // add this here
16            />
17}

Changing the blog overview style

You can choose dark or light mode for your blog overview (the page that lists all your blog posts). To do this, add add the "mode" prop to the BlogOverview component under/app/<your-blog-path>/page.tsx.
1// /app/<your-blog-path>/page.tsx
2export default async function BlogOverview() {
3    const previews = await getArticlePreviews();
4
5    return (
6        <BlogOverview previews={previews} mode="dark" />
7    )
8}