유틸리티 클래스.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

모든 요소에는 이름 있는 클래스 목록이 있는 HTML classes 필드가 있습니다. Bootstrap 5 유틸리티와 드롭 섀도우가 기본 제공됩니다. 테마는 .info.yml(을)를 통해 자체 그룹을 추가할 수 있으며, 모듈은 alter 훅을 통해 추가할 수 있습니다. 이 페이지에서는 목록의 내용과 클래스 등록 방법을 설명합니다. 클래스 이름을 직접 입력하는 대신 편집자가 이름으로 브랜드 모양을 고릅니다.

클래스 적용

  1. 요소의 설정을 열고 General 패널 아래쪽에서 HTML classes(을)를 찾으세요.
  2. 상자를 클릭하고 목록에서 클래스를 고르세요. 상자에 입력하면 목록이 필터링됩니다.
  3. 목록에 없는 클래스를 입력하려면 Edit as text(을)를 클릭하고 입력하세요.
  4. 대화상자에서 Save(을)를 클릭한 뒤 빌더 툴바에서 Save(을)를 클릭하세요.

클래스는 저장된 HTML의 요소 class 속성에 들어갑니다. 일반적인 용도는 HTML ID and classes 문서에서 편집자에게 안내합니다.

목록의 구성

에디터는 시작할 때 목록을 만듭니다. 세 출처를 다음 순서로 합칩니다:

  1. 기본 제공 목록. Drop shadows 그룹, 짧은 Bootstrap classes 그룹, 작업별 Bootstrap 5 유틸리티가 들어 있습니다. Display & Visibility, Responsive Visibility, Margins, Padding, Text Colors 등.
  2. 다음 키가 있는 설치된 모든 테마의 그룹: .info.yml에 dxpr_builder_classes 키가 있는 경우. 그룹에는 테마 이름이 표시됩니다.
  3. 모듈의 변경. 자세한 내용은 Register classes from a module 문서를 참고하세요.

Text 요소의 General 패널에 열린 HTML classes 목록. DXPR Theme 그룹으로 스크롤되어 있으며 Inline Form, Background color: DXPR Theme accent1 같은 항목

따라서 모든 사이트에는 공간용 클래스(mt-3, px-4 등), 표시용 클래스(d-none 등), 텍스트용 클래스(text-center, fw-bold 등)가 있습니다. 별도로 설정할 내용이 없습니다.

테마에 클래스 등록

테마의 .info.yml에 dxpr_builder_classes 매핑을 추가하세요. 각 키는 클래스 이름이며, 공백으로 구분하여 여러 개도 됩니다. 각 값은 편집자에게 표시되는 레이블입니다. DXPR Theme은 다음 방식으로 클래스를 등록합니다:

dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

  1. 다음에 매핑을 추가하세요: themes/custom/mytheme/mytheme.info.yml.

    dxpr_builder_classes:
  brand-card: 'Brand card'
  brand-card shadow-lg: 'Brand card with shadow'

  2. 테마가 모든 페이지에 불러오는 라이브러리에 클래스용 CSS를 작성하세요. 자세한 내용은 Custom CSS 문서를 참고하세요.

  3. 다음으로 캐시를 비우세요: drush cr. Drupal이 정보 파일을 다시 읽습니다.

  4. 요소의 설정을 열고 HTML classes에 테마 이름의 그룹과 두 항목이 표시되는지 확인하세요.

키가 있는 설치된 모든 테마가 그룹을 추가합니다. 기본 테마만이 아닙니다. 그룹에는 항상 테마 이름이 표시되며, 정보 파일로 바꿀 수 없습니다.

모듈에서 클래스 등록

커스텀 모듈은 alter 훅으로 클래스를 추가하거나 테마가 등록한 클래스를 제거할 수 있습니다. 에디터가 브라우저에서 추가하므로 기본 제공 Bootstrap 항목은 제거할 수 없습니다. 코드는 Hooks API reference 문서에 있습니다.

Bootstrap 버전

기본 제공 목록은 Bootstrap 5입니다. 테마에 Bootstrap 5가 불러와지지 않으면 Sideload Bootstrap files(을)를 Bootstrap 5(으)로 설정하세요. 위치: Bootstrap 아래(DXPR Studio > DXPR Builder > General Settings). 클래스에 뒤의 CSS가 생깁니다. 불러오는 항목은 Performance 문서를 참고하세요.

클래스가 표시되지 않는 경우

  • HTML classes에 테마 그룹이 없습니다. Drupal이 테마 정보 파일의 이전 복사본을 사용 중입니다. 다음을 클릭하세요: Clear all caches (Configuration > Development > Performance (/admin/config/development/performance)에서). 또는 drush cr(을)를 실행하세요.
  • 키가 있는 테마에 그룹이 추가되지 않습니다. 설치된 테마만 해당됩니다. Appearance (/admin/appearance)에서 테마를 설치하세요. 기본 테마일 필요는 없습니다.
  • 클래스를 골라도 요소가 똑같아 보입니다. 페이지에 해당 클래스의 CSS가 불러와지지 않습니다. 테마가 불러오는 라이브러리에 규칙을 추가하세요. 자세한 내용은 Custom CSS 문서를 참고하세요. Bootstrap 클래스는 Bootstrap version 문서를 참고하세요.

다음 단계

  • Custom CSS: 클래스 뒤의 규칙을 작성합니다.
  • Text editor: Styles 목록에서 문단과 단어용 클래스를 제공합니다.
  • Hooks API reference: DXPR Builder가 제공하는 다른 훅입니다.