Customize Page Display

Set General Display Content

The general display content of the project corresponds to the configuration file src/config/locale/messages/{locale}/common.json

Including website metadata information, sign login and registration text, locale_detector language detection text, etc.

You can modify the configuration file content according to the actual situation of the project.

Among them, metadata information is the website information included by search engines. Please be sure to modify it before the project is deployed online.

The default content is:

{
  "metadata": {
    "title": "ShipAny Template Two",
    "description": "ShipAny is a NextJS boilerplate for building AI SaaS startups. Ship Fast with a variety of templates and components.",
    "keywords": "shipany, shipany-boilerplate, shipany-template-two-demo"
  }
}

You can use AI to assist in generating configuration file content. Reference prompt words:

The project I am developing is an AI image generator based on Nano Banana Pro model,
please refer to the content on the webpage: https://gemini.google/overview/image-generation/,
help me modify the metadata information in the common configuration file under src/config/locale/messages/{locale}/common.json.
My project name is: Nano Banana Pro,
Keywords contains: nano banana pro, nano banana, nano banana 2, gemini 3 pro image.

After the modification is completed, refresh the project page and check whether the website's metadata information is correct through the AITDK Extension.

You can continue to manually adjust the content of metadata in the configuration file based on the detection results.

Set Landing Page Content

Landing page content includes two parts.

The site header and footer correspond to the header / footer blocks. Their content is defined in src/config/locale/messages/{locale}/landing.json.

The homepage content corresponds to src/config/locale/messages/{locale}/pages/index.json.

The default homepage content defines blocks such as hero / features / testimonials / faq / cta. You can replace some or all of the default content based on your project.

Use AI to assist in generating configuration content. Sample prompt:

The project I am developing is an AI image generator based on Nano Banana Pro model,
please refer to the content on the webpage: https://gemini.google/overview/image-generation/,
help me modify the landing page header and footer content defined in file: src/config/locale/messages/{locale}/landing.json.
and modify the home page content defined in file: src/config/locale/messages/{locale}/pages/index.json.
My project title is: Nano Banana Pro,
Keywords contains: nano banana pro, nano banana, nano banana 2, gemini 3 pro image.

After the modification is completed, refresh the project page and use the AITDK Extension to check whether the landing page content of the website is correct.

You can see that the landing page content has been modified to the content you set, including the specified keywords.

You can continue to manually adjust the landing page content in the configuration file according to the project situation.

Customize Landing Page Display

After setting the landing page content with AI assistance, you can manually adjust the configuration file content to finely control the landing page display.

Customize Header

File path: src/config/locale/messages/{locale}/landing.json

Content example:

{
  "header": {
    "id": "header",
    "brand": {
      "title": "Nano Banana Pro",
      "logo": {
        "src": "/imgs/logos/banana.png",
        "alt": "Nano Banana Pro"
      },
      "url": "/"
    },
    "nav": {
      "items": [
        {
          "title": "Features",
          "url": "/#features",
          "icon": "Sparkles"
        }
      ]
    },
    "buttons": [
      {
        "title": "Quick Start",
        "url": "/docs/quick-start",
        "icon": "BookOpenText",
        "target": "_self",
        "variant": "outline"
      }
    ],
    "user_nav": {},
    "show_sign": false,
    "show_theme": false,
    "show_locale": false
  }
}

• brand: Displayed brand information. Including Logo, name, jump link, etc.
• nav: Displayed top navigation menu.
• buttons: Buttons displayed on the right side of the top.
• user_nav: Navigation menu displayed in the dropdown after user login and clicking avatar.
• show_sign: Whether to display the login/register button.
• show_theme: Whether to display the light/dark theme switch button.
• show_locale: Whether to display the language switch button.

According to the above configuration content, the seen Header effect is as follows:

The Footer block can be customized similarly to Header. You can refer to the configuration above.

Customize Block

The default homepage displays the following blocks:

• hero: Hero block
• logos: Logo list block
• introduce: Introduction block
• benefits: Benefits block
• usage: Use cases block
• features: Features block
• stats: Stats block
• testimonials: Testimonials block
• faq: FAQ block
• cta: Call to action block

You can customize the blocks displayed on the website homepage by following these steps.

{
  "page": {
    "sections": {
      "hero": {},
      "features": {},
      "faq": {},
      "cta": {},
      "introduce": {},
      "benefits": {},
      "usage": {},
      "stats": {},
      "testimonials": {}
    }
  }
}

{
  "page": {
    "show_sections": ["hero", "features", "faq", "cta"],
    "sections": {
      // ...
    }
  }
}

import { CustomHero } from '@/themes/default/blocks/custom-hero';

// block name
const block = section.block || section.id || sectionKey;

switch (block) {
  case 'hero':
    return <CustomHero key={sectionKey} section={section} />;

  default:
    try {
      if (section.component) {
        return section.component;
      }

      const DynamicBlock = await getThemeBlock(block);
      return (
        <DynamicBlock
          key={sectionKey}
          section={section}
          {...(data || section.data || {})}
        />
      );
    } catch (error) {
      return null;
    }
}

{
  "page": {
    "sections": {
      "hero": {
        "block": "custom-hero"
        // ...
      }
    }
  }
}

Default page blocks are defined in src/themes/default/blocks. If the default blocks don’t meet your needs, refer to [Customize Display Block](/docs/page-builder/dynamic-page#Customize Display Block) to create your own block files.

The default page layout file is defined in the src/themes/default/layouts/landing.tsx file.

Contains two blocks: Header and Footer.

import { ReactNode } from 'react';

import {
  Footer as FooterType,
  Header as HeaderType,
} from '@/shared/types/blocks/landing';
import { Footer, Header } from '@/themes/default/blocks';

export default async function LandingLayout({
  children,
  header,
  footer,
}: {
  children: ReactNode;
  header: HeaderType;
  footer: FooterType;
}) {
  return (
    <div className="h-screen w-screen">
      <Header header={header} />
      {children}
      <Footer footer={footer} />
    </div>
  );
}

If you don't want to modify the default theme, you can refer to the [Set Theme Folder](/docs/customize/theme#Set Theme Folder) document to customize the layout and display of the page through a custom theme.

Customize Admin Display

By modifying the src/config/locale/messages/{locale}/admin/sidebar.json configuration file, you can customize the admin display.

For example, change it to the following configuration content:

{
  "header": {
    "brand": {
      "title": "Nano Banana Pro",
      "logo": {
        "src": "/imgs/logos/banana.png",
        "alt": "Nano Banana Pro"
      },
      "url": "/admin"
    },
    "show_trigger": true
  },
  "main_navs": [
    {
      "title": "System",
      "items": [
        {
          "title": "Users & Permissions",
          "icon": "User",
          "is_expand": true,
          "children": [
            {
              "title": "Users",
              "url": "/admin/users",
              "icon": "User"
            }
          ]
        }
      ]
    },
    {
      "title": "Business",
      "items": [
        {
          "title": "Images",
          "url": "/admin/ai-tasks",
          "icon": "Brain"
        }
      ]
    }
  ],
  "bottom_nav": {
    "items": [
      {
        "title": "Settings",
        "url": "/admin/settings/auth",
        "icon": "Settings"
      }
    ]
  },
  "user": {
    "nav": {
      "items": [
        {
          "title": "Profile",
          "url": "/settings/profile",
          "icon": "User",
          "target": "_blank"
        }
      ]
    },
    "show_email": true,
    "show_signout": true,
    "signout_callback": "/"
  },
  "footer": {
    "nav": {
      "items": [
        {
          "title": "Home",
          "url": "/",
          "icon": "Home",
          "target": "_blank"
        }
      ]
    },
    "show_theme": true,
    "show_locale": true
  },
  "variant": "floating"
}

• header: Sidebar top brand information.
• main_navs: Sidebar main menu.
• bottom_nav: Sidebar bottom menu.
• user: User login settings.
• footer: Sidebar footer information.
• variant: Sidebar layout variant. Optional values are inset / sidebar / floating.

According to the above configuration content, the seen admin display effect is as follows: