Puck 是 React 的開(kāi)源視覺(jué)化編輯器，為下一代頁(yè)面建立器和無(wú)程式碼產(chǎn)品提供支援。在 GitHub 上給我們一顆星！ ??

將 Puck 整合到您的頁(yè)面建立產(chǎn)品中時(shí)，一個(gè)常見(jiàn)的需求是讓您的使用者能夠集中管理頁(yè)面主題，而無(wú)需對(duì)每個(gè)元件進(jìn)行調(diào)整。

例如：使用者需要一種全域管理字體樣式的方法 - 即使對(duì)於已新增至頁(yè)面的元件也是如此。以下是實(shí)際效果：

由於 Puck 只是一個(gè) React 元件，因此有很多方法可以解決這個(gè)問(wèn)題（以及管理其他更複雜的狀態(tài)）。在本文中，我將重點(diǎn)討論最簡(jiǎn)單但最強(qiáng)大的方法之一—CSS 屬性。讓我們開(kāi)始吧！

對(duì)於本教程，我假設(shè)您對(duì) Puck 及其功能有基本的了解。如果您是 Puck 的新手，請(qǐng)不要擔(dān)心 — 我們?nèi)匀粴g迎您繼續(xù)學(xué)習(xí)！不過(guò)，我建議您查看入門(mén)指南以熟悉基礎(chǔ)知識(shí)。

使用 Vite 設(shè)定項(xiàng)目

我將首先使用 Vite 的腳手架腳本建立一個(gè)專(zhuān)案。如果您已經(jīng)有 Puck 的項(xiàng)目，歡迎您繼續(xù)閱讀或跳過(guò)本節(jié)。

如果您使用 Next.js 或 Remix，您也可以使用官方 Puck 配方之一來(lái)設(shè)定您的專(zhuān)案。

創(chuàng)建專(zhuān)案

首先，打開(kāi)終端機(jī)並執(zhí)行以下命令來(lái)建立新的 Vite 專(zhuān)案：

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

安裝冰球

接下來(lái)，安裝 Puck 軟體套件：

npm i @measured/puck --save

刪除衝突的樣式

當(dāng)您使用 Vite 開(kāi)始一個(gè)新專(zhuān)案時(shí)，它會(huì)附帶一些預(yù)設(shè)樣式，這些樣式會(huì)與 Puck 的衝突。若要解決此問(wèn)題，請(qǐng)刪除 src/index.css 和 src/App.css，然後從 src/main.jsx 和 src/App.jsx 中刪除它們的匯入：

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

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

渲染 Puck 編輯器

準(zhǔn)備好基本的專(zhuān)案結(jié)構(gòu)後，請(qǐng)前往 src/App.jsx 檔案並將其內(nèi)容替換為以下程式碼。這將為 Puck 設(shè)定一個(gè)用於拖放標(biāo)題和段落組件的基本配置：

請(qǐng)注意，為了簡(jiǎn)單起見(jiàn)，我在本例中使用內(nèi)嵌樣式

// 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

太棒了！現(xiàn)在您已經(jīng)有了基礎(chǔ)，讓我們?yōu)槟挠脩?hù)添加主題。

新增主題

正如我之前提到的，CSS 自訂屬性是為編輯器添加互動(dòng)式主題的絕佳選擇。為什麼這是一個(gè)很好的方法？因?yàn)樗禽p量級(jí)的，不需要外部依賴(lài)項(xiàng)，並且（大部分）由瀏覽器本地處理。

設(shè)定

要使用 CSS 屬性新增動(dòng)態(tài)主題，您需要將主題變數(shù)定義為需要它們的元件的某些父級(jí)的屬性。這可能是 Puck 的根元件或編輯器層次結(jié)構(gòu)中的任何其他父元件，只要您定義它們，然後使用 var CSS 函數(shù)在需要的地方讀取它們，這並不重要。

在本教程中，我將重點(diǎn)使用 Puck 的根組件，以便用戶(hù)能夠在編輯器頂層的一個(gè)位置設(shè)置標(biāo)題和段落的字體大小和顏色：

第 1 步：定義變數(shù)

先定義一個(gè)物件來(lái)集中所有 CSS 變數(shù)名稱(chēng)。這將提高一致性，並使您免於因 CSS 中屬性名稱(chēng)輸入錯(cuò)誤而導(dǎo)致的偵錯(cuò)問(wèn)題。

專(zhuān)業(yè)提示：如果您使用 TypeScript，您可以使用枚舉而不是物件來(lái)獲得額外的類(lèi)型安全性

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

步驟 2：將變數(shù)新增至父元件

接下來(lái)，更新根配置以包含主題變數(shù)的道具和欄位。這將允許使用者直接從編輯器的根字段內(nèi)更新自訂屬性。

為此，您需要定義新根 props 的欄位及其預(yù)設(shè)值：

npm i @measured/puck --save

之後，在根的渲染函數(shù)中，從 props 中讀取自訂屬性並將它們作為 CSS 變數(shù)傳遞給根元素。

// Puck 配置對(duì)象
常量配置= {
  成分： {
    //...現(xiàn)有元件
  },
  根： {
    //...根字段配置

    渲染：({children,fontColor,headingFontSize,paragraphFontSize})=> {
      返回 （
        



<p>如果您現(xiàn)在轉(zhuǎn)到編輯器，您應(yīng)該會(huì)在根級(jí)別看到每個(gè)道具的新欄位。目前還沒(méi)有視覺(jué)回饋，但如果您檢查編輯器根目錄的樣式，您將看到對(duì)欄位所做的每次變更都設(shè)定了變數(shù)。 </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>
  
  
  第三步：存取子元件中的共享變數(shù)
</h3>

<p>最後，透過(guò)在樣式中使用 var CSS 函數(shù)來(lái)存取所需元件中的主題變數(shù)。 </p>

<p>在我們的範(fàn)例中，您將它們新增至 headerConfig 和 paragraphConfig 中：<br>
</p>

<pre class="brush:php;toolbar:false">const headerConfig = {
  //... 標(biāo)題欄位配置

  渲染：({ 標(biāo)題 }) => {
    返回 （
      <div>
        <h1>



</h1>
<p>如果您返回編輯器，拖放一些標(biāo)題和段落，然後修改根級(jí)別的字段，您會(huì)注意到所有標(biāo)題和段落都會(huì)更新以反映這些更改：</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>？就是這樣！您的用戶(hù)現(xiàn)在可以定義無(wú)縫應(yīng)用於其頁(yè)面中不同組件的主題。 </p>

<h3>
  
  
  使用 CSS 屬性的優(yōu)點(diǎn)和缺點(diǎn)
</h3>

<p>? 優(yōu)點(diǎn)：</p>

<ul>
<li>簡(jiǎn)單直覺(jué)的設(shè)定</li>
<li>頁(yè)面層次結(jié)構(gòu)中的內(nèi)建級(jí)聯(lián)和覆蓋功能，可以輕鬆管理共享樣式並能夠自訂各個(gè)元件</li>
<li>零外部依賴(lài)與輕量化－瀏覽器原生支援 CSS 自訂屬性</li>
<li>比其他選項(xiàng)更少的樣板和維護(hù)複雜性</li>
</ul>

<p>?缺點(diǎn)：</p>

<ul>
<li>僅適合簡(jiǎn)單的樣式－無(wú)法處理複雜的資料或邏輯</li>
<li>當(dāng)巢狀多層 CSS 屬性覆寫(xiě)時(shí)，除錯(cuò)可能會(huì)很困難</li>
</ul>

<h2>
  
  
  更進(jìn)一步
</h2>

<p>根據(jù)您的特定用例，有很多方法可以進(jìn)一步完善您的編輯器主題：</p>
<ul>
<li>
<strong>使用預(yù)定義主題</strong> - 在某些應(yīng)用程式中，您可能需要提供預(yù)設(shè)主題選項(xiàng)，例如深色、淺色或最小主題。為此，您可以使用具有多個(gè)主題物件的選擇欄位。 
這些物件可以將所有 CSS 屬性分組為一個(gè)單元，讓使用者可以輕鬆地在頁(yè)面的不同主題之間切換，而無(wú)需填寫(xiě)單一欄位。 </li>
<li>
<strong>整合式樣式庫(kù)</strong> – 對(duì)於較大的編輯器，最好使用樣式庫(kù)來(lái)利用預(yù)先建置的樣式、簡(jiǎn)化定義並減少樣板檔案。 Tailwind 或 Emotion 等庫(kù)可以輕鬆與 Puck 集成，為您提供靈活性和效率，同時(shí)保持精美的外觀。事實(shí)上，Puck 甚至提供了一個(gè) Emotion 插件，可以為您簡(jiǎn)化整合過(guò)程！ </li>
<li>
<strong>新增元件級(jí)主題覆蓋</strong> – 有時(shí)使用者可能需要自訂頁(yè)面中的各個(gè)元件，以便它們從主題的其餘部分中脫穎而出。由於我們使用的是 CSS 屬性，因此可以透過(guò)在元件層級(jí)覆寫(xiě)父級(jí)主題變數(shù)來(lái)輕鬆實(shí)現(xiàn)這一點(diǎn)。例如，您可以在 Heading 元件中新增一個(gè)可選的字體顏色字段，如果提供的話(huà)，將專(zhuān)門(mén)為該 h1 元素重新定義 CSS 屬性。 </li>
</ul>

<h2>
  
  
  保持聯(lián)繫並繼續(xù)建設(shè)？
</h2>

<p>我希望本教學(xué)能幫助您在 Puck 支援的頁(yè)面建立器中利用 CSS 變數(shù)來(lái)實(shí)現(xiàn)動(dòng)態(tài)主題。開(kāi)源開(kāi)發(fā)者社群是 Puck 發(fā)展的核心，我迫不及待地想看到您創(chuàng)建的創(chuàng)新應(yīng)用程式！ </p>

<p>我們致力於進(jìn)一步推動(dòng) Puck 的功能，不斷推出新功能，包括即將推出的用於複雜網(wǎng)格和佈局的革命性拖放引擎，以及即將推出的一套新插件。 </p>

<p>所以，如果 Puck 給了您啟發(fā)或您想了解最新功能，您可以透過(guò)以下方式參與其中：</p>

<ul>
<li>
<strong>? 在 GitHub 上給我們加星標(biāo)</strong> 以支持該項(xiàng)目並激勵(lì)其他人探索其潛力。 </li>
<li>
<strong>？加入我們的 Discord 社群</strong> 分享您的專(zhuān)案、提出問(wèn)題並進(jìn)行協(xié)作。 </li>
<li>
<strong>？在 X 和 Bluesky</strong> 上關(guān)注我們，以了解最新更新、先睹為快和功能公告。 </li>
<li>
<strong>？深入研究官方文件</strong>以獲得先進(jìn)的技術(shù)和見(jiàn)解，可以將您的無(wú)程式碼工作流程提升到一個(gè)新的水平。 </li>
</ul>


          </div>

            
        

以上是使用 CSS 變數(shù)在 Puck 中建立動(dòng)態(tài)主題的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！