Puck 是 React 的開源可視化編輯器，為下一代頁面構(gòu)建器和無代碼產(chǎn)品提供支持。在 GitHub 上給我們一顆星！ ??

將 Puck 集成到您的頁面構(gòu)建產(chǎn)品中時(shí)，一個(gè)常見的需求是讓您的用戶能夠集中管理頁面主題，而無需對(duì)每個(gè)組件進(jìn)行調(diào)整。

例如：用戶需要一種全局管理字體樣式的方法 - 即使對(duì)于已添加到頁面的組件也是如此。以下是實(shí)際效果：

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

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

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

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

如果您使用 Next.js 或 Remix，您還可以使用官方 Puck 配方之一來設(shè)置您的項(xiàng)目。

創(chuàng)建項(xiàng)目

首先，打開終端并運(yùn)行以下命令來創(chuàng)建一個(gè)新的 Vite 項(xiàng)目：

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

安裝冰球

接下來，安裝 Puck 軟件包：

npm i @measured/puck --save

刪除沖突的樣式

當(dāng)您使用 Vite 開始一個(gè)新項(xiàng)目時(shí)，它會(huì)附帶一些默認(rèn)樣式，這些樣式會(huì)與 Puck 的沖突。要解決此問題，請(qǐng)刪除 src/index.css 和 src/App.css，然后從 src/main.jsx 和 src/App.jsx 中刪除它們的導(dǎo)入：

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

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

渲染 Puck 編輯器

準(zhǔn)備好基本的項(xiàng)目結(jié)構(gòu)后，轉(zhuǎn)到 src/App.jsx 文件并將其內(nèi)容替換為以下代碼。這將為 Puck 設(shè)置一個(gè)用于拖放標(biāo)題和段落組件的基本配置：

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

// 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)槟挠脩籼砑又黝}。

添加主題

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

設(shè)置

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

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

第 1 步：定義變量

首先定義一個(gè)對(duì)象來集中所有 CSS 變量名稱。這將提高一致性，并使您免于因 CSS 中屬性名稱輸入錯(cuò)誤而導(dǎo)致的調(diào)試問題。

專業(yè)提示：如果您使用 TypeScript，您可以使用枚舉而不是對(duì)象來獲得額外的類型安全性

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

第 2 步：將變量添加到父組件

接下來，更新根配置以包含主題變量的道具和字段。這將允許用戶直接從編輯器的根字段內(nèi)更新自定義屬性。

為此，您需要定義新根 props 的字段及其默認(rèn)值：

npm i @measured/puck --save

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

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

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



<p>如果您現(xiàn)在轉(zhuǎn)到編輯器，您應(yīng)該會(huì)在根級(jí)別看到每個(gè)道具的新字段。目前還沒有視覺反饋，但如果您檢查編輯器根目錄的樣式，您將看到對(duì)字段所做的每次更改都設(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>
  
  
  第三步：訪問子組件中的共享變量
</h3>

<p>最后，通過在樣式中使用 var CSS 函數(shù)來訪問所需組件中的主題變量。</p>

<p>在我們的示例中，您將它們添加到 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>？就是這樣！您的用戶現(xiàn)在可以定義無縫應(yīng)用于其頁面中不同組件的主題。</p>

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

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

<ul>
<li>簡單直觀的設(shè)置</li>
<li>頁面層次結(jié)構(gòu)中的內(nèi)置級(jí)聯(lián)和覆蓋功能，可以輕松管理共享樣式并能夠自定義各個(gè)組件</li>
<li>零外部依賴和輕量化——瀏覽器原生支持 CSS 自定義屬性</li>
<li>比其他選項(xiàng)更少的樣板和維護(hù)復(fù)雜性</li>
</ul>

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

<ul>
<li>僅適合簡單的樣式——無法處理復(fù)雜的數(shù)據(jù)或邏輯</li>
<li>嵌套多層 CSS 屬性覆蓋時(shí)，調(diào)試可能會(huì)很困難</li>
</ul>

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

<p>根據(jù)您的具體用例，有很多方法可以進(jìn)一步完善您的編輯器主題：</p>
<ul>
<li>
<strong>使用預(yù)定義主題</strong> - 在某些應(yīng)用程序中，您可能需要提供默認(rèn)主題選項(xiàng)，例如深色、淺色或最小主題。為此，您可以使用具有多個(gè)主題對(duì)象的選擇字段。 
這些對(duì)象可以將所有 CSS 屬性分組為一個(gè)單元，允許用戶輕松地在頁面的不同主題之間切換，而無需填寫單個(gè)字段。</li>
<li>
<strong>集成樣式庫</strong> – 對(duì)于較大的編輯器，最好使用樣式庫來利用預(yù)構(gòu)建的樣式、簡化定義并減少樣板文件。 Tailwind 或 Emotion 等庫可以輕松與 Puck 集成，為您提供靈活性和效率，同時(shí)保持精美的外觀。事實(shí)上，Puck 甚至提供了一個(gè) Emotion 插件，可以為您簡化集成過程！</li>
<li>
<strong>添加組件級(jí)主題覆蓋</strong> – 有時(shí)用戶可能需要自定義頁面中的各個(gè)組件，以便它們從主題的其余部分中脫穎而出。由于我們使用的是 CSS 屬性，因此可以通過在組件級(jí)別覆蓋父級(jí)主題變量來輕松實(shí)現(xiàn)這一點(diǎn)。例如，您可以在 Heading 組件中添加一個(gè)可選的字體顏色字段，如果提供的話，將專門為該 h1 元素重新定義 CSS 屬性。</li>
</ul>

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

<p>我希望本教程能夠幫助您在 Puck 支持的頁面構(gòu)建器中利用 CSS 變量實(shí)現(xiàn)動(dòng)態(tài)主題。開源開發(fā)者社區(qū)是 Puck 發(fā)展的核心，我迫不及待地想看到您創(chuàng)建的創(chuàng)新應(yīng)用程序！</p>

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

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

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


          </div>

            
        

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