현재 Apigee Edge 문서가 표시되고 있습니다.
Apigee X 문서로 이동 정보
테마는 사이트의 디자인과 분위기를 정의하는 파일 모음입니다. 개발자 서비스 포털은 처음에 기본 테마로 정의되며 맞춤설정할 수 있습니다. 이렇게 하면 포털의 디자인과 분위기를 원하는 대로 선택할 수 있습니다. 구체적으로는 링크, 배경, 텍스트, 기타 테마 요소의 색상을 변경할 수 있습니다. 개발자 포털의 전면 페이지에 표시되는 환영 메시지를 변경할 수도 있습니다.
개발자 포털 UI를 통해 또는 맞춤 테마 파일에 코드를 작성하여 기본 테마 파일을 재정의하여 테마를 맞춤설정할 수 있습니다.
개발자 포털 버전에 따라 다음과 같은 여러 테마 중에서 선택할 수 있습니다.
| 테마 | 설명 |
|---|---|
|
Apigee 반응형 테마 |
포털의 이후 릴리스를 위한 기본 테마는 부트스트랩 3에 기반합니다. 이 테마는 너비가 768~1400픽셀인 기기를 지원합니다. 이 테마에서 부트스트랩 3의 모든 기능을 사용할 수 있습니다. 참고: Apigee 반응형 테마를 사용하려면 부트스트랩 7.x-3.0 테마를 사용 설정하세요. |
|
Apigee DevConnect 테마 |
Apigee 반응형 테마 이전의 기본 포털 테마입니다. 기존 포털을 새로운 Apigee 반응형 테마로 업그레이드할 수 있지만 먼저 모든 블록, 템플릿, 기타 콘텐츠가 부트스트랩 3과 호환되고 부트스트랩 7.x-3.0 테마가 사용 설정되어 있는지 확인해야 합니다. |
|
Apigee 기본 테마 |
Apigee DevConnect 테마의 상위 테마이며 자체적으로 사용할 수 없습니다. |
기본 테마 설정
포털에서 아직 이전 Apigee DevConnect 테마를 사용하는 경우 다음 형식으로 경고가 표시될 수 있습니다.
"Apigee DevConnect theme" is out of date
다음 절차에 따라 포털의 기본 테마를 설정할 수 있습니다. 테마를 프로덕션에 배포하기 전에 항상 비프로덕션 시스템에서 먼저 새 테마를 테스트해야 합니다.
기본 테마를 설정하려면 다음 안내를 따르세요.
- 관리자 또는 콘텐츠 생성 권한이 있는 사용자로 포털에 로그인합니다.
- Drupal 관리 메뉴에서 Appearance를 선택합니다. 사용 설정된 테마 목록이 표시됩니다.
- 기본값으로 사용하려는 테마에서 기본값 설정을 선택합니다.
Apigee 반응형 테마를 사용하려면 해당 페이지에 부트스트랩 7.x-3.0 테마도 사용 설정해야 합니다. - 구성을 저장합니다.
Apigee 반응형 테마 맞춤설정
이 섹션에서는 다음을 포함하여 Apigee 반응형 테마를 구성하는 방법을 설명합니다.
- 모달 양식 맞춤설정
- 일반 설정 맞춤설정하기
모달 양식 지원을 맞춤설정하려면 다음 단계를 따르세요.
포털은 Drupal Bootstrap Modal Forms 샌드박스 모듈을 사용하여 Drupal 양식을 모달로 표시합니다. 로그인 및 등록 양식은 기본적으로 모달로 작동합니다. 이 기능을 사용 중지하여 양식이 개별 페이지로 표시되도록 할 수 있습니다.
- 관리자 권한이 있는 사용자로 개발자 포털에 로그인합니다.
- Drupal 관리 메뉴에서 Configuration > User Interface > Bootstrap Modal 양식을 선택합니다.
- 양식에 대한 모달 지원을 사용 설정 또는 사용 중지합니다.
- 구성 저장을 선택합니다.
Apigee 반응형 테마의 일반 설정을 맞춤설정하려면 다음 안내를 따르세요.
- 관리자 또는 콘텐츠 생성 권한이 있는 사용자로 포털에 로그인합니다.
- Drupal 관리 메뉴에서 Appearance를 선택합니다. 사용 설정된 테마 목록이 표시됩니다.
- 페이지의 Apigee 반응형 (기본 테마) 영역에서 설정을 선택합니다 (페이지 상단의 설정 버튼은 선택하지 마세요).
- Apigee 반응형 테마의 설정 페이지가 표시됩니다.
- 다음 표에서는 테마를 구성하는 데 사용할 수 있는 영역을 설명합니다. 설정을 변경할 경우 '구성 저장'을 선택합니다.
영역 섹션 설명 부트스트랩 설정
구성요소
탐색경로 표시, 기본 메뉴의 위치 (설정에서 Navbar라고 함), 지역 우물 표시를 제어합니다.
- 탐색경로: 탐색경로를 숨기거나 표시하고 탐색경로 내의 홈 링크를 켜거나 끕니다.
- Navbar: Navbar (기본 메뉴)의 위치를 고정/정적/일반 위치로 변경하여 레이아웃을 더 동적으로 만듭니다.
- 지역 우물: 사이트의 모든 지역에 우물 클래스를 추가하여 해당 지역에 어두운 배경을 추가합니다.
JavaScript
앵커, 팝오버, 도움말의 표시를 설정합니다.
- 앵커: 앵커 위치를 수정하고 부드러운 스크롤을 지원합니다.
- 팝오버: 팝오버는 모든 요소에 작은 콘텐츠 오버레이를 추가합니다. 팝오버를 사용 설정/사용 중지하고 팝오버 사용 방식을 구성합니다.
- 도움말: 도움말 사용 방식을 구성합니다. 각 도움말이 각 양식 요소의 오른쪽, 왼쪽, 상단, 하단에 표시되도록 강제하고 다른 표시 옵션을 설정할 수 있습니다.
고급
포털에서 BootstrapCDN을 사용하여 부트스트랩 테마 파일을 업데이트하는 방법을 제어합니다. BootstrapCDN에서 포털의 의존성을 사용 중지할 수 있지만, 그렇게 하면 자체 부트스트랩 프레임워크 구현을 제공해야 합니다.
DevConnect 설정
환영 메시지, 기본 색상, 기본 메뉴에 표시되는 로고 크기를 설정합니다.
전체 설정 재정의
디스플레이 전환
포털의 여러 영역을 표시하거나 사용 중지합니다.
로고 이미지 설정
기본 메뉴에 표시되는 이미지를 지정합니다.
바로가기 아이콘 설정
브라우저의 주소 표시줄에 표시되거나 포털의 북마크에 표시되는 이미지를 지정합니다.
Apigee DevConnect 테마 맞춤설정
Apigee DevConnect 테마는 포털의 이전 출시 버전에 대한 기본 포털 테마이며 새로운 Apigee 반응형 테마로 업그레이드할 수 있습니다. 그러나 업그레이드를 실행하기 전에 먼저 모든 블록, 템플릿 및 기타 콘텐츠가 부트스트랩 3과 호환되는지 확인해야 합니다.
Apigee DevConnect 테마의 일반 설정을 맞춤설정하려면 다음 안내를 따르세요.
- 관리자 또는 콘텐츠 생성 권한이 있는 사용자로 포털에 로그인합니다.
- Drupal 관리 메뉴에서 모양 > Apigee DevConnect 테마 > 설정을 선택합니다. 이렇게 하면 테마의 초기 설정이 표시됩니다. 색상 설정은 16진수 값으로 지정됩니다.
- 원하는 대로 설정을 변경합니다.
예를 들어 환영 메시지를 추가 또는 변경하거나 헤더 배경 색상을 변경할 수 있습니다. 헤더 배경 색상은 처음에는 주황색에 가까운 색상으로 설정됩니다 (#FF4300). 파란색 (#0000FF)과 같은 다른 색상으로 변경할 수 있습니다. - 설정 변경이 완료되면 저장을 클릭합니다.
하위 테마를 만들어 테마 맞춤설정
포털과 함께 제공되는 기본 테마를 정의하는 모든 파일과 애셋은 포털 설치 디렉터리의 profiles/apigee/themes 디렉터리에 있습니다. 이 디렉터리는 포털을 기본 위치에 설치한 경우 /var/www/html/profiles/apigee/themes에 있습니다.
테마를 수정하여 사이트의 디자인과 분위기를 수정하려면 profiles/apigee/themes 아래에서 테마 파일을 직접 수정하지 마세요. 변경할 경우 다음번에 포털을 업그레이드할 때 변경사항을 덮어쓰게 됩니다.
대신 기본 테마 파일을 /sites/all/themes 디렉터리에 복사하여 수정하려는 테마의 하위 테마를 만듭니다. 하위 테마에 관한 안내는 Drupal 문서(https://www.drupal.org/node/225125)를 참고하세요.
- profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit 폴더를 profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit 폴더에 복사합니다.
- apigee_responsive_starterkit 폴더의 이름을 YOUR_ THEME_NAME으로 바꿨습니다.
- apigee_responsive_starterkit.info 파일의 이름을 YOUR_ THEME_NAME.info로 변경합니다.
- css/apigee_responsive_starterkit.css의 이름을 css/YOUR_ THEME_NAME.css로 바꾸세요.
- js/apigee_responsive_starterkit.js의 이름을 YOUR_ THEME_NAME.js로 바꾸었습니다.
- YOUR_ THEME_NAME.info 파일을 수정하고 다음 줄을 바꿉니다.
stylesheets[all][] = css/apigee_ROAS_starterkit.css
scripts[] = js/apigee_반응형_starterkit.js
다음으로 변경:
style_sheets[all][] = css/YOUR_= THEME_NAME.css - YOUR_THME_NAME.info 파일의 테마 이름을 Apigee 반응형 시작 키트에서 내 테마 이름으로 변경합니다.
- 테마에 새 스크린샷을 추가하려면 기존 screenshot.png 파일을 교체합니다.
- 테마에 새 로고를 추가하려면 기존 logo.png 파일을 바꿉니다.
- 테마에 새 파비콘을 추가하려면 기존 favicon.ico 파일을 대체합니다.