[XE Tips] Layout 자체 에 변수 추가 및 활용 info.xml

[xe/layouts/설치한 레이아웃/conf/info.xml]

<var name="sam_blog" type="text"> /* 변수는 숫자로 시작하면 안됨*/
<title xml:lang="ko">일쌤 블로그 링크</title>
<title xml:lang="en">1sam_blog link</title>
<description xml:lang="ko">연결할 일쌤 블로그 링크 값을 입력하세요.</description>
</var>

위의 내용을 해당 파일의 적당한 위치에 삽입하면 레이아웃의 변수로 추가되고 레이아웃 설정에 해당 항목이 추가 표시 됩니다.

[admin설정/설치된 레이아웃/레이아웃 설정]

링크값 입력

[admin설정/설치된 레이아웃/레이아웃 편집]

            <div class="social_icon">
                <ul>
                    <li class="facebook">
                        <a href="<!--@if($layout_info->facebook)-->{$layout_info->facebook}<!--@end-->" target="_blank"><span>Facebook</span></a>
                    </li>
                    <li class="twitter">
                        <a href="<!--@if($layout_info->twitter)-->{$layout_info->twitter}<!--@end-->" target="_blank"><span>Twitter</span></a>
                    </li>
                    <li class="youtube">
                        <a href="<!--@if($layout_info->youtube)-->{$layout_info->youtube}<!--@end-->" target="_blank"><span>Youtube</span></a>
                    </li>
                   <li class="sam_blog">
                        <a href="<!--@if($layout_info->sam_blog)-->{$layout_info->sam_blog}<!--@end-->" target="_blank"><span>1Sam Online</span></a>
                    </li>
                </ul>
            </div>

위의 파란색 코드를 추가합니다.

[xe/layouts/설치한 레이아웃/css/default.css]

/* Social */
#top_visual { float:right; width:730px; height:50px; border-top:1px solid #fff; border-bottom:1px solid #ddd; background:none; }
.social_icon { float:right; margin:10px 10px 0 0; _margin:10px 0 0;}
.social_icon ul { margin:0; padding:0; list-style:none; height:32px;}
.social_icon li { float:right; margin:0 5px; padding:0;}
.social_icon .facebook a { display:block; width:32px; height:32px;  background:url(../images/facebook.png) no-repeat; }
.social_icon .facebook a:hover { background:url(../images/facebook_on.png) no-repeat;}
.social_icon li.facebook a span { display:none; }
.social_icon .twitter a { display:block; width:32px; height:32px;  background:url(../images/twitter.png) no-repeat; }
.social_icon .twitter a:hover { background:url(../images/twitter_on.png) no-repeat;}
.social_icon li.twitter a span { display:none; }
.social_icon .youtube a { display:block; width:32px; height:32px;  background:url(../images/youtube.png) no-repeat; }
.social_icon .youtube a:hover { background:url(../images/youtube_on.png) no-repeat;}
.social_icon li.youtube a span { display:none; }
.social_icon .sam_blog a { display:block; width:32px; height:32px;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQsuTN7QUp_J6HPAVx3-9xyywVVJONp1b0g0pbEdE71AXdpQQXc40ZyNbIYpiOOchJb7iLR8X6F0nFhjDg6DYyT50ZTGYruH_HYpV5iVpXwUkFcKoU2_WLShd_yBy_H5EXCOnAxAhlto/) no-repeat; }
.social_icon .sam_blog a:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQsuTN7QUp_J6HPAVx3-9xyywVVJONp1b0g0pbEdE71AXdpQQXc40ZyNbIYpiOOchJb7iLR8X6F0nFhjDg6DYyT50ZTGYruH_HYpV5iVpXwUkFcKoU2_WLShd_yBy_H5EXCOnAxAhlto/) no-repeat;}
.social_icon li.sam_blog a span { display:none; }

위의 파란색 코드를 추가합니다.

[결과]