Ein Vergleich der Metadatenkonfigurationen zwischen Lobechat und Shadcn/ui

In diesem Artikel erfahren Sie, wie Metadaten in Lobechat und Shadcn/ui konfiguriert werden. Dieser Vergleich zeigt zwei Möglichkeiten zum Konfigurieren Ihrer Metadaten. Der Hauptunterschied besteht darin, dass Shadcn/ui ein Anbieter von UI-Komponenten ist. Sie sehen keine API-Aufrufe an das Backend und finden auch keine beteiligte Datenbank. Lobechat hingegen ist der Favorit unseres Teams und ziemlich komplex und ein großes Projekt mit einer Datenbank, das tRPC für API-Aufrufe verwendet.

Wie die Dateien und Ordner je nach Kontext zur Konfiguration von Metadaten verwendet werden, erfahren Sie, mehr dazu in den späteren Teilen dieses Artikels.

Es gibt zwei Möglichkeiten, Metadaten in einem Next.js-Layout oder einer Seite zu definieren

1. Konfigurationsbasierte Metadaten: Exportieren Sie ein statisches Metadatenobjekt oder eine dynamische Funktion „generateMetadata“ in eine Datei „layout.js“ oder „page.js“.

2. Dateibasierte Metadaten: Fügen Sie statische oder dynamisch generierte Spezialdateien zu Routensegmenten hinzu.

Lesen Sie mehr über:

- Statische Metadaten

- Dynamische Metadaten

- Dateibasierte Metadaten

Mit diesen Informationen aus der Dokumentation werden wir herausfinden, welchen Weg Shadcn/ui und Lobechat gewählt haben.

Shadcn/UI-Metadatenkonfiguration

Im www/app/layout.tsx im Shadcn/ui-Quellcode sind Metadaten wie unten gezeigt definiert:

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

Das bedeutet, dass Shadcn/ui statische Metadaten verwendet. SiteConfig wird wie unten gezeigt importiert:

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

Lobechat-Metadatenkonfiguration

In Lobechat/src/app/layout.tsx finden Sie den folgenden Code:

export { generateMetadata } from './metadata';

generateMetadata bedeutet hier, dass Lobechat dynamische Metadaten verwendet. Unten finden Sie den Code, der aus der Lobechat-Metadatendatei ausgewählt wurde.

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 }),
    },
  };
};

In der Shadcn/UI-Siteconfig haben wir gesehen, dass sie Markeninformationen und relevante URLs enthält, aber Lobechat hat es anders gemacht. Es gibt einen const-Ordner mit Dateien wie

• Branding

• URL

• Version

Diese Konfiguration im Lobechat stammt aus einem Ordner namens const statt config, wie in Shadcn/ui, weil config-Ordner in Lobechat

Über uns:

Bei Thinkthroo studieren wir große Open-Source-Projekte und stellen Architekturführer zur Verfügung. Wir haben mit Rückenwind wiederverwendbare Komponenten entwickelt, die Sie in Ihrem Projekt nutzen können. Wir bieten Next.js-, React- und Node-Entwicklungsdienste an.

Buchen Sie einen Termin mit uns, um Ihr Projekt zu besprechen.

Referenzen:

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

Das obige ist der detaillierte Inhalt vonEin Vergleich der Metadatenkonfigurationen zwischen Lobechat und Shadcn/ui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!