Lobechat和Shadcn/ui元数据配置对比

在本文中，您将了解如何在 Lobechat 和 Shadcn/ui 中配置元数据。此比较显示了配置元数据的两种方法，这里的主要区别是 Shadcn/ui 是 UI 组件提供程序。您没有看到任何对后端的 API 调用，也没有发现任何涉及的数据库。另一方面，Lobechat 是我们团队最喜欢的，它相当复杂，是一个拥有数据库的大型项目，使用 tRPC 进行 API 调用。

您将了解如何根据上下文使用文件和文件夹来配置元数据，本文后面的部分将详细介绍这一点。

有两种方法可以在 Next.js 布局或页面中定义元数据

1. 基于配置的元数据：在layout.js或page.js文件中导出静态元数据对象或动态generateMetadata函数。

2. 基于文件的元数据：将静态或动态生成的特殊文件添加到路由段。

了解更多：

- 静态元数据

- 动态元数据

- 基于文件的元数据

根据文档中的这些信息，我们将了解 Shadcn/ui 和 Lobechat 选择了哪种方式。

Shadcn/ui 元数据配置

Shadcn/ui源码中的www/app/layout.tsx中，元数据定义如下：

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`,
}

这意味着 Shadcn/ui 使用静态元数据。 SiteConfig导入如下图：

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

Lobechat 元数据配置

在 Lobechat/src/app/layout.tsx 中，您将找到以下代码：

export { generateMetadata } from './metadata';

generateMetadata 这里表示 Lobechat 使用动态元数据。以下是从 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 }),
    },
  };
};

在Shadcn/ui siteconfig中，我们看到它包含品牌信息和相关url，但Lobechat的做法有所不同。有一个 const 文件夹，其中包含诸如

之类的文件

• 品牌

• 网址

• 版本

Lobechat 中的此配置来自名为 const 的文件夹，而不是像 Shadcn/ui 中的 config 文件夹，因为 Lobechat 中的 config 文件夹

关于我们：

在 Thinkthroo，我们研究大型开源项目并提供架构指南。我们开发了使用 Tailwind 构建的可重用组件，您可以在项目中使用它们。我们提供 Next.js、React 和 Node 开发服务。

与我们预约会面讨论您的项目。

参考文献：

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

以上是Lobechat和Shadcn/ui元数据配置对比的详细内容。更多信息请关注PHP中文网其他相关文章！