All Systems Operational
Powered By
profound-logo

Projekt renderera

Konfiguracja projektu dla renderera


Zainstaluj renderer

Dodaj renderer do swojego projektu:

npm i cms-renderer

Struktura projektu

Zdecyduj, gdzie w projekcie ma działać renderer:

src/
    app/
        [...slug]/
            page.tsx

Następne kroki

  • Skonfiguruj trasowanie parametryczne do obsługi dynamicznych tras
  • Rozszerz rejestr o niestandardowe komponenty
  • Zintegruj panel administracyjny do edycji na żywo

Nasz projekt Next.js to prosta trasa typu catch-all

Dla witryny zbudowanej jak strona dokumentacji, plik page.tsx wygląda następująco
import NavbarBlock from '@/components/NavbarBlock';

Continue Reading
NextParametryczne Routowanie›
import
UIContent
from
'@/components/UIContent'
;
import UIFooter from '@/components/UIFooter';
import UISidebar from '@/components/UISidebar'; // nasz system projektowy niezależny od CMS-a
import ParametricRoutePage from 'cms-renderer/lib/renderer'; // podstawowe elementy renderera Profound CMS umożliwiające renderowanie i podgląd na żywo
import type { BlockComponentRegistry } from 'cms-renderer/lib/types'; // typy TypeScript rejestru bloków
const registry: Partial<BlockComponentRegistry> = {
header: NavbarBlock,
uisidebar: UISidebar,
uicontent: UIContent,
uifooter: UIFooter,
};
interface PageProps {
params: Promise<{ slug: string[] }>;
}
export default async function Page({ params }: PageProps) {
const { slug } = await params;
return (
<ParametricRoutePage
registry={registry}
apiKey={cmsConfig.apiKey}
websiteId={cmsConfig.websiteId}
cmsUrl={cmsConfig.cmsUrl}
params={Promise.resolve({ slug })}
/>
);
}

Następnie zaczynamy tworzyć strony; na tym etapie powinny działać zarówno strony parametryczne, jak i statyczne.


Kolejne kroki

  1. Skonfiguruj pobieranie komponentów Zod, aby walidować typ komponentu względem najnowszego stanu zdalnego panelu administracyjnego i zachować synchronizację.
  2. Skonfiguruj strony parametryczne z komponentami w panelu administracyjnym
  3. Zintegruj panel administracyjny jako proxy do edycji na żywo

Hybryda

Projekt rendereraParametryczne RoutowanieTypy komponentówSseKonfiguracja Proxy Panelu AdministracyjnegoRenderowanie statyczne z obsługą trybu edycjiSkryptowanie W Kreatorze SzablonówCreate Profound Next

Bezgłowy

Szybki startJson I Kod ClaudeKomponent Zod Pobieranie

Mcp

Mcp

Funkcje Cms

Funkcja Szablon DokumentacjiFunkcja Kreator SzablonówFeat TłumaczFunkcja Organizacja

Motywacja

Nasze podejście

Terminologia

Hybrydowe Vs Headless
profound-logoProfound CMS
⌘K
Admin