Puck ist der visuelle Open-Source-Editor für React, der die n?chste Generation von Seitenerstellern und No-Code-Produkten erm?glicht. Geben Sie uns einen Stern auf GitHub! ??

Bei der Integration von Puck in Ihr Seitenerstellungsprodukt besteht eine h?ufige Anforderung darin, Ihren Benutzern die zentrale Verwaltung des Themas der Seite zu erm?glichen, ohne Anpassungen an jeder Komponente vornehmen zu müssen.

Zum Beispiel: Benutzer ben?tigen eine M?glichkeit, Schriftstile global zu verwalten – auch für Komponenten, die der Seite bereits hinzugefügt wurden. So k?nnte das in Aktion aussehen:

Da Puck nur eine React-Komponente ist, gibt es viele M?glichkeiten, dieses Problem zu l?sen (und auch andere, komplexere Zust?nde zu verwalten). In diesem Artikel werde ich mich auf einen der einfachsten und zugleich leistungsst?rksten Ans?tze konzentrieren: CSS-Eigenschaften. Lasst uns eintauchen!

Für dieses Tutorial gehe ich davon aus, dass Sie über ein grundlegendes Verst?ndnis von Puck und seiner Funktionalit?t verfügen. Wenn Sie neu bei Puck sind, machen Sie sich keine Sorgen – Sie k?nnen trotzdem gerne mitmachen! Ich empfehle jedoch, den Leitfaden ?Erste Schritte“ zu lesen, um sich mit den Grundlagen vertraut zu machen.

Projekt-Setup mit Vite

Ich beginne damit, ein Projekt mit dem Gerüstskript von Vite einzurichten. Sie k?nnen diesem Abschnitt gerne folgen oder ihn überspringen, wenn Sie bereits ein Projekt mit Puck haben.

Wenn Sie Next.js oder Remix verwenden, k?nnen Sie auch eines der offiziellen Puck-Rezepte zum Einrichten Ihres Projekts verwenden.

Projekt erstellen

Um zu beginnen, ?ffnen Sie Ihr Terminal und führen Sie die folgenden Befehle aus, um ein neues Vite-Projekt zu erstellen:

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

Puck installieren

Als n?chstes installieren Sie das Puck-Paket:

npm i @measured/puck --save

Widersprüchliche Stile l?schen

Wenn Sie ein neues Projekt mit Vite starten, werden einige Standardstile mitgeliefert, die mit denen von Puck kollidieren. Um dies zu beheben, l?schen Sie src/index.css und src/App.css und entfernen Sie dann ihre Importe aus src/main.jsx und src/App.jsx:

// main.jsx
import "./index.css"; // Remove this line

// App.jsx
import "./App.css"; // Remove this line

Rendern des Puck-Editors

Wenn die grundlegende Projektstruktur fertig ist, gehen Sie zu Ihrer src/App.jsx-Datei und ersetzen Sie deren Inhalt durch den folgenden Code. Dadurch wird Puck mit einer Grundkonfiguration zum Ziehen und Ablegen von überschriften- und Absatzkomponenten eingerichtet:

Beachten Sie, dass ich der Einfachheit halber in diesem Beispiel das Inline-Styling verwende

// App.jsx
import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for each of your draggable components
// Ideally you would pull each of these to their own files

const headingConfig = {
  defaultProps: {
    title: "Title",
  },
  fields: {
    title: {
      type: "text",
    },
  },
  render: ({ title }) => {
    return (
      <div>
        <h1>{title}</h1>
      </div>
    );
  },
};

const paragraphConfig = {
  defaultProps: {
    content: "This is a paragraph...",
  },
  fields: {
    content: {
      type: "textarea",
    },
  },
  render: ({ content }) => {
    return (
      <div>
        <p>{content}</p>
      </div>
    );
  },
};

// The Puck configuration object
const config = {
  components: {
    Heading: headingConfig,
    Paragraph: paragraphConfig,
  },
  root: {
    render: ({ children }) => {
      return (
        <main
         >



<p>Finally, run the application in development mode, navigate to http://localhost:5173, and check that everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

Super! Da Sie nun über eine Grundlage verfügen, auf der Sie aufbauen k?nnen, fügen wir Themen für Ihre Benutzer hinzu.

Themen hinzufügen

Wie ich bereits erw?hnt habe, sind benutzerdefinierte CSS-Eigenschaften eine ausgezeichnete Wahl, um Ihrem Editor interaktive Themen hinzuzufügen. Warum ist das ein toller Ansatz? Weil es leichtgewichtig ist, keine externen Abh?ngigkeiten erfordert und (gr??tenteils) nativ vom Browser verwaltet wird.

Aufstellen

Um dynamisches Design mit CSS-Eigenschaften hinzuzufügen, müssen Sie Ihre Designvariablen als Eigenschaften bei einem übergeordneten Element der Komponente definieren, die sie ben?tigt. Dies kann die Stammkomponente von Puck oder eine andere übergeordnete Komponente in der Hierarchie Ihres Editors sein. Es spielt wirklich keine Rolle, solange Sie sie definieren und sie dann mithilfe der var-CSS-Funktion dort lesen, wo Sie sie ben?tigen.

In diesem Tutorial konzentriere ich mich auf die Verwendung der Root-Komponente von Puck, damit Benutzer die Schriftgr??e und -farbe für überschriften und Abs?tze an einer einzigen Stelle auf der obersten Ebene des Editors festlegen k?nnen:

Schritt 1: Definieren Sie die Variablen

Beginnen Sie mit der Definition eines Objekts, um alle CSS-Variablennamen zu zentralisieren. Dies verbessert die Konsistenz und erspart Ihnen die Debugging-Probleme, die durch falsch eingegebene Eigenschaftsnamen in CSS verursacht werden.

Profi-Tipp: Wenn Sie TypeScript verwenden, k?nnen Sie eine Aufz?hlung anstelle eines Objekts verwenden, um zus?tzliche Typsicherheit zu erreichen

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

Schritt 2: Fügen Sie die Variablen zur übergeordneten Komponente hinzu

Aktualisieren Sie als N?chstes die Stammkonfiguration, um die Requisiten und Felder für die Designvariablen einzuschlie?en. Dadurch k?nnen Benutzer die benutzerdefinierten Eigenschaften direkt in den Stammfeldern des Editors aktualisieren.

Dazu müssen Sie die Felder für die neuen Root-Requisiten und ihre Standardwerte definieren:

npm i @measured/puck --save

Danach lesen Sie in der Renderfunktion des Roots die benutzerdefinierten Eigenschaften aus den Requisiten und übergeben sie als CSS-Variablen an das Root-Element.

// Das Puck-Konfigurationsobjekt
const config = {
  Komponenten: {
    //... vorhandene Komponenten
  },
  Wurzel: {
    //... die Konfiguration der Stammfelder

    render: ({ Children, FontColor, HeadingFontSize, ParagraphFontSize}) => {
      zurückkehren (
        <Haupt
         >



<p>Wenn Sie jetzt zum Editor gehen, sollten Sie die neuen Felder auf der Stammebene für jede der Requisiten sehen. Es gibt noch kein visuelles Feedback, aber wenn Sie sich die Stile im Stammverzeichnis des Editors ansehen, werden Sie sehen, dass die Variablen bei jeder ?nderung, die Sie an den Feldern vornehmen, festgelegt werden.</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173634396450671.jpg"  class="lazy" alt="Using CSS variables to create dynamic themes in Puck" /></p><h3>
  
  
  Schritt 3: Zugriff auf gemeinsam genutzte Variablen in untergeordneten Komponenten
</h3>

<p>Zuletzt greifen Sie auf die Designvariablen in den Komponenten zu, die Sie ben?tigen, indem Sie die var-CSS-Funktion in Ihren Stilen verwenden.</p>

<p>In unserem Beispiel fügen Sie sie in der überschriftConfig und im AbsatzConfig:<br> hinzu
</p>

<pre class="brush:php;toolbar:false">const headingConfig = {
  //... Die Konfiguration der überschriftenfelder

  render: ({ title }) => {
    zurückkehren (
      <div>
        <h1
         >



<p>Wenn Sie zum Editor zurückkehren, einige überschriften und Abs?tze per Drag-and-Drop verschieben und dann die Felder auf der Stammebene ?ndern, werden Sie feststellen, dass alle überschriften und Abs?tze aktualisiert werden, um diese ?nderungen widerzuspiegeln:</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396650466.jpg" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p>

<p>? Und das ist es! Ihre Benutzer k?nnen jetzt ein Thema definieren, das nahtlos auf verschiedene Komponenten auf ihren Seiten angewendet wird.</p>

<h3>
  
  
  Vor- und Nachteile der Verwendung von CSS-Eigenschaften
</h3>

<p>? Vorteile:</p>

• Einfache und intuitive Einrichtung
• Integrierte Kaskadierungs- und überschreibungsfunktionen in der Seitenhierarchie erm?glichen eine einfache Verwaltung gemeinsamer Stile und die M?glichkeit, einzelne Komponenten anzupassen
• Keine externen Abh?ngigkeiten und geringer Platzbedarf – benutzerdefinierte CSS-Eigenschaften werden nativ von Browsern unterstützt
• Geringerer Standard- und Wartungsaufwand als bei anderen Optionen

? Nachteile:

• Nur ??für einfaches Styling geeignet – kann nicht mit komplexen Daten oder Logik umgehen
• Das Debuggen kann schwierig sein, wenn mehrere Ebenen von CSS-Eigenschaftsüberschreibungen verschachtelt werden

Wir gehen weiter

Abh?ngig von Ihrem spezifischen Anwendungsfall gibt es viele M?glichkeiten, das Thema Ihres Editors noch weiter zu verfeinern:

• Vordefinierte Themen verwenden – In einigen Anwendungen müssen Sie m?glicherweise Standard-Themenoptionen bereitstellen – wie ?Dunkel“, ?Hell“ oder ?Minimal“. Hierzu k?nnten Sie ein Auswahlfeld mit mehreren Themenobjekten verwenden. Diese Objekte k?nnen alle CSS-Eigenschaften als Einheit gruppieren, sodass Benutzer problemlos zwischen verschiedenen Themen für ihre Seiten wechseln k?nnen, ohne einzelne Felder ausfüllen zu müssen.
• Stilbibliotheken integrieren – Für gr??ere Redakteure ist es m?glicherweise besser, eine Stilbibliothek zu verwenden, um vorgefertigte Stile zu nutzen, Ihre Definitionen zu optimieren und den Boilerplate zu reduzieren. Bibliotheken wie Tailwind oder Emotion k?nnen problemlos in Puck integriert werden, was Ihnen Flexibilit?t und Effizienz bietet und gleichzeitig ein elegantes Erscheinungsbild beibeh?lt. Tats?chlich bietet Puck sogar ein Emotion-Plugin an, das den Integrationsprozess für Sie vereinfacht!
• Designüberschreibungen auf Komponentenebene hinzufügen – Manchmal müssen Benutzer m?glicherweise einzelne Komponenten auf ihren Seiten anpassen, damit sie sich vom Rest des Designs abheben. Da wir CSS-Eigenschaften verwenden, kann dies leicht erreicht werden, indem die Designvariablen der übergeordneten Ebene auf Komponentenebene überschrieben werden. Sie k?nnten beispielsweise ein optionales Feld für die Schriftfarbe in Ihrer überschriftskomponente hinzufügen, das, falls vorhanden, die CSS-Eigenschaft speziell für dieses h1-Element neu definieren würde.

Bleiben Sie in Verbindung und bauen Sie weiter auf?

Ich hoffe, dieses Tutorial hat Sie in die Lage versetzt, CSS-Variablen für dynamisches Theming in Puck-basierten Seitenerstellern zu nutzen. Die Open-Source-Entwicklergemeinschaft steht im Mittelpunkt der Entwicklung von Puck und ich kann es kaum erwarten, die innovativen Apps zu sehen, die Sie erstellen!

Wir sind bestrebt, die F?higkeiten von Puck noch weiter auszubauen, mit einem st?ndigen Strom neuer Funktionen, einschlie?lich einer revolution?ren Drag-and-Drop-Engine für komplexe Raster und Layouts, die demn?chst auf den Markt kommt, und einer Reihe neuer Plugins am Horizont.

Wenn Sie also von Puck inspiriert wurden oder Sie über die neuesten Funktionen auf dem Laufenden bleiben m?chten, k?nnen Sie wie folgt mitmachen:

• ? Markieren Sie uns auf GitHub, um das Projekt zu unterstützen und andere zu inspirieren, sein Potenzial zu erkunden.
• ? Treten Sie unserer Discord-Community bei, um Ihre Projekte zu teilen, Fragen zu stellen und zusammenzuarbeiten.
• ? Folgen Sie uns auf X und Bluesky für die neuesten Updates, Vorschauen und Funktionsankündigungen.
• ? Tauchen Sie tiefer in die offizielle Dokumentation ein, um fortgeschrittene Techniken und Einblicke zu erhalten, die Ihre No-Code-Workflows auf die n?chste Stufe heben k?nnen.

Das obige ist der detaillierte Inhalt vonVerwenden von CSS-Variablen zum Erstellen dynamischer Themen in Puck. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!