로그인

검색

Extra Form
추천지수 6

오래전에는 XE에서도 메뉴명에 폰트어썸 같은 코드를 허용했습니다. 보안의 이유로 메뉴명 같은 곳에서 이제는 폰트어썸 같은 것이 적용될 수 없어 메뉴명 옆에 폰트어썸 같은 아이콘을 표시하려면 별도 방법을 구현해야 합니다.

 

*라이믹스에서는 i태그를 사용할 수 있도록 변경되어 지금 작성된 팁을 사용하지 않고 직접 메뉴명에 i태그를 사용해서 폰트어썸을 넣을 수 있네요.

 

이 팁은 XE에서 필요하신 분들이나 혹은 라이믹스에서 폰트어썸이나 XE아이콘 외 다른 필터링 되는 태그를 사용해서 아이콘을 출력하고 싶을때 이용하면 좋겠네요.

 

저는 레이아웃 설정에 1차메뉴용 폰트어썸이나 XEICON 코드를 넣을 수 있는 입력을 새로 만들어 해결을 했습니다.

 

 

제가 사용하는 레이아웃의 /layouts/simple_world/conf 폴더에 info.xml 파일에 아래 코드를 추가 해주었습니다.

 

<var name="menu_icon_11" type="textarea">
<title xml:lang="ko">1차메뉴 아이콘 01</title>
<description xml:lang="ko">메뉴 앞에 폰트어썸과 같은 아이콘을 출력</description>
</var>
<var name="menu_icon_12" type="textarea">
<title xml:lang="ko">1차메뉴 아이콘 02</title>
<description xml:lang="ko">메뉴 앞에 폰트어썸과 같은 아이콘을 출력</description>
</var>
<var name="menu_icon_13" type="textarea">
<title xml:lang="ko">1차메뉴 아이콘 03</title>
<description xml:lang="ko">메뉴 앞에 폰트어썸과 같은 아이콘을 출력</description>
</var>
<var name="menu_icon_14" type="textarea">
<title xml:lang="ko">1차메뉴 아이콘 04</title>
<description xml:lang="ko">메뉴 앞에 폰트어썸과 같은 아이콘을 출력</description>
</var>
<var name="menu_icon_15" type="textarea">
<title xml:lang="ko">1차메뉴 아이콘 05</title>
<description xml:lang="ko">메뉴 앞에 폰트어썸과 같은 아이콘을 출력</description>
</var>
<var name="menu_icon_16" type="textarea">
<title xml:lang="ko">1차메뉴 아이콘 06</title>
<description xml:lang="ko">메뉴 앞에 폰트어썸과 같은 아이콘을 출력</description>
</var>
<var name="menu_icon_17" type="textarea">
<title xml:lang="ko">1차메뉴 아이콘 07</title>
<description xml:lang="ko">메뉴 앞에 폰트어썸과 같은 아이콘을 출력</description>
</var>
</extra_vars>
</layout>

 

 

</extra_vars> 윗줄에 넣어주면 됩니다.

 

 

 

아이콘_01.png

레이아웃 설정에 이렇게 입력할 수 있는 곳이 생겨 사용하고 싶은 폰트어썸 코드를 넣을 수 있게 되었습니다.

 

 

이제 메뉴를 출력하는 코드에 저 것을 불러와 적용해 주면 됩니다.

 

 

제가 사용하는 레이아웃 /layouts/simple_world 폴더에 layout.html 의 메뉴 출력 부분을 수정해 주었습니다.

 

 

{@ $i=1}
<li loop="$GNB->list=>$key1,$val1" class="<!--@if($val1['selected'])-->active <!--@endif--><!--@if($val1['list'])-->layout_dropdown<!--@endif-->">
{@ $menu_icon = get_object_vars($layout_info)['menu_icon_1'.$i]}
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'"><span cond="!isCrawler() && $menu_icon" style="margin-right:5px;">{$menu_icon}</span><span>{$val1['link']}</span></a>
<ul cond="$val1['list']" class="layout_dropdown-content">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']"><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
</ul>
</li>
</ul>
{@ $i++}
</li>

 

 

메뉴를 루프를 돌려 출력하는 부분에 

{@ $i=1}

 

{@ $i++}

 

를 삽입해서 메뉴의 순번을 카운트해서 $i 에 저장하도록 코드를 추가했습니다.

 

 

{@ $menu_icon = get_object_vars($layout_info)['menu_icon_1'.$i]} 

위 코드를 추가해서 레이아웃 설정에 미리 입력해 놓은 순서와 메뉴 순서가 일치하도록 조치했습니다.

 

메뉴명을 출력하는 코드 좌측 앞쪽에 <span cond="!isCrawler() && $menu_icon" style="margin-right:5px;">{$menu_icon}</span> 를 추가해서 폰트어썸 등의 아이콘이 출력되도록 했습니다.

 

폰트어썸 같은 경우 검색엔진이 가져가봐야 도움이 안되서 조건을 크롤러를 제한하고 변수에 값이 있을때 출력하도록 해보았습니다.

 

 

 

 

아이콘.png

 

현재 메뉴 옆에 각기 다른 자기 순서에 맞는 폰트어썸 아이콘이 출력되었습니다.

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
2 추천
Atachment
첨부 '0'
  • 웅돌프 2020.09.12 17:58
    라이믹스 1.9.9.9 입니다.


    위 코드적용 했을때 메뉴에 아무런 반응이 없습니다. (아이콘 표시안됨)

    별도에 폰트어썸이나 XEICON 설치가 필요한가요?

  • profile
    꿀팁관리소장 2020.09.12 18:15
    To.웅돌프
    네. 폰트어썸은 레이아웃에서 원하는 곳에서 불러와야 합니다.
    그런데 라이믹스라면 이 팁 적용하지 않으셔도 됩니다. 그냥 폰트어썸 코드를 메뉴명 앞에 넣으면 적용됩니다.

    라이믹스는 XE와 다르게 메뉴명 넣는 곳에 폰트어썸 인식 되도록 패치가 되었네요.

    물론 폰트어썸 특정 경로에서 불러오는 코드는 레이아웃에 추가해줘야 합니다.
  • 웅돌프 2020.09.12 18:22
    To.꿀팁관리소장
    크~감사합니다 ㅎㅎ

    레이아웃 헤더에 스크립코드 받아서 한줄 넣으니깐 ㅎㅎ

    아이콘이 바로 나오네요 ㅎ


    좋은팁 감사합니다.


라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. 중복 글/댓글 방지 애드온

    Date2020.07.27 Category기능 Views222 Votes2
    Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. XE 레이아웃 메뉴에 폰트어썸이나 XEICON을 출력하기 3

    Date2020.07.20 Category기타 Views282 Votes2
    Read More
  15. Read More
  16. 라이믹스용 스케치북5 스킨이 있습니다. 10

    Date2020.07.18 Category기능 Views1284 Votes4
    Read More
  17. Read More
  18. Read More
  19. 인기글을 게시판의 공지에 올려주는 애드온

    Date2020.07.16 Category기능 Views239 Votes2
    Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Read More
Prev 1 2 3 4 Next
/ 4