페이지 계층

Adobe Commerce 기능 {width="20"} Adobe Commerce의 전용 기능(자세히 알아보기)

저장소 페이지 계층 구조 시스템을 사용하면 콘텐츠 페이지를 구성하고 페이지 매김, 탐색 및 메뉴를 추가할 수 있습니다. 샘플 데이터의 개인정보 처리방침 페이지는 왼쪽에 메뉴가 있는 페이지의 예입니다. 많은 양의 콘텐츠를 정기적으로 게시하는 경우 페이지 계층 구조를 사용하여 사람들이 관심 있는 문서를 쉽게 찾을 수 있도록 콘텐츠를 구성할 수 있습니다.

페이지 계층 시스템은 노드를 사용하여 관련 콘텐츠를 식별하고 콘텐츠 페이지를 상위/하위 관계로 구성합니다. 상위 노드는 하위 노드 및 페이지를 포함할 수 있는 폴더와 같습니다. 계층 구조에서 각 노드 및 페이지의 상대 위치는 tree 구조로 표시됩니다. 노드에는 다른 노드 및 콘텐츠 페이지가 포함될 수 있으며 단일 콘텐츠 페이지가 상위/하위 또는 인접 관계의 여러 노드 및 다른 콘텐츠 페이지와 연결될 수 있습니다.

왼쪽 탐색이 있는 페이지

페이지 계층 구성

구성 설정은 페이지 계층 시스템 및 메타데이터를 활성화하고 기본 메뉴 레이아웃을 결정합니다.

CMS 페이지 계층 구조

  1. 관리자 사이드바에서 Stores > Settings>Configuration(으)로 이동합니다.

  2. General ​아래의 왼쪽 패널에서​ Content Management ​을(를) 선택합니다.

  3. 확장 선택기 CMS Page Hierarchy ​을(를) 확장하고 필요한 변경 작업을 수행합니다.

  4. 완료되면 Save Config ​을(를) 클릭합니다.

필드
설명
Enable Hierarchy Functionality
콘텐츠 페이지에 대한 페이지 계층 구조 사용을 활성화합니다. 옵션: Yes / No
Enable Hierarchy Metadata
이 옵션이 활성화되면 계층 구조의 페이지와 메타데이터를 연결할 수 있습니다. 옵션: Yes / No
Default Layout for Hierarchy Menu
기본 메뉴 스타일을 결정합니다. 옵션: Content / Left Column / Right Column

계층 노드 추가

다음 예제에서는 관련 콘텐츠 페이지를 간편하게 탐색하여 노드를 만드는 방법을 보여 줍니다. 노드에는 연결된 콘텐츠 페이지가 없지만 사이트의 다른 위치에서 참조할 수 있는 URL 키가 있습니다.

예를 들어, 개별 보도 자료에 대한 탐색 기능이 있는 보도 자료 ​라는 노드를 만들 수 있습니다. 그러면 정보 페이지의 링크를 노드에 포함할 수 있습니다. 또는 뉴스레터의 최신 문제 컬렉션에 대한 노드를 만들 수 있습니다.

노드에 연결하려면 위젯 도구를 사용하여 CMS 계층 노드 링크를 만들고 위젯을 콘텐츠 블록이나 페이지에 배치합니다.

미국 정보 페이지의 탐색 메뉴 예제

1단계: 노드 만들기

  1. 관리자 사이드바에서 Content > Elements>Hierarchy(으)로 이동합니다.

    CMS 페이지 그리드 {width="600" modal="regular"}

  2. 눈금 위에서 Add Node… ​을(를) 클릭합니다.

  3. Page Properties ​에서 노드에 대한​ Title ​과(와) 적절한​ URL Key ​을(를) 입력하십시오.

    URL 키는 노드에 대한 고유한 웹 주소를 제공합니다. 모든 소문자여야 하며 공백 대신 하이픈을 사용하여 단어를 구분해야 합니다.

    페이지 속성 {width="500" modal="regular"}

  4. Save ​을(를) 클릭합니다.

    노드는 페이지 왼쪽의 트리에 폴더로 나타납니다.

2단계: 노드에 페이지 추가

  1. 계층 트리에서 를 클릭하여 노드를 선택합니다.

  2. Add Selected Pages(s) to Tree ​을(를) 클릭합니다.

    위로 스크롤하여 선택한 각 페이지가 노드 폴더 아래의 트리에 표시되는지 확인할 수 있습니다.

3단계: 구조 정의

  1. 필요한 경우 페이지를 위치로 드래그하여 메뉴에 표시할 순서를 반영합니다.

    페이지를 위치로 드래그 {width="500" modal="regular"}

  2. 계층 맨 위에 있는 노드를 클릭합니다.

    이제 Page Properties ​섹션에 노드에 대한 정보가 표시됩니다.

  3. Render Metadata in HTML Head ​에서 다음을 수행합니다.

    메타데이터 설정 렌더링 {width="400" modal="regular"}

    • 노드를 계층 구조의 맨 위로 식별하려면 First ​을(를) Yes(으)로 설정합니다.

    • 페이지 매김 컨트롤을 표시하려면 Next/Previous ​을(를) Yes(으)로 설정하십시오.

    • 계층 구조의 페이지를 책으로 구성하려면 Enable Chapter/Section ​을(를) Yes(으)로 설정하십시오.

      노드를 장부의 일부로 포함시키지 않으려면 기본 No을(를) 그대로 둡니다.

    • 책의 특정 부분에 노드를 할당하려면 Chapter/Section ​을(를) 다음 중 하나로 설정합니다.

      • No - 노드를 챕터/섹션으로 정의하지 않습니다.
      • Chapter - 현재 노드를 챕터로 할당합니다.
      • Section - 현재 노드를 섹션으로 할당합니다.
      • Both - 현재 노드를 챕터와 섹션 모두로 할당합니다.

4단계: 페이지 매김 컨트롤 추가

  1. 중첩된 페이지에 대한 페이지 매김 옵션 ​에서 Enable Pagination ​을(를) Yes(으)로 설정하십시오.

  2. Frame ​의 경우 페이지 매김 컨트롤에 포함할 페이지 링크 수를 입력합니다.

    계층 구조에 페이지 매김 컨트롤에 포함할 수 있는 페이지가 더 있는 경우.

  3. Frame Skip ​의 경우 다음 페이지 매김 링크 집합에 대해 앞으로(또는 뒤로) 건너뛸 페이지 수를 입력합니다.

5단계: 메뉴 레이아웃 선택

노드를 메뉴에 표시하려면 다음을 수행합니다.

  1. 페이지 탐색 메뉴 옵션 ​에서 Show in navigation menu ​을(를) Yes(으)로 설정합니다.

    이 설정은 페이지 계층에 대해 탐색 메뉴가 생성되는지 여부를 결정합니다.

    페이지 탐색 메뉴 옵션 {width="300" modal="regular"}

  2. 내용과 관련하여 메뉴의 위치를 지정하려면 Menu Layout ​을(를) 설정합니다.

    • Content - 메뉴 레이아웃이 콘텐츠에 있습니다.
    • Use Default - configuration에 지정된 메뉴 스타일을 사용합니다.
    • Left Column - 콘텐츠 왼쪽에 메뉴가 나타납니다.
    • Right Column - 콘텐츠 오른쪽에 메뉴가 나타납니다.
  3. 메뉴에 포함된 세부 정보의 양을 지정하려면 Menu Detalization ​을(를) 다음 중 하나로 설정합니다.

    • Only Children - 메뉴에 하위 페이지만 포함합니다.
    • Neighbours and Children - 계층 구조에서 동일한 수준에 있는 하위 페이지 및 기타 페이지를 포함합니다.
  4. 메뉴의 깊이를 확인하려면 포함할 최대 수준 수에 대해 Maximal Depth ​을(를) 입력하십시오.

  5. 메뉴의 서식을 지정하려면 List Type:

    • Unordered - 메뉴 옵션에 번호가 매겨져 있지 않으며 글머리 기호 또는 글머리 기호 없이 서식을 지정할 수 있습니다. 무순서 목록 유형 옵션: 기본/원/디스크/사각형
    • Ordered - 메뉴 옵션에는 번호가 매겨져 있으며 대문자 또는 소문자로 숫자, 알파벳 또는 로마자 숫자 서식을 지정할 수 있습니다.
  6. List Style ​을(를) 다음 중 하나로 설정합니다.

    • Circle
    • Disc
    • Square
  7. 탐색 메뉴에도 노드를 표시하려면 기본 탐색 메뉴 옵션(으)로 스크롤하고 Show in Navigation menu ​을(를) Yes(으)로 설정하십시오.

    기본 탐색 메뉴 옵션 {width="250" modal="regular"}

  8. Save ​을(를) 클릭합니다.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de