


Menggunakan pembolehubah CSS untuk mencipta tema dinamik dalam Puck
Puck ialah editor visual sumber terbuka untuk React, memperkasakan generasi pembina halaman dan produk tanpa kod generasi seterusnya. Beri kami bintang di GitHub! ⭐️
Apabila menyepadukan Puck ke dalam produk pembinaan halaman anda, keperluan biasa ialah membenarkan pengguna anda mengurus tema halaman secara berpusat tanpa perlu membuat pelarasan pada setiap komponen.
Contohnya: pengguna memerlukan cara untuk mengurus gaya fon secara global—walaupun untuk komponen yang telah ditambahkan pada halaman. Begini bagaimana ia boleh kelihatan dalam tindakan:
Memandangkan Puck hanyalah komponen React, terdapat banyak cara untuk menyelesaikan masalah ini (serta menguruskan keadaan lain yang lebih kompleks). Untuk artikel ini, saya akan menumpukan pada salah satu pendekatan yang paling mudah lagi berkuasa—sifat CSS. Mari selami!
Untuk tutorial ini, saya akan menganggap anda mempunyai pemahaman asas tentang Puck dan fungsinya. Jika anda baru menggunakan Puck, jangan risau—anda masih dialu-alukan untuk mengikuti! Walau bagaimanapun, saya syorkan anda menyemak panduan permulaan untuk membiasakan diri anda dengan asasnya.
Persediaan Projek menggunakan Vite
Saya akan mulakan dengan menyediakan projek menggunakan skrip perancah Vite. Anda dialu-alukan untuk mengikuti atau melangkau bahagian ini jika anda sudah mempunyai projek dengan Puck.
Jika anda menggunakan Next.js atau Remix anda juga boleh menggunakan salah satu resipi Puck rasmi untuk menyediakan projek anda.
Mencipta Projek
Untuk bermula, buka terminal anda dan jalankan arahan berikut untuk mencipta projek Vite baharu:
npm create vite@latest puck-global-themes -- --template react cd puck-global-themes npm install
Memasang Puck
Seterusnya, pasang pakej Puck:
npm i @measured/puck --save
Memadamkan gaya bercanggah
Apabila anda memulakan projek baharu dengan Vite, ia akan disertakan dengan beberapa gaya lalai yang akan bertembung dengan Puck's. Untuk membetulkannya, padamkan src/index.css dan src/App.css, kemudian alih keluar importnya daripada src/main.jsx dan src/App.jsx:
// main.jsx import "./index.css"; // Remove this line
// App.jsx import "./App.css"; // Remove this line
Memaparkan editor Puck
Dengan struktur projek asas sedia, pergi ke fail src/App.jsx anda dan gantikan kandungannya dengan kod di bawah. Ini akan menyediakan Puck dengan konfigurasi asas untuk menyeret dan menjatuhkan komponen Tajuk dan Perenggan:
Perhatikan bahawa, demi kesederhanaan saya menggunakan penggayaan sebaris dalam contoh ini
// 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
Hebat! Memandangkan anda mempunyai asas untuk dibina, mari tambahkan tema untuk pengguna anda.
Menambah tema
Seperti yang saya nyatakan sebelum ini, sifat tersuai CSS ialah pilihan terbaik untuk menambahkan tema interaktif pada editor anda. Mengapa ini pendekatan yang hebat? Kerana ia ringan, tidak memerlukan kebergantungan luaran dan (sebahagian besarnya) dikendalikan secara asli oleh penyemak imbas.
Persediaan
Untuk menambah tema dinamik dengan sifat CSS, anda perlu menentukan pembolehubah tema anda sebagai sifat pada beberapa induk komponen yang memerlukannya. Ini boleh jadi komponen akar Puck atau mana-mana komponen induk lain dalam hierarki editor anda, tidak mengapa asalkan anda mentakrifkannya dan kemudian membacanya di tempat yang anda perlukan menggunakan fungsi var CSS.
Untuk tutorial ini, saya akan menumpukan pada menggunakan komponen akar Puck supaya pengguna dapat menetapkan saiz fon dan warna untuk tajuk dan perenggan di satu tempat di peringkat atas editor:
Langkah 1: Tentukan Pembolehubah
Mulakan dengan mentakrifkan objek untuk memusatkan semua nama pembolehubah CSS. Ini akan meningkatkan ketekalan dan menyelamatkan anda daripada masalah penyahpepijatan yang disebabkan oleh nama harta yang salah taip dalam CSS.
Petua Pro: Jika anda menggunakan TypeScript anda boleh menggunakan enum dan bukannya objek untuk mendapatkan keselamatan jenis tambahan
npm create vite@latest puck-global-themes -- --template react cd puck-global-themes npm install
Langkah 2: Tambahkan Pembolehubah pada Komponen Induk
Seterusnya, kemas kini konfigurasi akar untuk memasukkan prop dan medan untuk pembolehubah tema. Ini akan membolehkan pengguna mengemas kini sifat tersuai secara langsung dari dalam medan akar editor.
Untuk melakukan ini, anda perlu menentukan medan untuk prop akar baharu dan nilai lalainya:
npm i @measured/puck --save
Selepas itu, dalam fungsi pemaparan akar, baca sifat tersuai daripada prop dan hantarkannya kepada elemen akar sebagai pembolehubah CSS.
// Objek konfigurasi Puck konfigurasi const = { komponen: { //... komponen sedia ada }, akar: { //... konfigurasi medan akar render: ({ children, fontColor, headingFontSize, paragraphFontSize}) => { kembali ( <utama > <p>Jika anda kini pergi ke editor, anda seharusnya melihat medan baharu pada peringkat akar untuk setiap satu prop. Belum ada maklum balas visual lagi, tetapi jika anda memeriksa gaya akar editor, anda akan melihat pembolehubah ditetapkan dengan setiap perubahan yang anda buat pada medan.</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> Langkah 3: Akses Pembolehubah Dikongsi dalam Komponen Kanak-kanak </h3> <p>Akhir sekali, akses pembolehubah tema dalam komponen yang anda perlukan dengan menggunakan fungsi var CSS dalam gaya anda.</p> <p>Dalam contoh kami, anda akan menambahkannya dalam headingConfig dan paragraphConfig:<br> </p> <pre class="brush:php;toolbar:false">const headingConfig = { //... Konfigurasi medan tajuk render: ({ tajuk }) => { kembali ( <div> <h1 > <p>Jika anda kembali ke editor, seret dan lepaskan beberapa tajuk dan perenggan, kemudian ubah suai medan pada peringkat akar, anda akan perasan bahawa semua tajuk dan perenggan dikemas kini untuk mencerminkan perubahan tersebut:</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>? Dan itu sahaja! Pengguna anda kini boleh mentakrifkan tema yang digunakan dengan lancar merentas komponen berbeza dalam halaman mereka.</p> <h3> Kebaikan & Keburukan menggunakan sifat CSS </h3> <p>✅ Kelebihan:</p>
- Persediaan yang mudah dan intuitif
- Fungsi lata dan timpa terbina dalam dalam hierarki halaman, membolehkan pengurusan mudah gaya dikongsi dan keupayaan untuk menyesuaikan komponen individu
- Sifar kebergantungan luaran dan jejak ringan—sifat tersuai CSS disokong secara asli oleh penyemak imbas
- Kurang plat dandang dan kerumitan penyelenggaraan berbanding pilihan lain
❌ Keburukan:
- Hanya sesuai untuk penggayaan ringkas—tidak boleh mengendalikan data atau logik yang kompleks
- Penyahpepijatan boleh menjadi sukar apabila menyusun berbilang peringkat penggantian sifat CSS
Membawanya lebih jauh
Bergantung pada kes penggunaan khusus anda, terdapat banyak cara untuk membawa tema editor anda lebih jauh:
- Gunakan tema pratakrif - Dalam sesetengah aplikasi, anda mungkin perlu menyediakan pilihan tema lalai—seperti Gelap, Terang atau Minimum. Untuk ini, anda boleh menggunakan medan pilihan dengan berbilang objek tema. Objek ini boleh mengumpulkan semua sifat CSS sebagai satu unit, membolehkan pengguna bertukar-tukar dengan mudah antara tema yang berbeza untuk halaman mereka tanpa perlu mengisi satu medan.
- Sepadukan perpustakaan penggayaan – Untuk editor yang lebih besar, mungkin lebih baik menggunakan perpustakaan penggayaan untuk memanfaatkan gaya pra-bina, memperkemas takrifan anda dan mengurangkan boilerplate. Perpustakaan seperti Tailwind atau Emotion boleh disepadukan dengan mudah dengan Puck, memberikan anda fleksibiliti dan kecekapan sambil mengekalkan rupa yang digilap. Malah, Puck juga menawarkan pemalam Emosi yang memudahkan proses penyepaduan untuk anda!
- Tambah penggantian tema peringkat komponen – Kadangkala pengguna mungkin perlu menyesuaikan komponen individu dalam halaman mereka supaya mereka menonjol daripada tema yang lain. Memandangkan kami menggunakan sifat CSS, ini boleh dicapai dengan mudah dengan mengatasi pembolehubah tema peringkat induk pada peringkat komponen. Sebagai contoh, anda boleh menambah medan warna fon pilihan dalam komponen Tajuk anda yang, jika disediakan, akan mentakrifkan semula sifat CSS khusus untuk elemen h1 tersebut.
Kekal Berhubung dan Teruskan Membina?
Saya harap tutorial ini telah memperkasakan anda untuk memanfaatkan pembolehubah CSS untuk tema dinamik dalam pembina halaman berkuasa Puck. Komuniti pembangun sumber terbuka adalah nadi kepada evolusi Puck dan saya tidak sabar untuk melihat apl inovatif yang anda cipta!
Kami berdedikasi untuk meningkatkan lagi keupayaan Puck, dengan aliran berterusan ciri baharu, termasuk enjin drag-and-drop revolusioner untuk grid kompleks dan reka letak yang dilancarkan tidak lama lagi, dan set pemalam baharu di kaki langit.
Jadi, jika Puck telah memberi inspirasi kepada anda atau jika anda ingin mengikuti perkembangan terkini dengan ciri terkini, berikut ialah cara anda boleh terlibat:
- ⭐ Bintangi kami di GitHub untuk menyokong projek dan memberi inspirasi kepada orang lain untuk meneroka potensinya.
- ? Sertai komuniti Discord kami untuk berkongsi projek anda, bertanya soalan dan bekerjasama.
- ? Ikuti kami di X dan Bluesky untuk mendapatkan kemas kini terbaharu, intipan dan pengumuman ciri.
- ? Selami dengan lebih mendalam dokumentasi rasmi untuk mendapatkan teknik dan cerapan lanjutan yang boleh membawa aliran kerja tanpa kod anda ke peringkat seterusnya.
Atas ialah kandungan terperinci Menggunakan pembolehubah CSS untuk mencipta tema dinamik dalam Puck. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas











Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.

Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.

Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.

Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.

Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.

C dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.

Python lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.
