Bootstrap 또는 웹 사이트 디자인 템플리트에서 사이트 템플리트 생성
개방형 구조의 Oracle Content Management에서는 Foundation 또는 Bootstrap과 같은 다른 코딩 프레임워크에서 만든 작업을 사용할 수 있습니다. 약간의 변경으로 Bootstrap 템플리트를 테마로 전환하여 Oracle Content Management 템플리트의 일부로 만들 수 있습니다.
기본 프로세스
아래는 단계의 개요이며 다음 절에서 자세히 설명합니다.
필요 조건
-
로컬 컴퓨터와 폴더 및 파일을 동기화하기 위한 Oracle Content Management 데스크톱 앱을 설정하고 실행 중이어야 합니다.
-
Bootstrap 템플리트 테마 폴더, 파일 및 콘텐츠를 로컬 컴퓨터로 다운로드하고 사용할 준비가 되어야 합니다.
사이트 생성
Oracle Content Management 스타터 템플리트에서 사이트를 생성합니다.
-
측면 탐색에서 사이트를 누릅니다.
기존 사이트 목록이 표시됩니다.
-
생성을 누릅니다.
-
[사이트 생성] 대화상자에서 사이트의 기초로 사용할 JET 스타터 템플리트 또는 스타터 템플리트를 선택합니다.
-
대화상자에서 사이트의 이름을 입력합니다. 이 이름은 사이트 URL에 사용됩니다. 문자, 숫자, 밑줄(_) 및 하이픈(-)을 사용할 수 있습니다. 공백을 입력하면 자동으로 하이픈으로 바뀝니다.
템플리트, 테마, 구성요소, 사이트 또는 사이트 페이지에 다음 이름을 사용하지 마십시오: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. 사이트 페이지에는 다음 이름을 사용할 수 있지만 템플리트, 테마, 구성요소 또는 사이트에는 사용하지 마십시오: documents, sites.
주:
Oracle Content Management 사이트 URL의 경로는 대소문자를 구분합니다. 질의 또는 단편 문자열의 대소문자는 개발자가 사용자정의 코드로 관리합니다.
https:[//host[:port]][/]path[?query][#fragment] \____________________/\________________________/ Location Data
-
선택적으로 사이트에 대한 설명을 입력합니다.
-
준비되면 생성을 누릅니다.
진행률 표시줄에 새 사이트 이름 및 생성 상태가 표시됩니다. 사이트가 생성되면 사이트 목록에 이름이 나타납니다. 초기 상태는 오프라인입니다.
새로 생성된 사이트를 목록에서 빨리 찾으려면 최종 업데이트 순으로 목록을 정렬합니다. 방금 생성한 사이트가 목록의 맨 위에 나타납니다.
테마 폴더 동기화
스타터 템플리트에서 사이트를 생성할 때 스타터 템플리트 테마의 사본이 생성되고 사이트 이름에 테마 이름이 붙은 형태로 이름이 지정됩니다. 예를 들어, My_New_Site의 테마는 My_New_SiteTheme입니다.
데스크톱 앱을 사용하여 사이트의 테마 폴더 및 파일을 로컬 컴퓨터와 동기화합니다. Oracle Content Management로 문서 공동 작업의 동기화 시작하기를 참조하십시오.
이제 로컬 데스크톱에 템플리트 테마 폴더 계층과 파일이 표시되어야 합니다. 예제는 다음과 같습니다.
theme_name
assets
css
main.css
js
topnav.js
designs
default
design.css
design.json
facebook.png
googleplus.png
linkedin.png
twitter.png
youtube.pgn
layouts
index.html
responsepages
404.html
_folder.json
_folder_icon.png
components.json
viewport.json
기본 테마 설정
-
다음 Bootstrap 파일을 로컬 데스크톱의 동기화된 테마 폴더로 복사하여 기존 파일을 덮어씁니다.
-
html파일이theme_name/layouts폴더로 이동 -
css파일이theme_name/assets/css폴더로 이동 -
js파일이theme_name/assets/js폴더로 이동 -
image파일이theme_name/assets/images폴더로 이동하며 배경, 바닥글, 사람 등의 이미지와 함께 하위 폴더로 그룹화될 수 있습니다.
-
-
layout폴더의html파일을 수정하여 상대 경로를 업데이트하고 필요한 요소를 추가합니다. 일반적인 Bootstrap 테마의 경우/assets폴더에 대한 많은 상대 경로가 있으므로 테마 폴더를 가리키도록 수정해야 합니다.다음을 사용하도록
css,js,images폴더의 경로를 수정합니다._scs_theme_root_/assets/css/ _scs_theme_root_/assets/js/ _scs_theme_root_/assets/images/
주:
이 단계가 완료되면_scs_theme_root부분은 테마가 사용되는 환경에 자동으로 조정됩니다. -
각 Oracle Content Management 레이아웃에 대한 세 가지 요구사항이 있습니다.
-
html파일의<head>태그에 다음 태그를 포함합니다.-
<!--$SCS_RENDER_INFO--> -
<!--$SCS_SITE_HEADER--> -
<!--$SCS_PAGE_HEADER-->
-
-
레이아웃 파일의 끝에
<body>태그 바로 안에 renderer 스크립트를 포함합니다. 이 경로는 모두 사이트 작성기에서 런타임 환경에 자동으로 조정됩니다.<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
-
renderer.js파일을 포함시킨 후 다음 태그를 포함합니다.-
<!--$SCS_PAGE_FOOTER--> -
<!--$SCS_SITE_FOOTER-->
-
-
수정된 테마 파일이 Oracle Content Management 사이트와 동기화되었는지 확인합니다.
사이트 페이지 업데이트
사이트 작성기에서 사이트를 열면 처음에 기본 사이트에 있는 페이지가 보입니다. 원치 않는 페이지를 삭제하고 유지할 페이지의 레이아웃을 새 레이아웃 중 하나로 전환할 수 있습니다.
-
측면 탐색에서 사이트를 누릅니다.
기존 사이트 목록이 표시됩니다.
-
사이트를 선택하고 마우스 오른쪽 단추 누르기 메뉴에서 열기를 선택하거나 작업 모음에서
을 누릅니다. -
업데이트에 대한 이름 및 선택적 설명을 입력한 다음 생성을 누릅니다.
업데이트 이름에는 문자, 숫자, 밑줄(_), 하이픈(-)을 사용할 수 있습니다. 공백을 입력하면 자동으로 하이픈으로 바뀝니다.
사이트에 대한 업데이트가 이미 있을 경우 목록에서 업데이트를 선택하고
을 누릅니다. -
사이트 작성기가 미리보기 모드로 열립니다. 내용을 변경하거나 사이드바의 탐색 옵션을 사용하려면 편집 스위치
가 편집으로 설정되어 있는지 확인합니다. -
특정 페이지를 편집하려면 사이드바의 사이트 트리를 사용하거나 사이트의 고유 탐색을 사용하여 페이지를 선택합니다.
-
원치 않는 페이지를 제거하려면 페이지를 선택하고
을 누릅니다. -
새 페이지를 추가하려면 페이지 추가를 누릅니다. 사이트 트리에서 끌어 놓기로 페이지를 재배치할 수 있습니다.
-
페이지와 연관된 레이아웃을 변경하려면 사이트 트리에서 페이지를 선택하고
을 눌러 페이지 설정을 표시합니다.페이지 레이아웃 필드로 이동하고 메뉴에서 다른 레이아웃을 선택합니다. 페이지 레이아웃의 개수와 유형은 사이트와 연관된 테마에 따라 달라집니다.
-
저장을 눌러 현재 업데이트에 변경사항을 저장합니다. 현재 업데이트에서 작업을 계속하거나, 필요한 경우 새 업데이트를 생성할 수 있습니다.
탐색 업데이트
사이트 미리보기로 탐색을 볼 때 레이아웃에 있는 Bootstrap 테마의 하드 코딩된 탐색 때문에 해당 탐색이 현재 계층과 일치하지 않습니다.
탐색을 업데이트하여 Bootstrap 테마의 하드 코딩된 코드를 사이트 계층에서 동적으로 생성된 코드로 바꿉니다.
테마 파일의 로컬 동기화 사본을 편집합니다.
-
레이아웃에서 하드 코딩된 탐색 코드를 제거합니다. 다음은 일반적인 Bootstrap 테마에서 제거해야 하는 하드 코딩된 탐색의 예입니다. 다음은 로고가 있는 일반적인 머리글 섹션으로, 페이지가 매우 좁을 때 표시되는 '햄버거' 메뉴의 '탐색 토글' 부분(반응형 부분)과 다른 페이지에 대한 하드 코딩된 페이지 탐색으로 구성됩니다.
<header id="header" class="header navbar-fixed-top"> <div class="container"> <h1 class="logo"> <a href="index.html"><span class="text">Velocity</span></a> </h1><!--//logo--> <nav class="main-nav navbar-right" role="navigation"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button><!--//nav-toggle--> </div><!--//navbar-header--> <div id="navbar-collapse" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active nav-item"><a href="index.html">Home</a></li> <li class="nav-item"><a href="features.html">Features</a></li> <li class="nav-item"><a href="pricing.html">Pricing</a></li> <li class="nav-item dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Pages <i class="fa fa-angle-down"></i></a> <ul class="dropdown-menu"> <li><a href="download.html">Download Apps</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="blog-single.html">Blog Single</a></li> <li><a href="blog-category.html">Blog Category</a></li> <li><a href="blog-archive.html">Blog Archive</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </li><!--//dropdown--> <li class="nav-item"><a href="login.html">Log in</a></li> <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="signup.html">Sign Up Free</a></li> </ul><!--//nav--> </div><!--//navabr-collapse--> </nav><!--//main-nav--> </div><!--//container--> </header><!--//header--> -
사이트 구조 정보를 순회하고 탐색 코드를 생성하는 JavaScript 코드를 작성하고, 다음과 같이 레이아웃에 JavaScript 코드를 포함합니다.
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
-
특정 CSS에서 예상한 마크업과 일치하도록
topnav.js파일의 정확한 출력을 수정합니다.
사이트 레이아웃 업데이트
이 시점에서 사이트는 작동하지만 레이아웃에 편집 가능한 영역(슬롯)이 없습니다.
-
레이아웃에서 DIV 요소를 찾거나 추가하여 슬롯으로 지정합니다.
슬롯은 클래스 속성에
"scs-slot"값을 가진 레이아웃의 DIV 요소입니다. 각 슬롯에는 고유id속성이 있어야 합니다. 예를 들어, 다음과 같습니다.<div id="slot-content1" class="scs-slot scs-responsive"></div>
브라우저 뷰포트의 크기에 맞게 자동으로 슬롯을 조정하려면 클래스 속성
"scs-responsive"를 포함합니다. -
필요에 따라 이 단계를 반복하여 해당 레이아웃이나 다른 레이아웃에 추가 슬롯을 생성합니다.
사이트 게시
모든 변경사항을 완료하고 사이트에 저장한 후 사이트를 게시해야 합니다.
사이트를 게시하면 현재 업데이트의 모든 변경사항을 가져와서 기본 사이트에 병합함으로써 업데이트된 내용으로 새로운 기본 사이트를 만들 수 있습니다.
새 템플리트 생성
이제 기능적 사이트와 관련 테마가 있으므로 템플리트로 만들어서 다른 사람이 사이트를 생성할 수 있도록 공유할 수 있습니다.
-
Oracle Content Management 측면 탐색에서 개발자를 누릅니다.
-
모든 템플리트 보기를 누릅니다.
-
생성을 누르고 기존 사이트에서를 선택합니다.
-
스타터 템플리트와 Bootstrap 템플리트를 사용하여 생성한 새 사이트를 선택합니다.
-
새 템플리트의 이름을 입력하고 생성을 누릅니다.
-
다른 Oracle Content Management 인스턴스에서 사용하도록 템플리트를 패키지화하려면 템플리트를 선택하고 익스포트 메뉴 옵션을 선택하여 다운로드할 수 있는
.zip파일을 생성합니다.