Drupal 8용 메뉴 항목 추가 모듈을 사용하는 방법

게시 됨: 2022-02-16

메가 메뉴는 더 이상 디자인 트렌드가 아니라 뉴스나 전자상거래와 관련된 대부분의 웹사이트에서 필수적인 부분입니다.

Drupal 8용 메뉴 항목 추가 모듈은 사이트 빌더가 메뉴 항목에 필드를 추가할 수 있도록 하여 Drupal의 기본 메뉴 시스템을 개선합니다. 그렇게 하면 몇 가지 간단한 단계로 메가 메뉴를 만들 수 있습니다.

이 모듈을 사용하는 방법을 배우려면 따라오세요. 시작하자!

1단계: 필수 모듈 설치

메뉴 항목 추가 모듈 외에도 Viewfield를 설치해야 합니다. Viewfield는 보기에 대한 참조를 보유하고 필드를 포함하는 엔터티가 표시될 때마다 이를 렌더링하는 필드를 제공합니다.

  • PC의 터미널 애플리케이션을 엽니 다.
  • 유형 :
    • 작곡가는 drupal/viewfield를 필요로 합니다
    • 작곡가는 drupal/menu_item_extras가 필요합니다

200414 메뉴 항목 엑스트라 001200414 메뉴 항목 엑스트라 001

다운로드 후 두 모듈을 모두 활성화하십시오.

  • 확장을 클릭 합니다.
  • 두 모듈을 모두 확인하십시오 .
  • 설치를 클릭 합니다.

200414 메뉴 항목 추가 003

2단계: 분류 시스템 만들기

아마도 "시스템"이라는 단어는 10개의 관련 용어와 함께 하나의 어휘만 만들 것이므로 그다지 적절하지 않을 것입니다. 그러나 이 예에서는 기본 사항을 설명하므로 나중에 더 복잡한 분류 체계로 작업할 수 있습니다.

  • 구조 > 분류 > 어휘 추가를 클릭 합니다.
  • "주제"라는 이름을 입력 하고 저장을 클릭 합니다.
  • 용어 추가를 클릭 하고 아래에 설명된 모든 용어를 하나씩 추가합니다.
    • 주제
      • D8
      • 심포니
      • WP
      • 마젠토
      • CSS
      • HTML
      • JS
      • PHP
      • 파이썬
      • 데브옵스

200414 메뉴 항목 추가 004

3단계: 콘텐츠 유형 만들기

이 자습서의 목적을 위해 다음 필드와 함께 2개의 콘텐츠 유형을 사용할 것입니다.

  • 서비스
    • 서비스 이미지 / 이미지 / 허용되는 값 수: 1
    • 소개 텍스트 / 텍스트(서식) / 허용되는 값 수: 1
    • 설명 / 기본 필드

200414 메뉴 항목 추가 005

  • 블로그
    • 범주 / 분류 용어 / 허용되는 값 수: 무제한
    • 설명 / 기본 필드

200414 메뉴 항목 추가 006

분류 필드를 생성할 때 참조 유형(주제)을 선택했는지 확인하십시오.

200414 메뉴 항목 추가 007

4단계: 콘텐츠 만들기

서비스 유형의 3개 노드를 생성할 것입니다.

  • 튜토리얼
  • 비디오
  • 서적

이러한 노드 각각은 메가 메뉴의 두 번째 수준 요소와 연결됩니다. 다른 한편, 우리는 연관된 다른 용어를 가진 Blog 유형의 노드를 약 10개 만들 것입니다. 다른 용어보다 빈도가 높은 2개의 용어(예: D8, WP)를 포함해야 합니다.

200414 메뉴 항목 추가 008

콘텐츠 화면은 이 과정이 끝나면 아래 이미지와 같이 보일 것입니다.

200414 메뉴 항목 추가 009

5단계: 메뉴 항목 만들기

주 메뉴의 첫 번째 수준에는 다음 메뉴 항목이 있습니다.

  • 집
  • 에 대한
  • 자원
  • 연락하다

각 메뉴 항목에는 추가(추가) 필드가 있습니다. 이 필드는 메뉴의 두 번째 수준, 즉 메가 메뉴의 각 카드 항목에서 설정됩니다. 이 필드를 사용하면 각 보기 블록을 표시할 수 있습니다.

  • 구조 > 메뉴를 클릭 합니다.
  • 메인 탐색을 편집하려면 편집 메뉴를 클릭 합니다.

200414 메뉴 항목 추가 010

  • 링크 추가를 세 번 클릭 하여 누락된 1단계 메뉴 항목을 추가하십시오.
  • 메뉴 항목 이름을 입력할 때마다 저장을 클릭 합니다.

링크 텍스트만 표시하려면 특수 태그를 사용하십시오.

200414 메뉴 항목 추가 011

200414 메뉴 항목 추가 012

메뉴의 링크를 만들고 재정렬한 후에는

  • 필드 관리 > 필드 추가를 클릭 하여 메뉴 항목에 필드를 추가하십시오.
  • Viewfield 유형의 필드를 선택하십시오 .
  • 적절한 이름과 레이블을 지정하십시오.
  • 저장하고 계속하기를 클릭 합니다.

200414 메뉴 항목 추가 013

  • 허용된 값 수를 무제한으로 설정 합니다.
  • 필드 설정 저장을 클릭 합니다.

200414 메뉴 항목 추가 014

이 특정 필드에 기본 보기를 연결할 수 있는 옵션이 있습니다. 이 필드는 비워 둡니다.

  • 아래로 스크롤 하여 설정 저장을 클릭합니다.
  • 디스플레이 관리를 클릭 합니다.

200414 메뉴 항목 추가 015

  • 메뉴 카드 레이블을 숨깁니다 .
  • 저장을 클릭 합니다.

6단계: 보기 생성

  • 구조 > 보기 > 보기 추가를 클릭 합니다.
  • 서비스 유형의 콘텐츠를 표시 합니다.
  • 형식이 지정되지 않은 필드 목록으로 블록을 만듭니다 .
  • 블록당 3개의 항목을 표시하도록 선택합니다 .
  • 저장 및 편집을 클릭 합니다.

200414 메뉴 항목 추가 016

  • 서비스 이미지 필드 추가
  • 이미지 스타일을 Thumbnail로 설정 하고 이미지를 Content에 연결합니다.
  • 적용 클릭

200414 메뉴 항목 추가 017

  • Intro 텍스트 필드도 추가 하십시오.
  • 필드를 재정렬 합니다.
  • 저장을 클릭 합니다.

200414 메뉴 항목 추가 018

  • 구조 > 보기 > 보기 추가를 클릭 합니다.
  • 블로그 유형의 콘텐츠를 표시 합니다.
  • 형식이 지정되지 않은 필드 목록으로 블록을 만듭니다 .
  • 블록당 1개의 항목을 표시하도록 선택합니다 .
  • 저장 및 편집을 클릭 합니다.

Drupal 8용 메뉴 항목 추가 모듈을 사용하는 방법

  • 범주 필드를 추가 합니다.
  • 필드 추가 및 구성을 클릭 합니다.
  • 다중 필드 설정을 클릭 합니다.
  • 정렬되지 않은 목록을 선택 합니다.
  • 표시할 값의 수를 3으로 설정 합니다.
  • 적용을 클릭 합니다.

200414 메뉴 항목 추가 020

  • 정렬 기준 제거
  • 적용을 클릭 합니다.
  • 저장을 클릭 하여 보기를 저장합니다.

7단계: 메뉴 항목에 보기 블록 추가

  • 구조 > 메뉴를 클릭 합니다.
  • 기본 탐색을 편집 합니다.
  • 메뉴 항목 리소스를 편집 합니다.
  • 5단계에서 생성한 2개의 블록을 추가 합니다.
  • 저장을 클릭 합니다.

200414 메뉴 항목 추가 021

8단계: CSS 스타일

이 코드는 이 튜토리얼의 범위를 벗어나므로 자세히 설명하지 않겠습니다. 그러나 이 기사에서 Drupal Views와 CSS Grid에 대해 더 자세히 알아볼 수 있습니다. 메가 메뉴로 더 많은 연습을 하고 싶다면 이 글도 참고하세요.

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }
팝업에서 열기
 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

200414 메뉴 항목 추가 022

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