Bootstrap Barrio가 있는 Drupal 8/9의 Bootstrap 4

우리는 Bootstrap Barrio와 함께 Drupal 8/9에서 Bootstrap 4를 사용할 것입니다. Drupal 8/9용 Bootstrap Barrio 테마는 Bootstrap 4(또는 원하는 경우 Bootstrap 5)를 Drupal 사이트와 통합합니다.

부트스트랩은 웹사이트 구축을 위한 매우 인기 있는 프레임워크입니다. 이것은 디자이너와 개발자에게 의사 소통을 위한 공통 언어를 제공하여 개발 프로세스를 훨씬 쉽게 만듭니다.

Barrio의 하위 테마를 만드는 것은 간단한 과정입니다. 이 튜토리얼에서는 완전한 그래픽 사용자 인터페이스를 통해 관리되는 테마의 기본 구성 옵션을 탐색합니다.

방법을 배우려면 계속 읽으십시오!

1단계.- 테마 설치

시작하기 전에 사이트에 하나 이상의 기사가 있는지 확인하여 테마 설정을 변경한 후 비교할 수 있습니다. 두 번째 영역 사이드바 내부에 블록을 배치합니다(구조 > 블록 레이아웃 > 블록 배치).

• 운영 체제의 터미널 응용 프로그램을 엽니 다.
• Drupal 설치 루트에 커서를 놓습니다 .
• 유형 : 작곡가는 drupal/bootstrap_barrio 필요

이것은 테마의 최신 안정 버전을 /web/themes/contrib/bootstrap_barrio 에 다운로드합니다.

단계 # 2.- 하위 테마 만들기

• bootstrap_barrio 테마 디렉토리에 커서를 놓습니다 .
• 유형 :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

이렇게 하면 scripts 폴더 안에 있는 create_subme라는 스크립트가 실행 가능하게 만들어지고 실행될 것입니다.

스크립트는 시스템 이름과 사용자 정의 하위 테마를 설명하는 이름을 묻습니다.

귀하에게 가장 적합한 값을 입력하십시오. 시스템 이름은 소문자여야 하며 공백을 포함할 수 없습니다.

이 단계는 선택 사항입니다.

• 코드 편집기에서 하위 테마의 디렉토리(/web/themes/custom/mytheme)를 엽니 다.
• 'Bootstrap Barrio'의 모든 인스턴스를 '테마 이름'으로 바꿉니다 .
• 모든 파일 저장

여기서는 설명 텍스트만 변경하므로 그대로 두어도 전혀 문제가 없을 것입니다.

3단계.- 부트스트랩 Barrio 설정

• Drupal 사이트의 백엔드에서 모양 을 클릭 합니다.
• 사용자 정의 테마까지 아래로 스크롤
• 설치 를 클릭 하고 기본값으로 설정

테마가 설치되면,

• 테마 설정 링크를 클릭 합니다.

화면 왼쪽에 다음 옵션이 있는 세로 탭 그룹이 표시됩니다.

1. 레이아웃(활성 탭)
2. 구성품
3. 부착
4. 스크롤 스파이
5. 글꼴 및 아이콘
6. 그림 물감

형세

기본적으로 '레이아웃' 탭이 활성화되어 있습니다. 첫 번째 옵션인 '컨테이너'는 사이트의 요소가 고정된 너비를 가질 것인지 아니면 반대로 전체 화면 크기에 걸쳐 표시될 것인지 지정합니다. 지금까지 이 옵션을 그대로 두십시오.

'지역' 섹션 내에서 사이트의 지역에 맞춤 CSS 클래스를 할당할 수 있습니다.

• 특정 지역에 나만의 맞춤 클래스 추가

• '지역' 섹션 닫기
• '사이드바 위치' 열기
• '사이드바 위치' 값을 왼쪽으로 변경
• '사이드바 첫 번째 레이아웃' 및 '사이드바 첫 번째 레이아웃' 열기
• 값을 각각 3열과 2열로 변경 합니다.

구성품

• '구성요소' 세로 탭을 클릭 합니다.
• Button 요소를 개요 형식으로 변경
• 모든 콘텐츠 이미지에 img-fluid 스타일 적용 체크

이렇게 하면 콘텐츠 편집기의 이미지 버튼을 통해 삽입하는 이미지가 기본적으로 반응형이 됩니다. 이미지는 화면 크기에 맞게 축소됩니다.

'Navbar 구조' 섹션은 navbar 컨테이너의 크기를 다룹니다. 두 개의 탐색 모음(navbar-top 및 navbar)을 구별해야 합니다. Navbar는 사이트의 기본 탐색 메뉴입니다.

• Navbar 위치를 고정 하단으로 변경 하고 Navbar 링크 색상을 어둡게 변경
• 작은 화면에 슬라이딩 메인 메뉴를 표시하려면 '내비게이터 동작' 섹션에서 슬라이딩 내비바를 확인하세요 .

'구성 요소' 구성 옵션의 마지막 3개 섹션은 Drupal의 내부 메시지 시스템이 전달하는 메시지의 위치, 지역 작업을 위한 탭(예: 콘텐츠 편집 탭), 양식 요소의 모양을 나타냅니다. 이 옵션은 그대로 둡니다.

부착

affix를 사용하면 요소를 수정할 수 있습니다. 즉, CSS 위치 속성 값을 fixed로 설정할 수 있습니다.

스크롤스파이

Scrollspy는 커서 위치에 따라 탐색 메뉴의 링크를 자동으로 업데이트하는 데 사용됩니다. 즉, 사이트에서 위 또는 아래로 스크롤하는 경우입니다. 이 항목은 향후 자습서에서 다룹니다.

글꼴 및 아이콘

여기에서 사이트 텍스트에 대한 다양한 Google 글꼴 글꼴 조합 중에서 선택할 수 있습니다. 또한 게시물에 사용할 미리 정의된 아이콘 세트 중에서 선택할 수 있습니다.

• 원하는 글꼴 조합과 아이콘 세트를 선택하세요

그림 물감

여기에서 Drupal의 내부 메시지 색상을 사용자 지정하는 옵션이 있습니다. 보기 모듈로 생성된 것과 같이 사이트의 테이블을 사용자 정의하는 옵션이 있습니다.

계속 아래로 스크롤하면 하위 테마의 '색 구성표'를 찾을 수 있습니다. 기본 테마 영역의 텍스트 및 배경색을 사용자 지정할 수 있습니다.

잠금 아이콘을 사용하여 각 요소의 색상을 원하는 대로 사용자 정의하고 차단할 수 있습니다.

페이지 요소 표시, 로고 이미지 및 파비콘

모든 Drupal 테마의 기본 옵션입니다.

라이브러리 로드

바로 사용할 수 있는 여러 온라인 Bootswatch 라이브러리 중에서 선택하여 클릭 한 번으로 테마의 모양과 느낌을 향상할 수 있습니다. 이러한 옵션은 확인할 가치가 있습니다.

Bootstrap(Bootstrap CSS 및 JS)을 로컬로 로드하거나 CDN을 통해 로드하려는 경우 여기에서 선택할 수 있습니다. 여기에서 이 구성을 변경하면 안 됩니다. .info.yml 파일에서 코드를 변경하는 것이 훨씬 좋습니다.

• 구성 저장을 클릭 합니다.

귀하의 사이트를 살펴보십시오. 이 튜토리얼은 UI 디자인을 가르치기 위한 것이 아니라 Barrio 테마에서 사용할 수 있는 가능성에 대해 설명합니다.

그러나 이제 디자인에서 시작하여 테마를 적용할 수 있습니다.

이 튜토리얼이 마음에 드셨기를 바랍니다. 읽어 주셔서 감사합니다!