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中文網其他相關文章！