웹 프론트엔드 JS 튜토리얼 CSS 변수를 사용하여 Puck에서 동적 테마 만들기

CSS 변수를 사용하여 Puck에서 동적 테마 만들기

Jan 08, 2025 pm 09:45 PM

Puck은 React용 오픈 소스 비주얼 편집기로, 차세대 페이지 빌더와 코드 없는 제품을 지원합니다. GitHub에서 별점을 주세요! ⭐️


Puck을 페이지 구축 제품에 통합할 때 일반적인 요구 사항은 사용자가 모든 구성 요소를 조정할 필요 없이 페이지 테마를 중앙에서 관리할 수 있도록 하는 것입니다.

예를 들어 사용자는 페이지에 이미 추가된 구성 요소의 경우에도 글꼴 스타일을 전역적으로 관리할 수 있는 방법이 필요합니다. 실제로는 다음과 같습니다.

Using CSS variables to create dynamic themes in Puck

Puck은 단순한 React 구성요소이므로 이 문제를 해결하는 방법은 많습니다(다른 더 복잡한 상태를 관리하는 것 외에도). 이 기사에서는 가장 단순하면서도 가장 강력한 접근 방식 중 하나인 CSS 속성에 중점을 둘 것입니다. 뛰어들어 보세요!

Using CSS variables to create dynamic themes in Puck

이 튜토리얼에서는 귀하가 Puck과 그 기능에 대한 기본적인 이해를 갖고 있다고 가정하겠습니다. Puck을 처음 사용하는 경우에도 걱정하지 마세요. 계속 따라오셔도 됩니다! 하지만 기본 사항을 숙지하려면 시작 가이드를 확인하는 것이 좋습니다.

Vite를 사용한 프로젝트 설정

Vite의 스캐폴딩 스크립트를 사용하여 프로젝트를 설정하는 것부터 시작하겠습니다. 이미 Puck과 함께한 프로젝트가 있다면 이 섹션을 따르거나 건너뛰어도 됩니다.

Next.js 또는 Remix를 사용하는 경우 공식 Puck 레시피 중 하나를 사용하여 프로젝트를 설정할 수도 있습니다.

프로젝트 생성

시작하려면 터미널을 열고 다음 명령을 실행하여 새 Vite 프로젝트를 만드세요.

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

퍽 설치

다음으로 Puck 패키지를 설치합니다.

npm i @measured/puck --save

충돌하는 스타일 삭제

Vite로 새 프로젝트를 시작하면 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 편집기 렌더링

기본 프로젝트 구조가 준비되면 src/App.jsx 파일로 이동하여 해당 내용을 아래 코드로 바꿉니다. 이렇게 하면 제목 및 단락 구성 요소를 드래그 앤 드롭하기 위한 기본 구성으로 Puck이 설정됩니다.

단순화를 위해 이 예에서는 인라인 스타일을 사용하고 있습니다

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

Using CSS variables to create dynamic themes in Puck

멋져요! 이제 기초를 다졌으니 사용자를 위한 테마를 추가해 보겠습니다.

테마 추가

앞서 언급했듯이 CSS 사용자 정의 속성은 편집기에 대화형 테마를 추가하는 데 탁월한 선택입니다. 이것이 왜 훌륭한 접근 방식입니까? 가볍기 때문에 외부 종속성이 필요하지 않으며 대부분의 경우 브라우저에서 기본적으로 처리됩니다.

설정

CSS 속성으로 동적 테마를 추가하려면 테마 변수가 필요한 구성 요소의 상위 요소에서 테마 변수를 속성으로 정의해야 합니다. 이는 Puck의 루트 구성 요소일 수도 있고 편집기 계층 구조의 다른 상위 구성 요소일 수도 있습니다. 정의한 다음 var CSS 함수를 사용하여 필요한 위치에서 읽으면 실제로는 중요하지 않습니다.

이 튜토리얼에서는 사용자가 편집기 최상위 수준의 한 위치에서 제목과 단락의 글꼴 크기와 색상을 설정할 수 있도록 Puck의 루트 구성 요소를 사용하는 데 중점을 둘 것입니다.

Using CSS variables to create dynamic themes in Puck

1단계: 변수 정의

모든 CSS 변수 이름을 중앙 집중화하는 객체를 정의하는 것부터 시작하세요. 이렇게 하면 일관성이 향상되고 CSS에 속성 이름을 잘못 입력하여 발생하는 디버깅 문제를 피할 수 있습니다.

전문가 팁: TypeScript를 사용하는 경우 객체 대신 열거형을 사용하여 유형 안전성을 강화할 수 있습니다

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

2단계: 상위 구성 요소에 변수 추가

다음으로 테마 변수에 대한 소품과 필드를 포함하도록 루트 구성을 업데이트합니다. 이를 통해 사용자는 편집기의 루트 필드 내에서 직접 사용자 정의 속성을 업데이트할 수 있습니다.

이렇게 하려면 새 루트 소품에 대한 필드와 해당 기본값을 정의해야 합니다.

npm i @measured/puck --save

그 후 루트의 렌더링 함수에서 props의 사용자 정의 속성을 읽어 루트 요소에 CSS 변수로 전달합니다.

// Puck 구성 객체
const 구성 = {
  구성요소: {
    //... 기존 구성요소
  },
  루트: {
    //... 루트 필드 구성

    렌더링: ({ children,fontColor,headingFontSize,paragraphFontSize}) => {
      반품 (
        <메인
         >



<p>이제 편집기로 이동하면 각 소품의 루트 수준에 새 필드가 표시됩니다. 아직 시각적 피드백은 없지만 편집기 루트의 스타일을 검사하면 필드를 변경할 때마다 변수가 설정되는 것을 볼 수 있습니다.</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단계: 하위 구성요소의 공유 변수에 액세스
</h3>

<p>마지막으로 스타일에 var CSS 기능을 사용하여 필요한 구성요소의 테마 변수에 액세스하세요.</p>

<p>이 예에서는 제목 구성 및 단락 구성에 추가합니다.<br>
</p>

<pre class="brush:php;toolbar:false">const headerConfig = {
  //... 제목 필드 구성

  렌더링: ({ 제목 }) => {
    반품 (
      <div>
        <h1>



</h1><p>편집기로 돌아가서 일부 제목과 단락을 끌어서 놓은 다음 루트 수준에서 필드를 수정하면 모든 제목과 단락이 해당 변경 사항을 반영하여 업데이트되는 것을 확인할 수 있습니다.</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>? 그리고 그게 다야! 이제 사용자는 페이지의 다양한 구성 요소에 원활하게 적용되는 테마를 정의할 수 있습니다.</p>

<h3>
  
  
  CSS 속성 사용의 장단점
</h3>

<p>✅ 장점:</p>

  • 간단하고 직관적인 설정
  • 페이지 계층 구조에 계단식 배열 및 재정의 기능이 내장되어 있어 공유 스타일을 쉽게 관리하고 개별 구성 요소를 맞춤 설정할 수 있습니다.
  • 외부 종속성이 없고 공간이 가볍습니다. CSS 사용자 정의 속성은 브라우저에서 기본적으로 지원됩니다
  • 다른 옵션에 비해 상용구 및 유지 관리 복잡성이 적습니다

❌단점:

  • 간단한 스타일링에만 적합하며 복잡한 데이터나 로직을 처리할 수 없습니다
  • 여러 수준의 CSS 속성 재정의를 중첩하면 디버깅이 어려울 수 있습니다

더 나아가

특정 사용 사례에 따라 편집기 테마를 더욱 발전시킬 수 있는 다양한 방법이 있습니다.

  • 사전 정의된 테마 사용 - 일부 애플리케이션에서는 어둡게, 밝게 또는 최소와 같은 기본 테마 옵션을 제공해야 할 수도 있습니다. 이를 위해 여러 테마 개체가 포함된 선택 필드를 사용할 수 있습니다. 이러한 개체는 모든 CSS 속성을 하나의 단위로 그룹화할 수 있으므로 사용자는 단일 필드를 채울 필요 없이 페이지의 다양한 테마 간에 쉽게 전환할 수 있습니다.
  • 스타일링 라이브러리 통합 – 대규모 편집자의 경우 스타일 라이브러리를 사용하여 미리 작성된 스타일을 활용하고 정의를 간소화하며 상용구를 줄이는 것이 더 나을 수 있습니다. Tailwind 또는 Emotion과 같은 라이브러리는 Puck과 쉽게 통합되어 세련된 모양을 유지하면서 유연성과 효율성을 제공합니다. 실제로 Puck은 통합 프로세스를 단순화하는 Emotion 플러그인도 제공합니다!
  • 구성요소 수준 테마 재정의 추가 – 때로는 사용자가 나머지 테마와 차별화되도록 페이지의 개별 구성요소를 맞춤설정해야 할 수도 있습니다. CSS 속성을 사용하고 있으므로 구성 요소 수준에서 상위 수준 테마 변수를 재정의하면 쉽게 달성할 수 있습니다. 예를 들어, 제공되는 경우 해당 h1 요소에 대해 CSS 속성을 구체적으로 재정의하는 선택적 글꼴 색상 필드를 Heading 구성 요소 내에 추가할 수 있습니다.

연결을 유지하고 계속 구축하시겠습니까?

이 튜토리얼을 통해 Puck 기반 페이지 빌더의 동적 테마에 CSS 변수를 활용할 수 있기를 바랍니다. 오픈 소스 개발자 커뮤니티는 Puck 발전의 중심에 있으며, 여러분이 만들어내는 혁신적인 앱을 빨리 보고 싶습니다!

우리는 곧 출시될 복잡한 그리드 및 레이아웃을 위한 혁신적인 드래그 앤 드롭 엔진과 곧 출시될 새로운 플러그인 제품군을 포함하여 새로운 기능의 지속적인 스트림을 통해 Puck의 기능을 더욱 발전시키기 위해 최선을 다하고 있습니다.

Puck이 영감을 주었거나 최신 기능에 대한 최신 소식을 받고 싶다면 다음 방법으로 참여하세요.

  • ⭐ GitHub에 별표를 표시하여 프로젝트를 지원하고 다른 사람들이 프로젝트의 잠재력을 탐색하도록 영감을 주세요.
  • ? Discord 커뮤니티에 가입하여 프로젝트를 공유하고, 질문하고, 협업하세요.
  • ? 최신 업데이트, 미리보기, 기능 공지사항을 보려면 X 및 Bluesky에서 팔로우하세요.
  • ? 노코드 워크플로를 한 단계 더 발전시킬 수 있는 고급 기술과 통찰력을 보려면 공식 문서를 자세히 살펴보세요.

위 내용은 CSS 변수를 사용하여 Puck에서 동적 테마 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

node.js에서 HTTP 요청을하는 방법? node.js에서 HTTP 요청을하는 방법? Jul 13, 2025 am 02:18 AM

Node.js에서 HTTP 요청을 시작하는 세 가지 일반적인 방법이 있습니다. 1. 기본 시나리오에 적합하지만 데이터 스티칭 및 오류 모니터링의 수동 처리 및 https.get () 사용과 같은 데이터 스티치 및 오류 모니터링의 수동 처리가 필요합니다. 2.axios는 약속을 기반으로 한 타사 도서관입니다. 간결한 구문과 강력한 기능을 가지고 있으며 비동기/기다림, 자동 JSON 변환, 인터셉터 등을 지원합니다. 비동기 요청 작업을 단순화하는 것이 좋습니다. 3. 노드 페치는 약속과 간단한 구문을 기반으로 브라우저 페치와 유사한 스타일을 제공합니다.

JavaScript 데이터 유형 : 원시 대 참조 JavaScript 데이터 유형 : 원시 대 참조 Jul 13, 2025 am 02:43 AM

JavaScript 데이터 유형은 원시 유형 및 기준 유형으로 나뉩니다. 원시 유형에는 문자열, 숫자, 부울, 널, 정의되지 않은 및 기호가 포함됩니다. 값은 불변이없고 값을 할당 할 때 사본이 복사되므로 서로 영향을 미치지 않습니다. 객체, 배열 및 함수와 같은 참조 유형은 메모리 주소를 저장하고 동일한 개체를 가리키는 변수는 서로 영향을 미칩니다. 타입 및 인스턴스는 유형을 결정하는 데 사용될 수 있지만 TypeofNull의 역사적 문제에주의를 기울일 수 있습니다. 이 두 가지 유형의 차이점을 이해하면보다 안정적이고 안정적인 코드를 작성하는 데 도움이 될 수 있습니다.

REACT vs Angular vs Vue : 어떤 JS 프레임 워크가 가장 좋습니까? REACT vs Angular vs Vue : 어떤 JS 프레임 워크가 가장 좋습니까? Jul 05, 2025 am 02:24 AM

어떤 JavaScript 프레임 워크가 최선의 선택입니까? 답은 필요에 따라 가장 적합한 것을 선택하는 것입니다. 1. 반응은 유연하고 무료이며 높은 사용자 정의 및 팀 아키텍처 기능이 필요한 중간 및 대형 프로젝트에 적합합니다. 2. Angular는 엔터프라이즈 수준의 응용 프로그램 및 장기 유지 보수에 적합한 완전한 솔루션을 제공합니다. 3. VUE는 사용하기 쉽고 중소형 프로젝트 또는 빠른 개발에 적합합니다. 또한 기존 기술 스택, 팀 규모, 프로젝트 수명주기 및 SSR이 필요한지 여부도 프레임 워크를 선택하는 데 중요한 요소입니다. 요컨대, 최고의 프레임 워크는 절대적으로 없습니다. 최선의 선택은 귀하의 요구에 맞는 것입니다.

JavaScript Time Object, 누군가 Google Chrome에 EACTEXE, 더 빠른 웹 사이트를 구축합니다. JavaScript Time Object, 누군가 Google Chrome에 EACTEXE, 더 빠른 웹 사이트를 구축합니다. Jul 08, 2025 pm 02:27 PM

안녕하세요, JavaScript 개발자! 이번 주 JavaScript 뉴스에 오신 것을 환영합니다! 이번 주에 우리는 다음에 중점을 둘 것입니다. Deno와의 Oracle의 상표 분쟁, 새로운 JavaScript 시간 개체는 브라우저, Google Chrome 업데이트 및 강력한 개발자 도구에서 지원됩니다. 시작합시다! Deno Oracle의 "JavaScript"상표를 등록하려는 Oracle의 상표 분쟁은 논란을 일으켰습니다. Node.js와 Deno의 제작자 인 Ryan Dahl은 상표를 취소하기위한 탄원서를 제출했으며 JavaScript가 개방형 표준이며 Oracle이 사용해서는 안된다고 생각합니다.

약속 핸들링 : JavaScript의 체인, 오류 처리 및 약속 콤비네이터 약속 핸들링 : JavaScript의 체인, 오류 처리 및 약속 콤비네이터 Jul 08, 2025 am 02:40 AM

약속은 JavaScript에서 비동기 작업을 처리하기위한 핵심 메커니즘입니다. 체인 호출, 오류 처리 및 빗자루 이해는 응용 프로그램을 마스터하는 열쇠입니다. 1. 체인 호출은 비동기 프로세스를 실현하기 위해. ()을 통해 새로운 약속을 반환합니다. 각. ()은 이전 결과를 받고 값이나 약속을 반환 할 수 있습니다. 2. 오류 처리는 .catch ()를 사용하여 침묵 실패를 피하기 위해 예외를 포착해야하며, 캐치의 기본값을 반환하여 프로세스를 계속할 수 있습니다. 3. Promise.all ()과 같은 콤비네이터 (모든 성공 후에 만 ​​성공적으로 성공), Promise.Race () (첫 번째 완료가 반환 됨) 및 Promise.AllSettled () (모든 완료를 기다리고 있음)

캐시 API는 무엇이며 서비스 작업자와 어떻게 사용됩니까? 캐시 API는 무엇이며 서비스 작업자와 어떻게 사용됩니까? Jul 08, 2025 am 02:43 AM

Cacheapi는 브라우저에서 캐시 네트워크 요청이 제공하는 도구로, 종종 서비스 워크와 함께 사용하여 웹 사이트 성능 및 오프라인 경험을 향상시킵니다. 1. 개발자는 스크립트, 스타일 시트, 사진 등과 같은 리소스를 수동으로 저장할 수 있습니다. 2. 요청에 따라 캐시 응답과 일치 할 수 있습니다. 3. 특정 캐시 삭제 또는 전체 캐시를 지우는 것을 지원합니다. 4. 서비스 작업자를 통해 페치 이벤트를 듣는 캐시 우선 순위 또는 네트워크 우선 순위 전략을 구현할 수 있습니다. 5. 종종 오프라인 지원, 속도를 반복적 인 액세스 속도, 예비 리소스 및 배경 업데이트 컨텐츠에 사용하는 데 종종 사용됩니다. 6.이를 사용할 때는 캐시 버전 제어, 스토리지 제한 및 HTTP 캐싱 메커니즘의 차이에주의를 기울여야합니다.

배열을 활용. 자바 스크립트의 데이터 조작을위한 프로토 타입 방법 배열을 활용. 자바 스크립트의 데이터 조작을위한 프로토 타입 방법 Jul 06, 2025 am 02:36 AM

.map (), .filter () 및 .reduce ()와 같은 JavaScript 배열 내장 메소드는 데이터 처리를 단순화 할 수 있습니다. 1) .map ()는 요소를 하나로 하나로 변환하여 새 배열을 생성하는 데 사용됩니다. 2) .filter ()는 조건별로 요소를 필터링하는 데 사용됩니다. 3) .reduce ()는 데이터를 단일 값으로 집계하는 데 사용됩니다. 사용하면 오용을 피해야하며 부작용 또는 성능 문제가 발생합니다.

JS Roundup : JavaScript 이벤트 루프에 대한 깊은 다이빙 JS Roundup : JavaScript 이벤트 루프에 대한 깊은 다이빙 Jul 08, 2025 am 02:24 AM

JavaScript의 이벤트 루프는 통화 스택, 웹 캡 및 작업 대기열을 조정하여 비동기 작업을 관리합니다. 1. 통화 스택은 동기 코드를 실행하고 비동기 작업을 마치면 처리를 위해 WebAPI에 양도됩니다. 2. WebAPI가 백그라운드에서 작업을 완료 한 후 콜백을 해당 대기열 (매크로 작업 또는 마이크로 작업)에 넣습니다. 3. 이벤트 루프는 통화 스택이 비어 있는지 확인합니다. 비어 있으면 콜백이 대기열에서 꺼져서 실행을 위해 콜 스택으로 밀려납니다. 4. 마이크로 작업 (예 : Promise. 5. 이벤트 루프를 이해하면 기본 스레드를 차단하지 않고 코드 실행 순서를 최적화하는 데 도움이됩니다.

See all articles