Vite を使用したプロジェクトのセットアップ

Vite のスキャフォールディング スクリプトを使用してプロジェクトをセットアップすることから始めます。 Puck を使用したプロジェクトがすでにある場(chǎng)合は、このセクションを読み進(jìn)めても、スキップしても構(gòu)いません。

Next.js または Remix を使用している場(chǎng)合は、プロジェクトのセットアップに公式 Puck レシピの 1 つを使用することもできます。

プロジェクトの作成

始めるには、ターミナルを開(kāi)き、次のコマンドを?qū)g行して新しい Vite プロジェクトを作成します。

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

パックのインストール

次に、Puck パッケージをインストールします。

npm i @measured/puck --save

競(jìng)合するスタイルの削除

Vite で新しいプロジェクトを開(kāi)始すると、Puck のスタイルと衝突するいくつかのデフォルト スタイルが付屬します。これを修正するには、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 エディタのレンダリング

基本的なプロジェクト構(gòu)造が準(zhǔn)備できたら、src/App.jsx ファイルに移動(dòng)し、その內(nèi)容を以下のコードに置き換えます。これにより、見(jiàn)出しコンポーネントと段落コンポーネントをドラッグ アンド ドロップするための基本的な構(gòu)成を使用して Puck がセットアップされます。

簡(jiǎ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

すごい！構(gòu)築する基盤ができたので、ユーザー向けのテーマを追加しましょう。

テーマの追加

前に述べたように、CSS カスタム プロパティは、エディターにインタラクティブなテーマを追加するための優(yōu)れた選択肢です。なぜこれが素晴らしいアプローチなのでしょうか?これは軽量で、外部依存関係を必要とせず、(ほとんどの場(chǎng)合) ブラウザーによってネイティブに処理されるためです。

設(shè)定

CSS プロパティを使用して動(dòng)的なテーマを追加するには、テーマ変數(shù)を必要とするコンポーネントの親でテーマ変數(shù)をプロパティとして定義する必要があります。これは、Puck のルート コンポーネントでも、エディター階層內(nèi)の他の親コンポーネントでも構(gòu)いません。それらを定義し、var CSS 関數(shù)を使用して必要な場(chǎng)所で読み取る限り、それは実際には問(wèn)題ではありません。

このチュートリアルでは、ユーザーがエディターの最上位の 1 か所で見(jiàn)出しと段落のフォント サイズと色を設(shè)定できるように、Puck のルート コンポーネントの使用に焦點(diǎn)を當(dāng)てます。

ステップ 1: 変數(shù)を定義する

まず、すべての CSS 変數(shù)名を一元化するオブジェクトを定義します。これにより、一貫性が向上し、CSS のプロパティ名の入力ミスによって引き起こされるデバッグの問(wèn)題というウサギの穴から解放されます。

プロのヒント: TypeScript を使用している場(chǎng)合は、オブジェクトの代わりに列挙型を使用して、タイプ セーフティをさらに強(qiáng)化できます

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

ステップ 2: 親コンポーネントに変數(shù)を追加する

次に、ルート設(shè)定を更新して、テーマ変數(shù)の小道具とフィールドを含めます。これにより、ユーザーはエディターのルート フィールド內(nèi)からカスタム プロパティを直接更新できるようになります。

これを行うには、新しいルート プロパティのフィールドとそのデフォルト値を定義する必要があります。

npm i @measured/puck --save

その後、ルートの render 関數(shù)で、props からカスタム プロパティを読み取り、CSS 変數(shù)としてルート要素に渡します。

// Puck 構(gòu)成オブジェクト
const 構(gòu)成 = {
  コンポーネント: {
    //... 既存のコンポーネント
  }、
  根： {
    //... ルートフィールドの設(shè)定

    render: ({ Children, fontColor,HeadingFontSize, ParagraphFontSize}) => {
      戻る （
        



<p>エディターに移動(dòng)すると、各プロパティのルート レベルに新しいフィールドが表示されるはずです。まだ視覚的なフィードバックはありませんが、エディターのルートのスタイルを調(diào)べると、フィールドに変更を加えるたびに変數(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>
  
  
  ステップ 3: 子コンポーネントのシェア変數(shù)にアクセスする
</h3>

<p>最後に、スタイルで var CSS 関數(shù)を使用して、必要なコンポーネントのテーマ変數(shù)にアクセスします。</p>

<p>この例では、HeadingConfig と ParagraphConfig に追加します。<br>
</p>

<pre class="brush:php;toolbar:false">constHeadingConfig = {
  //... 見(jiàn)出しフィールドの設(shè)定

  レンダリング: ({ タイトル }) => {
    戻る （
      <div>
        <h1>



</h1><p>エディターに戻り、いくつかの見(jiàn)出しと段落をドラッグ アンド ドロップし、ルート レベルでフィールドを変更すると、すべての見(jiàn)出しと段落が更新されてそれらの変更が反映されていることがわかります。</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>?それで終わりです！ユーザーは、ページ內(nèi)のさまざまなコンポーネントにシームレスに適用されるテーマを定義できるようになりました。</p>

<h3>
  
  
  CSS プロパティを使用することの長(zhǎng)所と短所
</h3>

<p>?長(zhǎng)所:</p>

• シンプルで直感的なセットアップ
• ページ階層にカスケード機(jī)能とオーバーライド機(jī)能が組み込まれており、共有スタイルの管理が容易になり、個(gè)々のコンポーネントをカスタマイズできます
• 外部依存関係がなく、フットプリントが軽量 — CSS カスタム プロパティはブラウザーでネイティブにサポートされています
• 他のオプションよりもボイラープレートとメンテナンスの複雑さが軽減されます

?短所:

• 単純なスタイル設(shè)定にのみ適しています。複雑なデータやロジックは処理できません
• 複數(shù)レベルの CSS プロパティ オーバーライドをネストすると、デバッグが困難になる可能性があります

さらに進(jìn)化する

特定の使用例に応じて、エディターのテーマをさらに進(jìn)化させる方法がたくさんあります。

• 事前定義されたテーマを使用する - 一部のアプリケーションでは、ダーク、ライト、最小限などのデフォルトのテーマ オプションを提供する必要がある場(chǎng)合があります。このために、複數(shù)のテーマ オブジェクトを持つ選択フィールドを使用できます。 これらのオブジェクトは、すべての CSS プロパティを 1 つのユニットとしてグループ化できるため、ユーザーは 1 つのフィールドに入力することなく、ページの異なるテーマを簡(jiǎn)単に切り替えることができます。
• スタイル ライブラリの統(tǒng)合 – 大規(guī)模なエディタの場(chǎng)合、事前に構(gòu)築されたスタイルを活用し、定義を合理化し、定型文を減らすために、スタイル ライブラリを使用する方が良い場(chǎng)合があります。 Tailwind や Emotion などのライブラリは Puck と簡(jiǎn)単に統(tǒng)合できるため、洗練された外観を維持しながら柔軟性と効率性を?qū)g現(xiàn)できます。実際、Puck は統(tǒng)合プロセスを簡(jiǎn)素化する Emotion プラグインも提供しています!
• コンポーネント レベルのテーマのオーバーライドを追加する – 場(chǎng)合によっては、ユーザーがページ內(nèi)の個(gè)々のコンポーネントをテーマの他の部分から目立たせるようにカスタマイズする必要がある場(chǎng)合があります。 CSS プロパティを使用しているため、これは親レベルのテーマ変數(shù)をコンポーネント レベルでオーバーライドすることで簡(jiǎn)単に実現(xiàn)できます。たとえば、オプションのフォント カラー フィールドを Heading コンポーネント內(nèi)に追加できます。これが指定されている場(chǎng)合、その h1 要素専用の CSS プロパティを再定義します。

接続を維持して構(gòu)築を続けますか?

このチュートリアルを読んで、Puck を利用したページ ビルダーで CSS 変數(shù)を動(dòng)的テーマに活用できるようになったら幸いです。オープンソースの開(kāi)発者コミュニティは Puck の進(jìn)化の中心であり、皆さんが作成する革新的なアプリを見(jiàn)るのが待ちきれません!

私たちは、まもなくリリースされる複雑なグリッドとレイアウト用の革新的なドラッグ アンド ドロップ エンジンや、間もなくリリースされる新しいプラグイン スイートなど、新しい機(jī)能を継続的に提供することで、Puck の機(jī)能をさらに推し進(jìn)めることに専念しています。

Puck にインスピレーションを受けた場(chǎng)合、または最新の機(jī)能を常に最新の狀態(tài)に保ちたい場(chǎng)合は、次の方法で參加できます。

• ? GitHub でスターを付けてください。プロジェクトをサポートし、他の人がその可能性を探求するよう促します。
• ? Discord コミュニティに參加して、プロジェクトを共有し、質(zhì)問(wèn)し、共同作業(yè)を行ってください。
• ?最新のアップデート、スニークピーク、機(jī)能のお知らせについては、X と Bluesky をフォローしてください。
• ?公式ドキュメントをさらに深く掘り下げて、ノーコード ワークフローを次のレベルに引き上げることができる高度なテクニックと洞察を確認(rèn)してください。

以上がCSS 変數(shù)を使用して Puck で動(dòng)的なテーマを作成するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。