'메타 태그'에 해당되는 글 1건

  1. 2015.10.16 Sitemesh에서 메타 태그로 Decorator에 값 전달하기~

Sitemesh에서 메타 태그로 Decorator에 값 전달하기~

|



Sitemesh를 사용하다보면 웹 페이지에서 Decorator 파일에 현재의 위치를 전달해야 할 경우가 있다. 

예를 들어 네비게이션 메뉴가 있다면, 현재 선택한 페이지를 다르게 표시할 때 주로 사용한다. 


다음과 같은 화면을 구성한다고 생각해 보자. 



Sitemesh를 사용해서 상단 네비게이션까지 공통영역으로 처리했는데, 

세번째 메뉴 선택시 상단의 네비게이션을 각 페이지에 맞춰서 선택한 형태로 변경할 때 바로 이 기능을 사용하면 된다. 


메타 태그 넣기 

먼저 각 페이지에 다음과 같이 메타 태그를 삽입한다. 


5번째 줄에 이름이 "selection"이고, 값이 "mini1"인 메타 태그를 추가한 것을 볼 수 있다. 

다른 페이지에도 각각의 고유한 값을 가진 메타 태그를 추가하면 된다. 


<meta name="selection" content="mini1" />



decorator.jsp 파일 수정하기 

이제 decorator.jsp 파일에서 위에서 작성한 메타 태그를 어떻게 인식하는 지 살펴보자. 


<decorator:usePage id="thePage" />
<% String selection = thePage.getProperty("meta.selection"); %>


decorator:usePage로 thePage를 선택한 다음, getProperty를 통해서 메타 태그의 이름이 "selection"인 것의 값을 읽어온다. 

그리고 메뉴를 표시하는 곳에서 selction 변수의 값을 체크하면 된다. 


<% if(selection != null && "mini1".equals(selection)){ %>
   <li class="active"><a href="../site/mini1.jsp">미니 메뉴 #1</a></li>
<% } else { %>
   <li><a href="../site/mini1.jsp">미니 메뉴 #1</a></li>
<% } %>


해당 메뉴가 선택되었다면 class="active"를 통해 선택 되었음을 나타내도록 구성했다. 

최종적으로 적용된 화면은 다음과 같다. 



해당 소스가 적용된 decorator.jsp의 전체 소스는 다음과 같다. 


Sitemesh 더 알아보기...

웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~

Sitemesh 활용시 하단의 자바스크립트 처리하기

Sitemesh에서 메타 태그로 Decorator에 값 전달하기~





Trackback 0 And Comment 0
prev | 1 | next