在本文中，您將了解如何在 Lobechat 和 Shadcn/ui 中配置元資料。此比較顯示了配置元資料的兩種方法，這裡的主要差異是 Shadcn/ui 是 UI 元件提供者。您沒有看到任何對後端的 API 調用，也沒有發現任何涉及的資料庫。另一方面，Lobechat 是我們團隊最喜歡的，它相當複雜，是一個擁有資料庫的大型項目，使用 tRPC 進行 API 呼叫。
您將了解如何根據上下文使用文件和資料夾來配置元數據，本文後面的部分將詳細介紹這一點。
有兩種方法可以在 Next.js 版面配置或頁面中定義元資料
基於配置的元資料：在layout.js或page.js檔案中匯出靜態元資料物件或動態generateMetadata函數。
基於檔案的元資料：將靜態或動態產生的特殊檔案新增至路由段。
了解更多：
- 靜態元資料
- 動態元資料
- 基於檔案的元資料
根據文件中的這些信息，我們將了解 Shadcn/ui 和 Lobechat 選擇了哪種方式。
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/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中文網其他相關文章！
