Dalam artikel ini, anda akan mempelajari cara metadata dikonfigurasikan dalam Lobechat dan Shadcn/ui. Perbandingan ini menunjukkan dua cara untuk mengkonfigurasi metadata anda, perbezaan utama di sini ialah Shadcn/ui ialah penyedia komponen UI. Anda tidak melihat sebarang panggilan API dibuat ke bahagian belakang dan anda juga tidak menemui sebarang pangkalan data yang terlibat. Lobechat, sebaliknya, adalah kegemaran pasukan kami dan agak kompleks dan projek besar yang mempunyai pangkalan data, menggunakan tRPC untuk membuat panggilan API.

Anda akan mengetahui cara fail dan folder digunakan untuk mengkonfigurasi metadata bergantung pada konteks, lebih lanjut mengenainya di bahagian akhir artikel ini.

Terdapat dua cara anda boleh menentukan metadata dalam reka letak Next.js atau halaman

1. Metadata berasaskan konfigurasi: Eksport objek metadata statik atau fungsi generateMetadata dinamik dalam fail layout.js atau page.js.

2. Metadata berasaskan fail: Tambahkan fail khas statik atau yang dijana secara dinamik ke segmen laluan.

Baca lebih lanjut tentang:

- Metadata statik

- Metadata dinamik

- Metadata Berasaskan Fail

Dengan maklumat daripada dokumentasi ini, kami akan mengetahui cara yang telah dipilih oleh Shadcn/ui dan Lobechat.

Konfigurasi metadata shadcn/ui

Dalam www/app/layout.tsx dalam kod sumber Shadcn/ui, metadata ditakrifkan seperti yang ditunjukkan di bawah:

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s - ${siteConfig.name}`,
  },
  metadataBase: new URL(siteConfig.url),
  description: siteConfig.description,
  keywords: [
    "Next.js",
    "React",
    "Tailwind CSS",
    "Server Components",
    "Radix UI",
  ],
  authors: [
    {
      name: "shadcn",
      url: "https://shadcn.com",
    },
  ],
  creator: "shadcn",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: siteConfig.url,
    title: siteConfig.name,
    description: siteConfig.description,
    siteName: siteConfig.name,
    images: [
      {
        url: siteConfig.ogImage,
        width: 1200,
        height: 630,
        alt: siteConfig.name,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: siteConfig.name,
    description: siteConfig.description,
    images: [siteConfig.ogImage],
    creator: "@shadcn",
  },
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon-16x16.png",
    apple: "/apple-touch-icon.png",
  },
  manifest: `${siteConfig.url}/site.webmanifest`,
}

Maksudnya ialah Shadcn/ui menggunakan metadata statik. SiteConfig diimport seperti yang ditunjukkan di bawah:

import { META_THEME_COLORS, siteConfig } from "@/config/site"

Konfigurasi metadata Lobechat

Dalam Lobechat/src/app/layout.tsx, anda akan menemui kod di bawah:

export { generateMetadata } from './metadata';

generateMetadata di sini bermakna Lobechat menggunakan metadata dinamik. Di bawah ialah kod yang dipilih daripada fail metadata Lobechat.

import { Metadata } from 'next';

import { appEnv } from '@/config/app';
import { BRANDING_LOGO_URL, BRANDING_NAME, ORG_NAME } from '@/const/branding';
import { OFFICIAL_URL, OG_URL } from '@/const/url';
import { isCustomBranding, isCustomORG } from '@/const/version';
import { translation } from '@/server/translation';

const BASE_PATH = appEnv.NEXT_PUBLIC_BASE_PATH;

// if there is a base path, then we don't need the manifest
const noManifest = !!BASE_PATH;

export const generateMetadata = async (): Promise<Metadata> => {
  const { t } = await translation('metadata');

  return {
    alternates: {
      canonical: OFFICIAL_URL,
    },
    appleWebApp: {
      statusBarStyle: 'black-translucent',
      title: BRANDING_NAME,
    },
    description: t('chat.description', { appName: BRANDING_NAME }),
    icons: isCustomBranding
      ? BRANDING_LOGO_URL
      : {
          apple: '/apple-touch-icon.png?v=1',
          icon: '/favicon.ico?v=1',
          shortcut: '/favicon-32x32.ico?v=1',
        },
    manifest: noManifest ? undefined : '/manifest.json',
    metadataBase: new URL(OFFICIAL_URL),
    openGraph: {
      description: t('chat.description', { appName: BRANDING_NAME }),
      images: [
        {
          alt: t('chat.title', { appName: BRANDING_NAME }),
          height: 640,
          url: OG_URL,
          width: 1200,
        },
      ],
      locale: 'en-US',
      siteName: BRANDING_NAME,
      title: BRANDING_NAME,
      type: 'website',
      url: OFFICIAL_URL,
    },
    title: {
      default: t('chat.title', { appName: BRANDING_NAME }),
      template: `%s · ${BRANDING_NAME}`,
    },
    twitter: {
      card: 'summary_large_image',
      description: t('chat.description', { appName: BRANDING_NAME }),
      images: [OG_URL],
      site: isCustomORG ? `@${ORG_NAME}` : '@lobehub',
      title: t('chat.title', { appName: BRANDING_NAME }),
    },
  };
};

Dalam konfigurasi tapak Shadcn/ui, kami melihat ia mengandungi maklumat jenama dan url yang berkaitan, tetapi Lobechat telah melakukannya secara berbeza. Terdapat folder const yang mengandungi fail seperti

• Penjenamaan

• URL

• Versi

Konfigurasi dalam Lobechat ini berasal daripada folder bernama const dan bukannya konfigurasi, seperti dalam Shadcn/ui, kerana folder konfigurasi dalam Lobechat

Tentang kami:

Di Thinkthroo, kami mengkaji projek sumber terbuka yang besar dan menyediakan panduan seni bina. Kami telah membangunkan Komponen boleh guna semula, dibina dengan tailwind, yang boleh anda gunakan dalam projek anda. Kami menawarkan perkhidmatan pembangunan Next.js, React dan Node.

Tempah mesyuarat dengan kami untuk membincangkan projek anda.

Rujukan:

1. https://github.com/lobehub/lobe-chat/blob/main/src/app/metadata.ts

2. https://github.com/shadcn-ui/ui/blob/main/apps/www/config/site.ts

3. https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata

4. https://github.com/lobehub/lobe-chat/blob/main/src/app/layout.tsx#L47

5. https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata

Atas ialah kandungan terperinci Perbandingan konfigurasi metadata antara Lobechat dan Shadcn/ui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!