레이아웃 정보

레이아웃은 사이트 페이지에 콘텐츠를 배열하는 방법을 정의합니다. 각 레이아웃은 다른 개수의 명명된 슬롯을 포함할 수 있습니다. 슬롯은 페이지 너비에 걸친 영역으로, 하나 이상의 콘텐츠 유형을 포함할 수 있습니다.

모든 테마는 여러 페이지 레이아웃을 갖습니다. 테마 정보를 참조하십시오.

사이트에 페이지를 추가할 때 해당 페이지에 사용할 레이아웃을 선택합니다. 각 레이아웃에는 콘텐츠를 끌어 놓을 수 있는 슬롯이라는 페이지 영역이 있습니다. 이 슬롯에 어떤 콘텐츠를 담을지는 완전히 당신에게 달려 있습니다. 제목, 텍스트, 구분선부터 멀티미디어, 갤러리, 소셜 미디어에 이르기까지 어떤 것도 가능합니다.

레이아웃에는 적합한 HTML 생성자뿐만 아니라 Oracle Content Management 렌더러가 이해하는 특수 마크업이 포함됩니다. 표준 준수 모드로 페이지를 렌더링하도록 브라우저를 구성하려면 레이아웃이 DOCTYPE 문으로 시작해야 합니다. 예: <!DOCTYPE html> 특정 구성요소가 최상의 결과를 얻으려면 이 명령문이 필요합니다.

이 샘플 코드는 최소 레이아웃을 보여줍니다.

1  <!DOCTYPE html>
3  <head>
4          <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
6          <script src="/_themes/[!--$SCS_THEME_NAME--]/assets/js/topnav.js"></script>
7          <link rel="stylesheet" type="text/css"
8                 href="/_themes/[!--$SCS_THEME_NAME--]/assets/css/main.css">
9          <link rel="stylesheet" type="text/css"
10                href="/_themes/[!--$SCS_THEME_NAME--]/designs/[!--$SCS_DESIGN_NAME--]/design.css">
11
12         <!--$SCS_RENDER_INFO-->
13         <!--$SCS_SITE_HEADER-->
13         <!--$SCS_PAGE_HEADER-->
14  </head>
15  <body>
16         <div id="topNavigation"></div>
17         <div id="mainContentSlot" class="scs-slot scs-responsive"></div>
18
19         <script data-main="/_sitescloud/renderer/renderer.js"
20                src="/_sitescloud/renderer/require.js"></script>
21         <!--$SCS_SITE_FOOTER-->
22  </body>
23  </html>

브라우저에서 페이지를 렌더링할 때 다양한 토큰이 확장됩니다.

[!--$SCS_THEME_NAME--]

현재 사이트에 선택된 테마의 이름으로 확장됩니다. 이 토큰을 사용하는 URL은 현재 테마를 참조하므로 이 토큰을 사용하면 테마를 복사할 수 있습니다.
[!--$SCS_DESIGN_NAME--]

현재 사이트에 선택된 디자인의 이름으로 확장됩니다. 그러면 테마 내의 여러 디자인에서 레이아웃이 사용될 수 있습니다.
[!--$SCS_RENDER_INFO--]

해당 페이지의 페이지 계층 및 구성요소 렌더링 정보를 보유한 스크립트 태그로 확장됩니다. 레이아웃의 <head> 섹션에 놓여야 합니다.
[!--$SCS_SITE_HEADER--]

검색 엔진 최적화(SEO) 속성의 머리글 필드에 지정된 사이트 머리글 값으로 확장됩니다. 모든 페이지에 놓일 사이트 수준 마크업을 여기에 입력할 수 있습니다. 검색 엔진 속성 설정을 참조하십시오.
[!--$SCS_PAGE_HEADER--]

사이트 작성기의 [페이지 설정] 속성의 [페이지 머리글] 필드에 있는 페이지 머리글 값으로 확장됩니다. 이 페이지에 놓일 페이지 특정 마크업을 여기에 입력할 수 있습니다.
[!--$SCS_SITE_FOOTER--]

SEO(검색 엔진 최적화) 속성의 바닥글 필드에 있는 사이트 바닥글 값으로 확장됩니다. 모든 페이지에 놓일 사이트 수준 마크업을 여기에 입력할 수 있습니다. 검색 엔진 속성 설정을 참조하십시오.

주:

토큰은 [!--$ 및 --] 대신 구분자로  접미어를 사용할 수도 있습니다.

사이트가 온라인일 때 링크의 다음 토큰은 사용 중인 컨텍스트를 인지하는 실제 값으로 바뀝니다. 그러면 사이트를 편집할 때와 게시된 사이트가 온라인일 때 링크가 작동할 수 있습니다.

/_sitescloud/가 /_sitesclouddelivery/로 바뀜
/_themes/가 /_themesdelivery/로 바뀜

슬롯은 클래스 속성에 "scs-slot" 값을 가진 레이아웃의 DIV 요소입니다. 슬롯은 사용자가 사이트 콘텐츠를 채울 구성요소를 추가할 수 있는 곳입니다. "scs-slot" 클래스 속성을 지정하여 여러 DIV 요소를 슬롯으로 지정할 수 있습니다. 각 슬롯에는 고유 id 속성이 있어야 합니다.

주:

슬롯은 중첩될 수 없지만 CSS를 사용하여 슬롯을 겹치도록 제안할 수 있습니다. 이를 위해 구성요소 그룹 또는 섹션 레이아웃을 사용하십시오. 섹션 레이아웃 생성을 참조하십시오.

추가로 "scs-responsive" 클래스 속성값을 가진 슬롯은 브라우저 뷰포트의 해상도가 변경될 때 콘텐츠를 새로고침합니다. 그러면 대형 데스크톱 디스플레이 또는 소형 모바일 장치에 반응하여 슬롯을 렌더링할 수 있습니다.

마지막 <script> 태그(예제 19행)는 Oracle Content Management 렌더링 코드를 로드합니다. 이 코드는 페이지에 구성요소를 그리는 역할을 하며 사용자정의 코드로 Render API에 액세스할 수도 있습니다. 이 <script> 태그가 없으면 레이아웃에 기반한 페이지를 사이트 작성기에서 변경할 수 없습니다.